Add latest changes from gitlab-org/gitlab@15-2-stable-eev15.2.0-rc42

371 files changed, 12134 insertions, 7661 deletions

diff --git a/spec/frontend/__helpers__/init_vue_mr_page_helper.js b/spec/frontend/__helpers__/init_vue_mr_page_helper.js
index 6b719a32480..83ed0a869dc 100644
--- a/spec/frontend/__helpers__/init_vue_mr_page_helper.js
+++ b/spec/frontend/__helpers__/init_vue_mr_page_helper.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import initMRPage from '~/mr_notes';
-import diffFileMockData from '../diffs/mock_data/diff_file';
+import { getDiffFileMock } from '../diffs/mock_data/diff_file';
 import { userDataMock, notesDataMock, noteableDataMock } from '../notes/mock_data';
 
 export default function initVueMRPage() {
@@ -39,7 +39,7 @@ export default function initVueMRPage() {
   const mock = new MockAdapter(axios);
   mock.onGet(diffsAppEndpoint).reply(200, {
     branch_name: 'foo',
-    diff_files: [diffFileMockData],
+    diff_files: [getDiffFileMock()],
   });
 
   initMRPage();
diff --git a/spec/frontend/__helpers__/matchers/index.js b/spec/frontend/__helpers__/matchers/index.js
index 9b83ced10e1..5da6676cdc1 100644
--- a/spec/frontend/__helpers__/matchers/index.js
+++ b/spec/frontend/__helpers__/matchers/index.js
@@ -2,3 +2,4 @@ export * from './to_have_sprite_icon';
 export * from './to_have_tracking_attributes';
 export * from './to_match_interpolated_text';
 export * from './to_validate_json_schema';
+export * from './to_match_expected_for_markdown';
diff --git a/spec/frontend/__helpers__/matchers/to_match_expected_for_markdown.js b/spec/frontend/__helpers__/matchers/to_match_expected_for_markdown.js
new file mode 100644
index 00000000000..829f6ba9770
--- /dev/null
+++ b/spec/frontend/__helpers__/matchers/to_match_expected_for_markdown.js
@@ -0,0 +1,60 @@
+export function toMatchExpectedForMarkdown(
+  received,
+  deserializationTarget,
+  name,
+  markdown,
+  errMsg,
+  expected,
+) {
+  const options = {
+    comment: `Markdown deserialization to ${deserializationTarget}`,
+    isNot: this.isNot,
+    promise: this.promise,
+  };
+
+  const EXPECTED_LABEL = 'Expected';
+  const RECEIVED_LABEL = 'Received';
+  const isExpand = (expand) => expand !== false;
+  const forMarkdownName = `for Markdown example '${name}':\n${markdown}`;
+  const matcherName = `toMatchExpected${
+    deserializationTarget === 'HTML' ? 'Html' : 'Json'
+  }ForMarkdown`;
+
+  let pass;
+
+  // If both expected and received are deserialization errors, force pass = true,
+  // because the actual error messages can vary across environments and cause
+  // false failures (e.g. due to jest '--coverage' being passed in CI).
+  const errMsgRegExp = new RegExp(errMsg);
+  const errMsgRegExp2 = new RegExp(errMsg);
+
+  if (errMsgRegExp.test(expected) && errMsgRegExp2.test(received)) {
+    pass = true;
+  } else {
+    pass = received === expected;
+  }
+
+  const message = pass
+    ? () =>
+        // eslint-disable-next-line prefer-template
+        this.utils.matcherHint(matcherName, undefined, undefined, options) +
+        '\n\n' +
+        `Expected HTML to NOT match:\n${expected}\n\n${forMarkdownName}`
+    : () => {
+        return (
+          // eslint-disable-next-line prefer-template
+          this.utils.matcherHint(matcherName, undefined, undefined, options) +
+          '\n\n' +
+          this.utils.printDiffOrStringify(
+            expected,
+            received,
+            EXPECTED_LABEL,
+            RECEIVED_LABEL,
+            isExpand(this.expand),
+          ) +
+          `\n\n${forMarkdownName}`
+        );
+      };
+
+  return { actual: received, expected, message, name: matcherName, pass };
+}
diff --git a/spec/frontend/__helpers__/mock_user_callout_dismisser.js b/spec/frontend/__helpers__/mock_user_callout_dismisser.js
index 652f36028dc..f115e2289af 100644
--- a/spec/frontend/__helpers__/mock_user_callout_dismisser.js
+++ b/spec/frontend/__helpers__/mock_user_callout_dismisser.js
@@ -1,3 +1,5 @@
+import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
+
 /**
  * Mock factory for the UserCalloutDismisser component.
  * @param {slotProps} The slot props to pass to the default slot content.
@@ -6,11 +8,24 @@
 export const makeMockUserCalloutDismisser = ({
   dismiss = () => {},
   shouldShowCallout = true,
+  isLoadingQuery = false,
 } = {}) => ({
+  props: UserCalloutDismisser.props,
+  data() {
+    return {
+      isLoadingQuery,
+      shouldShowCallout,
+      dismiss,
+    };
+  },
+  mounted() {
+    this.$emit('queryResult', { shouldShowCallout });
+  },
   render() {
     return this.$scopedSlots.default({
       dismiss,
       shouldShowCallout,
+      isLoadingQuery,
     });
   },
 });
diff --git a/spec/frontend/__helpers__/performance.js b/spec/frontend/__helpers__/performance.js
new file mode 100644
index 00000000000..3bdf163c22b
--- /dev/null
+++ b/spec/frontend/__helpers__/performance.js
@@ -0,0 +1,8 @@
+// FIXME(vslobodin): Remove this stub once we have migrated to Jest 28.
+// NOTE: Do not try to optimize these stubs as Jest 27 overwrites
+// the "global.performance" object in every suite where fake timers are enabled.
+export const stubPerformanceWebAPI = () => {
+  global.performance.getEntriesByName = () => [];
+  global.performance.mark = () => {};
+  global.performance.measure = () => {};
+};
diff --git a/spec/frontend/__helpers__/set_window_location_helper.js b/spec/frontend/__helpers__/set_window_location_helper.js
index 573a089f111..d81c502b337 100644
--- a/spec/frontend/__helpers__/set_window_location_helper.js
+++ b/spec/frontend/__helpers__/set_window_location_helper.js
@@ -30,7 +30,7 @@
  *     // window.location.href is now 'http://test.host/a/b/foo.html?bar=1#qux
  *
  * Both approaches also automatically update the rest of the properties on
- * `window.locaton`. For instance:
+ * `window.location`. For instance:
  *
  *     setWindowLocation('http://test.host/a/b/foo.html?bar=1#qux');
  *     // window.location.origin is now 'http://test.host'
diff --git a/spec/frontend/__helpers__/shared_test_setup.js b/spec/frontend/__helpers__/shared_test_setup.js
index 011e1142c76..4d6486544ca 100644
--- a/spec/frontend/__helpers__/shared_test_setup.js
+++ b/spec/frontend/__helpers__/shared_test_setup.js
@@ -15,6 +15,7 @@ import '~/commons/bootstrap';
 
 // 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'));
 
 process.on('unhandledRejection', global.promiseRejectionHandler);
 
diff --git a/spec/frontend/__helpers__/web_worker_fake.js b/spec/frontend/__helpers__/web_worker_fake.js
index 041a9bd8540..fb37e41a853 100644
--- a/spec/frontend/__helpers__/web_worker_fake.js
+++ b/spec/frontend/__helpers__/web_worker_fake.js
@@ -14,8 +14,7 @@ const createRelativeRequire = (filename) => {
   const rel = path.relative(__dirname, path.dirname(filename));
   const base = path.resolve(__dirname, rel);
 
-  // reason: Dynamic require should be fine here since the code is dynamically evaluated anyways.
-  // eslint-disable-next-line import/no-dynamic-require, global-require
+  // eslint-disable-next-line global-require
   return (pathArg) => require(transformRequirePath(base, pathArg));
 };
 
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 b45abe418e4..6013fa3ec39 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,4 +1,4 @@
-import { GlPagination, GlTable } from '@gitlab/ui';
+import { GlButton, GlPagination, GlTable } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import AccessTokenTableApp from '~/access_tokens/components/access_token_table_app.vue';
@@ -164,8 +164,8 @@ describe('~/access_tokens/components/access_token_table_app', () => {
     expect(cells.at(3).text()).toBe(__('Never'));
     expect(cells.at(4).text()).toBe(__('Never'));
     expect(cells.at(5).text()).toBe('Maintainer');
-    let anchor = cells.at(6).find('a');
-    expect(anchor.attributes()).toMatchObject({
+    let button = cells.at(6).findComponent(GlButton);
+    expect(button.attributes()).toMatchObject({
       'aria-label': __('Revoke'),
       'data-qa-selector': __('revoke_button'),
       href: '/-/profile/personal_access_tokens/1/revoke',
@@ -176,8 +176,7 @@ describe('~/access_tokens/components/access_token_table_app', () => {
         { accessTokenType },
       ),
     });
-
-    expect(anchor.classes()).toContain('btn-danger-secondary');
+    expect(button.props('category')).toBe('tertiary');
 
     // Second row
     expect(cells.at(7).text()).toBe('b');
@@ -186,9 +185,9 @@ describe('~/access_tokens/components/access_token_table_app', () => {
     expect(cells.at(10).text()).not.toBe(__('Never'));
     expect(cells.at(11).text()).toBe(__('Expired'));
     expect(cells.at(12).text()).toBe('Maintainer');
-    anchor = cells.at(13).find('a');
-    expect(anchor.attributes('href')).toBe('/-/profile/personal_access_tokens/2/revoke');
-    expect(anchor.classes()).toEqual(['btn', 'btn-danger', 'btn-md', 'gl-button', 'btn-icon']);
+    button = cells.at(13).findComponent(GlButton);
+    expect(button.attributes('href')).toBe('/-/profile/personal_access_tokens/2/revoke');
+    expect(button.props('category')).toBe('tertiary');
   });
 
   it('sorts rows alphabetically', async () => {
diff --git a/spec/frontend/access_tokens/components/projects_field_spec.js b/spec/frontend/access_tokens/components/projects_field_spec.js
index a9e0799d114..1c4fe7bb168 100644
--- a/spec/frontend/access_tokens/components/projects_field_spec.js
+++ b/spec/frontend/access_tokens/components/projects_field_spec.js
@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { within, fireEvent } from '@testing-library/dom';
 import { mount } from '@vue/test-utils';
 import ProjectsField from '~/access_tokens/components/projects_field.vue';
@@ -118,11 +119,10 @@ describe('ProjectsField', () => {
       });
 
       describe('when radio is changed back to "All projects"', () => {
-        beforeEach(() => {
-          fireEvent.click(findAllProjectsRadio());
-        });
+        it('removes the hidden input value', async () => {
+          fireEvent.change(findAllProjectsRadio());
+          await nextTick();
 
-        it('removes the hidden input value', () => {
           expect(findHiddenInput().attributes('value')).toBe('');
         });
       });
diff --git a/spec/frontend/add_context_commits_modal/components/__snapshots__/add_context_commits_modal_spec.js.snap b/spec/frontend/add_context_commits_modal/components/__snapshots__/add_context_commits_modal_spec.js.snap
index 3fdbacb6efa..2c2151bfb41 100644
--- a/spec/frontend/add_context_commits_modal/components/__snapshots__/add_context_commits_modal_spec.js.snap
+++ b/spec/frontend/add_context_commits_modal/components/__snapshots__/add_context_commits_modal_spec.js.snap
@@ -25,7 +25,7 @@ exports[`AddContextCommitsModal renders modal with 2 tabs 1`] = `
     >
        
       <div
-        class="mt-2"
+        class="gl-mt-3"
       >
         <gl-search-box-by-type-stub
           clearbuttontitle="Clear"
diff --git a/spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js b/spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js
index 14f94e671a4..d6c5c5f963a 100644
--- a/spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js
+++ b/spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js
@@ -52,7 +52,7 @@ describe('DevopsScore', () => {
       it('contains a link to the feature documentation', () => {
         expect(findDocsLink().exists()).toBe(true);
         expect(findDocsLink().attributes('href')).toBe(
-          '/help/user/admin_area/analytics/dev_ops_report',
+          '/help/user/admin_area/analytics/dev_ops_reports',
         );
       });
     });
diff --git a/spec/frontend/admin/deploy_keys/components/table_spec.js b/spec/frontend/admin/deploy_keys/components/table_spec.js
index 49bda7100fb..a18506c0916 100644
--- a/spec/frontend/admin/deploy_keys/components/table_spec.js
+++ b/spec/frontend/admin/deploy_keys/components/table_spec.js
@@ -27,6 +27,7 @@ describe('DeployKeysTable', () => {
 
   const deployKey = responseBody[0];
   const deployKey2 = responseBody[1];
+  const deployKeyWithoutMd5Fingerprint = responseBody[2];
 
   const createComponent = (provide = {}) => {
     wrapper = mountExtended(DeployKeysTable, {
@@ -57,9 +58,10 @@ describe('DeployKeysTable', () => {
     const timeAgoTooltip = findTimeAgoTooltip(expectedRowIndex);
 
     expect(wrapper.findByText(expectedDeployKey.title).exists()).toBe(true);
-    expect(wrapper.findByText(expectedDeployKey.fingerprint, { selector: 'code' }).exists()).toBe(
-      true,
-    );
+
+    expect(
+      wrapper.findByText(expectedDeployKey.fingerprint_sha256, { selector: 'span' }).exists(),
+    ).toBe(true);
     expect(timeAgoTooltip.exists()).toBe(true);
     expect(timeAgoTooltip.props('time')).toBe(expectedDeployKey.created_at);
     expect(editButton.exists()).toBe(true);
@@ -67,6 +69,13 @@ describe('DeployKeysTable', () => {
     expect(findRemoveButton(expectedRowIndex).exists()).toBe(true);
   };
 
+  const expectDeployKeyWithFingerprintIsRendered = (expectedDeployKey, expectedRowIndex) => {
+    expect(wrapper.findByText(expectedDeployKey.fingerprint, { selector: 'span' }).exists()).toBe(
+      true,
+    );
+    expectDeployKeyIsRendered(expectedDeployKey, expectedRowIndex);
+  };
+
   const itRendersTheEmptyState = () => {
     it('renders empty state', () => {
       const emptyState = wrapper.findComponent(GlEmptyState);
@@ -127,8 +136,12 @@ describe('DeployKeysTable', () => {
       });
 
       it('renders deploy keys in table', () => {
-        expectDeployKeyIsRendered(deployKey, 0);
-        expectDeployKeyIsRendered(deployKey2, 1);
+        expectDeployKeyWithFingerprintIsRendered(deployKey, 0);
+        expectDeployKeyWithFingerprintIsRendered(deployKey2, 1);
+      });
+
+      it('renders deploy keys that do not have an MD5 fingerprint', () => {
+        expectDeployKeyIsRendered(deployKeyWithoutMd5Fingerprint, 2);
       });
 
       describe('when delete button is clicked', () => {
@@ -157,7 +170,7 @@ describe('DeployKeysTable', () => {
       beforeEach(() => {
         Api.deployKeys.mockResolvedValueOnce({
           data: [deployKey],
-          headers: { 'x-total': '2' },
+          headers: { 'x-total': '3' },
         });
 
         createComponent();
@@ -179,7 +192,7 @@ describe('DeployKeysTable', () => {
       describe('when pagination is changed', () => {
         it('calls API with `page` parameter', async () => {
           const pagination = findPagination();
-          expectDeployKeyIsRendered(deployKey, 0);
+          expectDeployKeyWithFingerprintIsRendered(deployKey, 0);
 
           Api.deployKeys.mockResolvedValue({
             data: [deployKey2],
@@ -199,7 +212,7 @@ describe('DeployKeysTable', () => {
             page: 2,
             public: true,
           });
-          expectDeployKeyIsRendered(deployKey2, 0);
+          expectDeployKeyWithFingerprintIsRendered(deployKey2, 0);
         });
       });
     });
diff --git a/spec/frontend/admin/signup_restrictions/components/signup_form_spec.js b/spec/frontend/admin/signup_restrictions/components/signup_form_spec.js
index 5b4f954b672..31a0c2b07e4 100644
--- a/spec/frontend/admin/signup_restrictions/components/signup_form_spec.js
+++ b/spec/frontend/admin/signup_restrictions/components/signup_form_spec.js
@@ -1,6 +1,6 @@
 import { GlButton, GlModal } from '@gitlab/ui';
-import { within, fireEvent } from '@testing-library/dom';
-import { shallowMount, mount } from '@vue/test-utils';
+import { within } from '@testing-library/dom';
+import { shallowMount, mount, createWrapper } from '@vue/test-utils';
 import { stubComponent } from 'helpers/stub_component';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import SignupForm from '~/pages/admin/application_settings/general/components/signup_form.vue';
@@ -121,7 +121,7 @@ describe('Signup Form', () => {
 
       describe('when user clicks on file radio', () => {
         beforeEach(() => {
-          fireEvent.click(findDenyListFileRadio());
+          createWrapper(findDenyListFileRadio()).setChecked(true);
         });
 
         it('has raw list not selected', () => {
@@ -165,7 +165,7 @@ describe('Signup Form', () => {
 
       describe('when user clicks on raw list radio', () => {
         beforeEach(() => {
-          fireEvent.click(findDenyListRawRadio());
+          createWrapper(findDenyListRawRadio()).setChecked(true);
         });
 
         it('has raw list selected', () => {
diff --git a/spec/frontend/admin/signup_restrictions/mock_data.js b/spec/frontend/admin/signup_restrictions/mock_data.js
index 135fc8caae0..9e001e122a4 100644
--- a/spec/frontend/admin/signup_restrictions/mock_data.js
+++ b/spec/frontend/admin/signup_restrictions/mock_data.js
@@ -18,6 +18,10 @@ export const rawMockData = {
   emailRestrictions: 'user1@domain.com, user2@domain.com',
   afterSignUpText: 'Congratulations on your successful sign-up!',
   pendingUserCount: '0',
+  passwordNumberRequired: 'true',
+  passwordLowercaseRequired: 'true',
+  passwordUppercaseRequired: 'true',
+  passwordSymbolRequired: 'true',
 };
 
 export const mockData = {
@@ -40,4 +44,8 @@ export const mockData = {
   emailRestrictions: 'user1@domain.com, user2@domain.com',
   afterSignUpText: 'Congratulations on your successful sign-up!',
   pendingUserCount: '0',
+  passwordNumberRequired: true,
+  passwordLowercaseRequired: true,
+  passwordUppercaseRequired: true,
+  passwordSymbolRequired: true,
 };
diff --git a/spec/frontend/admin/signup_restrictions/utils_spec.js b/spec/frontend/admin/signup_restrictions/utils_spec.js
index fd5c4c3317b..f07e14430f9 100644
--- a/spec/frontend/admin/signup_restrictions/utils_spec.js
+++ b/spec/frontend/admin/signup_restrictions/utils_spec.js
@@ -14,6 +14,10 @@ describe('utils', () => {
             'domainDenylistEnabled',
             'denylistTypeRawSelected',
             'emailRestrictionsEnabled',
+            'passwordNumberRequired',
+            'passwordLowercaseRequired',
+            'passwordUppercaseRequired',
+            'passwordSymbolRequired',
           ],
         }),
       ).toEqual(mockData);
diff --git a/spec/frontend/admin/statistics_panel/components/app_spec.js b/spec/frontend/admin/statistics_panel/components/app_spec.js
index 3cfb6feeb86..bac542e72fb 100644
--- a/spec/frontend/admin/statistics_panel/components/app_spec.js
+++ b/spec/frontend/admin/statistics_panel/components/app_spec.js
@@ -64,7 +64,7 @@ describe('Admin statistics app', () => {
         createComponent();
 
         expect(findStats(index).text()).toContain(label);
-        expect(findStats(index).text()).toContain(count);
+        expect(findStats(index).text()).toContain(count.toString());
       });
     });
   });
diff --git a/spec/frontend/admin/users/components/user_actions_spec.js b/spec/frontend/admin/users/components/user_actions_spec.js
index b90a30b5b89..e04c43ae3f2 100644
--- a/spec/frontend/admin/users/components/user_actions_spec.js
+++ b/spec/frontend/admin/users/components/user_actions_spec.js
@@ -77,12 +77,6 @@ describe('AdminUserActions component', () => {
         expect(findActionsDropdown().exists()).toBe(true);
       });
 
-      it('renders the tooltip', () => {
-        const tooltip = getBinding(findActionsDropdown().element, 'gl-tooltip');
-
-        expect(tooltip.value).toBe(I18N_USER_ACTIONS.userAdministration);
-      });
-
       describe('when there are actions that require confirmation', () => {
         beforeEach(() => {
           initComponent({ actions: CONFIRMATION_ACTIONS });
diff --git a/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap b/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap
index ec5b6a5597b..4693d5a47e4 100644
--- a/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap
+++ b/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap
@@ -17,6 +17,7 @@ exports[`Alert integration settings form default state should match the default
       <gl-form-checkbox-stub
         checked="true"
         data-qa-selector="create_issue_checkbox"
+        id="2"
       >
         <span>
           Create an incident. Incidents are created for each alert triggered.
@@ -87,7 +88,9 @@ exports[`Alert integration settings form default state should match the default
       labeldescription=""
       optionaltext="(optional)"
     >
-      <gl-form-checkbox-stub>
+      <gl-form-checkbox-stub
+        id="3"
+      >
         <span>
           Send a single email notification to Owners and Maintainers for new alerts.
         </span>
@@ -101,6 +104,7 @@ exports[`Alert integration settings form default state should match the default
     >
       <gl-form-checkbox-stub
         checked="true"
+        id="4"
       >
         <span>
           Automatically close associated incident when a recovery alert notification resolves an alert
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 018303fcae7..7d9d2875cf8 100644
--- a/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
@@ -265,7 +265,6 @@ describe('AlertsSettingsForm', () => {
     });
 
     it('should not allow a user to test invalid JSON', async () => {
-      jest.useFakeTimers();
       await findJsonTextArea().setValue('Invalid JSON');
 
       jest.runAllTimers();
@@ -278,7 +277,6 @@ describe('AlertsSettingsForm', () => {
     });
 
     it('should allow for the form to be automatically saved if the test payload is successfully submitted', async () => {
-      jest.useFakeTimers();
       await findJsonTextArea().setValue('{ "value": "value" }');
 
       jest.runAllTimers();
diff --git a/spec/frontend/artifacts_settings/components/__snapshots__/keep_latest_artifact_checkbox_spec.js.snap b/spec/frontend/artifacts_settings/components/__snapshots__/keep_latest_artifact_checkbox_spec.js.snap
index 2691e11e616..ba8215f4e00 100644
--- a/spec/frontend/artifacts_settings/components/__snapshots__/keep_latest_artifact_checkbox_spec.js.snap
+++ b/spec/frontend/artifacts_settings/components/__snapshots__/keep_latest_artifact_checkbox_spec.js.snap
@@ -7,6 +7,7 @@ exports[`Keep latest artifact checkbox when application keep latest artifact set
   <b-form-checkbox-stub
     checked="true"
     class="gl-form-checkbox"
+    id="4"
     value="true"
   >
     <strong
diff --git a/spec/frontend/batch_comments/components/draft_note_spec.js b/spec/frontend/batch_comments/components/draft_note_spec.js
index 6a997ebaaa8..ccca4a2c3e9 100644
--- a/spec/frontend/batch_comments/components/draft_note_spec.js
+++ b/spec/frontend/batch_comments/components/draft_note_spec.js
@@ -33,13 +33,16 @@ describe('Batch comments draft note component', () => {
   const findSubmitReviewButton = () => wrapper.findComponent(PublishButton);
   const findAddCommentButton = () => wrapper.findComponent(GlButton);
 
-  const createComponent = (propsData = { draft }) => {
+  const createComponent = (propsData = { draft }, glFeatures = {}) => {
     wrapper = shallowMount(DraftNote, {
       store,
       propsData,
       stubs: {
         NoteableNote: NoteableNoteStub,
       },
+      provide: {
+        glFeatures,
+      },
     });
 
     jest.spyOn(wrapper.vm.$store, 'dispatch').mockImplementation();
@@ -96,6 +99,12 @@ describe('Batch comments draft note component', () => {
       expect(publishNowButton.props().disabled).toBe(true);
       expect(publishNowButton.props().loading).toBe(false);
     });
+
+    it('hides button when mr_review_submit_comment is enabled', () => {
+      createComponent({ draft }, { mrReviewSubmitComment: true });
+
+      expect(findAddCommentButton().exists()).toBe(false);
+    });
   });
 
   describe('submit review', () => {
diff --git a/spec/frontend/batch_comments/components/preview_dropdown_spec.js b/spec/frontend/batch_comments/components/preview_dropdown_spec.js
index bf3bbf4de26..079b64225e4 100644
--- a/spec/frontend/batch_comments/components/preview_dropdown_spec.js
+++ b/spec/frontend/batch_comments/components/preview_dropdown_spec.js
@@ -1,8 +1,15 @@
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+import { visitUrl } from '~/lib/utils/url_utility';
 import PreviewDropdown from '~/batch_comments/components/preview_dropdown.vue';
 
+jest.mock('~/lib/utils/url_utility', () => ({
+  visitUrl: jest.fn(),
+  setUrlParams: jest.requireActual('~/lib/utils/url_utility').setUrlParams,
+}));
+
 Vue.use(Vuex);
 
 let wrapper;
@@ -27,6 +34,11 @@ function factory({ viewDiffsFileByFile = false, draftsCount = 1, sortedDrafts =
         actions: { scrollToDraft },
         getters: { draftsCount: () => draftsCount, sortedDrafts: () => sortedDrafts },
       },
+      notes: {
+        getters: {
+          getNoteableData: () => ({ diff_head_sha: '123' }),
+        },
+      },
     },
   });
 
@@ -67,5 +79,19 @@ describe('Batch comments preview dropdown', () => {
 
       expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1 });
     });
+
+    it('changes window location to navigate to commit', async () => {
+      factory({
+        viewDiffsFileByFile: false,
+        sortedDrafts: [{ id: 1, position: { head_sha: '1234' } }],
+      });
+
+      wrapper.findByTestId('preview-item').vm.$emit('click');
+
+      await nextTick();
+
+      expect(scrollToDraft).not.toHaveBeenCalled();
+      expect(visitUrl).toHaveBeenCalledWith(`${TEST_HOST}/?commit_id=1234#note_1`);
+    });
   });
 });
diff --git a/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js b/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js
index 172b510645d..9f50b12bac2 100644
--- a/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js
+++ b/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js
@@ -298,14 +298,18 @@ describe('Batch comments store actions', () => {
       const draft = {
         discussion_id: '1',
         id: '2',
+        file_path: 'lib/example.js',
       };
 
       actions.scrollToDraft({ dispatch, rootGetters }, draft);
 
-      expect(dispatch.mock.calls[0]).toEqual([
-        'expandDiscussion',
-        { discussionId: '1' },
-        { root: true },
+      expect(dispatch.mock.calls).toEqual([
+        [
+          'diffs/setFileCollapsedAutomatically',
+          { filePath: draft.file_path, collapsed: false },
+          { root: true },
+        ],
+        ['expandDiscussion', { discussionId: '1' }, { root: true }],
       ]);
 
       expect(window.mrTabs.tabShown).toHaveBeenCalledWith('diffs');
diff --git a/spec/frontend/behaviors/shortcuts/keybindings_spec.js b/spec/frontend/behaviors/shortcuts/keybindings_spec.js
index 3ad44a16ae1..1f7e1b24e78 100644
--- a/spec/frontend/behaviors/shortcuts/keybindings_spec.js
+++ b/spec/frontend/behaviors/shortcuts/keybindings_spec.js
@@ -11,9 +11,7 @@ import {
 } from '~/behaviors/shortcuts/keybindings';
 
 describe('~/behaviors/shortcuts/keybindings', () => {
-  beforeAll(() => {
-    useLocalStorageSpy();
-  });
+  useLocalStorageSpy();
 
   const setupCustomizations = (customizationsAsString) => {
     localStorage.clear();
diff --git a/spec/frontend/blob/viewer/index_spec.js b/spec/frontend/blob/viewer/index_spec.js
deleted file mode 100644
index b2559af182b..00000000000
--- a/spec/frontend/blob/viewer/index_spec.js
+++ /dev/null
@@ -1,189 +0,0 @@
-/* eslint-disable no-new */
-
-import MockAdapter from 'axios-mock-adapter';
-import $ from 'jquery';
-import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import { setTestTimeout } from 'helpers/timeout';
-import { BlobViewer } from '~/blob/viewer/index';
-import axios from '~/lib/utils/axios_utils';
-
-const execImmediately = (callback) => {
-  callback();
-};
-
-describe('Blob viewer', () => {
-  let blob;
-  let mock;
-
-  const jQueryMock = {
-    tooltip: jest.fn(),
-  };
-
-  setTestTimeout(2000);
-
-  beforeEach(() => {
-    window.gon.features = { refactorBlobViewer: false }; // This file is based on the old (non-refactored) blob viewer
-    jest.spyOn(window, 'requestIdleCallback').mockImplementation(execImmediately);
-    $.fn.extend(jQueryMock);
-    mock = new MockAdapter(axios);
-
-    loadHTMLFixture('blob/show_readme.html');
-    $('#modal-upload-blob').remove();
-
-    mock.onGet(/blob\/.+\/README\.md/).reply(200, {
-      html: '<div>testing</div>',
-    });
-
-    blob = new BlobViewer();
-  });
-
-  afterEach(() => {
-    mock.restore();
-    window.location.hash = '';
-
-    resetHTMLFixture();
-  });
-
-  it('loads source file after switching views', async () => {
-    document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
-
-    await axios.waitForAll();
-
-    expect(
-      document
-        .querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
-        .classList.contains('hidden'),
-    ).toBeFalsy();
-  });
-
-  it('loads source file when line number is in hash', async () => {
-    window.location.hash = '#L1';
-
-    new BlobViewer();
-
-    await axios.waitForAll();
-
-    expect(
-      document
-        .querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
-        .classList.contains('hidden'),
-    ).toBeFalsy();
-  });
-
-  it('doesnt reload file if already loaded', () => {
-    const asyncClick = async () => {
-      document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
-
-      await axios.waitForAll();
-    };
-
-    return asyncClick()
-      .then(() => asyncClick())
-      .then(() => {
-        expect(document.querySelector('.blob-viewer[data-type="simple"]').dataset.loaded).toBe(
-          'true',
-        );
-      });
-  });
-
-  describe('copy blob button', () => {
-    let copyButton;
-    let copyButtonTooltip;
-
-    beforeEach(() => {
-      copyButton = document.querySelector('.js-copy-blob-source-btn');
-      copyButtonTooltip = document.querySelector('.js-copy-blob-source-btn-tooltip');
-    });
-
-    it('disabled on load', () => {
-      expect(copyButton.classList.contains('disabled')).toBeTruthy();
-    });
-
-    it('has tooltip when disabled', () => {
-      expect(copyButtonTooltip.getAttribute('title')).toBe(
-        'Switch to the source to copy the file contents',
-      );
-    });
-
-    it('is blurred when clicked and disabled', () => {
-      jest.spyOn(copyButton, 'blur').mockImplementation(() => {});
-
-      copyButton.click();
-
-      expect(copyButton.blur).toHaveBeenCalled();
-    });
-
-    it('is not blurred when clicked and not disabled', () => {
-      jest.spyOn(copyButton, 'blur').mockImplementation(() => {});
-
-      copyButton.classList.remove('disabled');
-      copyButton.click();
-
-      expect(copyButton.blur).not.toHaveBeenCalled();
-    });
-
-    it('enables after switching to simple view', async () => {
-      document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
-
-      await axios.waitForAll();
-
-      expect(copyButton.classList.contains('disabled')).toBeFalsy();
-    });
-
-    it('updates tooltip after switching to simple view', async () => {
-      document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
-
-      await axios.waitForAll();
-
-      expect(copyButtonTooltip.getAttribute('title')).toBe('Copy file contents');
-    });
-  });
-
-  describe('switchToViewer', () => {
-    it('removes active class from old viewer button', () => {
-      blob.switchToViewer('simple');
-
-      expect(
-        document.querySelector('.js-blob-viewer-switch-btn.active[data-viewer="rich"]'),
-      ).toBeNull();
-    });
-
-    it('adds active class to new viewer button', () => {
-      const simpleBtn = document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]');
-
-      jest.spyOn(simpleBtn, 'blur').mockImplementation(() => {});
-
-      blob.switchToViewer('simple');
-
-      expect(simpleBtn.classList.contains('selected')).toBeTruthy();
-
-      expect(simpleBtn.blur).toHaveBeenCalled();
-    });
-
-    it('makes request for initial view', () => {
-      expect(mock.history).toMatchObject({
-        get: [{ url: expect.stringMatching(/README\.md\?.*viewer=rich/) }],
-      });
-    });
-
-    describe.each`
-      views
-      ${['simple']}
-      ${['simple', 'rich']}
-    `('when view switches to $views', ({ views }) => {
-      beforeEach(async () => {
-        views.forEach((view) => blob.switchToViewer(view));
-        await axios.waitForAll();
-      });
-
-      it('sends 1 AJAX request for new view', async () => {
-        expect(mock.history).toMatchObject({
-          get: [
-            { url: expect.stringMatching(/README\.md\?.*viewer=rich/) },
-            { url: expect.stringMatching(/README\.md\?.*viewer=simple/) },
-          ],
-        });
-      });
-    });
-  });
-});
diff --git a/spec/frontend/boards/components/board_card_spec.js b/spec/frontend/boards/components/board_card_spec.js
index aad89cf8261..17a5383a31e 100644
--- a/spec/frontend/boards/components/board_card_spec.js
+++ b/spec/frontend/boards/components/board_card_spec.js
@@ -6,7 +6,7 @@ import Vuex from 'vuex';
 import BoardCard from '~/boards/components/board_card.vue';
 import BoardCardInner from '~/boards/components/board_card_inner.vue';
 import { inactiveId } from '~/boards/constants';
-import { mockLabelList, mockIssue } from '../mock_data';
+import { mockLabelList, mockIssue, DEFAULT_COLOR } from '../mock_data';
 
 describe('Board card', () => {
   let wrapper;
@@ -180,4 +180,40 @@ describe('Board card', () => {
       expect(wrapper.classes()).toContain('gl-cursor-grab');
     });
   });
+
+  describe('when Epic colors are enabled', () => {
+    it('applies the correct color', () => {
+      window.gon.features = { epicColorHighlight: true };
+      createStore();
+      mountComponent({
+        item: {
+          ...mockIssue,
+          color: DEFAULT_COLOR,
+        },
+      });
+
+      expect(wrapper.classes()).toEqual(
+        expect.arrayContaining(['gl-pl-4', 'gl-border-l-solid', 'gl-border-4']),
+      );
+      expect(wrapper.attributes('style')).toContain(`border-color: ${DEFAULT_COLOR}`);
+    });
+  });
+
+  describe('when Epic colors are not enabled', () => {
+    it('applies the correct color', () => {
+      window.gon.features = { epicColorHighlight: false };
+      createStore();
+      mountComponent({
+        item: {
+          ...mockIssue,
+          color: DEFAULT_COLOR,
+        },
+      });
+
+      expect(wrapper.classes()).not.toEqual(
+        expect.arrayContaining(['gl-pl-4', 'gl-border-l-solid', 'gl-border-4']),
+      );
+      expect(wrapper.attributes('style')).toBeUndefined();
+    });
+  });
 });
diff --git a/spec/frontend/boards/components/config_toggle_spec.js b/spec/frontend/boards/components/config_toggle_spec.js
new file mode 100644
index 00000000000..47d4692453d
--- /dev/null
+++ b/spec/frontend/boards/components/config_toggle_spec.js
@@ -0,0 +1,59 @@
+import Vuex from 'vuex';
+import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import ConfigToggle from '~/boards/components/config_toggle.vue';
+import eventHub from '~/boards/eventhub';
+import store from '~/boards/stores';
+import { mockTracking } from 'helpers/tracking_helper';
+
+describe('ConfigToggle', () => {
+  let wrapper;
+
+  Vue.use(Vuex);
+
+  const createComponent = (provide = {}) =>
+    shallowMount(ConfigToggle, {
+      store,
+      provide: {
+        canAdminList: true,
+        ...provide,
+      },
+    });
+
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a button with label `View scope` when `canAdminList` is `false`', () => {
+    wrapper = createComponent({ canAdminList: false });
+    expect(findButton().text()).toBe('View scope');
+  });
+
+  it('renders a button with label `Edit board` when `canAdminList` is `true`', () => {
+    wrapper = createComponent();
+    expect(findButton().text()).toBe('Edit board');
+  });
+
+  it('emits `showBoardModal` when button is clicked', () => {
+    const eventHubSpy = jest.spyOn(eventHub, '$emit');
+    wrapper = createComponent();
+
+    findButton().vm.$emit('click', { preventDefault: () => {} });
+
+    expect(eventHubSpy).toHaveBeenCalledWith('showBoardModal', 'edit');
+  });
+
+  it('tracks clicking the button', () => {
+    const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+    wrapper = createComponent();
+
+    findButton().vm.$emit('click', { preventDefault: () => {} });
+
+    expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_button', {
+      label: 'edit_board',
+    });
+  });
+});
diff --git a/spec/frontend/boards/components/toggle_focus_spec.js b/spec/frontend/boards/components/toggle_focus_spec.js
new file mode 100644
index 00000000000..3cbaac91f8d
--- /dev/null
+++ b/spec/frontend/boards/components/toggle_focus_spec.js
@@ -0,0 +1,47 @@
+import { GlButton } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import ToggleFocus from '~/boards/components/toggle_focus.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+describe('ToggleFocus', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(ToggleFocus, {
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+      attachTo: document.body,
+    });
+  };
+
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a button with `maximize` icon', () => {
+    createComponent();
+
+    expect(findButton().props('icon')).toBe('maximize');
+    expect(findButton().attributes('aria-label')).toBe(ToggleFocus.i18n.toggleFocusMode);
+  });
+
+  it('contains a tooltip with title', () => {
+    createComponent();
+    const tooltip = getBinding(findButton().element, 'gl-tooltip');
+
+    expect(tooltip).toBeDefined();
+    expect(findButton().attributes('title')).toBe(ToggleFocus.i18n.toggleFocusMode);
+  });
+
+  it('toggles the icon when the button is clicked', async () => {
+    createComponent();
+    findButton().vm.$emit('click');
+    await nextTick();
+
+    expect(findButton().props('icon')).toBe('minimize');
+  });
+});
diff --git a/spec/frontend/boards/mock_data.js b/spec/frontend/boards/mock_data.js
index 6ec39be5d29..1ee05d81f37 100644
--- a/spec/frontend/boards/mock_data.js
+++ b/spec/frontend/boards/mock_data.js
@@ -790,3 +790,5 @@ export const epicBoardListQueryResponse = (totalWeight = 5) => ({
     },
   },
 });
+
+export const DEFAULT_COLOR = '#1068bf';
diff --git a/spec/frontend/boards/project_select_spec.js b/spec/frontend/boards/project_select_spec.js
index bd79060c54f..c45cd545155 100644
--- a/spec/frontend/boards/project_select_spec.js
+++ b/spec/frontend/boards/project_select_spec.js
@@ -1,16 +1,16 @@
 import {
   GlDropdown,
   GlDropdownItem,
+  GlFormInput,
   GlSearchBoxByType,
   GlLoadingIcon,
-  GlFormInput,
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
-import waitForPromises from 'helpers/wait_for_promises';
 import ProjectSelect from '~/boards/components/project_select.vue';
 import defaultState from '~/boards/stores/state';
+import waitForPromises from 'helpers/wait_for_promises';
 
 import { mockList, mockActiveGroupProjects } from './mock_data';
 
@@ -21,7 +21,7 @@ describe('ProjectSelect component', () => {
   let store;
 
   const findLabel = () => wrapper.find("[data-testid='header-label']");
-  const findGlDropdown = () => wrapper.find(GlDropdown);
+  const findGlDropdown = () => wrapper.findComponent(GlDropdown);
   const findGlDropdownLoadingIcon = () =>
     findGlDropdown().find('button:first-child').find(GlLoadingIcon);
   const findGlSearchBoxByType = () => wrapper.find(GlSearchBoxByType);
@@ -137,7 +137,7 @@ describe('ProjectSelect component', () => {
         await nextTick();
 
         const searchInput = findGlDropdown().findComponent(GlFormInput).element;
-        expect(document.activeElement).toEqual(searchInput);
+        expect(document.activeElement).toBe(searchInput);
       });
     });
 
diff --git a/spec/frontend/ci_lint/mock_data.js b/spec/frontend/ci_lint/mock_data.js
index 28ea0f55bf8..660b2ad6e8b 100644
--- a/spec/frontend/ci_lint/mock_data.js
+++ b/spec/frontend/ci_lint/mock_data.js
@@ -1,5 +1,16 @@
 import { mockJobs } from 'jest/pipeline_editor/mock_data';
 
+export const mockLintDataError = {
+  data: {
+    lintCI: {
+      errors: ['Error message'],
+      warnings: ['Warning message'],
+      valid: false,
+      jobs: mockJobs,
+    },
+  },
+};
+
 export const mockLintDataValid = {
   data: {
     lintCI: {
diff --git a/spec/frontend/ci_secure_files/components/secure_files_list_spec.js b/spec/frontend/ci_secure_files/components/secure_files_list_spec.js
index ad5f8a56ced..04d38a3281a 100644
--- a/spec/frontend/ci_secure_files/components/secure_files_list_spec.js
+++ b/spec/frontend/ci_secure_files/components/secure_files_list_spec.js
@@ -1,10 +1,12 @@
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlModal } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { mount } from '@vue/test-utils';
 import axios from '~/lib/utils/axios_utils';
 import SecureFilesList from '~/ci_secure_files/components/secure_files_list.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import Api from '~/api';
 
 import { secureFiles } from '../mock_data';
 
@@ -22,15 +24,18 @@ const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects/${dummyProj
 describe('SecureFilesList', () => {
   let wrapper;
   let mock;
+  let trackingSpy;
 
   beforeEach(() => {
     originalGon = window.gon;
+    trackingSpy = mockTracking(undefined, undefined, jest.spyOn);
     window.gon = { ...dummyGon };
   });
 
   afterEach(() => {
     wrapper.destroy();
     mock.restore();
+    unmockTracking();
     window.gon = originalGon;
   });
 
@@ -52,7 +57,9 @@ describe('SecureFilesList', () => {
   const findPagination = () => wrapper.findAll('ul.pagination');
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findUploadButton = () => wrapper.findAll('span.gl-button-text');
-  const findDeleteButton = () => wrapper.findAll('tbody tr td button.btn-danger');
+  const findDeleteModal = () => wrapper.findComponent(GlModal);
+  const findUploadInput = () => wrapper.findAll('input[type="file"]').at(0);
+  const findDeleteButton = () => wrapper.findAll('[data-testid="delete-button"]');
 
   describe('when secure files exist in a project', () => {
     beforeEach(async () => {
@@ -64,7 +71,7 @@ describe('SecureFilesList', () => {
     });
 
     it('displays a table with expected headers', () => {
-      const headers = ['Filename', 'Uploaded'];
+      const headers = ['File name', 'Uploaded date'];
       headers.forEach((header, i) => {
         expect(findHeaderAt(i).text()).toBe(header);
       });
@@ -78,6 +85,30 @@ describe('SecureFilesList', () => {
       expect(findCell(0, 0).text()).toBe(secureFile.name);
       expect(findCell(0, 1).find(TimeAgoTooltip).props('time')).toBe(secureFile.created_at);
     });
+
+    describe('event tracking', () => {
+      it('sends tracking information on list load', () => {
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'render_secure_files_list', {});
+      });
+
+      it('sends tracking information on file upload', async () => {
+        Api.uploadProjectSecureFile = jest.fn().mockResolvedValue();
+        Object.defineProperty(findUploadInput().element, 'files', { value: [{}] });
+        findUploadInput().trigger('change');
+
+        await waitForPromises();
+
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'upload_secure_file', {});
+      });
+
+      it('sends tracking information on file deletion', async () => {
+        Api.deleteProjectSecureFile = jest.fn().mockResolvedValue();
+        findDeleteModal().vm.$emit('ok');
+        await waitForPromises();
+
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'delete_secure_file', {});
+      });
+    });
   });
 
   describe('when no secure files exist in a project', () => {
@@ -90,14 +121,14 @@ describe('SecureFilesList', () => {
     });
 
     it('displays a table with expected headers', () => {
-      const headers = ['Filename', 'Uploaded'];
+      const headers = ['File name', 'Uploaded date'];
       headers.forEach((header, i) => {
         expect(findHeaderAt(i).text()).toBe(header);
       });
     });
 
     it('displays a table with a no records message', () => {
-      expect(findCell(0, 0).text()).toBe('There are no records to show');
+      expect(findCell(0, 0).text()).toBe('There are no secure files yet.');
     });
   });
 
diff --git a/spec/frontend/clusters_list/components/agent_table_spec.js b/spec/frontend/clusters_list/components/agent_table_spec.js
index 2a43b45a2f5..b78f0a3686c 100644
--- a/spec/frontend/clusters_list/components/agent_table_spec.js
+++ b/spec/frontend/clusters_list/components/agent_table_spec.js
@@ -70,10 +70,10 @@ describe('AgentTable', () => {
     });
 
     it.each`
-      status               | iconName               | lineNumber
-      ${'Never connected'} | ${'status-neutral'}    | ${0}
-      ${'Connected'}       | ${'status-success'}    | ${1}
-      ${'Not connected'}   | ${'severity-critical'} | ${2}
+      status               | iconName            | lineNumber
+      ${'Never connected'} | ${'status-neutral'} | ${0}
+      ${'Connected'}       | ${'status-success'} | ${1}
+      ${'Not connected'}   | ${'status-alert'}   | ${2}
     `(
       'displays agent connection status as "$status" at line $lineNumber',
       ({ status, iconName, lineNumber }) => {
diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js
index c150a7f05d0..5c7635c1617 100644
--- a/spec/frontend/clusters_list/components/clusters_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_spec.js
@@ -103,11 +103,9 @@ describe('Clusters', () => {
     });
 
     describe('when is loaded as a child component', () => {
-      beforeEach(() => {
+      it("shouldn't render pagination buttons", () => {
         createWrapper({ limit: 6 });
-      });
 
-      it("shouldn't render pagination buttons", () => {
         expect(findPaginatedButtons().exists()).toBe(false);
       });
     });
diff --git a/spec/frontend/content_editor/components/bubble_menus/code_block_spec.js b/spec/frontend/content_editor/components/bubble_menus/code_block_spec.js
index 646d068e795..154035a46ed 100644
--- a/spec/frontend/content_editor/components/bubble_menus/code_block_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/code_block_spec.js
@@ -44,6 +44,12 @@ describe('content_editor/components/bubble_menus/code_block', () => {
     });
   };
 
+  const preTag = ({ language, content = 'test' } = {}) => {
+    const languageAttr = language ? ` lang="${language}"` : '';
+
+    return `<pre class="js-syntax-highlight"${languageAttr}>${content}</pre>`;
+  };
+
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findDropdownItemsData = () =>
     findDropdownItems().wrappers.map((x) => ({
@@ -62,7 +68,7 @@ describe('content_editor/components/bubble_menus/code_block', () => {
   });
 
   it('renders bubble menu component', async () => {
-    tiptapEditor.commands.insertContent('<pre>test</pre>');
+    tiptapEditor.commands.insertContent(preTag());
     bubbleMenu = wrapper.findComponent(BubbleMenu);
 
     await emitEditorEvent({ event: 'transaction', tiptapEditor });
@@ -72,7 +78,7 @@ describe('content_editor/components/bubble_menus/code_block', () => {
   });
 
   it('selects plaintext language by default', async () => {
-    tiptapEditor.commands.insertContent('<pre>test</pre>');
+    tiptapEditor.commands.insertContent(preTag());
     bubbleMenu = wrapper.findComponent(BubbleMenu);
 
     await emitEditorEvent({ event: 'transaction', tiptapEditor });
@@ -81,7 +87,7 @@ describe('content_editor/components/bubble_menus/code_block', () => {
   });
 
   it('selects appropriate language based on the code block', async () => {
-    tiptapEditor.commands.insertContent('<pre lang="javascript">var a = 2;</pre>');
+    tiptapEditor.commands.insertContent(preTag({ language: 'javascript' }));
     bubbleMenu = wrapper.findComponent(BubbleMenu);
 
     await emitEditorEvent({ event: 'transaction', tiptapEditor });
@@ -90,7 +96,7 @@ describe('content_editor/components/bubble_menus/code_block', () => {
   });
 
   it('selects diagram sytnax for mermaid', async () => {
-    tiptapEditor.commands.insertContent('<pre lang="mermaid">test</pre>');
+    tiptapEditor.commands.insertContent(preTag({ language: 'mermaid' }));
     bubbleMenu = wrapper.findComponent(BubbleMenu);
 
     await emitEditorEvent({ event: 'transaction', tiptapEditor });
@@ -99,7 +105,7 @@ describe('content_editor/components/bubble_menus/code_block', () => {
   });
 
   it("selects Custom (syntax) if the language doesn't exist in the list", async () => {
-    tiptapEditor.commands.insertContent('<pre lang="nomnoml">test</pre>');
+    tiptapEditor.commands.insertContent(preTag({ language: 'nomnoml' }));
     bubbleMenu = wrapper.findComponent(BubbleMenu);
 
     await emitEditorEvent({ event: 'transaction', tiptapEditor });
@@ -109,19 +115,20 @@ describe('content_editor/components/bubble_menus/code_block', () => {
 
   describe('copy button', () => {
     it('copies the text of the code block', async () => {
+      const content = 'var a = Math.PI / 2;';
       jest.spyOn(navigator.clipboard, 'writeText');
 
-      tiptapEditor.commands.insertContent('<pre lang="javascript">var a = Math.PI / 2;</pre>');
+      tiptapEditor.commands.insertContent(preTag({ language: 'javascript', content }));
 
       await wrapper.findByTestId('copy-code-block').vm.$emit('click');
 
-      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('var a = Math.PI / 2;');
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(content);
     });
   });
 
   describe('delete button', () => {
     it('deletes the code block', async () => {
-      tiptapEditor.commands.insertContent('<pre lang="javascript">var a = 2;</pre>');
+      tiptapEditor.commands.insertContent(preTag({ language: 'javascript' }));
 
       await wrapper.findByTestId('delete-code-block').vm.$emit('click');
 
@@ -164,7 +171,7 @@ describe('content_editor/components/bubble_menus/code_block', () => {
 
   describe('when opened and search is changed', () => {
     beforeEach(async () => {
-      tiptapEditor.commands.insertContent('<pre lang="javascript">var a = 2;</pre>');
+      tiptapEditor.commands.insertContent(preTag({ language: 'javascript' }));
 
       wrapper.findComponent(GlSearchBoxByType).vm.$emit('input', 'js');
 
diff --git a/spec/frontend/content_editor/components/bubble_menus/formatting_spec.js b/spec/frontend/content_editor/components/bubble_menus/formatting_spec.js
index 6479c0ba008..1e2f58d9e40 100644
--- a/spec/frontend/content_editor/components/bubble_menus/formatting_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/formatting_spec.js
@@ -46,12 +46,14 @@ describe('content_editor/components/bubble_menus/formatting', () => {
   });
 
   describe.each`
-    testId      | controlProps
-    ${'bold'}   | ${{ contentType: 'bold', iconName: 'bold', label: 'Bold text', editorCommand: 'toggleBold', size: 'medium', category: 'tertiary' }}
-    ${'italic'} | ${{ contentType: 'italic', iconName: 'italic', label: 'Italic text', editorCommand: 'toggleItalic', size: 'medium', category: 'tertiary' }}
-    ${'strike'} | ${{ contentType: 'strike', iconName: 'strikethrough', label: 'Strikethrough', editorCommand: 'toggleStrike', size: 'medium', category: 'tertiary' }}
-    ${'code'}   | ${{ contentType: 'code', iconName: 'code', label: 'Code', editorCommand: 'toggleCode', size: 'medium', category: 'tertiary' }}
-    ${'link'}   | ${{ contentType: 'link', iconName: 'link', label: 'Insert link', editorCommand: 'toggleLink', editorCommandParams: { href: '' }, size: 'medium', category: 'tertiary' }}
+    testId           | controlProps
+    ${'bold'}        | ${{ contentType: 'bold', iconName: 'bold', label: 'Bold text', editorCommand: 'toggleBold' }}
+    ${'italic'}      | ${{ contentType: 'italic', iconName: 'italic', label: 'Italic text', editorCommand: 'toggleItalic' }}
+    ${'strike'}      | ${{ contentType: 'strike', iconName: 'strikethrough', label: 'Strikethrough', editorCommand: 'toggleStrike' }}
+    ${'code'}        | ${{ contentType: 'code', iconName: 'code', label: 'Code', editorCommand: 'toggleCode' }}
+    ${'superscript'} | ${{ contentType: 'superscript', iconName: 'superscript', label: 'Superscript', editorCommand: 'toggleSuperscript' }}
+    ${'subscript'}   | ${{ contentType: 'subscript', iconName: 'subscript', label: 'Subscript', editorCommand: 'toggleSubscript' }}
+    ${'link'}        | ${{ contentType: 'link', iconName: 'link', label: 'Insert link', editorCommand: 'toggleLink', editorCommandParams: { href: '' } }}
   `('given a $testId toolbar control', ({ testId, controlProps }) => {
     beforeEach(() => {
       buildWrapper();
@@ -60,9 +62,13 @@ describe('content_editor/components/bubble_menus/formatting', () => {
     it('renders the toolbar control with the provided properties', () => {
       expect(wrapper.findByTestId(testId).exists()).toBe(true);
 
-      Object.keys(controlProps).forEach((propName) => {
-        expect(wrapper.findByTestId(testId).props(propName)).toEqual(controlProps[propName]);
-      });
+      expect(wrapper.findByTestId(testId).props()).toEqual(
+        expect.objectContaining({
+          ...controlProps,
+          size: 'medium',
+          category: 'tertiary',
+        }),
+      );
     });
 
     it('tracks the execution of toolbar controls', () => {
diff --git a/spec/frontend/content_editor/components/toolbar_more_dropdown_spec.js b/spec/frontend/content_editor/components/toolbar_more_dropdown_spec.js
index 0334a18c9a1..351fd967719 100644
--- a/spec/frontend/content_editor/components/toolbar_more_dropdown_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_more_dropdown_spec.js
@@ -2,22 +2,26 @@ import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ToolbarMoreDropdown from '~/content_editor/components/toolbar_more_dropdown.vue';
 import Diagram from '~/content_editor/extensions/diagram';
 import HorizontalRule from '~/content_editor/extensions/horizontal_rule';
-import { createTestEditor, mockChainedCommands } from '../test_utils';
+import eventHubFactory from '~/helpers/event_hub_factory';
+import { createTestEditor, mockChainedCommands, emitEditorEvent } from '../test_utils';
 
 describe('content_editor/components/toolbar_more_dropdown', () => {
   let wrapper;
   let tiptapEditor;
+  let eventHub;
 
   const buildEditor = () => {
     tiptapEditor = createTestEditor({
       extensions: [Diagram, HorizontalRule],
     });
+    eventHub = eventHubFactory();
   };
 
   const buildWrapper = (propsData = {}) => {
     wrapper = mountExtended(ToolbarMoreDropdown, {
       provide: {
         tiptapEditor,
+        eventHub,
       },
       propsData,
     });
@@ -33,19 +37,30 @@ describe('content_editor/components/toolbar_more_dropdown', () => {
   });
 
   describe.each`
-    label                 | contentType         | data
-    ${'Mermaid diagram'}  | ${'diagram'}        | ${{ language: 'mermaid' }}
-    ${'PlantUML diagram'} | ${'diagram'}        | ${{ language: 'plantuml' }}
-    ${'Horizontal rule'}  | ${'horizontalRule'} | ${undefined}
-  `('when option $label is clicked', ({ label, contentType, data }) => {
-    it(`inserts a ${contentType}`, async () => {
-      const commands = mockChainedCommands(tiptapEditor, ['setNode', 'focus', 'run']);
+    name                  | contentType         | command                | params
+    ${'Code block'}       | ${'codeBlock'}      | ${'setNode'}           | ${['codeBlock']}
+    ${'Details block'}    | ${'details'}        | ${'toggleList'}        | ${['details', 'detailsContent']}
+    ${'Bullet list'}      | ${'bulletList'}     | ${'toggleList'}        | ${['bulletList', 'listItem']}
+    ${'Ordered list'}     | ${'orderedList'}    | ${'toggleList'}        | ${['orderedList', 'listItem']}
+    ${'Task list'}        | ${'taskList'}       | ${'toggleList'}        | ${['taskList', 'taskItem']}
+    ${'Mermaid diagram'}  | ${'diagram'}        | ${'setNode'}           | ${['diagram', { language: 'mermaid' }]}
+    ${'PlantUML diagram'} | ${'diagram'}        | ${'setNode'}           | ${['diagram', { language: 'plantuml' }]}
+    ${'Horizontal rule'}  | ${'horizontalRule'} | ${'setHorizontalRule'} | ${[]}
+  `('when option $label is clicked', ({ name, command, contentType, params }) => {
+    let commands;
+    let btn;
+
+    beforeEach(async () => {
+      commands = mockChainedCommands(tiptapEditor, [command, 'focus', 'run']);
+      btn = wrapper.findByRole('menuitem', { name });
+    });
 
-      const btn = wrapper.findByRole('menuitem', { name: label });
+    it(`inserts a ${contentType}`, async () => {
       await btn.trigger('click');
+      await emitEditorEvent({ event: 'transaction', tiptapEditor });
 
       expect(commands.focus).toHaveBeenCalled();
-      expect(commands.setNode).toHaveBeenCalledWith(contentType, data);
+      expect(commands[command]).toHaveBeenCalledWith(...params);
       expect(commands.run).toHaveBeenCalled();
 
       expect(wrapper.emitted('execute')).toEqual([[{ contentType }]]);
diff --git a/spec/frontend/content_editor/components/top_toolbar_spec.js b/spec/frontend/content_editor/components/top_toolbar_spec.js
index d98a9a52aff..2acb6e14ce0 100644
--- a/spec/frontend/content_editor/components/top_toolbar_spec.js
+++ b/spec/frontend/content_editor/components/top_toolbar_spec.js
@@ -24,17 +24,15 @@ describe('content_editor/components/top_toolbar', () => {
 
   describe.each`
     testId            | controlProps
+    ${'text-styles'}  | ${{}}
     ${'bold'}         | ${{ contentType: 'bold', iconName: 'bold', label: 'Bold text', editorCommand: 'toggleBold' }}
     ${'italic'}       | ${{ contentType: 'italic', iconName: 'italic', label: 'Italic text', editorCommand: 'toggleItalic' }}
-    ${'strike'}       | ${{ contentType: 'strike', iconName: 'strikethrough', label: 'Strikethrough', editorCommand: 'toggleStrike' }}
-    ${'code'}         | ${{ contentType: 'code', iconName: 'code', label: 'Code', editorCommand: 'toggleCode' }}
     ${'blockquote'}   | ${{ contentType: 'blockquote', iconName: 'quote', label: 'Insert a quote', editorCommand: 'toggleBlockquote' }}
+    ${'code'}         | ${{ contentType: 'code', iconName: 'code', label: 'Code', editorCommand: 'toggleCode' }}
+    ${'link'}         | ${{}}
     ${'bullet-list'}  | ${{ contentType: 'bulletList', iconName: 'list-bulleted', label: 'Add a bullet list', editorCommand: 'toggleBulletList' }}
     ${'ordered-list'} | ${{ contentType: 'orderedList', iconName: 'list-numbered', label: 'Add a numbered list', editorCommand: 'toggleOrderedList' }}
-    ${'details'}      | ${{ contentType: 'details', iconName: 'details-block', label: 'Add a collapsible section', editorCommand: 'toggleDetails' }}
-    ${'code-block'}   | ${{ contentType: 'codeBlock', iconName: 'doc-code', label: 'Insert a code block', editorCommand: 'toggleCodeBlock' }}
-    ${'text-styles'}  | ${{}}
-    ${'link'}         | ${{}}
+    ${'task-list'}    | ${{ contentType: 'taskList', iconName: 'list-task', label: 'Add a task list', editorCommand: 'toggleTaskList' }}
     ${'image'}        | ${{}}
     ${'table'}        | ${{}}
     ${'more'}         | ${{}}
diff --git a/spec/frontend/content_editor/extensions/html_nodes_spec.js b/spec/frontend/content_editor/extensions/html_nodes_spec.js
new file mode 100644
index 00000000000..24c68239025
--- /dev/null
+++ b/spec/frontend/content_editor/extensions/html_nodes_spec.js
@@ -0,0 +1,42 @@
+import HTMLNodes from '~/content_editor/extensions/html_nodes';
+import { createTestEditor, createDocBuilder } from '../test_utils';
+
+describe('content_editor/extensions/html_nodes', () => {
+  let tiptapEditor;
+  let doc;
+  let div;
+  let pre;
+  let p;
+
+  beforeEach(() => {
+    tiptapEditor = createTestEditor({ extensions: [...HTMLNodes] });
+
+    ({
+      builders: { doc, p, pre, div },
+    } = createDocBuilder({
+      tiptapEditor,
+      names: {
+        ...HTMLNodes.reduce(
+          (builders, htmlNode) => ({
+            ...builders,
+            [htmlNode.name]: { nodeType: htmlNode.name },
+          }),
+          {},
+        ),
+      },
+    }));
+  });
+
+  it.each`
+    input                      | insertedNodes
+    ${'<div><p>foo</p></div>'} | ${() => div(p('foo'))}
+    ${'<pre><p>foo</p></pre>'} | ${() => pre(p('foo'))}
+  `('parses and creates nodes for $input', ({ input, insertedNodes }) => {
+    const expectedDoc = doc(insertedNodes());
+
+    tiptapEditor.commands.setContent(input);
+
+    expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
+    expect(tiptapEditor.getHTML()).toEqual(input);
+  });
+});
diff --git a/spec/frontend/content_editor/extensions/paste_markdown_spec.js b/spec/frontend/content_editor/extensions/paste_markdown_spec.js
index 5d46c2c0650..53efda6aee2 100644
--- a/spec/frontend/content_editor/extensions/paste_markdown_spec.js
+++ b/spec/frontend/content_editor/extensions/paste_markdown_spec.js
@@ -14,7 +14,7 @@ import {
 import waitForPromises from 'helpers/wait_for_promises';
 import { createTestEditor, createDocBuilder, waitUntilNextDocTransaction } from '../test_utils';
 
-const CODE_BLOCK_HTML = '<pre lang="javascript">var a = 2;</pre>';
+const CODE_BLOCK_HTML = '<pre class="js-syntax-highlight" lang="javascript">var a = 2;</pre>';
 const DIAGRAM_HTML =
   '<img data-diagram="nomnoml" data-diagram-src="data:text/plain;base64,WzxmcmFtZT5EZWNvcmF0b3IgcGF0dGVybl0=">';
 const FRONTMATTER_HTML = '<pre lang="yaml" data-lang-params="frontmatter">key: value</pre>';
diff --git a/spec/frontend/content_editor/markdown_snapshot_spec.js b/spec/frontend/content_editor/markdown_snapshot_spec.js
new file mode 100644
index 00000000000..63ca66172e6
--- /dev/null
+++ b/spec/frontend/content_editor/markdown_snapshot_spec.js
@@ -0,0 +1,10 @@
+import path from 'path';
+import { describeMarkdownSnapshots } from 'jest/content_editor/markdown_snapshot_spec_helper';
+
+jest.mock('~/emoji');
+
+const glfmSpecificationDir = path.join(__dirname, '..', '..', '..', 'glfm_specification');
+
+// See https://docs.gitlab.com/ee/development/gitlab_flavored_markdown/specification_guide/#markdown-snapshot-testing
+// for documentation on this spec.
+describeMarkdownSnapshots('CE markdown snapshots in ContentEditor', glfmSpecificationDir);
diff --git a/spec/frontend/content_editor/markdown_snapshot_spec_helper.js b/spec/frontend/content_editor/markdown_snapshot_spec_helper.js
new file mode 100644
index 00000000000..05fa8e6a6b2
--- /dev/null
+++ b/spec/frontend/content_editor/markdown_snapshot_spec_helper.js
@@ -0,0 +1,102 @@
+// See https://docs.gitlab.com/ee/development/gitlab_flavored_markdown/specification_guide/#markdown-snapshot-testing
+// for documentation on this spec.
+
+import fs from 'fs';
+import path from 'path';
+import jsYaml from 'js-yaml';
+import { pick } from 'lodash';
+import {
+  IMPLEMENTATION_ERROR_MSG,
+  renderHtmlAndJsonForAllExamples,
+} from './render_html_and_json_for_all_examples';
+
+const filterExamples = (examples) => {
+  const focusedMarkdownExamples = process.env.FOCUSED_MARKDOWN_EXAMPLES?.split(',') || [];
+  if (!focusedMarkdownExamples.length) {
+    return examples;
+  }
+  return pick(examples, focusedMarkdownExamples);
+};
+
+const loadExamples = (dir, fileName) => {
+  const yaml = fs.readFileSync(path.join(dir, fileName));
+  const examples = jsYaml.safeLoad(yaml, {});
+  return filterExamples(examples);
+};
+
+// eslint-disable-next-line jest/no-export
+export const describeMarkdownSnapshots = (description, glfmSpecificationDir) => {
+  let actualHtmlAndJsonExamples;
+  let skipRunningSnapshotWysiwygHtmlTests;
+  let skipRunningSnapshotProsemirrorJsonTests;
+
+  const exampleStatuses = loadExamples(
+    path.join(glfmSpecificationDir, 'input', 'gitlab_flavored_markdown'),
+    'glfm_example_status.yml',
+  );
+  const glfmExampleSnapshotsDir = path.join(glfmSpecificationDir, 'example_snapshots');
+  const markdownExamples = loadExamples(glfmExampleSnapshotsDir, 'markdown.yml');
+  const expectedHtmlExamples = loadExamples(glfmExampleSnapshotsDir, 'html.yml');
+  const expectedProseMirrorJsonExamples = loadExamples(
+    glfmExampleSnapshotsDir,
+    'prosemirror_json.yml',
+  );
+
+  beforeAll(async () => {
+    return renderHtmlAndJsonForAllExamples(markdownExamples).then((examples) => {
+      actualHtmlAndJsonExamples = examples;
+    });
+  });
+
+  describe(description, () => {
+    const exampleNames = Object.keys(markdownExamples);
+
+    describe.each(exampleNames)('%s', (name) => {
+      const exampleNamePrefix = 'verifies conversion of GLFM to';
+      skipRunningSnapshotWysiwygHtmlTests =
+        exampleStatuses[name]?.skip_running_snapshot_wysiwyg_html_tests;
+      skipRunningSnapshotProsemirrorJsonTests =
+        exampleStatuses[name]?.skip_running_snapshot_prosemirror_json_tests;
+
+      const markdown = markdownExamples[name];
+
+      if (skipRunningSnapshotWysiwygHtmlTests) {
+        it.todo(`${exampleNamePrefix} HTML: ${skipRunningSnapshotWysiwygHtmlTests}`);
+      } else {
+        it(`${exampleNamePrefix} HTML`, async () => {
+          const expectedHtml = expectedHtmlExamples[name].wysiwyg;
+          const { html: actualHtml } = actualHtmlAndJsonExamples[name];
+
+          // noinspection JSUnresolvedFunction (required to avoid RubyMine type inspection warning, because custom matchers auto-imported via Jest test setup are not automatically resolved - see https://youtrack.jetbrains.com/issue/WEB-42350/matcher-for-jest-is-not-recognized-but-it-is-runable)
+          expect(actualHtml).toMatchExpectedForMarkdown(
+            'HTML',
+            name,
+            markdown,
+            IMPLEMENTATION_ERROR_MSG,
+            expectedHtml,
+          );
+        });
+      }
+
+      if (skipRunningSnapshotProsemirrorJsonTests) {
+        it.todo(
+          `${exampleNamePrefix} ProseMirror JSON: ${skipRunningSnapshotProsemirrorJsonTests}`,
+        );
+      } else {
+        it(`${exampleNamePrefix} ProseMirror JSON`, async () => {
+          const expectedJson = expectedProseMirrorJsonExamples[name];
+          const { json: actualJson } = actualHtmlAndJsonExamples[name];
+
+          // noinspection JSUnresolvedFunction
+          expect(actualJson).toMatchExpectedForMarkdown(
+            'JSON',
+            name,
+            markdown,
+            IMPLEMENTATION_ERROR_MSG,
+            expectedJson,
+          );
+        });
+      }
+    });
+  });
+};
diff --git a/spec/frontend/content_editor/remark_markdown_processing_spec.js b/spec/frontend/content_editor/remark_markdown_processing_spec.js
index 60dc540e192..48adceaab58 100644
--- a/spec/frontend/content_editor/remark_markdown_processing_spec.js
+++ b/spec/frontend/content_editor/remark_markdown_processing_spec.js
@@ -6,6 +6,7 @@ import CodeBlockHighlight from '~/content_editor/extensions/code_block_highlight
 import FootnoteDefinition from '~/content_editor/extensions/footnote_definition';
 import FootnoteReference from '~/content_editor/extensions/footnote_reference';
 import HardBreak from '~/content_editor/extensions/hard_break';
+import HTMLNodes from '~/content_editor/extensions/html_nodes';
 import Heading from '~/content_editor/extensions/heading';
 import HorizontalRule from '~/content_editor/extensions/horizontal_rule';
 import Image from '~/content_editor/extensions/image';
@@ -52,6 +53,7 @@ const tiptapEditor = createTestEditor({
     TableCell,
     TaskList,
     TaskItem,
+    ...HTMLNodes,
   ],
 });
 
@@ -64,6 +66,7 @@ const {
     bulletList,
     code,
     codeBlock,
+    div,
     footnoteDefinition,
     footnoteReference,
     hardBreak,
@@ -74,6 +77,7 @@ const {
     link,
     listItem,
     orderedList,
+    pre,
     strike,
     table,
     tableRow,
@@ -108,14 +112,21 @@ const {
     tableRow: { nodeType: TableRow.name },
     taskItem: { nodeType: TaskItem.name },
     taskList: { nodeType: TaskList.name },
+    ...HTMLNodes.reduce(
+      (builders, htmlNode) => ({
+        ...builders,
+        [htmlNode.name]: { nodeType: htmlNode.name },
+      }),
+      {},
+    ),
   },
 });
 
 describe('Client side Markdown processing', () => {
-  const deserialize = async (content) => {
+  const deserialize = async (markdown) => {
     const { document } = await remarkMarkdownDeserializer().deserialize({
       schema: tiptapEditor.schema,
-      content,
+      markdown,
     });
 
     return document;
@@ -127,8 +138,8 @@ describe('Client side Markdown processing', () => {
       pristineDoc: document,
     });
 
-  const sourceAttrs = (sourceMapKey, sourceMarkdown) => ({
-    sourceMapKey,
+  const source = (sourceMarkdown) => ({
+    sourceMapKey: expect.any(String),
     sourceMarkdown,
   });
 
@@ -136,63 +147,48 @@ describe('Client side Markdown processing', () => {
     {
       markdown: '__bold text__',
       expectedDoc: doc(
-        paragraph(
-          sourceAttrs('0:13', '__bold text__'),
-          bold(sourceAttrs('0:13', '__bold text__'), 'bold text'),
-        ),
+        paragraph(source('__bold text__'), bold(source('__bold text__'), 'bold text')),
       ),
     },
     {
       markdown: '**bold text**',
       expectedDoc: doc(
-        paragraph(
-          sourceAttrs('0:13', '**bold text**'),
-          bold(sourceAttrs('0:13', '**bold text**'), 'bold text'),
-        ),
+        paragraph(source('**bold text**'), bold(source('**bold text**'), 'bold text')),
       ),
     },
     {
       markdown: '<strong>bold text</strong>',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:26', '<strong>bold text</strong>'),
-          bold(sourceAttrs('0:26', '<strong>bold text</strong>'), 'bold text'),
+          source('<strong>bold text</strong>'),
+          bold(source('<strong>bold text</strong>'), 'bold text'),
         ),
       ),
     },
     {
       markdown: '<b>bold text</b>',
       expectedDoc: doc(
-        paragraph(
-          sourceAttrs('0:16', '<b>bold text</b>'),
-          bold(sourceAttrs('0:16', '<b>bold text</b>'), 'bold text'),
-        ),
+        paragraph(source('<b>bold text</b>'), bold(source('<b>bold text</b>'), 'bold text')),
       ),
     },
     {
       markdown: '_italic text_',
       expectedDoc: doc(
-        paragraph(
-          sourceAttrs('0:13', '_italic text_'),
-          italic(sourceAttrs('0:13', '_italic text_'), 'italic text'),
-        ),
+        paragraph(source('_italic text_'), italic(source('_italic text_'), 'italic text')),
       ),
     },
     {
       markdown: '*italic text*',
       expectedDoc: doc(
-        paragraph(
-          sourceAttrs('0:13', '*italic text*'),
-          italic(sourceAttrs('0:13', '*italic text*'), 'italic text'),
-        ),
+        paragraph(source('*italic text*'), italic(source('*italic text*'), 'italic text')),
       ),
     },
     {
       markdown: '<em>italic text</em>',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:20', '<em>italic text</em>'),
-          italic(sourceAttrs('0:20', '<em>italic text</em>'), 'italic text'),
+          source('<em>italic text</em>'),
+          italic(source('<em>italic text</em>'), 'italic text'),
         ),
       ),
     },
@@ -200,28 +196,25 @@ describe('Client side Markdown processing', () => {
       markdown: '<i>italic text</i>',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:18', '<i>italic text</i>'),
-          italic(sourceAttrs('0:18', '<i>italic text</i>'), 'italic text'),
+          source('<i>italic text</i>'),
+          italic(source('<i>italic text</i>'), 'italic text'),
         ),
       ),
     },
     {
       markdown: '`inline code`',
       expectedDoc: doc(
-        paragraph(
-          sourceAttrs('0:13', '`inline code`'),
-          code(sourceAttrs('0:13', '`inline code`'), 'inline code'),
-        ),
+        paragraph(source('`inline code`'), code(source('`inline code`'), 'inline code')),
       ),
     },
     {
       markdown: '**`inline code bold`**',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:22', '**`inline code bold`**'),
+          source('**`inline code bold`**'),
           bold(
-            sourceAttrs('0:22', '**`inline code bold`**'),
-            code(sourceAttrs('2:20', '`inline code bold`'), 'inline code bold'),
+            source('**`inline code bold`**'),
+            code(source('`inline code bold`'), 'inline code bold'),
           ),
         ),
       ),
@@ -230,10 +223,10 @@ describe('Client side Markdown processing', () => {
       markdown: '_`inline code italics`_',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:23', '_`inline code italics`_'),
+          source('_`inline code italics`_'),
           italic(
-            sourceAttrs('0:23', '_`inline code italics`_'),
-            code(sourceAttrs('1:22', '`inline code italics`'), 'inline code italics'),
+            source('_`inline code italics`_'),
+            code(source('`inline code italics`'), 'inline code italics'),
           ),
         ),
       ),
@@ -246,8 +239,8 @@ describe('Client side Markdown processing', () => {
       `,
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:28', '<i class="foo">\n  *bar*\n</i>'),
-          italic(sourceAttrs('0:28', '<i class="foo">\n  *bar*\n</i>'), '\n  *bar*\n'),
+          source('<i class="foo">\n  *bar*\n</i>'),
+          italic(source('<i class="foo">\n  *bar*\n</i>'), '\n  *bar*\n'),
         ),
       ),
     },
@@ -259,8 +252,8 @@ describe('Client side Markdown processing', () => {
       `,
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:27', '<img src="bar" alt="foo" />'),
-          image({ ...sourceAttrs('0:27', '<img src="bar" alt="foo" />'), alt: 'foo', src: 'bar' }),
+          source('<img src="bar" alt="foo" />'),
+          image({ ...source('<img src="bar" alt="foo" />'), alt: 'foo', src: 'bar' }),
         ),
       ),
     },
@@ -273,15 +266,12 @@ describe('Client side Markdown processing', () => {
       `,
       expectedDoc: doc(
         bulletList(
-          sourceAttrs('0:13', '- List item 1'),
-          listItem(
-            sourceAttrs('0:13', '- List item 1'),
-            paragraph(sourceAttrs('2:13', 'List item 1'), 'List item 1'),
-          ),
+          source('- List item 1'),
+          listItem(source('- List item 1'), paragraph(source('List item 1'), 'List item 1')),
         ),
         paragraph(
-          sourceAttrs('15:42', '<img src="bar" alt="foo" />'),
-          image({ ...sourceAttrs('15:42', '<img src="bar" alt="foo" />'), alt: 'foo', src: 'bar' }),
+          source('<img src="bar" alt="foo" />'),
+          image({ ...source('<img src="bar" alt="foo" />'), alt: 'foo', src: 'bar' }),
         ),
       ),
     },
@@ -289,10 +279,10 @@ describe('Client side Markdown processing', () => {
       markdown: '[GitLab](https://gitlab.com "Go to GitLab")',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:43', '[GitLab](https://gitlab.com "Go to GitLab")'),
+          source('[GitLab](https://gitlab.com "Go to GitLab")'),
           link(
             {
-              ...sourceAttrs('0:43', '[GitLab](https://gitlab.com "Go to GitLab")'),
+              ...source('[GitLab](https://gitlab.com "Go to GitLab")'),
               href: 'https://gitlab.com',
               title: 'Go to GitLab',
             },
@@ -305,12 +295,12 @@ describe('Client side Markdown processing', () => {
       markdown: '**[GitLab](https://gitlab.com "Go to GitLab")**',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:47', '**[GitLab](https://gitlab.com "Go to GitLab")**'),
+          source('**[GitLab](https://gitlab.com "Go to GitLab")**'),
           bold(
-            sourceAttrs('0:47', '**[GitLab](https://gitlab.com "Go to GitLab")**'),
+            source('**[GitLab](https://gitlab.com "Go to GitLab")**'),
             link(
               {
-                ...sourceAttrs('2:45', '[GitLab](https://gitlab.com "Go to GitLab")'),
+                ...source('[GitLab](https://gitlab.com "Go to GitLab")'),
                 href: 'https://gitlab.com',
                 title: 'Go to GitLab',
               },
@@ -324,10 +314,10 @@ describe('Client side Markdown processing', () => {
       markdown: 'www.commonmark.org',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:18', 'www.commonmark.org'),
+          source('www.commonmark.org'),
           link(
             {
-              ...sourceAttrs('0:18', 'www.commonmark.org'),
+              ...source('www.commonmark.org'),
               href: 'http://www.commonmark.org',
             },
             'www.commonmark.org',
@@ -339,11 +329,11 @@ describe('Client side Markdown processing', () => {
       markdown: 'Visit www.commonmark.org/help for more information.',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:51', 'Visit www.commonmark.org/help for more information.'),
+          source('Visit www.commonmark.org/help for more information.'),
           'Visit ',
           link(
             {
-              ...sourceAttrs('6:29', 'www.commonmark.org/help'),
+              ...source('www.commonmark.org/help'),
               href: 'http://www.commonmark.org/help',
             },
             'www.commonmark.org/help',
@@ -356,11 +346,11 @@ describe('Client side Markdown processing', () => {
       markdown: 'hello@mail+xyz.example isn’t valid, but hello+xyz@mail.example is.',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:66', 'hello@mail+xyz.example isn’t valid, but hello+xyz@mail.example is.'),
+          source('hello@mail+xyz.example isn’t valid, but hello+xyz@mail.example is.'),
           'hello@mail+xyz.example isn’t valid, but ',
           link(
             {
-              ...sourceAttrs('40:62', 'hello+xyz@mail.example'),
+              ...source('hello+xyz@mail.example'),
               href: 'mailto:hello+xyz@mail.example',
             },
             'hello+xyz@mail.example',
@@ -373,11 +363,12 @@ describe('Client side Markdown processing', () => {
       markdown: '[https://gitlab.com>',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:20', '[https://gitlab.com>'),
+          source('[https://gitlab.com>'),
           '[',
           link(
             {
-              ...sourceAttrs(),
+              sourceMapKey: null,
+              sourceMarkdown: null,
               href: 'https://gitlab.com',
             },
             'https://gitlab.com',
@@ -392,9 +383,9 @@ This is a paragraph with a\\
 hard line break`,
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:43', 'This is a paragraph with a\\\nhard line break'),
+          source('This is a paragraph with a\\\nhard line break'),
           'This is a paragraph with a',
-          hardBreak(sourceAttrs('26:28', '\\\n')),
+          hardBreak(source('\\\n')),
           '\nhard line break',
         ),
       ),
@@ -403,9 +394,9 @@ hard line break`,
       markdown: '![GitLab Logo](https://gitlab.com/logo.png "GitLab Logo")',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:57', '![GitLab Logo](https://gitlab.com/logo.png "GitLab Logo")'),
+          source('![GitLab Logo](https://gitlab.com/logo.png "GitLab Logo")'),
           image({
-            ...sourceAttrs('0:57', '![GitLab Logo](https://gitlab.com/logo.png "GitLab Logo")'),
+            ...source('![GitLab Logo](https://gitlab.com/logo.png "GitLab Logo")'),
             alt: 'GitLab Logo',
             src: 'https://gitlab.com/logo.png',
             title: 'GitLab Logo',
@@ -415,49 +406,43 @@ hard line break`,
     },
     {
       markdown: '---',
-      expectedDoc: doc(horizontalRule(sourceAttrs('0:3', '---'))),
+      expectedDoc: doc(horizontalRule(source('---'))),
     },
     {
       markdown: '***',
-      expectedDoc: doc(horizontalRule(sourceAttrs('0:3', '***'))),
+      expectedDoc: doc(horizontalRule(source('***'))),
     },
     {
       markdown: '___',
-      expectedDoc: doc(horizontalRule(sourceAttrs('0:3', '___'))),
+      expectedDoc: doc(horizontalRule(source('___'))),
     },
     {
       markdown: '<hr>',
-      expectedDoc: doc(horizontalRule(sourceAttrs('0:4', '<hr>'))),
+      expectedDoc: doc(horizontalRule(source('<hr>'))),
     },
     {
       markdown: '# Heading 1',
-      expectedDoc: doc(heading({ ...sourceAttrs('0:11', '# Heading 1'), level: 1 }, 'Heading 1')),
+      expectedDoc: doc(heading({ ...source('# Heading 1'), level: 1 }, 'Heading 1')),
     },
     {
       markdown: '## Heading 2',
-      expectedDoc: doc(heading({ ...sourceAttrs('0:12', '## Heading 2'), level: 2 }, 'Heading 2')),
+      expectedDoc: doc(heading({ ...source('## Heading 2'), level: 2 }, 'Heading 2')),
     },
     {
       markdown: '### Heading 3',
-      expectedDoc: doc(heading({ ...sourceAttrs('0:13', '### Heading 3'), level: 3 }, 'Heading 3')),
+      expectedDoc: doc(heading({ ...source('### Heading 3'), level: 3 }, 'Heading 3')),
     },
     {
       markdown: '#### Heading 4',
-      expectedDoc: doc(
-        heading({ ...sourceAttrs('0:14', '#### Heading 4'), level: 4 }, 'Heading 4'),
-      ),
+      expectedDoc: doc(heading({ ...source('#### Heading 4'), level: 4 }, 'Heading 4')),
     },
     {
       markdown: '##### Heading 5',
-      expectedDoc: doc(
-        heading({ ...sourceAttrs('0:15', '##### Heading 5'), level: 5 }, 'Heading 5'),
-      ),
+      expectedDoc: doc(heading({ ...source('##### Heading 5'), level: 5 }, 'Heading 5')),
     },
     {
       markdown: '###### Heading 6',
-      expectedDoc: doc(
-        heading({ ...sourceAttrs('0:16', '###### Heading 6'), level: 6 }, 'Heading 6'),
-      ),
+      expectedDoc: doc(heading({ ...source('###### Heading 6'), level: 6 }, 'Heading 6')),
     },
     {
       markdown: `
@@ -465,9 +450,7 @@ Heading
 one
 ======
       `,
-      expectedDoc: doc(
-        heading({ ...sourceAttrs('0:18', 'Heading\none\n======'), level: 1 }, 'Heading\none'),
-      ),
+      expectedDoc: doc(heading({ ...source('Heading\none\n======'), level: 1 }, 'Heading\none')),
     },
     {
       markdown: `
@@ -475,9 +458,7 @@ Heading
 two
 -------
       `,
-      expectedDoc: doc(
-        heading({ ...sourceAttrs('0:19', 'Heading\ntwo\n-------'), level: 2 }, 'Heading\ntwo'),
-      ),
+      expectedDoc: doc(heading({ ...source('Heading\ntwo\n-------'), level: 2 }, 'Heading\ntwo')),
     },
     {
       markdown: `
@@ -486,15 +467,9 @@ two
       `,
       expectedDoc: doc(
         bulletList(
-          sourceAttrs('0:27', '- List item 1\n- List item 2'),
-          listItem(
-            sourceAttrs('0:13', '- List item 1'),
-            paragraph(sourceAttrs('2:13', 'List item 1'), 'List item 1'),
-          ),
-          listItem(
-            sourceAttrs('14:27', '- List item 2'),
-            paragraph(sourceAttrs('16:27', 'List item 2'), 'List item 2'),
-          ),
+          source('- List item 1\n- List item 2'),
+          listItem(source('- List item 1'), paragraph(source('List item 1'), 'List item 1')),
+          listItem(source('- List item 2'), paragraph(source('List item 2'), 'List item 2')),
         ),
       ),
     },
@@ -505,15 +480,9 @@ two
       `,
       expectedDoc: doc(
         bulletList(
-          sourceAttrs('0:27', '* List item 1\n* List item 2'),
-          listItem(
-            sourceAttrs('0:13', '* List item 1'),
-            paragraph(sourceAttrs('2:13', 'List item 1'), 'List item 1'),
-          ),
-          listItem(
-            sourceAttrs('14:27', '* List item 2'),
-            paragraph(sourceAttrs('16:27', 'List item 2'), 'List item 2'),
-          ),
+          source('* List item 1\n* List item 2'),
+          listItem(source('* List item 1'), paragraph(source('List item 1'), 'List item 1')),
+          listItem(source('* List item 2'), paragraph(source('List item 2'), 'List item 2')),
         ),
       ),
     },
@@ -524,15 +493,9 @@ two
       `,
       expectedDoc: doc(
         bulletList(
-          sourceAttrs('0:27', '+ List item 1\n+ List item 2'),
-          listItem(
-            sourceAttrs('0:13', '+ List item 1'),
-            paragraph(sourceAttrs('2:13', 'List item 1'), 'List item 1'),
-          ),
-          listItem(
-            sourceAttrs('14:27', '+ List item 2'),
-            paragraph(sourceAttrs('16:27', 'List item 2'), 'List item 2'),
-          ),
+          source('+ List item 1\n+ List item 2'),
+          listItem(source('+ List item 1'), paragraph(source('List item 1'), 'List item 1')),
+          listItem(source('+ List item 2'), paragraph(source('List item 2'), 'List item 2')),
         ),
       ),
     },
@@ -543,15 +506,9 @@ two
       `,
       expectedDoc: doc(
         orderedList(
-          sourceAttrs('0:29', '1. List item 1\n1. List item 2'),
-          listItem(
-            sourceAttrs('0:14', '1. List item 1'),
-            paragraph(sourceAttrs('3:14', 'List item 1'), 'List item 1'),
-          ),
-          listItem(
-            sourceAttrs('15:29', '1. List item 2'),
-            paragraph(sourceAttrs('18:29', 'List item 2'), 'List item 2'),
-          ),
+          source('1. List item 1\n1. List item 2'),
+          listItem(source('1. List item 1'), paragraph(source('List item 1'), 'List item 1')),
+          listItem(source('1. List item 2'), paragraph(source('List item 2'), 'List item 2')),
         ),
       ),
     },
@@ -562,15 +519,9 @@ two
       `,
       expectedDoc: doc(
         orderedList(
-          sourceAttrs('0:29', '1. List item 1\n2. List item 2'),
-          listItem(
-            sourceAttrs('0:14', '1. List item 1'),
-            paragraph(sourceAttrs('3:14', 'List item 1'), 'List item 1'),
-          ),
-          listItem(
-            sourceAttrs('15:29', '2. List item 2'),
-            paragraph(sourceAttrs('18:29', 'List item 2'), 'List item 2'),
-          ),
+          source('1. List item 1\n2. List item 2'),
+          listItem(source('1. List item 1'), paragraph(source('List item 1'), 'List item 1')),
+          listItem(source('2. List item 2'), paragraph(source('List item 2'), 'List item 2')),
         ),
       ),
     },
@@ -581,15 +532,9 @@ two
       `,
       expectedDoc: doc(
         orderedList(
-          sourceAttrs('0:29', '1) List item 1\n2) List item 2'),
-          listItem(
-            sourceAttrs('0:14', '1) List item 1'),
-            paragraph(sourceAttrs('3:14', 'List item 1'), 'List item 1'),
-          ),
-          listItem(
-            sourceAttrs('15:29', '2) List item 2'),
-            paragraph(sourceAttrs('18:29', 'List item 2'), 'List item 2'),
-          ),
+          source('1) List item 1\n2) List item 2'),
+          listItem(source('1) List item 1'), paragraph(source('List item 1'), 'List item 1')),
+          listItem(source('2) List item 2'), paragraph(source('List item 2'), 'List item 2')),
         ),
       ),
     },
@@ -600,15 +545,15 @@ two
       `,
       expectedDoc: doc(
         bulletList(
-          sourceAttrs('0:33', '- List item 1\n  - Sub list item 1'),
+          source('- List item 1\n  - Sub list item 1'),
           listItem(
-            sourceAttrs('0:33', '- List item 1\n  - Sub list item 1'),
-            paragraph(sourceAttrs('2:13', 'List item 1'), 'List item 1'),
+            source('- List item 1\n  - Sub list item 1'),
+            paragraph(source('List item 1'), 'List item 1'),
             bulletList(
-              sourceAttrs('16:33', '- Sub list item 1'),
+              source('- Sub list item 1'),
               listItem(
-                sourceAttrs('16:33', '- Sub list item 1'),
-                paragraph(sourceAttrs('18:33', 'Sub list item 1'), 'Sub list item 1'),
+                source('- Sub list item 1'),
+                paragraph(source('Sub list item 1'), 'Sub list item 1'),
               ),
             ),
           ),
@@ -624,19 +569,13 @@ two
       `,
       expectedDoc: doc(
         bulletList(
-          sourceAttrs(
-            '0:66',
-            '- List item 1 paragraph 1\n\n  List item 1 paragraph 2\n- List item 2',
-          ),
-          listItem(
-            sourceAttrs('0:52', '- List item 1 paragraph 1\n\n  List item 1 paragraph 2'),
-            paragraph(sourceAttrs('2:25', 'List item 1 paragraph 1'), 'List item 1 paragraph 1'),
-            paragraph(sourceAttrs('29:52', 'List item 1 paragraph 2'), 'List item 1 paragraph 2'),
-          ),
+          source('- List item 1 paragraph 1\n\n  List item 1 paragraph 2\n- List item 2'),
           listItem(
-            sourceAttrs('53:66', '- List item 2'),
-            paragraph(sourceAttrs('55:66', 'List item 2'), 'List item 2'),
+            source('- List item 1 paragraph 1\n\n  List item 1 paragraph 2'),
+            paragraph(source('List item 1 paragraph 1'), 'List item 1 paragraph 1'),
+            paragraph(source('List item 1 paragraph 2'), 'List item 1 paragraph 2'),
           ),
+          listItem(source('- List item 2'), paragraph(source('List item 2'), 'List item 2')),
         ),
       ),
     },
@@ -646,13 +585,13 @@ two
 `,
       expectedDoc: doc(
         bulletList(
-          sourceAttrs('0:41', '- List item with an image ![bar](foo.png)'),
+          source('- List item with an image ![bar](foo.png)'),
           listItem(
-            sourceAttrs('0:41', '- List item with an image ![bar](foo.png)'),
+            source('- List item with an image ![bar](foo.png)'),
             paragraph(
-              sourceAttrs('2:41', 'List item with an image ![bar](foo.png)'),
+              source('List item with an image ![bar](foo.png)'),
               'List item with an image',
-              image({ ...sourceAttrs('26:41', '![bar](foo.png)'), alt: 'bar', src: 'foo.png' }),
+              image({ ...source('![bar](foo.png)'), alt: 'bar', src: 'foo.png' }),
             ),
           ),
         ),
@@ -664,8 +603,8 @@ two
       `,
       expectedDoc: doc(
         blockquote(
-          sourceAttrs('0:22', '> This is a blockquote'),
-          paragraph(sourceAttrs('2:22', 'This is a blockquote'), 'This is a blockquote'),
+          source('> This is a blockquote'),
+          paragraph(source('This is a blockquote'), 'This is a blockquote'),
         ),
       ),
     },
@@ -676,17 +615,11 @@ two
       `,
       expectedDoc: doc(
         blockquote(
-          sourceAttrs('0:31', '> - List item 1\n> - List item 2'),
+          source('> - List item 1\n> - List item 2'),
           bulletList(
-            sourceAttrs('2:31', '- List item 1\n> - List item 2'),
-            listItem(
-              sourceAttrs('2:15', '- List item 1'),
-              paragraph(sourceAttrs('4:15', 'List item 1'), 'List item 1'),
-            ),
-            listItem(
-              sourceAttrs('18:31', '- List item 2'),
-              paragraph(sourceAttrs('20:31', 'List item 2'), 'List item 2'),
-            ),
+            source('- List item 1\n> - List item 2'),
+            listItem(source('- List item 1'), paragraph(source('List item 1'), 'List item 1')),
+            listItem(source('- List item 2'), paragraph(source('List item 2'), 'List item 2')),
           ),
         ),
       ),
@@ -699,10 +632,10 @@ code block
 
         `,
       expectedDoc: doc(
-        paragraph(sourceAttrs('0:10', 'code block'), 'code block'),
+        paragraph(source('code block'), 'code block'),
         codeBlock(
           {
-            ...sourceAttrs('12:42', "    const fn = () => 'GitLab';"),
+            ...source("    const fn = () => 'GitLab';"),
             class: 'code highlight',
             language: null,
           },
@@ -719,7 +652,7 @@ const fn = () => 'GitLab';
       expectedDoc: doc(
         codeBlock(
           {
-            ...sourceAttrs('0:44', "```javascript\nconst fn = () => 'GitLab';\n```"),
+            ...source("```javascript\nconst fn = () => 'GitLab';\n```"),
             class: 'code highlight',
             language: 'javascript',
           },
@@ -736,7 +669,7 @@ const fn = () => 'GitLab';
       expectedDoc: doc(
         codeBlock(
           {
-            ...sourceAttrs('0:44', "~~~javascript\nconst fn = () => 'GitLab';\n~~~"),
+            ...source("~~~javascript\nconst fn = () => 'GitLab';\n~~~"),
             class: 'code highlight',
             language: 'javascript',
           },
@@ -752,7 +685,7 @@ const fn = () => 'GitLab';
       expectedDoc: doc(
         codeBlock(
           {
-            ...sourceAttrs('0:7', '```\n```'),
+            ...source('```\n```'),
             class: 'code highlight',
             language: null,
           },
@@ -770,7 +703,7 @@ const fn = () => 'GitLab';
       expectedDoc: doc(
         codeBlock(
           {
-            ...sourceAttrs('0:45', "```javascript\nconst fn = () => 'GitLab';\n\n```"),
+            ...source("```javascript\nconst fn = () => 'GitLab';\n\n```"),
             class: 'code highlight',
             language: 'javascript',
           },
@@ -782,8 +715,8 @@ const fn = () => 'GitLab';
       markdown: '~~Strikedthrough text~~',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:23', '~~Strikedthrough text~~'),
-          strike(sourceAttrs('0:23', '~~Strikedthrough text~~'), 'Strikedthrough text'),
+          source('~~Strikedthrough text~~'),
+          strike(source('~~Strikedthrough text~~'), 'Strikedthrough text'),
         ),
       ),
     },
@@ -791,8 +724,8 @@ const fn = () => 'GitLab';
       markdown: '<del>Strikedthrough text</del>',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:30', '<del>Strikedthrough text</del>'),
-          strike(sourceAttrs('0:30', '<del>Strikedthrough text</del>'), 'Strikedthrough text'),
+          source('<del>Strikedthrough text</del>'),
+          strike(source('<del>Strikedthrough text</del>'), 'Strikedthrough text'),
         ),
       ),
     },
@@ -800,11 +733,8 @@ const fn = () => 'GitLab';
       markdown: '<strike>Strikedthrough text</strike>',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:36', '<strike>Strikedthrough text</strike>'),
-          strike(
-            sourceAttrs('0:36', '<strike>Strikedthrough text</strike>'),
-            'Strikedthrough text',
-          ),
+          source('<strike>Strikedthrough text</strike>'),
+          strike(source('<strike>Strikedthrough text</strike>'), 'Strikedthrough text'),
         ),
       ),
     },
@@ -812,8 +742,8 @@ const fn = () => 'GitLab';
       markdown: '<s>Strikedthrough text</s>',
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:26', '<s>Strikedthrough text</s>'),
-          strike(sourceAttrs('0:26', '<s>Strikedthrough text</s>'), 'Strikedthrough text'),
+          source('<s>Strikedthrough text</s>'),
+          strike(source('<s>Strikedthrough text</s>'), 'Strikedthrough text'),
         ),
       ),
     },
@@ -826,21 +756,21 @@ const fn = () => 'GitLab';
         taskList(
           {
             numeric: false,
-            ...sourceAttrs('0:45', '- [ ] task list item 1\n- [ ] task list item 2'),
+            ...source('- [ ] task list item 1\n- [ ] task list item 2'),
           },
           taskItem(
             {
               checked: false,
-              ...sourceAttrs('0:22', '- [ ] task list item 1'),
+              ...source('- [ ] task list item 1'),
             },
-            paragraph(sourceAttrs('6:22', 'task list item 1'), 'task list item 1'),
+            paragraph(source('task list item 1'), 'task list item 1'),
           ),
           taskItem(
             {
               checked: false,
-              ...sourceAttrs('23:45', '- [ ] task list item 2'),
+              ...source('- [ ] task list item 2'),
             },
-            paragraph(sourceAttrs('29:45', 'task list item 2'), 'task list item 2'),
+            paragraph(source('task list item 2'), 'task list item 2'),
           ),
         ),
       ),
@@ -854,21 +784,21 @@ const fn = () => 'GitLab';
         taskList(
           {
             numeric: false,
-            ...sourceAttrs('0:45', '- [x] task list item 1\n- [x] task list item 2'),
+            ...source('- [x] task list item 1\n- [x] task list item 2'),
           },
           taskItem(
             {
               checked: true,
-              ...sourceAttrs('0:22', '- [x] task list item 1'),
+              ...source('- [x] task list item 1'),
             },
-            paragraph(sourceAttrs('6:22', 'task list item 1'), 'task list item 1'),
+            paragraph(source('task list item 1'), 'task list item 1'),
           ),
           taskItem(
             {
               checked: true,
-              ...sourceAttrs('23:45', '- [x] task list item 2'),
+              ...source('- [x] task list item 2'),
             },
-            paragraph(sourceAttrs('29:45', 'task list item 2'), 'task list item 2'),
+            paragraph(source('task list item 2'), 'task list item 2'),
           ),
         ),
       ),
@@ -882,21 +812,21 @@ const fn = () => 'GitLab';
         taskList(
           {
             numeric: true,
-            ...sourceAttrs('0:47', '1. [ ] task list item 1\n2. [ ] task list item 2'),
+            ...source('1. [ ] task list item 1\n2. [ ] task list item 2'),
           },
           taskItem(
             {
               checked: false,
-              ...sourceAttrs('0:23', '1. [ ] task list item 1'),
+              ...source('1. [ ] task list item 1'),
             },
-            paragraph(sourceAttrs('7:23', 'task list item 1'), 'task list item 1'),
+            paragraph(source('task list item 1'), 'task list item 1'),
           ),
           taskItem(
             {
               checked: false,
-              ...sourceAttrs('24:47', '2. [ ] task list item 2'),
+              ...source('2. [ ] task list item 2'),
             },
-            paragraph(sourceAttrs('31:47', 'task list item 2'), 'task list item 2'),
+            paragraph(source('task list item 2'), 'task list item 2'),
           ),
         ),
       ),
@@ -909,16 +839,16 @@ const fn = () => 'GitLab';
 `,
       expectedDoc: doc(
         table(
-          sourceAttrs('0:29', '| a | b |\n|---|---|\n| c | d |'),
+          source('| a | b |\n|---|---|\n| c | d |'),
           tableRow(
-            sourceAttrs('0:9', '| a | b |'),
-            tableHeader(sourceAttrs('0:5', '| a |'), paragraph(sourceAttrs('2:3', 'a'), 'a')),
-            tableHeader(sourceAttrs('5:9', ' b |'), paragraph(sourceAttrs('6:7', 'b'), 'b')),
+            source('| a | b |'),
+            tableHeader(source('| a |'), paragraph(source('a'), 'a')),
+            tableHeader(source(' b |'), paragraph(source('b'), 'b')),
           ),
           tableRow(
-            sourceAttrs('20:29', '| c | d |'),
-            tableCell(sourceAttrs('20:25', '| c |'), paragraph(sourceAttrs('22:23', 'c'), 'c')),
-            tableCell(sourceAttrs('25:29', ' d |'), paragraph(sourceAttrs('26:27', 'd'), 'd')),
+            source('| c | d |'),
+            tableCell(source('| c |'), paragraph(source('c'), 'c')),
+            tableCell(source(' d |'), paragraph(source('d'), 'd')),
           ),
         ),
       ),
@@ -936,30 +866,29 @@ const fn = () => 'GitLab';
 `,
       expectedDoc: doc(
         table(
-          sourceAttrs(
-            '0:132',
+          source(
             '<table>\n  <tr>\n    <th colspan="2" rowspan="5">Header</th>\n  </tr>\n  <tr>\n    <td colspan="2" rowspan="5">Body</td>\n  </tr>\n</table>',
           ),
           tableRow(
-            sourceAttrs('10:66', '<tr>\n    <th colspan="2" rowspan="5">Header</th>\n  </tr>'),
+            source('<tr>\n    <th colspan="2" rowspan="5">Header</th>\n  </tr>'),
             tableHeader(
               {
-                ...sourceAttrs('19:58', '<th colspan="2" rowspan="5">Header</th>'),
+                ...source('<th colspan="2" rowspan="5">Header</th>'),
                 colspan: 2,
                 rowspan: 5,
               },
-              paragraph(sourceAttrs('47:53', 'Header'), 'Header'),
+              paragraph(source('Header'), 'Header'),
             ),
           ),
           tableRow(
-            sourceAttrs('69:123', '<tr>\n    <td colspan="2" rowspan="5">Body</td>\n  </tr>'),
+            source('<tr>\n    <td colspan="2" rowspan="5">Body</td>\n  </tr>'),
             tableCell(
               {
-                ...sourceAttrs('78:115', '<td colspan="2" rowspan="5">Body</td>'),
+                ...source('<td colspan="2" rowspan="5">Body</td>'),
                 colspan: 2,
                 rowspan: 5,
               },
-              paragraph(sourceAttrs('106:110', 'Body'), 'Body'),
+              paragraph(source('Body'), 'Body'),
             ),
           ),
         ),
@@ -977,24 +906,177 @@ Paragraph
 `,
       expectedDoc: doc(
         paragraph(
-          sourceAttrs('0:30', 'This is a footnote [^footnote]'),
+          source('This is a footnote [^footnote]'),
           'This is a footnote ',
           footnoteReference({
-            ...sourceAttrs('19:30', '[^footnote]'),
+            ...source('[^footnote]'),
             identifier: 'footnote',
             label: 'footnote',
           }),
         ),
-        paragraph(sourceAttrs('32:41', 'Paragraph'), 'Paragraph'),
+        paragraph(source('Paragraph'), 'Paragraph'),
         footnoteDefinition(
           {
-            ...sourceAttrs('43:75', '[^footnote]: Footnote definition'),
+            ...source('[^footnote]: Footnote definition'),
             identifier: 'footnote',
             label: 'footnote',
           },
-          paragraph(sourceAttrs('56:75', 'Footnote definition'), 'Footnote definition'),
+          paragraph(source('Footnote definition'), 'Footnote definition'),
+        ),
+        paragraph(source('Paragraph'), 'Paragraph'),
+      ),
+    },
+    {
+      markdown: `
+<div>div</div>
+`,
+      expectedDoc: doc(div(source('<div>div</div>'), paragraph(source('div'), 'div'))),
+    },
+    {
+      markdown: `
+[![moon](moon.jpg)](/uri)
+`,
+      expectedDoc: doc(
+        paragraph(
+          source('[![moon](moon.jpg)](/uri)'),
+          link(
+            { ...source('[![moon](moon.jpg)](/uri)'), href: '/uri' },
+            image({ ...source('![moon](moon.jpg)'), src: 'moon.jpg', alt: 'moon' }),
+          ),
+        ),
+      ),
+    },
+    {
+      markdown: `
+<del>
+
+*foo*
+
+</del>
+`,
+      expectedDoc: doc(
+        paragraph(
+          source('*foo*'),
+          strike(source('<del>\n\n*foo*\n\n</del>'), italic(source('*foo*'), 'foo')),
+        ),
+      ),
+      expectedMarkdown: '*foo*',
+    },
+    {
+      markdown: `
+~[moon](moon.jpg) and [sun](sun.jpg)~
+`,
+      expectedDoc: doc(
+        paragraph(
+          source('~[moon](moon.jpg) and [sun](sun.jpg)~'),
+          strike(
+            source('~[moon](moon.jpg) and [sun](sun.jpg)~'),
+            link({ ...source('[moon](moon.jpg)'), href: 'moon.jpg' }, 'moon'),
+          ),
+          strike(source('~[moon](moon.jpg) and [sun](sun.jpg)~'), ' and '),
+          strike(
+            source('~[moon](moon.jpg) and [sun](sun.jpg)~'),
+            link({ ...source('[sun](sun.jpg)'), href: 'sun.jpg' }, 'sun'),
+          ),
+        ),
+      ),
+    },
+    {
+      markdown: `
+<del>
+
+**Paragraph 1**
+
+_Paragraph 2_
+
+</del>
+      `,
+      expectedDoc: doc(
+        paragraph(
+          source('**Paragraph 1**'),
+          strike(
+            source('<del>\n\n**Paragraph 1**\n\n_Paragraph 2_\n\n</del>'),
+            bold(source('**Paragraph 1**'), 'Paragraph 1'),
+          ),
+        ),
+        paragraph(
+          source('_Paragraph 2_'),
+          strike(
+            source('<del>\n\n**Paragraph 1**\n\n_Paragraph 2_\n\n</del>'),
+            italic(source('_Paragraph 2_'), 'Paragraph 2'),
+          ),
+        ),
+      ),
+      expectedMarkdown: `**Paragraph 1**
+
+_Paragraph 2_`,
+    },
+    /* TODO
+     * Implement proper editing support for HTML comments in the Content Editor
+     * https://gitlab.com/gitlab-org/gitlab/-/issues/342173
+     */
+    {
+      markdown: '<!-- HTML comment -->',
+      expectedDoc: doc(paragraph()),
+      expectedMarkdown: '',
+    },
+    {
+      markdown: `
+<![CDATA[
+function matchwo(a,b)
+{
+  if (a < b && a < 0) then {
+    return 1;
+
+  } else {
+
+    return 0;
+  }
+}
+]]>
+      `,
+      expectedDoc: doc(paragraph()),
+      expectedMarkdown: '',
+    },
+    {
+      markdown: `
+<!-- foo -->*bar*
+*baz*
+      `,
+      expectedDoc: doc(
+        paragraph(source('*bar*'), '*bar*\n'),
+        paragraph(source('*baz*'), italic(source('*baz*'), 'baz')),
+      ),
+      expectedMarkdown: `*bar*
+
+*baz*`,
+    },
+    {
+      markdown: `
+<table><tr><td>
+<pre>
+**Hello**,
+
+_world_.
+</pre>
+</td></tr></table>
+`,
+      expectedDoc: doc(
+        table(
+          source('<table><tr><td>\n<pre>\n**Hello**,\n\n_world_.\n</pre>\n</td></tr></table>'),
+          tableRow(
+            source('<tr><td>\n<pre>\n**Hello**,\n\n_world_.\n</pre>\n</td></tr>'),
+            tableCell(
+              source('<td>\n<pre>\n**Hello**,\n\n_world_.\n</pre>\n</td>'),
+              pre(
+                source('<pre>\n**Hello**,\n\n_world_.\n</pre>'),
+                paragraph(source('**Hello**,'), '**Hello**,\n'),
+                paragraph(source('_world_.\n'), italic(source('_world_'), 'world'), '.\n'),
+              ),
+              paragraph(),
+            ),
+          ),
         ),
-        paragraph(sourceAttrs('77:86', 'Paragraph'), 'Paragraph'),
       ),
     },
   ];
@@ -1002,12 +1084,75 @@ Paragraph
   const runOnly = examples.find((example) => example.only === true);
   const runExamples = runOnly ? [runOnly] : examples;
 
-  it.each(runExamples)('processes %s correctly', async ({ markdown, expectedDoc }) => {
-    const trimmed = markdown.trim();
-    const document = await deserialize(trimmed);
+  it.each(runExamples)(
+    'processes %s correctly',
+    async ({ markdown, expectedDoc, expectedMarkdown }) => {
+      const trimmed = markdown.trim();
+      const document = await deserialize(trimmed);
 
-    expect(expectedDoc).not.toBeFalsy();
-    expect(document.toJSON()).toEqual(expectedDoc.toJSON());
-    expect(serialize(document)).toEqual(trimmed);
-  });
+      expect(expectedDoc).not.toBeFalsy();
+      expect(document.toJSON()).toEqual(expectedDoc.toJSON());
+      expect(serialize(document)).toEqual(expectedMarkdown ?? trimmed);
+    },
+  );
+
+  /**
+   * DISCLAIMER: THIS IS A SECURITY ORIENTED TEST THAT ENSURES
+   * THE CLIENT-SIDE PARSER IGNORES DANGEROUS TAGS THAT ARE NOT
+   * EXPLICITELY SUPPORTED.
+   *
+   * PLEASE CONSIDER THIS INFORMATION WHILE MODIFYING THESE TESTS
+   */
+  it.each([
+    {
+      markdown: `
+<script>
+alert("Hello world")
+</script>
+    `,
+      expectedHtml: '<p></p>',
+    },
+    {
+      markdown: `
+<foo>Hello</foo>
+      `,
+      expectedHtml: '<p></p>',
+    },
+    {
+      markdown: `
+<h1 class="heading-with-class">Header</h1>
+      `,
+      expectedHtml: '<h1>Header</h1>',
+    },
+    {
+      markdown: `
+<a id="link-id">Header</a> and other text
+      `,
+      expectedHtml:
+        '<p><a target="_blank" rel="noopener noreferrer nofollow">Header</a> and other text</p>',
+    },
+    {
+      markdown: `
+<style>
+body {
+  display: none;
+}
+</style>
+      `,
+      expectedHtml: '<p></p>',
+    },
+    {
+      markdown: '<div style="transform">div</div>',
+      expectedHtml: '<div><p>div</p></div>',
+    },
+  ])(
+    'removes unknown tags and unsupported attributes from HTML output',
+    async ({ markdown, expectedHtml }) => {
+      const document = await deserialize(markdown);
+
+      tiptapEditor.commands.setContent(document.toJSON());
+
+      expect(tiptapEditor.getHTML()).toEqual(expectedHtml);
+    },
+  );
 });
diff --git a/spec/frontend/content_editor/render_html_and_json_for_all_examples.js b/spec/frontend/content_editor/render_html_and_json_for_all_examples.js
new file mode 100644
index 00000000000..116a26cf7d5
--- /dev/null
+++ b/spec/frontend/content_editor/render_html_and_json_for_all_examples.js
@@ -0,0 +1,115 @@
+import { DOMSerializer } from 'prosemirror-model';
+// TODO: DRY up duplication with spec/frontend/content_editor/services/markdown_serializer_spec.js
+//  See https://gitlab.com/groups/gitlab-org/-/epics/7719#plan
+import Blockquote from '~/content_editor/extensions/blockquote';
+import Bold from '~/content_editor/extensions/bold';
+import BulletList from '~/content_editor/extensions/bullet_list';
+import Code from '~/content_editor/extensions/code';
+import CodeBlockHighlight from '~/content_editor/extensions/code_block_highlight';
+import DescriptionItem from '~/content_editor/extensions/description_item';
+import DescriptionList from '~/content_editor/extensions/description_list';
+import Details from '~/content_editor/extensions/details';
+import DetailsContent from '~/content_editor/extensions/details_content';
+import Emoji from '~/content_editor/extensions/emoji';
+import Figure from '~/content_editor/extensions/figure';
+import FigureCaption from '~/content_editor/extensions/figure_caption';
+import FootnoteDefinition from '~/content_editor/extensions/footnote_definition';
+import FootnoteReference from '~/content_editor/extensions/footnote_reference';
+import FootnotesSection from '~/content_editor/extensions/footnotes_section';
+import HardBreak from '~/content_editor/extensions/hard_break';
+import Heading from '~/content_editor/extensions/heading';
+import HorizontalRule from '~/content_editor/extensions/horizontal_rule';
+import HTMLNodes from '~/content_editor/extensions/html_nodes';
+import Image from '~/content_editor/extensions/image';
+import InlineDiff from '~/content_editor/extensions/inline_diff';
+import Italic from '~/content_editor/extensions/italic';
+import Link from '~/content_editor/extensions/link';
+import ListItem from '~/content_editor/extensions/list_item';
+import OrderedList from '~/content_editor/extensions/ordered_list';
+import Strike from '~/content_editor/extensions/strike';
+import Table from '~/content_editor/extensions/table';
+import TableCell from '~/content_editor/extensions/table_cell';
+import TableHeader from '~/content_editor/extensions/table_header';
+import TableRow from '~/content_editor/extensions/table_row';
+import TaskItem from '~/content_editor/extensions/task_item';
+import TaskList from '~/content_editor/extensions/task_list';
+import createMarkdownDeserializer from '~/content_editor/services/remark_markdown_deserializer';
+import { createTestEditor } from 'jest/content_editor/test_utils';
+
+const tiptapEditor = createTestEditor({
+  extensions: [
+    Blockquote,
+    Bold,
+    BulletList,
+    Code,
+    CodeBlockHighlight,
+    DescriptionItem,
+    DescriptionList,
+    Details,
+    DetailsContent,
+    Emoji,
+    FootnoteDefinition,
+    FootnoteReference,
+    FootnotesSection,
+    Figure,
+    FigureCaption,
+    HardBreak,
+    Heading,
+    HorizontalRule,
+    ...HTMLNodes,
+    Image,
+    InlineDiff,
+    Italic,
+    Link,
+    ListItem,
+    OrderedList,
+    Strike,
+    Table,
+    TableCell,
+    TableHeader,
+    TableRow,
+    TaskItem,
+    TaskList,
+  ],
+});
+
+export const IMPLEMENTATION_ERROR_MSG = 'Error - check implementation';
+
+async function renderMarkdownToHTMLAndJSON(markdown, schema, deserializer) {
+  let prosemirrorDocument;
+  try {
+    const { document } = await deserializer.deserialize({ schema, markdown });
+    prosemirrorDocument = document;
+  } catch (e) {
+    const errorMsg = `${IMPLEMENTATION_ERROR_MSG}:\n${e.message}`;
+    return {
+      html: errorMsg,
+      json: errorMsg,
+    };
+  }
+
+  const documentFragment = DOMSerializer.fromSchema(schema).serializeFragment(
+    prosemirrorDocument.content,
+  );
+  const htmlString = Array.from(documentFragment.children)
+    .map((el) => el.outerHTML)
+    .join('\n');
+
+  const json = prosemirrorDocument.toJSON();
+  const jsonString = JSON.stringify(json, null, 2);
+  return { html: htmlString, json: jsonString };
+}
+
+export function renderHtmlAndJsonForAllExamples(markdownExamples) {
+  const { schema } = tiptapEditor;
+  const deserializer = createMarkdownDeserializer();
+  const exampleNames = Object.keys(markdownExamples);
+
+  return exampleNames.reduce(async (promisedExamples, exampleName) => {
+    const markdown = markdownExamples[exampleName];
+    const htmlAndJson = await renderMarkdownToHTMLAndJSON(markdown, schema, deserializer);
+    const examples = await promisedExamples;
+    examples[exampleName] = htmlAndJson;
+    return examples;
+  }, Promise.resolve({}));
+}
diff --git a/spec/frontend/content_editor/services/markdown_serializer_spec.js b/spec/frontend/content_editor/services/markdown_serializer_spec.js
index 13e9efaea59..509cda3046c 100644
--- a/spec/frontend/content_editor/services/markdown_serializer_spec.js
+++ b/spec/frontend/content_editor/services/markdown_serializer_spec.js
@@ -7,7 +7,6 @@ import DescriptionItem from '~/content_editor/extensions/description_item';
 import DescriptionList from '~/content_editor/extensions/description_list';
 import Details from '~/content_editor/extensions/details';
 import DetailsContent from '~/content_editor/extensions/details_content';
-import Division from '~/content_editor/extensions/division';
 import Emoji from '~/content_editor/extensions/emoji';
 import Figure from '~/content_editor/extensions/figure';
 import FigureCaption from '~/content_editor/extensions/figure_caption';
@@ -16,6 +15,8 @@ import FootnoteReference from '~/content_editor/extensions/footnote_reference';
 import HardBreak from '~/content_editor/extensions/hard_break';
 import Heading from '~/content_editor/extensions/heading';
 import HorizontalRule from '~/content_editor/extensions/horizontal_rule';
+import HTMLMarks from '~/content_editor/extensions/html_marks';
+import HTMLNodes from '~/content_editor/extensions/html_nodes';
 import Image from '~/content_editor/extensions/image';
 import InlineDiff from '~/content_editor/extensions/inline_diff';
 import Italic from '~/content_editor/extensions/italic';
@@ -48,7 +49,6 @@ const tiptapEditor = createTestEditor({
     DescriptionList,
     Details,
     DetailsContent,
-    Division,
     Emoji,
     FootnoteDefinition,
     FootnoteReference,
@@ -71,6 +71,8 @@ const tiptapEditor = createTestEditor({
     TableRow,
     TaskItem,
     TaskList,
+    ...HTMLMarks,
+    ...HTMLNodes,
   ],
 });
 
@@ -84,7 +86,7 @@ const {
     codeBlock,
     details,
     detailsContent,
-    division,
+    div,
     descriptionItem,
     descriptionList,
     emoji,
@@ -120,7 +122,6 @@ const {
     codeBlock: { nodeType: CodeBlockHighlight.name },
     details: { nodeType: Details.name },
     detailsContent: { nodeType: DetailsContent.name },
-    division: { nodeType: Division.name },
     descriptionItem: { nodeType: DescriptionItem.name },
     descriptionList: { nodeType: DescriptionList.name },
     emoji: { markType: Emoji.name },
@@ -145,6 +146,13 @@ const {
     tableRow: { nodeType: TableRow.name },
     taskItem: { nodeType: TaskItem.name },
     taskList: { nodeType: TaskList.name },
+    ...HTMLNodes.reduce(
+      (builders, htmlNode) => ({
+        ...builders,
+        [htmlNode.name]: { nodeType: htmlNode.name },
+      }),
+      {},
+    ),
   },
 });
 
@@ -725,8 +733,8 @@ _inception_
   it('correctly renders div', () => {
     expect(
       serialize(
-        division(paragraph('just a paragraph in a div')),
-        division(paragraph('just some ', bold('styled'), ' ', italic('content'), ' in a div')),
+        div(paragraph('just a paragraph in a div')),
+        div(paragraph('just some ', bold('styled'), ' ', italic('content'), ' in a div')),
       ),
     ).toBe(
       '<div>just a paragraph in a div</div>\n<div>\n\njust some **styled** _content_ in a div\n\n</div>',
@@ -1169,7 +1177,7 @@ Oranges are orange [^1]
   };
 
   it.each`
-    mark          | content                                    | modifiedContent                                                               | editAction
+    mark          | markdown                                   | modifiedMarkdown                                                              | editAction
     ${'bold'}     | ${'**bold**'}                              | ${'**bold modified**'}                                                        | ${defaultEditAction}
     ${'bold'}     | ${'__bold__'}                              | ${'__bold modified__'}                                                        | ${defaultEditAction}
     ${'bold'}     | ${'<strong>bold</strong>'}                 | ${'<strong>bold modified</strong>'}                                           | ${defaultEditAction}
@@ -1205,10 +1213,10 @@ Oranges are orange [^1]
     ${'taskList'} | ${'2) [x] task list item'}                 | ${'2) [x] task list item modified'}                                           | ${defaultEditAction}
   `(
     'preserves original $mark syntax when sourceMarkdown is available for $content',
-    async ({ content, modifiedContent, editAction }) => {
+    async ({ markdown, modifiedMarkdown, editAction }) => {
       const { document } = await remarkMarkdownDeserializer().deserialize({
         schema: tiptapEditor.schema,
-        content,
+        markdown,
       });
 
       editAction(document);
@@ -1218,7 +1226,7 @@ Oranges are orange [^1]
         doc: tiptapEditor.state.doc,
       });
 
-      expect(serialized).toEqual(modifiedContent);
+      expect(serialized).toEqual(modifiedMarkdown);
     },
   );
 });
diff --git a/spec/frontend/content_editor/services/markdown_sourcemap_spec.js b/spec/frontend/content_editor/services/markdown_sourcemap_spec.js
index 8a304c73163..2efc73ddef8 100644
--- a/spec/frontend/content_editor/services/markdown_sourcemap_spec.js
+++ b/spec/frontend/content_editor/services/markdown_sourcemap_spec.js
@@ -77,7 +77,7 @@ describe('content_editor/services/markdown_sourcemap', () => {
       render: () => BULLET_LIST_HTML,
     }).deserialize({
       schema: tiptapEditor.schema,
-      content: BULLET_LIST_MARKDOWN,
+      markdown: BULLET_LIST_MARKDOWN,
     });
 
     const expected = doc(
diff --git a/spec/frontend/custom_metrics/components/custom_metrics_form_fields_spec.js b/spec/frontend/custom_metrics/components/custom_metrics_form_fields_spec.js
index 2001f5c1441..bd4ed950f9d 100644
--- a/spec/frontend/custom_metrics/components/custom_metrics_form_fields_spec.js
+++ b/spec/frontend/custom_metrics/components/custom_metrics_form_fields_spec.js
@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
@@ -148,6 +149,7 @@ describe('custom metrics form fields component', () => {
       it('expect loading message to display', async () => {
         const queryInput = wrapper.find(`input[name="${queryInputName}"]`);
         queryInput.setValue('query');
+        await nextTick();
 
         expect(wrapper.text()).toContain('Validating query');
       });
diff --git a/spec/frontend/cycle_analytics/path_navigation_spec.js b/spec/frontend/cycle_analytics/path_navigation_spec.js
index e8c4ebd3a38..fa9eadbd071 100644
--- a/spec/frontend/cycle_analytics/path_navigation_spec.js
+++ b/spec/frontend/cycle_analytics/path_navigation_spec.js
@@ -85,7 +85,7 @@ describe('Project PathNavigation', () => {
           const result = findPathNavigationTitles();
           transformedProjectStagePathData.forEach(({ title, metric }, index) => {
             expect(result[index]).toContain(title);
-            expect(result[index]).toContain(metric);
+            expect(result[index]).toContain(metric.toString());
           });
         });
 
diff --git a/spec/frontend/cycle_analytics/value_stream_metrics_spec.js b/spec/frontend/cycle_analytics/value_stream_metrics_spec.js
index df86b10cba3..23e41f35b00 100644
--- a/spec/frontend/cycle_analytics/value_stream_metrics_spec.js
+++ b/spec/frontend/cycle_analytics/value_stream_metrics_spec.js
@@ -55,10 +55,10 @@ describe('ValueStreamMetrics', () => {
   describe('with successful requests', () => {
     beforeEach(() => {
       mockGetValueStreamSummaryMetrics = jest.fn().mockResolvedValue({ data: metricsData });
-      wrapper = createComponent();
     });
 
     it('will display a loader with pending requests', async () => {
+      wrapper = createComponent();
       await nextTick();
 
       expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(true);
@@ -66,6 +66,7 @@ describe('ValueStreamMetrics', () => {
 
     describe('with data loaded', () => {
       beforeEach(async () => {
+        wrapper = createComponent();
         await waitForPromises();
       });
 
diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js
index 40968d9204a..f13796138bd 100644
--- a/spec/frontend/design_management/components/design_sidebar_spec.js
+++ b/spec/frontend/design_management/components/design_sidebar_spec.js
@@ -1,7 +1,6 @@
-import { GlCollapse, GlPopover } from '@gitlab/ui';
+import { GlAccordionItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import Cookies from '~/lib/utils/cookies';
 import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
 import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue';
 import DesignSidebar from '~/design_management/components/design_sidebar.vue';
@@ -27,8 +26,6 @@ const $route = {
   },
 };
 
-const cookieKey = 'hide_design_resolved_comments_popover';
-
 const mutate = jest.fn().mockResolvedValue();
 
 describe('Design management design sidebar component', () => {
@@ -40,9 +37,7 @@ describe('Design management design sidebar component', () => {
   const findUnresolvedDiscussions = () => wrapper.findAll('[data-testid="unresolved-discussion"]');
   const findResolvedDiscussions = () => wrapper.findAll('[data-testid="resolved-discussion"]');
   const findParticipants = () => wrapper.find(Participants);
-  const findCollapsible = () => wrapper.find(GlCollapse);
-  const findToggleResolvedCommentsButton = () => wrapper.find('[data-testid="resolved-comments"]');
-  const findPopover = () => wrapper.find(GlPopover);
+  const findResolvedCommentsToggle = () => wrapper.find(GlAccordionItem);
   const findNewDiscussionDisclaimer = () =>
     wrapper.find('[data-testid="new-discussion-disclaimer"]');
 
@@ -61,7 +56,6 @@ describe('Design management design sidebar component', () => {
           mutate,
         },
       },
-      stubs: { GlPopover },
       provide: {
         registerPath: '/users/sign_up?redirect_to_referer=yes',
         signInPath: '/users/sign_in?redirect_to_referer=yes',
@@ -119,7 +113,6 @@ describe('Design management design sidebar component', () => {
 
   describe('when has discussions', () => {
     beforeEach(() => {
-      Cookies.set(cookieKey, true);
       createComponent();
     });
 
@@ -131,26 +124,23 @@ describe('Design management design sidebar component', () => {
       expect(findResolvedDiscussions()).toHaveLength(1);
     });
 
-    it('has resolved comments collapsible collapsed', () => {
-      expect(findCollapsible().attributes('visible')).toBeUndefined();
+    it('has resolved comments accordion item collapsed', () => {
+      expect(findResolvedCommentsToggle().props('visible')).toBe(false);
     });
 
-    it('emits toggleResolveComments event on resolve comments button click', () => {
-      findToggleResolvedCommentsButton().vm.$emit('click');
+    it('emits toggleResolveComments event on resolve comments button click', async () => {
+      findResolvedCommentsToggle().vm.$emit('input', true);
+      await nextTick();
       expect(wrapper.emitted('toggleResolvedComments')).toHaveLength(1);
     });
 
-    it('opens a collapsible when resolvedDiscussionsExpanded prop changes to true', async () => {
-      expect(findCollapsible().attributes('visible')).toBeUndefined();
+    it('opens the accordion item when resolvedDiscussionsExpanded prop changes to true', async () => {
+      expect(findResolvedCommentsToggle().props('visible')).toBe(false);
       wrapper.setProps({
         resolvedDiscussionsExpanded: true,
       });
       await nextTick();
-      expect(findCollapsible().attributes('visible')).toBe('true');
-    });
-
-    it('does not popover about resolved comments', () => {
-      expect(findPopover().exists()).toBe(false);
+      expect(findResolvedCommentsToggle().props('visible')).toBe(true);
     });
 
     it('sends a mutation to set an active discussion when clicking on a discussion', () => {
@@ -232,36 +222,6 @@ describe('Design management design sidebar component', () => {
     });
   });
 
-  describe('when showing resolved discussions for the first time', () => {
-    beforeEach(() => {
-      Cookies.set(cookieKey, false);
-      createComponent();
-    });
-
-    it('renders a popover if we show resolved comments collapsible for the first time', () => {
-      expect(findPopover().exists()).toBe(true);
-    });
-
-    it('scrolls to resolved threads link', () => {
-      expect(scrollIntoViewMock).toHaveBeenCalled();
-    });
-
-    it('dismisses a popover on the outside click', async () => {
-      wrapper.trigger('click');
-      await nextTick();
-      expect(findPopover().exists()).toBe(false);
-    });
-
-    it(`sets a ${cookieKey} cookie on clicking outside the popover`, () => {
-      jest.spyOn(Cookies, 'set');
-      wrapper.trigger('click');
-      expect(Cookies.set).toHaveBeenCalledWith(cookieKey, 'true', {
-        expires: 365 * 10,
-        secure: false,
-      });
-    });
-  });
-
   describe('when user is not logged in', () => {
     const findDesignNoteSignedOut = () => wrapper.findComponent(DesignNoteSignedOut);
 
@@ -292,7 +252,6 @@ describe('Design management design sidebar component', () => {
 
     describe('design has discussions', () => {
       beforeEach(() => {
-        Cookies.set(cookieKey, true);
         createComponent();
       });
 
diff --git a/spec/frontend/design_management/components/image_spec.js b/spec/frontend/design_management/components/image_spec.js
index e27b2bc9fa5..65ee0ae6238 100644
--- a/spec/frontend/design_management/components/image_spec.js
+++ b/spec/frontend/design_management/components/image_spec.js
@@ -1,6 +1,7 @@
 import { GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import { stubPerformanceWebAPI } from 'helpers/performance';
 import DesignImage from '~/design_management/components/image.vue';
 
 describe('Design management large image component', () => {
@@ -15,6 +16,10 @@ describe('Design management large image component', () => {
     wrapper.setData(data);
   }
 
+  beforeEach(() => {
+    stubPerformanceWebAPI();
+  });
+
   afterEach(() => {
     wrapper.destroy();
   });
diff --git a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap
index be736184e60..9997f02cd01 100644
--- a/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap
@@ -7,6 +7,8 @@ exports[`Design management index page designs renders error 1`] = `
 >
   <!---->
    
+  <!---->
+   
   <div
     class="gl-mt-6"
   >
@@ -39,6 +41,8 @@ exports[`Design management index page designs renders loading icon 1`] = `
 >
   <!---->
    
+  <!---->
+   
   <div
     class="gl-mt-6"
   >
diff --git a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
index 0f2857821ea..3177a5e016c 100644
--- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
@@ -88,57 +88,26 @@ exports[`Design management design index page renders design index 1`] = `
       signinpath=""
     />
      
-    <gl-button-stub
-      buttontextclasses=""
-      category="primary"
-      class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4"
-      data-testid="resolved-comments"
-      icon="chevron-right"
-      id="resolved-comments"
-      size="medium"
-      variant="link"
+    <gl-accordion-stub
+      class="gl-mb-5"
+      headerlevel="3"
     >
-      Resolved Comments (1)
-      
-    </gl-button-stub>
-     
-    <gl-popover-stub
-      container="popovercontainer"
-      cssclasses=""
-      placement="top"
-      show="true"
-      target="resolved-comments"
-      title="Resolved Comments"
-    >
-      <p>
-        
-          Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below
-        
-      </p>
-       
-      <a
-        href="https://docs.gitlab.com/ee/user/project/issues/design_management.html#resolve-design-threads"
-        rel="noopener noreferrer"
-        target="_blank"
+      <gl-accordion-item-stub
+        headerclass="gl-mb-5!"
+        title="Resolved Comments (1)"
       >
-        Learn more about resolving comments
-      </a>
-    </gl-popover-stub>
-     
-    <gl-collapse-stub
-      class="gl-mt-3"
-    >
-      <design-discussion-stub
-        data-testid="resolved-discussion"
-        designid="gid::/gitlab/Design/1"
-        discussion="[object Object]"
-        discussionwithopenform=""
-        markdownpreviewpath="/project-path/preview_markdown?target_type=Issue"
-        noteableid="gid::/gitlab/Design/1"
-        registerpath=""
-        signinpath=""
-      />
-    </gl-collapse-stub>
+        <design-discussion-stub
+          data-testid="resolved-discussion"
+          designid="gid::/gitlab/Design/1"
+          discussion="[object Object]"
+          discussionwithopenform=""
+          markdownpreviewpath="/project-path/preview_markdown?target_type=Issue"
+          noteableid="gid::/gitlab/Design/1"
+          registerpath=""
+          signinpath=""
+        />
+      </gl-accordion-item-stub>
+    </gl-accordion-stub>
      
   </div>
 </div>
diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js
index 087655d10f7..21be7bd148b 100644
--- a/spec/frontend/design_management/pages/index_spec.js
+++ b/spec/frontend/design_management/pages/index_spec.js
@@ -1,5 +1,4 @@
 import { GlEmptyState } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 
 import VueApollo, { ApolloMutation } from 'vue-apollo';
@@ -9,6 +8,7 @@ import VueDraggable from 'vuedraggable';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
 import DeleteButton from '~/design_management/components/delete_button.vue';
@@ -23,6 +23,7 @@ import * as utils from '~/design_management/utils/design_management_utils';
 import {
   EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE,
   EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE,
+  UPLOAD_DESIGN_ERROR,
 } from '~/design_management/utils/error_messages';
 import {
   DESIGN_TRACKING_PAGE_NAME,
@@ -101,20 +102,20 @@ describe('Design management index page', () => {
   let moveDesignHandler;
 
   const findDesignCheckboxes = () => wrapper.findAll('.design-checkbox');
-  const findSelectAllButton = () => wrapper.find('[data-testid="select-all-designs-button"');
-  const findToolbar = () => wrapper.find('.qa-selector-toolbar');
-  const findDesignCollectionIsCopying = () =>
-    wrapper.find('[data-testid="design-collection-is-copying"');
-  const findDeleteButton = () => wrapper.find(DeleteButton);
-  const findDropzone = () => wrapper.findAll(DesignDropzone).at(0);
+  const findSelectAllButton = () => wrapper.findByTestId('select-all-designs-button');
+  const findToolbar = () => wrapper.findByTestId('design-selector-toolbar');
+  const findDesignCollectionIsCopying = () => wrapper.findByTestId('design-collection-is-copying');
+  const findDeleteButton = () => wrapper.findComponent(DeleteButton);
+  const findDropzone = () => wrapper.findAllComponents(DesignDropzone).at(0);
   const dropzoneClasses = () => findDropzone().classes();
-  const findDropzoneWrapper = () => wrapper.find('[data-testid="design-dropzone-wrapper"]');
-  const findFirstDropzoneWithDesign = () => wrapper.findAll(DesignDropzone).at(1);
-  const findDesignsWrapper = () => wrapper.find('[data-testid="designs-root"]');
+  const findDropzoneWrapper = () => wrapper.findByTestId('design-dropzone-wrapper');
+  const findFirstDropzoneWithDesign = () => wrapper.findAllComponents(DesignDropzone).at(1);
+  const findDesignsWrapper = () => wrapper.findByTestId('designs-root');
   const findDesigns = () => wrapper.findAll(Design);
   const draggableAttributes = () => wrapper.find(VueDraggable).vm.$attrs;
-  const findDesignUploadButton = () => wrapper.find('[data-testid="design-upload-button"]');
-  const findDesignToolbarWrapper = () => wrapper.find('[data-testid="design-toolbar-wrapper"]');
+  const findDesignUploadButton = () => wrapper.findByTestId('design-upload-button');
+  const findDesignToolbarWrapper = () => wrapper.findByTestId('design-toolbar-wrapper');
+  const findDesignUpdateAlert = () => wrapper.findByTestId('design-update-alert');
 
   async function moveDesigns(localWrapper) {
     await waitForPromises();
@@ -149,7 +150,7 @@ describe('Design management index page', () => {
       mutate,
     };
 
-    wrapper = shallowMount(Index, {
+    wrapper = shallowMountExtended(Index, {
       data() {
         return {
           allVersions,
@@ -185,7 +186,7 @@ describe('Design management index page', () => {
     ];
 
     fakeApollo = createMockApollo(requestHandlers, {}, { addTypename: true });
-    wrapper = shallowMount(Index, {
+    wrapper = shallowMountExtended(Index, {
       apolloProvider: fakeApollo,
       router,
       stubs: { VueDraggable },
@@ -412,7 +413,8 @@ describe('Design management index page', () => {
       await nextTick();
       expect(wrapper.vm.filesToBeSaved).toEqual([]);
       expect(wrapper.vm.isSaving).toBeFalsy();
-      expect(createFlash).toHaveBeenCalled();
+      expect(findDesignUpdateAlert().exists()).toBe(true);
+      expect(findDesignUpdateAlert().text()).toBe(UPLOAD_DESIGN_ERROR);
     });
 
     it('does not call mutation if createDesign is false', () => {
@@ -431,19 +433,23 @@ describe('Design management index page', () => {
 
         wrapper.vm.onUploadDesign(new Array(MAXIMUM_FILE_UPLOAD_LIMIT).fill(mockDesigns[0]));
 
-        expect(createFlash).not.toHaveBeenCalled();
+        expect(findDesignUpdateAlert().exists()).toBe(false);
       });
 
-      it('warns when too many files are uploaded', () => {
+      it('warns when too many files are uploaded', async () => {
         createComponent();
 
         wrapper.vm.onUploadDesign(new Array(MAXIMUM_FILE_UPLOAD_LIMIT + 1).fill(mockDesigns[0]));
+        await nextTick();
 
-        expect(createFlash).toHaveBeenCalled();
+        expect(findDesignUpdateAlert().exists()).toBe(true);
+        expect(findDesignUpdateAlert().text()).toBe(
+          'The maximum number of designs allowed to be uploaded is 10. Please try again.',
+        );
       });
     });
 
-    it('flashes warning if designs are skipped', async () => {
+    it('displays warning if designs are skipped', async () => {
       createComponent({
         mockMutate: () =>
           Promise.resolve({
@@ -458,11 +464,8 @@ describe('Design management index page', () => {
       ]);
 
       await uploadDesign;
-      expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith({
-        message: 'Upload skipped. test.jpg did not change.',
-        types: 'warning',
-      });
+      expect(findDesignUpdateAlert().exists()).toBe(true);
+      expect(findDesignUpdateAlert().text()).toBe('Upload skipped. test.jpg did not change.');
     });
 
     describe('dragging onto an existing design', () => {
@@ -495,13 +498,17 @@ describe('Design management index page', () => {
         description             | eventPayload                              | message
         ${'> 1 file'}           | ${[{ name: 'test' }, { name: 'test-2' }]} | ${EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE}
         ${'different filename'} | ${[{ name: 'wrong-name' }]}               | ${EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE}
-      `('calls createFlash when upload has $description', ({ eventPayload, message }) => {
-        const designDropzone = findFirstDropzoneWithDesign();
-        designDropzone.vm.$emit('change', eventPayload);
-
-        expect(createFlash).toHaveBeenCalledTimes(1);
-        expect(createFlash).toHaveBeenCalledWith({ message });
-      });
+      `(
+        'displays GlAlert component when upload has $description',
+        async ({ eventPayload, message }) => {
+          expect(findDesignUpdateAlert().exists()).toBe(false);
+          const designDropzone = findFirstDropzoneWithDesign();
+          await designDropzone.vm.$emit('change', eventPayload);
+
+          expect(findDesignUpdateAlert().exists()).toBe(true);
+          expect(findDesignUpdateAlert().text()).toBe(message);
+        },
+      );
     });
 
     describe('tracking', () => {
@@ -804,7 +811,7 @@ describe('Design management index page', () => {
       expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' });
     });
 
-    it('displays flash if mutation had a non-recoverable error', async () => {
+    it('displays alert if mutation had a non-recoverable error', async () => {
       createComponentWithApollo({
         moveHandler: jest.fn().mockRejectedValue('Error'),
       });
@@ -812,9 +819,10 @@ describe('Design management index page', () => {
       await moveDesigns(wrapper);
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({
-        message: 'Something went wrong when reordering designs. Please try again',
-      });
+      expect(findDesignUpdateAlert().exists()).toBe(true);
+      expect(findDesignUpdateAlert().text()).toBe(
+        'Something went wrong when reordering designs. Please try again',
+      );
     });
   });
 });
diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js
index 76e4a944d87..96f2ac1692c 100644
--- a/spec/frontend/diffs/components/app_spec.js
+++ b/spec/frontend/diffs/components/app_spec.js
@@ -18,6 +18,7 @@ import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue';
 
 import axios from '~/lib/utils/axios_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
+import { stubPerformanceWebAPI } from 'helpers/performance';
 import createDiffsStore from '../create_diffs_store';
 import diffsMockData from '../mock_data/merge_request_diffs';
 
@@ -79,6 +80,7 @@ describe('diffs/components/app', () => {
   }
 
   beforeEach(() => {
+    stubPerformanceWebAPI();
     // setup globals (needed for component to mount :/)
     window.mrTabs = {
       resetViewContainer: jest.fn(),
diff --git a/spec/frontend/diffs/components/collapsed_files_warning_spec.js b/spec/frontend/diffs/components/collapsed_files_warning_spec.js
index 8cc342e45a7..cc4f13ab0cf 100644
--- a/spec/frontend/diffs/components/collapsed_files_warning_spec.js
+++ b/spec/frontend/diffs/components/collapsed_files_warning_spec.js
@@ -6,7 +6,7 @@ import { EVT_EXPAND_ALL_FILES } from '~/diffs/constants';
 import eventHub from '~/diffs/event_hub';
 import createStore from '~/diffs/store/modules';
 
-import file from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 const propsData = {
   limited: true,
@@ -15,7 +15,7 @@ const propsData = {
 };
 
 async function files(store, count) {
-  const copies = Array(count).fill(file);
+  const copies = Array(count).fill(getDiffFileMock());
   store.state.diffs.diffFiles.push(...copies);
 
   await nextTick();
diff --git a/spec/frontend/diffs/components/diff_code_quality_spec.js b/spec/frontend/diffs/components/diff_code_quality_spec.js
new file mode 100644
index 00000000000..81a817c47dc
--- /dev/null
+++ b/spec/frontend/diffs/components/diff_code_quality_spec.js
@@ -0,0 +1,66 @@
+import { GlIcon } from '@gitlab/ui';
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import DiffCodeQuality from '~/diffs/components/diff_code_quality.vue';
+import { SEVERITY_CLASSES, SEVERITY_ICONS } from '~/reports/codequality_report/constants';
+import { multipleFindingsArr } from '../mock_data/diff_code_quality';
+
+let wrapper;
+
+const findIcon = () => wrapper.findComponent(GlIcon);
+
+describe('DiffCodeQuality', () => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const createWrapper = (codeQuality, mountFunction = mountExtended) => {
+    return mountFunction(DiffCodeQuality, {
+      propsData: {
+        expandedLines: [],
+        line: 1,
+        codeQuality,
+      },
+    });
+  };
+
+  it('hides details and throws hideCodeQualityFindings event on close click', async () => {
+    wrapper = createWrapper(multipleFindingsArr);
+    expect(wrapper.findByTestId('diff-codequality').exists()).toBe(true);
+
+    await wrapper.findByTestId('diff-codequality-close').trigger('click');
+
+    expect(wrapper.emitted('hideCodeQualityFindings').length).toBe(1);
+    expect(wrapper.emitted().hideCodeQualityFindings[0][0]).toBe(wrapper.props('line'));
+  });
+
+  it('renders correct amount of list items for codequality array and their description', async () => {
+    wrapper = createWrapper(multipleFindingsArr);
+    const listItems = wrapper.findAll('li');
+
+    expect(wrapper.findAll('li').length).toBe(3);
+
+    listItems.wrappers.map((e, i) => {
+      return expect(e.text()).toEqual(multipleFindingsArr[i].description);
+    });
+  });
+
+  it.each`
+    severity
+    ${'info'}
+    ${'minor'}
+    ${'major'}
+    ${'critical'}
+    ${'blocker'}
+    ${'unknown'}
+  `('shows icon for $severity degradation', ({ severity }) => {
+    wrapper = createWrapper([{ severity }], shallowMountExtended);
+
+    expect(findIcon().exists()).toBe(true);
+
+    expect(findIcon().attributes()).toMatchObject({
+      class: `codequality-severity-icon ${SEVERITY_CLASSES[severity]}`,
+      name: SEVERITY_ICONS[severity],
+      size: '12',
+    });
+  });
+});
diff --git a/spec/frontend/diffs/components/diff_content_spec.js b/spec/frontend/diffs/components/diff_content_spec.js
index 7d2afe105a5..6844e6e497a 100644
--- a/spec/frontend/diffs/components/diff_content_spec.js
+++ b/spec/frontend/diffs/components/diff_content_spec.js
@@ -10,7 +10,7 @@ import { diffViewerModes } from '~/ide/constants';
 import NoteForm from '~/notes/components/note_form.vue';
 import NoPreviewViewer from '~/vue_shared/components/diff_viewer/viewers/no_preview.vue';
 import NotDiffableViewer from '~/vue_shared/components/diff_viewer/viewers/not_diffable.vue';
-import diffFileMockData from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 Vue.use(Vuex);
 
@@ -28,7 +28,7 @@ describe('DiffContent', () => {
   const getCommentFormForDiffFileGetterMock = jest.fn();
 
   const defaultProps = {
-    diffFile: JSON.parse(JSON.stringify(diffFileMockData)),
+    diffFile: getDiffFileMock(),
   };
 
   const createComponent = ({ props, state, provide } = {}) => {
@@ -70,7 +70,7 @@ describe('DiffContent', () => {
             isInlineView: isInlineViewGetterMock,
             isParallelView: isParallelViewGetterMock,
             getCommentFormForDiffFile: getCommentFormForDiffFileGetterMock,
-            diffLines: () => () => [...diffFileMockData.parallel_diff_lines],
+            diffLines: () => () => [...getDiffFileMock().parallel_diff_lines],
             fileLineCodequality: () => () => [],
           },
           actions: {
diff --git a/spec/frontend/diffs/components/diff_expansion_cell_spec.js b/spec/frontend/diffs/components/diff_expansion_cell_spec.js
index 5ff0728b358..34bb73ccf26 100644
--- a/spec/frontend/diffs/components/diff_expansion_cell_spec.js
+++ b/spec/frontend/diffs/components/diff_expansion_cell_spec.js
@@ -1,10 +1,9 @@
 import { mount } from '@vue/test-utils';
-import { cloneDeep } from 'lodash';
 import DiffExpansionCell from '~/diffs/components/diff_expansion_cell.vue';
 import { INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
 import { getPreviousLineIndex } from '~/diffs/store/utils';
 import { createStore } from '~/mr_notes/stores';
-import diffFileMockData from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 const EXPAND_UP_CLASS = '.js-unfold';
 const EXPAND_DOWN_CLASS = '.js-unfold-down';
@@ -26,7 +25,7 @@ function makeLoadMoreLinesPayload({
   isExpandDown = false,
 }) {
   return {
-    endpoint: diffFileMockData.context_lines_path,
+    endpoint: getDiffFileMock().context_lines_path,
     params: {
       since: sinceLine,
       to: toLine,
@@ -57,7 +56,7 @@ describe('DiffExpansionCell', () => {
   let store;
 
   beforeEach(() => {
-    mockFile = cloneDeep(diffFileMockData);
+    mockFile = getDiffFileMock();
     mockLine = getLine(mockFile, INLINE_DIFF_VIEW_TYPE, 8);
     store = createStore();
     store.state.diffs.diffFiles = [mockFile];
@@ -117,102 +116,102 @@ describe('DiffExpansionCell', () => {
   });
 
   describe('any row', () => {
-    [
-      { diffViewType: INLINE_DIFF_VIEW_TYPE, lineIndex: 8, file: cloneDeep(diffFileMockData) },
-    ].forEach(({ diffViewType, file, lineIndex }) => {
-      describe(`with diffViewType (${diffViewType})`, () => {
-        beforeEach(() => {
-          mockLine = getLine(mockFile, diffViewType, lineIndex);
-          store.state.diffs.diffFiles = [{ ...mockFile, ...file }];
-          store.state.diffs.diffViewType = diffViewType;
-        });
-
-        it('does not initially dispatch anything', () => {
-          expect(store.dispatch).not.toHaveBeenCalled();
-        });
-
-        it('on expand all clicked, dispatch loadMoreLines', () => {
-          const oldLineNumber = mockLine.meta_data.old_pos;
-          const newLineNumber = mockLine.meta_data.new_pos;
-          const previousIndex = getPreviousLineIndex(mockFile, {
-            oldLineNumber,
-            newLineNumber,
+    [{ diffViewType: INLINE_DIFF_VIEW_TYPE, lineIndex: 8, file: getDiffFileMock() }].forEach(
+      ({ diffViewType, file, lineIndex }) => {
+        describe(`with diffViewType (${diffViewType})`, () => {
+          beforeEach(() => {
+            mockLine = getLine(mockFile, diffViewType, lineIndex);
+            store.state.diffs.diffFiles = [{ ...mockFile, ...file }];
+            store.state.diffs.diffViewType = diffViewType;
           });
 
-          const wrapper = createComponent({ file, lineCountBetween: 10 });
-
-          findExpandAll(wrapper).trigger('click');
+          it('does not initially dispatch anything', () => {
+            expect(store.dispatch).not.toHaveBeenCalled();
+          });
 
-          expect(store.dispatch).toHaveBeenCalledWith(
-            'diffs/loadMoreLines',
-            makeLoadMoreLinesPayload({
-              fileHash: mockFile.file_hash,
-              toLine: newLineNumber - 1,
-              sinceLine: previousIndex,
+          it('on expand all clicked, dispatch loadMoreLines', () => {
+            const oldLineNumber = mockLine.meta_data.old_pos;
+            const newLineNumber = mockLine.meta_data.new_pos;
+            const previousIndex = getPreviousLineIndex(mockFile, {
               oldLineNumber,
-            }),
-          );
-        });
+              newLineNumber,
+            });
+
+            const wrapper = createComponent({ file, lineCountBetween: 10 });
+
+            findExpandAll(wrapper).trigger('click');
+
+            expect(store.dispatch).toHaveBeenCalledWith(
+              'diffs/loadMoreLines',
+              makeLoadMoreLinesPayload({
+                fileHash: mockFile.file_hash,
+                toLine: newLineNumber - 1,
+                sinceLine: previousIndex,
+                oldLineNumber,
+              }),
+            );
+          });
 
-        it('on expand up clicked, dispatch loadMoreLines', () => {
-          mockLine.meta_data.old_pos = 200;
-          mockLine.meta_data.new_pos = 200;
+          it('on expand up clicked, dispatch loadMoreLines', () => {
+            mockLine.meta_data.old_pos = 200;
+            mockLine.meta_data.new_pos = 200;
 
-          const oldLineNumber = mockLine.meta_data.old_pos;
-          const newLineNumber = mockLine.meta_data.new_pos;
+            const oldLineNumber = mockLine.meta_data.old_pos;
+            const newLineNumber = mockLine.meta_data.new_pos;
 
-          const wrapper = createComponent({ file });
+            const wrapper = createComponent({ file });
 
-          findExpandUp(wrapper).trigger('click');
+            findExpandUp(wrapper).trigger('click');
 
-          expect(store.dispatch).toHaveBeenCalledWith(
-            'diffs/loadMoreLines',
-            makeLoadMoreLinesPayload({
-              fileHash: mockFile.file_hash,
-              toLine: newLineNumber - 1,
-              sinceLine: 179,
-              oldLineNumber,
-              diffViewType,
-              unfold: true,
-            }),
-          );
-        });
+            expect(store.dispatch).toHaveBeenCalledWith(
+              'diffs/loadMoreLines',
+              makeLoadMoreLinesPayload({
+                fileHash: mockFile.file_hash,
+                toLine: newLineNumber - 1,
+                sinceLine: 179,
+                oldLineNumber,
+                diffViewType,
+                unfold: true,
+              }),
+            );
+          });
 
-        it('on expand down clicked, dispatch loadMoreLines', () => {
-          mockFile[lineSources[diffViewType]][lineIndex + 1] = cloneDeep(
-            mockFile[lineSources[diffViewType]][lineIndex],
-          );
-          const nextLine = getLine(mockFile, diffViewType, lineIndex + 1);
-
-          nextLine.meta_data.old_pos = 300;
-          nextLine.meta_data.new_pos = 300;
-          mockLine.meta_data.old_pos = 200;
-          mockLine.meta_data.new_pos = 200;
-
-          const wrapper = createComponent({ file });
-
-          findExpandDown(wrapper).trigger('click');
-
-          expect(store.dispatch).toHaveBeenCalledWith('diffs/loadMoreLines', {
-            endpoint: diffFileMockData.context_lines_path,
-            params: {
-              since: 1,
-              to: 21, // the load amount, plus 1 line
-              offset: 0,
-              unfold: true,
-              bottom: true,
-            },
-            lineNumbers: {
-              // when expanding down, these are based on the previous line, 0, in this case
-              oldLineNumber: 0,
-              newLineNumber: 0,
-            },
-            nextLineNumbers: { old_line: 200, new_line: 200 },
-            fileHash: mockFile.file_hash,
-            isExpandDown: true,
+          it('on expand down clicked, dispatch loadMoreLines', () => {
+            mockFile[lineSources[diffViewType]][lineIndex + 1] = getDiffFileMock()[
+              lineSources[diffViewType]
+            ][lineIndex];
+            const nextLine = getLine(mockFile, diffViewType, lineIndex + 1);
+
+            nextLine.meta_data.old_pos = 300;
+            nextLine.meta_data.new_pos = 300;
+            mockLine.meta_data.old_pos = 200;
+            mockLine.meta_data.new_pos = 200;
+
+            const wrapper = createComponent({ file });
+
+            findExpandDown(wrapper).trigger('click');
+
+            expect(store.dispatch).toHaveBeenCalledWith('diffs/loadMoreLines', {
+              endpoint: mockFile.context_lines_path,
+              params: {
+                since: 1,
+                to: 21, // the load amount, plus 1 line
+                offset: 0,
+                unfold: true,
+                bottom: true,
+              },
+              lineNumbers: {
+                // when expanding down, these are based on the previous line, 0, in this case
+                oldLineNumber: 0,
+                newLineNumber: 0,
+              },
+              nextLineNumbers: { old_line: 200, new_line: 200 },
+              fileHash: mockFile.file_hash,
+              isExpandDown: true,
+            });
           });
         });
-      });
-    });
+      },
+    );
   });
 });
diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js
index a0aa4c784bf..9e8d9e1ca29 100644
--- a/spec/frontend/diffs/components/diff_file_spec.js
+++ b/spec/frontend/diffs/components/diff_file_spec.js
@@ -20,7 +20,7 @@ import axios from '~/lib/utils/axios_utils';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import httpStatus from '~/lib/utils/http_status';
 import createNotesStore from '~/notes/stores/modules';
-import diffFileMockDataReadable from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 import diffFileMockDataUnreadable from '../mock_data/diff_file_unreadable';
 
 jest.mock('~/lib/utils/common_utils');
@@ -106,7 +106,7 @@ const findLoader = (wrapper) => wrapper.find('[data-testid="loader-icon"]');
 const findToggleButton = (wrapper) => wrapper.find('[data-testid="expand-button"]');
 
 const toggleFile = (wrapper) => findDiffHeader(wrapper).vm.$emit('toggleFile');
-const getReadableFile = () => JSON.parse(JSON.stringify(diffFileMockDataReadable));
+const getReadableFile = () => getDiffFileMock();
 const getUnreadableFile = () => JSON.parse(JSON.stringify(diffFileMockDataUnreadable));
 
 const makeFileAutomaticallyCollapsed = (store, index = 0) =>
diff --git a/spec/frontend/diffs/components/diff_line_note_form_spec.js b/spec/frontend/diffs/components/diff_line_note_form_spec.js
index b59043168b8..542d61c4680 100644
--- a/spec/frontend/diffs/components/diff_line_note_form_spec.js
+++ b/spec/frontend/diffs/components/diff_line_note_form_spec.js
@@ -1,200 +1,207 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import Vuex from 'vuex';
+import Autosave from '~/autosave';
 import DiffLineNoteForm from '~/diffs/components/diff_line_note_form.vue';
-import { createStore } from '~/mr_notes/stores';
+import { createModules } from '~/mr_notes/stores';
 import NoteForm from '~/notes/components/note_form.vue';
+import MultilineCommentForm from '~/notes/components/multiline_comment_form.vue';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { noteableDataMock } from 'jest/notes/mock_data';
-import diffFileMockData from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
-jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal', () => {
-  return {
-    confirmAction: jest.fn(),
-  };
-});
+jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
+jest.mock('~/autosave');
 
 describe('DiffLineNoteForm', () => {
   let wrapper;
   let diffFile;
   let diffLines;
-  const getDiffFileMock = () => ({ ...diffFileMockData });
+  let actions;
+  let store;
 
-  const createComponent = (args = {}) => {
-    diffFile = getDiffFileMock();
-    diffLines = diffFile.highlighted_diff_lines;
-    const store = createStore();
+  const getSelectedLine = () => {
+    const lineCode = diffLines[1].line_code;
+    return diffFile.highlighted_diff_lines.find((l) => l.line_code === lineCode);
+  };
+
+  const createStore = (state) => {
+    const modules = createModules();
+    modules.diffs.actions = {
+      ...modules.diffs.actions,
+      saveDiffDiscussion: jest.fn(() => Promise.resolve()),
+    };
+    modules.diffs.getters = {
+      ...modules.diffs.getters,
+      diffCompareDropdownTargetVersions: jest.fn(),
+      diffCompareDropdownSourceVersions: jest.fn(),
+      selectedSourceIndex: jest.fn(),
+    };
+    modules.notes.getters = {
+      ...modules.notes.getters,
+      noteableType: jest.fn(),
+    };
+    actions = modules.diffs.actions;
+
+    store = new Vuex.Store({ modules });
     store.state.notes.userData.id = 1;
     store.state.notes.noteableData = noteableDataMock;
+
+    store.replaceState({ ...store.state, ...state });
+  };
+
+  const createComponent = ({ props, state } = {}) => {
+    wrapper?.destroy();
+    diffFile = getDiffFileMock();
+    diffLines = diffFile.highlighted_diff_lines;
+
+    createStore(state);
     store.state.diffs.diffFiles = [diffFile];
 
-    store.replaceState({ ...store.state, ...args.state });
+    const propsData = {
+      diffFileHash: diffFile.file_hash,
+      diffLines,
+      line: diffLines[1],
+      range: { start: diffLines[0], end: diffLines[1] },
+      noteTargetLine: diffLines[1],
+      ...props,
+    };
 
-    return shallowMount(DiffLineNoteForm, {
+    wrapper = shallowMount(DiffLineNoteForm, {
       store,
-      propsData: {
-        ...{
-          diffFileHash: diffFile.file_hash,
-          diffLines,
-          line: diffLines[1],
-          range: { start: diffLines[0], end: diffLines[1] },
-          noteTargetLine: diffLines[1],
-        },
-        ...(args.props || {}),
-      },
+      propsData,
     });
   };
 
   const findNoteForm = () => wrapper.findComponent(NoteForm);
+  const findCommentForm = () => wrapper.findComponent(MultilineCommentForm);
 
-  describe('methods', () => {
-    beforeEach(() => {
-      wrapper = createComponent();
-    });
-
-    describe('handleCancelCommentForm', () => {
-      afterEach(() => {
-        confirmAction.mockReset();
-      });
-
-      it('should ask for confirmation when shouldConfirm and isDirty passed as truthy', () => {
-        confirmAction.mockResolvedValueOnce(false);
-
-        findNoteForm().vm.$emit('cancelForm', true, true);
-
-        expect(confirmAction).toHaveBeenCalled();
-      });
+  beforeEach(() => {
+    Autosave.mockClear();
+    createComponent();
+  });
 
-      it('should only ask for confirmation once', () => {
-        // Never resolve so we can test what happens when triggered while "confirmAction" is loading
-        confirmAction.mockImplementation(() => new Promise(() => {}));
+  it('shows note form', () => {
+    expect(wrapper.find(NoteForm).exists()).toBe(true);
+  });
 
-        findNoteForm().vm.$emit('cancelForm', true, true);
-        findNoteForm().vm.$emit('cancelForm', true, true);
+  it('passes the provided range of lines to comment form', () => {
+    expect(findCommentForm().props('lineRange')).toMatchObject({
+      start: diffLines[0],
+      end: diffLines[1],
+    });
+  });
 
-        expect(confirmAction).toHaveBeenCalledTimes(1);
-      });
+  it('respects empty range when passing a range of lines', () => {
+    createComponent({ props: { range: null } });
+    expect(findCommentForm().props('lineRange')).toMatchObject({
+      start: diffLines[1],
+      end: diffLines[1],
+    });
+  });
 
-      it('should not ask for confirmation when one of the params false', () => {
-        confirmAction.mockResolvedValueOnce(false);
+  it('should init autosave', () => {
+    expect(Autosave).toHaveBeenCalledWith({}, [
+      'Note',
+      'Issue',
+      98,
+      undefined,
+      'DiffNote',
+      undefined,
+      '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2',
+    ]);
+  });
 
-        findNoteForm().vm.$emit('cancelForm', true, false);
+  describe('when cancelling form', () => {
+    afterEach(() => {
+      confirmAction.mockReset();
+    });
 
-        expect(confirmAction).not.toHaveBeenCalled();
+    it('should only ask for confirmation once', () => {
+      let finalizePromise;
+      confirmAction.mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            finalizePromise = resolve;
+          }),
+      );
 
-        findNoteForm().vm.$emit('cancelForm', false, true);
+      findNoteForm().vm.$emit('cancelForm', true, true);
+      findNoteForm().vm.$emit('cancelForm', true, true);
 
-        expect(confirmAction).not.toHaveBeenCalled();
-      });
+      expect(confirmAction).toHaveBeenCalledTimes(1);
+      finalizePromise();
+    });
 
-      it('should call cancelCommentForm with lineCode', async () => {
+    describe('with confirmation', () => {
+      beforeEach(() => {
         confirmAction.mockResolvedValueOnce(true);
-        jest.spyOn(wrapper.vm, 'cancelCommentForm').mockImplementation(() => {});
-        jest.spyOn(wrapper.vm, 'resetAutoSave').mockImplementation(() => {});
+      });
 
+      it('should ask form confirmation and hide form for a line', async () => {
         findNoteForm().vm.$emit('cancelForm', true, true);
-
         await nextTick();
-
         expect(confirmAction).toHaveBeenCalled();
-
         await nextTick();
 
-        expect(wrapper.vm.cancelCommentForm).toHaveBeenCalledWith({
-          lineCode: diffLines[1].line_code,
-          fileHash: wrapper.vm.diffFileHash,
-        });
-        expect(wrapper.vm.resetAutoSave).toHaveBeenCalled();
+        expect(getSelectedLine().hasForm).toBe(false);
+        expect(Autosave.mock.instances[0].reset).toHaveBeenCalled();
       });
     });
 
-    describe('saveNoteForm', () => {
-      it('should call saveNote action with proper params', async () => {
-        const saveDiffDiscussionSpy = jest
-          .spyOn(wrapper.vm, 'saveDiffDiscussion')
-          .mockReturnValue(Promise.resolve());
-
-        const lineRange = {
-          start: {
-            line_code: wrapper.vm.commentLineStart.line_code,
-            type: wrapper.vm.commentLineStart.type,
-            new_line: 2,
-            old_line: null,
-          },
-          end: {
-            line_code: wrapper.vm.line.line_code,
-            type: wrapper.vm.line.type,
-            new_line: 2,
-            old_line: null,
-          },
-        };
-
-        const formData = {
-          ...wrapper.vm.formData,
-          lineRange,
-        };
-
-        await wrapper.vm.handleSaveNote('note body');
-        expect(saveDiffDiscussionSpy).toHaveBeenCalledWith({
-          note: 'note body',
-          formData,
-        });
+    describe('without confirmation', () => {
+      beforeEach(() => {
+        confirmAction.mockResolvedValueOnce(false);
       });
-    });
-  });
 
-  describe('created', () => {
-    it('should use the provided `range` of lines', () => {
-      wrapper = createComponent();
+      it('should ask for confirmation when shouldConfirm and isDirty passed as truthy', () => {
+        findNoteForm().vm.$emit('cancelForm', true, true);
 
-      expect(wrapper.vm.lines.start).toBe(diffLines[0]);
-      expect(wrapper.vm.lines.end).toBe(diffLines[1]);
-    });
+        expect(confirmAction).toHaveBeenCalled();
+      });
 
-    it("should fill the internal `lines` data with the provided `line` if there's no provided `range", () => {
-      wrapper = createComponent({ props: { range: null } });
+      it('should not ask for confirmation when one of the params false', () => {
+        findNoteForm().vm.$emit('cancelForm', true, false);
 
-      expect(wrapper.vm.lines.start).toBe(diffLines[1]);
-      expect(wrapper.vm.lines.end).toBe(diffLines[1]);
-    });
-  });
+        expect(confirmAction).not.toHaveBeenCalled();
 
-  describe('mounted', () => {
-    it('should init autosave', () => {
-      const key = 'autosave/Note/Issue/98//DiffNote//1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2';
-      wrapper = createComponent();
+        findNoteForm().vm.$emit('cancelForm', false, true);
 
-      expect(wrapper.vm.autosave).toBeDefined();
-      expect(wrapper.vm.autosave.key).toEqual(key);
+        expect(confirmAction).not.toHaveBeenCalled();
+      });
     });
+  });
 
-    it('should set selectedCommentPosition', () => {
-      wrapper = createComponent();
-      let startLineCode = wrapper.vm.commentLineStart.line_code;
-      let lineCode = wrapper.vm.line.line_code;
-
-      expect(startLineCode).toEqual(lineCode);
-      wrapper.destroy();
-
-      const state = {
-        notes: {
-          selectedCommentPosition: {
-            start: {
-              line_code: 'test',
-            },
-          },
+  describe('saving note', () => {
+    it('should save original line', async () => {
+      const lineRange = {
+        start: {
+          line_code: diffLines[1].line_code,
+          type: diffLines[1].type,
+          new_line: 2,
+          old_line: null,
+        },
+        end: {
+          line_code: diffLines[1].line_code,
+          type: diffLines[1].type,
+          new_line: 2,
+          old_line: null,
         },
       };
-      wrapper = createComponent({ state });
-      startLineCode = wrapper.vm.commentLineStart.line_code;
-      lineCode = state.notes.selectedCommentPosition.start.line_code;
-      expect(startLineCode).toEqual(lineCode);
+      await findNoteForm().vm.$emit('handleFormUpdate', 'note body');
+      expect(actions.saveDiffDiscussion.mock.calls[0][1].formData).toMatchObject({
+        lineRange,
+      });
     });
-  });
 
-  describe('template', () => {
-    it('should have note form', () => {
-      wrapper = createComponent();
-      expect(wrapper.find(NoteForm).exists()).toBe(true);
+    it('should save selected line from the store', async () => {
+      const lineCode = 'test';
+      store.state.notes.selectedCommentPosition = { start: { line_code: lineCode } };
+      createComponent({ state: store.state });
+      await findNoteForm().vm.$emit('handleFormUpdate', 'note body');
+      expect(actions.saveDiffDiscussion.mock.calls[0][1].formData.lineRange.start.line_code).toBe(
+        lineCode,
+      );
     });
   });
 });
diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js
index 4c5ce429c9d..be81508213b 100644
--- a/spec/frontend/diffs/components/diff_row_spec.js
+++ b/spec/frontend/diffs/components/diff_row_spec.js
@@ -6,7 +6,7 @@ import DiffRow from '~/diffs/components/diff_row.vue';
 import { mapParallel } from '~/diffs/components/diff_row_utils';
 import diffsModule from '~/diffs/store/modules';
 import { findInteropAttributes } from '../find_interop_attributes';
-import diffFileMockData from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 const showCommentForm = jest.fn();
 const enterdragging = jest.fn();
@@ -210,6 +210,7 @@ describe('DiffRow', () => {
   });
 
   describe('sets coverage title and class', () => {
+    const diffFileMockData = getDiffFileMock();
     const thisLine = diffFileMockData.parallel_diff_lines[2];
     const rightLine = diffFileMockData.parallel_diff_lines[2].right;
 
diff --git a/spec/frontend/diffs/components/diff_stats_spec.js b/spec/frontend/diffs/components/diff_stats_spec.js
index 4ef1ec55cb0..09fe69e97de 100644
--- a/spec/frontend/diffs/components/diff_stats_spec.js
+++ b/spec/frontend/diffs/components/diff_stats_spec.js
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 import DiffStats from '~/diffs/components/diff_stats.vue';
-import mockDiffFile from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 const TEST_ADDED_LINES = 100;
 const TEST_REMOVED_LINES = 200;
@@ -48,6 +48,7 @@ describe('diff_stats', () => {
     const getBytesContainer = () => wrapper.find('.diff-stats > div:first-child');
 
     beforeEach(() => {
+      const mockDiffFile = getDiffFileMock();
       file = {
         ...mockDiffFile,
         viewer: {
diff --git a/spec/frontend/diffs/components/diff_view_spec.js b/spec/frontend/diffs/components/diff_view_spec.js
index dfbe30e460b..15923a1c6de 100644
--- a/spec/frontend/diffs/components/diff_view_spec.js
+++ b/spec/frontend/diffs/components/diff_view_spec.js
@@ -1,7 +1,9 @@
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import DiffView from '~/diffs/components/diff_view.vue';
+import DiffCodeQuality from '~/diffs/components/diff_code_quality.vue';
+import { diffCodeQuality } from '../mock_data/diff_code_quality';
 
 describe('DiffView', () => {
   const DiffExpansionCell = { template: `<div/>` };
@@ -12,7 +14,7 @@ describe('DiffView', () => {
   const setSelectedCommentPosition = jest.fn();
   const getDiffRow = (wrapper) => wrapper.findComponent(DiffRow).vm;
 
-  const createWrapper = (props) => {
+  const createWrapper = (props, provide = {}) => {
     Vue.use(Vuex);
 
     const batchComments = {
@@ -46,9 +48,33 @@ describe('DiffView', () => {
       ...props,
     };
     const stubs = { DiffExpansionCell, DiffRow, DiffCommentCell, DraftNote };
-    return shallowMount(DiffView, { propsData, store, stubs });
+    return shallowMount(DiffView, { propsData, store, stubs, provide });
   };
 
+  it('does not render a codeQuality diff view when there is no finding', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.findComponent(DiffCodeQuality).exists()).toBe(false);
+  });
+
+  it('does render a codeQuality diff view with the correct props  when there is a finding & refactorCodeQualityInlineFindings flag is true ', async () => {
+    const wrapper = createWrapper(diffCodeQuality, {
+      glFeatures: { refactorCodeQualityInlineFindings: true },
+    });
+    wrapper.findComponent(DiffRow).vm.$emit('toggleCodeQualityFindings', 2);
+    await nextTick();
+    expect(wrapper.findComponent(DiffCodeQuality).exists()).toBe(true);
+    expect(wrapper.findComponent(DiffCodeQuality).props().codeQuality.length).not.toBe(0);
+  });
+
+  it('does not render a codeQuality diff view when there is a finding & refactorCodeQualityInlineFindings flag is false ', async () => {
+    const wrapper = createWrapper(diffCodeQuality, {
+      glFeatures: { refactorCodeQualityInlineFindings: false },
+    });
+    wrapper.findComponent(DiffRow).vm.$emit('toggleCodeQualityFindings', 2);
+    await nextTick();
+    expect(wrapper.findComponent(DiffCodeQuality).exists()).toBe(false);
+  });
+
   it.each`
     type          | side       | container | sides                                                                                                    | total
     ${'parallel'} | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {}, renderDiscussion: true }, right: { lineDraft: {}, renderDiscussion: true } }} | ${2}
diff --git a/spec/frontend/diffs/components/settings_dropdown_spec.js b/spec/frontend/diffs/components/settings_dropdown_spec.js
index 693fc5bfd8f..2ec11ba86fd 100644
--- a/spec/frontend/diffs/components/settings_dropdown_spec.js
+++ b/spec/frontend/diffs/components/settings_dropdown_spec.js
@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils';
 
-import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 import SettingsDropdown from '~/diffs/components/settings_dropdown.vue';
@@ -139,9 +138,7 @@ describe('Diff settings dropdown component', () => {
       const checkbox = wrapper.findByTestId('show-whitespace');
       const { checked } = checkbox.element;
 
-      checkbox.trigger('click');
-
-      await nextTick();
+      await checkbox.setChecked(false);
 
       expect(store.dispatch).toHaveBeenCalledWith('diffs/setShowWhitespace', {
         showWhitespace: !checked,
@@ -182,9 +179,7 @@ describe('Diff settings dropdown component', () => {
             Object.assign(origStore.state.diffs, { viewDiffsFileByFile: start }),
         });
 
-        getFileByFileCheckbox(wrapper).trigger('click');
-
-        await nextTick();
+        await getFileByFileCheckbox(wrapper).setChecked(setting);
 
         expect(store.dispatch).toHaveBeenCalledWith('diffs/setFileByFile', {
           fileByFile: setting,
diff --git a/spec/frontend/diffs/components/tree_list_spec.js b/spec/frontend/diffs/components/tree_list_spec.js
index 963805f4792..931a9562d36 100644
--- a/spec/frontend/diffs/components/tree_list_spec.js
+++ b/spec/frontend/diffs/components/tree_list_spec.js
@@ -50,6 +50,19 @@ describe('Diffs tree list component', () => {
         type: 'blob',
         parentPath: 'app',
       },
+      'test.rb': {
+        addedLines: 0,
+        changed: true,
+        deleted: false,
+        fileHash: 'test',
+        key: 'test.rb',
+        name: 'test.rb',
+        path: 'app/test.rb',
+        removedLines: 0,
+        tempFile: true,
+        type: 'blob',
+        parentPath: 'app',
+      },
       app: {
         key: 'app',
         path: 'app',
@@ -85,6 +98,23 @@ describe('Diffs tree list component', () => {
       createComponent();
     });
 
+    describe('search by file extension', () => {
+      it.each`
+        extension       | itemSize
+        ${'*.md'}       | ${0}
+        ${'*.js'}       | ${1}
+        ${'index.js'}   | ${1}
+        ${'app/*.js'}   | ${1}
+        ${'*.js, *.rb'} | ${2}
+      `('it returns $itemSize item for $extension', async ({ extension, itemSize }) => {
+        wrapper.find('[data-testid="diff-tree-search"]').setValue(extension);
+
+        await nextTick();
+
+        expect(getFileRows()).toHaveLength(itemSize);
+      });
+    });
+
     it('renders tree', () => {
       expect(getFileRows()).toHaveLength(2);
       expect(getFileRows().at(0).html()).toContain('index.js');
@@ -120,7 +150,7 @@ describe('Diffs tree list component', () => {
       wrapper.vm.$store.state.diffs.renderTreeList = false;
 
       await nextTick();
-      expect(getFileRows()).toHaveLength(1);
+      expect(getFileRows()).toHaveLength(2);
     });
 
     it('renders file paths when renderTreeList is false', async () => {
diff --git a/spec/frontend/diffs/mock_data/diff_code_quality.js b/spec/frontend/diffs/mock_data/diff_code_quality.js
new file mode 100644
index 00000000000..2ca421a20b4
--- /dev/null
+++ b/spec/frontend/diffs/mock_data/diff_code_quality.js
@@ -0,0 +1,62 @@
+export const multipleFindingsArr = [
+  {
+    severity: 'minor',
+    description: 'Unexpected Debugger Statement.',
+    line: 2,
+  },
+  {
+    severity: 'major',
+    description:
+      'Function `aVeryLongFunction` has 52 lines of code (exceeds 25 allowed). Consider refactoring.',
+    line: 3,
+  },
+  {
+    severity: 'minor',
+    description: 'Arrow function has too many statements (52). Maximum allowed is 30.',
+    line: 3,
+  },
+];
+
+export const multipleFindings = {
+  filePath: 'index.js',
+  codequality: multipleFindingsArr,
+};
+
+export const singularFinding = {
+  filePath: 'index.js',
+  codequality: [multipleFindingsArr[0]],
+};
+
+export const diffCodeQuality = {
+  diffFile: { file_hash: '123' },
+  diffLines: [
+    {
+      left: {
+        type: 'old',
+        old_line: 1,
+        new_line: null,
+        codequality: [],
+        lineDraft: {},
+      },
+    },
+    {
+      left: {
+        type: null,
+        old_line: 2,
+        new_line: 1,
+        codequality: [],
+        lineDraft: {},
+      },
+    },
+    {
+      left: {
+        type: 'new',
+        old_line: null,
+        new_line: 2,
+
+        codequality: [multipleFindingsArr[0]],
+        lineDraft: {},
+      },
+    },
+  ],
+};
diff --git a/spec/frontend/diffs/mock_data/diff_file.js b/spec/frontend/diffs/mock_data/diff_file.js
index 9ebcd5ef26b..dd200b0248c 100644
--- a/spec/frontend/diffs/mock_data/diff_file.js
+++ b/spec/frontend/diffs/mock_data/diff_file.js
@@ -1,4 +1,4 @@
-export default {
+export const getDiffFileMock = () => ({
   submodule: false,
   submodule_link: null,
   blob: {
@@ -305,4 +305,4 @@ export default {
   ],
   discussions: [],
   renderingLines: false,
-};
+});
diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js
index cc595e58dda..346e43e5a72 100644
--- a/spec/frontend/diffs/store/actions_spec.js
+++ b/spec/frontend/diffs/store/actions_spec.js
@@ -3,7 +3,7 @@ import Cookies from '~/lib/utils/cookies';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
-import mockDiffFile from 'jest/diffs/mock_data/diff_file';
+import { getDiffFileMock } from 'jest/diffs/mock_data/diff_file';
 import {
   DIFF_VIEW_COOKIE_NAME,
   INLINE_DIFF_VIEW_TYPE,
@@ -754,7 +754,7 @@ describe('DiffsStoreActions', () => {
     it('dispatches actions', () => {
       const commitId = 'something';
       const formData = {
-        diffFile: { ...mockDiffFile },
+        diffFile: getDiffFileMock(),
         noteableData: {},
       };
       const note = {};
diff --git a/spec/frontend/diffs/store/mutations_spec.js b/spec/frontend/diffs/store/mutations_spec.js
index 57e623b843d..031e4fe2be2 100644
--- a/spec/frontend/diffs/store/mutations_spec.js
+++ b/spec/frontend/diffs/store/mutations_spec.js
@@ -3,7 +3,7 @@ import createState from '~/diffs/store/modules/diff_state';
 import * as types from '~/diffs/store/mutation_types';
 import mutations from '~/diffs/store/mutations';
 import * as utils from '~/diffs/store/utils';
-import diffFileMockData from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 describe('DiffsStoreMutations', () => {
   describe('SET_BASE_CONFIG', () => {
@@ -71,6 +71,7 @@ describe('DiffsStoreMutations', () => {
 
   describe('SET_DIFF_METADATA', () => {
     it('should overwrite state with the camelCased data that is passed in', () => {
+      const diffFileMockData = getDiffFileMock();
       const state = {
         diffFiles: [],
       };
@@ -94,7 +95,7 @@ describe('DiffsStoreMutations', () => {
     it('should set diff data batch type properly', () => {
       const state = { diffFiles: [] };
       const diffMock = {
-        diff_files: [diffFileMockData],
+        diff_files: [getDiffFileMock()],
       };
 
       mutations[types.SET_DIFF_DATA_BATCH](state, diffMock);
diff --git a/spec/frontend/diffs/store/utils_spec.js b/spec/frontend/diffs/store/utils_spec.js
index 6f55f76d7b5..8852c6c62c5 100644
--- a/spec/frontend/diffs/store/utils_spec.js
+++ b/spec/frontend/diffs/store/utils_spec.js
@@ -1,4 +1,3 @@
-import { clone } from 'lodash';
 import {
   LINE_POSITION_LEFT,
   LINE_POSITION_RIGHT,
@@ -14,10 +13,9 @@ import {
 import * as utils from '~/diffs/store/utils';
 import { MERGE_REQUEST_NOTEABLE_TYPE } from '~/notes/constants';
 import { noteableDataMock } from 'jest/notes/mock_data';
-import diffFileMockData from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 import { diffMetadata } from '../mock_data/diff_metadata';
 
-const getDiffFileMock = () => JSON.parse(JSON.stringify(diffFileMockData));
 const getDiffMetadataMock = () => JSON.parse(JSON.stringify(diffMetadata));
 
 describe('DiffsStoreUtils', () => {
@@ -47,7 +45,7 @@ describe('DiffsStoreUtils', () => {
     let diffFile;
 
     beforeEach(() => {
-      diffFile = { ...clone(diffFileMockData) };
+      diffFile = getDiffFileMock();
     });
 
     it('should return the correct previous line number', () => {
diff --git a/spec/frontend/diffs/utils/diff_file_spec.js b/spec/frontend/diffs/utils/diff_file_spec.js
index 778897be3ba..b062a156216 100644
--- a/spec/frontend/diffs/utils/diff_file_spec.js
+++ b/spec/frontend/diffs/utils/diff_file_spec.js
@@ -6,7 +6,7 @@ import {
   match,
 } from '~/diffs/utils/diff_file';
 import { diffViewerModes } from '~/ide/constants';
-import mockDiffFile from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 function getDiffFiles() {
   const loadFull = 'namespace/project/-/merge_requests/12345/diff_for_path?file_identifier=abc';
@@ -210,7 +210,7 @@ describe('diff_file utilities', () => {
     ];
     const validFile = [
       'computes the correct stats from a file',
-      mockDiffFile,
+      getDiffFileMock(),
       {
         changed: 1024,
         percent: 100,
@@ -223,7 +223,7 @@ describe('diff_file utilities', () => {
     const negativeChange = [
       'computed the correct states from a file with a negative size change',
       {
-        ...mockDiffFile,
+        ...getDiffFileMock(),
         new_size: 0,
         old_size: 1024,
       },
diff --git a/spec/frontend/dirty_submit/dirty_submit_form_spec.js b/spec/frontend/dirty_submit/dirty_submit_form_spec.js
index bcbe824bd9f..f24bb7374a3 100644
--- a/spec/frontend/dirty_submit/dirty_submit_form_spec.js
+++ b/spec/frontend/dirty_submit/dirty_submit_form_spec.js
@@ -55,7 +55,6 @@ describe('DirtySubmitForm', () => {
   describe('throttling tests', () => {
     beforeEach(() => {
       throttle.mockImplementation(lodash.throttle);
-      jest.useFakeTimers();
     });
 
     afterEach(() => {
diff --git a/spec/frontend/emoji/awards_app/store/actions_spec.js b/spec/frontend/emoji/awards_app/store/actions_spec.js
index 0761256ed23..cd3dfab30d4 100644
--- a/spec/frontend/emoji/awards_app/store/actions_spec.js
+++ b/spec/frontend/emoji/awards_app/store/actions_spec.js
@@ -8,10 +8,6 @@ jest.mock('@sentry/browser');
 jest.mock('~/vue_shared/plugins/global_toast');
 
 describe('Awards app actions', () => {
-  afterEach(() => {
-    window.gon = {};
-  });
-
   describe('setInitialData', () => {
     it('commits SET_INITIAL_DATA', async () => {
       await testAction(
@@ -52,8 +48,6 @@ describe('Awards app actions', () => {
         });
 
         it('commits FETCH_AWARDS_SUCCESS', async () => {
-          window.gon.current_user_id = 1;
-
           await testAction(
             actions.fetchAwards,
             '1',
@@ -62,10 +56,6 @@ describe('Awards app actions', () => {
             [{ type: 'fetchAwards', payload: '2' }],
           );
         });
-
-        it('does not commit FETCH_AWARDS_SUCCESS when user signed out', async () => {
-          await testAction(actions.fetchAwards, '1', { path: '/awards' }, [], []);
-        });
       });
     });
 
@@ -75,8 +65,6 @@ describe('Awards app actions', () => {
       });
 
       it('calls Sentry.captureException', async () => {
-        window.gon = { current_user_id: 1 };
-
         await testAction(actions.fetchAwards, null, { path: '/awards' }, [], [], () => {
           expect(Sentry.captureException).toHaveBeenCalled();
         });
diff --git a/spec/frontend/environment.js b/spec/frontend/environment.js
index 8465b57c660..dc1c1dfbe4a 100644
--- a/spec/frontend/environment.js
+++ b/spec/frontend/environment.js
@@ -67,12 +67,6 @@ class CustomEnvironment extends JSDOMEnvironment {
     // Expose the jsdom (created in super class) to the global so that we can call reconfigure({ url: '' }) to properly set `window.location`
     this.global.jsdom = this.dom;
 
-    Object.assign(this.global.performance, {
-      mark: () => null,
-      measure: () => null,
-      getEntriesByName: () => [],
-    });
-
     //
     // Monaco-related environment variables
     //
diff --git a/spec/frontend/environments/canary_update_modal_spec.js b/spec/frontend/environments/canary_update_modal_spec.js
index 22d13558a84..16792dcda1e 100644
--- a/spec/frontend/environments/canary_update_modal_spec.js
+++ b/spec/frontend/environments/canary_update_modal_spec.js
@@ -47,7 +47,7 @@ describe('/environments/components/canary_update_modal.vue', () => {
       modalId: 'confirm-canary-change',
       actionPrimary: {
         text: 'Change ratio',
-        attributes: [{ variant: 'info' }],
+        attributes: [{ variant: 'confirm' }],
       },
       actionCancel: { text: 'Cancel' },
     });
diff --git a/spec/frontend/environments/confirm_rollback_modal_spec.js b/spec/frontend/environments/confirm_rollback_modal_spec.js
index b8dcb7c0d08..c4763933468 100644
--- a/spec/frontend/environments/confirm_rollback_modal_spec.js
+++ b/spec/frontend/environments/confirm_rollback_modal_spec.js
@@ -2,6 +2,7 @@ import { GlModal, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
+import { trimText } from 'helpers/text_helper';
 import ConfirmRollbackModal from '~/environments/components/confirm_rollback_modal.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import eventHub from '~/environments/event_hub';
@@ -76,9 +77,9 @@ describe('Confirm Rollback Modal Component', () => {
 
         expect(modal.attributes('title')).toContain('Rollback');
         expect(modal.attributes('title')).toContain('test');
-        expect(modal.props('actionPrimary').text).toBe('Rollback');
+        expect(modal.props('actionPrimary').text).toBe('Rollback environment');
         expect(modal.props('actionPrimary').attributes).toEqual(primaryPropsAttrs);
-        expect(modal.text()).toContain('commit abc0123');
+        expect(trimText(modal.text())).toContain('commit abc0123');
         expect(modal.text()).toContain('Are you sure you want to continue?');
       });
 
@@ -95,8 +96,8 @@ describe('Confirm Rollback Modal Component', () => {
 
         expect(modal.attributes('title')).toContain('Re-deploy');
         expect(modal.attributes('title')).toContain('test');
-        expect(modal.props('actionPrimary').text).toBe('Re-deploy');
-        expect(modal.text()).toContain('commit abc0123');
+        expect(modal.props('actionPrimary').text).toBe('Re-deploy environment');
+        expect(trimText(modal.text())).toContain('commit abc0123');
         expect(modal.text()).toContain('Are you sure you want to continue?');
       });
 
@@ -156,7 +157,7 @@ describe('Confirm Rollback Modal Component', () => {
           );
           const modal = component.find(GlModal);
 
-          expect(modal.text()).toContain('commit abc0123');
+          expect(trimText(modal.text())).toContain('commit abc0123');
           expect(modal.text()).toContain('Are you sure you want to continue?');
         });
 
@@ -180,7 +181,7 @@ describe('Confirm Rollback Modal Component', () => {
 
           expect(modal.attributes('title')).toContain('Rollback');
           expect(modal.attributes('title')).toContain('test');
-          expect(modal.props('actionPrimary').text).toBe('Rollback');
+          expect(modal.props('actionPrimary').text).toBe('Rollback environment');
           expect(modal.props('actionPrimary').attributes).toEqual(primaryPropsAttrs);
         });
 
@@ -204,7 +205,7 @@ describe('Confirm Rollback Modal Component', () => {
 
           expect(modal.attributes('title')).toContain('Re-deploy');
           expect(modal.attributes('title')).toContain('test');
-          expect(modal.props('actionPrimary').text).toBe('Re-deploy');
+          expect(modal.props('actionPrimary').text).toBe('Re-deploy environment');
         });
 
         it('should commit the "rollback" mutation when "ok" is clicked', async () => {
diff --git a/spec/frontend/environments/deploy_board_component_spec.js b/spec/frontend/environments/deploy_board_component_spec.js
index 6bf87f7b07f..4d63648dd48 100644
--- a/spec/frontend/environments/deploy_board_component_spec.js
+++ b/spec/frontend/environments/deploy_board_component_spec.js
@@ -3,11 +3,9 @@ import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import CanaryIngress from '~/environments/components/canary_ingress.vue';
 import DeployBoard from '~/environments/components/deploy_board.vue';
-import { deployBoardMockData, environment } from './mock_data';
+import { deployBoardMockData } from './mock_data';
 import { rolloutStatus } from './graphql/mock_data';
 
-const logsPath = `gitlab-org/gitlab-test/-/logs?environment_name=${environment.name}`;
-
 describe('Deploy Board', () => {
   let wrapper;
 
@@ -17,7 +15,6 @@ describe('Deploy Board', () => {
         deployBoardData: deployBoardMockData,
         isLoading: false,
         isEmpty: false,
-        logsPath,
         ...props,
       },
     });
@@ -132,7 +129,6 @@ describe('Deploy Board', () => {
         deployBoardData: {},
         isLoading: false,
         isEmpty: true,
-        logsPath,
       });
       return nextTick();
     });
@@ -151,7 +147,6 @@ describe('Deploy Board', () => {
         deployBoardData: {},
         isLoading: true,
         isEmpty: false,
-        logsPath,
       });
       return nextTick();
     });
@@ -167,7 +162,6 @@ describe('Deploy Board', () => {
       wrapper = createComponent({
         isLoading: false,
         isEmpty: false,
-        logsPath: environment.log_path,
         deployBoardData: deployBoardMockData,
       });
       ({ statuses } = wrapper.vm);
diff --git a/spec/frontend/environments/environment_item_spec.js b/spec/frontend/environments/environment_item_spec.js
index 0761d04229c..1c86a66d9b8 100644
--- a/spec/frontend/environments/environment_item_spec.js
+++ b/spec/frontend/environments/environment_item_spec.js
@@ -68,7 +68,7 @@ describe('Environment item', () => {
     describe('With deployment', () => {
       it('should render deployment internal id', () => {
         expect(wrapper.find('.deployment-column span').text()).toContain(
-          environment.last_deployment.iid,
+          environment.last_deployment.iid.toString(),
         );
 
         expect(wrapper.find('.deployment-column span').text()).toContain('#');
@@ -400,7 +400,7 @@ describe('Environment item', () => {
     });
 
     it('should render the number of children in a badge', () => {
-      expect(wrapper.find('.folder-name .badge').text()).toContain(folder.size);
+      expect(wrapper.find('.folder-name .badge').text()).toContain(folder.size.toString());
     });
 
     it('should not render the "Upcoming deployment" column', () => {
diff --git a/spec/frontend/environments/environment_table_spec.js b/spec/frontend/environments/environment_table_spec.js
index 666e87c748e..aff6b1327f0 100644
--- a/spec/frontend/environments/environment_table_spec.js
+++ b/spec/frontend/environments/environment_table_spec.js
@@ -64,7 +64,6 @@ describe('Environment table', () => {
       name: 'review',
       size: 1,
       environment_path: 'url',
-      logs_path: 'url',
       id: 1,
       hasDeployBoard: true,
       deployBoardData: deployBoardMockData,
@@ -92,7 +91,6 @@ describe('Environment table', () => {
       name: 'review',
       size: 1,
       environment_path: 'url',
-      logs_path: 'url',
       id: 1,
       isFolder: true,
       isOpen: true,
@@ -161,7 +159,6 @@ describe('Environment table', () => {
       name: 'review',
       size: 1,
       environment_path: 'url',
-      logs_path: 'url',
       id: 1,
       hasDeployBoard: true,
       deployBoardData: deployBoardMockData,
diff --git a/spec/frontend/environments/environments_app_spec.js b/spec/frontend/environments/environments_app_spec.js
index 91b75c850bd..57f98c81124 100644
--- a/spec/frontend/environments/environments_app_spec.js
+++ b/spec/frontend/environments/environments_app_spec.js
@@ -204,9 +204,9 @@ describe('~/environments/components/environments_app.vue', () => {
       const [available, stopped] = wrapper.findAllByRole('tab').wrappers;
 
       expect(available.text()).toContain(__('Available'));
-      expect(available.text()).toContain(resolvedEnvironmentsApp.availableCount);
+      expect(available.text()).toContain(resolvedEnvironmentsApp.availableCount.toString());
       expect(stopped.text()).toContain(__('Stopped'));
-      expect(stopped.text()).toContain(resolvedEnvironmentsApp.stoppedCount);
+      expect(stopped.text()).toContain(resolvedEnvironmentsApp.stoppedCount.toString());
     });
 
     it('should change the requested scope on tab change', async () => {
diff --git a/spec/frontend/error_tracking/components/error_tracking_list_spec.js b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
index 5e0f0ca9bef..23d448f3964 100644
--- a/spec/frontend/error_tracking/components/error_tracking_list_spec.js
+++ b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
@@ -398,6 +398,30 @@ describe('ErrorTrackingList', () => {
   });
 
   describe('When pagination is required', () => {
+    describe('and previous cursor is not available', () => {
+      beforeEach(async () => {
+        store.state.list.loading = false;
+        delete store.state.list.pagination.previous;
+        mountComponent();
+      });
+
+      it('disables Prev button in the pagination', async () => {
+        expect(findPagination().props('prevPage')).toBe(null);
+        expect(findPagination().props('nextPage')).not.toBe(null);
+      });
+    });
+    describe('and next cursor is not available', () => {
+      beforeEach(async () => {
+        store.state.list.loading = false;
+        delete store.state.list.pagination.next;
+        mountComponent();
+      });
+
+      it('disables Next button in the pagination', async () => {
+        expect(findPagination().props('prevPage')).not.toBe(null);
+        expect(findPagination().props('nextPage')).toBe(null);
+      });
+    });
     describe('and the user is not on the first page', () => {
       describe('and the previous button is clicked', () => {
         beforeEach(async () => {
diff --git a/spec/frontend/fixtures/api_deploy_keys.rb b/spec/frontend/fixtures/api_deploy_keys.rb
index 7027b8c975b..5ffc726f086 100644
--- a/spec/frontend/fixtures/api_deploy_keys.rb
+++ b/spec/frontend/fixtures/api_deploy_keys.rb
@@ -11,6 +11,7 @@ RSpec.describe API::DeployKeys, '(JavaScript fixtures)', type: :request do
   let_it_be(:project2) { create(:project) }
   let_it_be(:deploy_key) { create(:deploy_key, public: true) }
   let_it_be(:deploy_key2) { create(:deploy_key, public: true) }
+  let_it_be(:deploy_key_without_fingerprint) { create(:deploy_key, :without_md5_fingerprint, public: true) }
   let_it_be(:deploy_keys_project) { create(:deploy_keys_project, :write_access, project: project, deploy_key: deploy_key) }
   let_it_be(:deploy_keys_project2) { create(:deploy_keys_project, :write_access, project: project2, deploy_key: deploy_key) }
   let_it_be(:deploy_keys_project3) { create(:deploy_keys_project, :write_access, project: project, deploy_key: deploy_key2) }
diff --git a/spec/frontend/fixtures/blob.rb b/spec/frontend/fixtures/blob.rb
index af548823886..b2bbdd2749e 100644
--- a/spec/frontend/fixtures/blob.rb
+++ b/spec/frontend/fixtures/blob.rb
@@ -12,7 +12,6 @@ RSpec.describe Projects::BlobController, '(JavaScript fixtures)', type: :control
   render_views
 
   before do
-    stub_feature_flags(refactor_blob_viewer: false) # This fixture is only used by the legacy (non-refactored) blob viewer
     sign_in(user)
     allow(SecureRandom).to receive(:hex).and_return('securerandomhex:thereisnospoon')
   end
diff --git a/spec/frontend/fixtures/deploy_keys.rb b/spec/frontend/fixtures/deploy_keys.rb
index bed6c798793..154084e0181 100644
--- a/spec/frontend/fixtures/deploy_keys.rb
+++ b/spec/frontend/fixtures/deploy_keys.rb
@@ -27,9 +27,9 @@ RSpec.describe Projects::DeployKeysController, '(JavaScript fixtures)', type: :c
   render_views
 
   it 'deploy_keys/keys.json' do
-    create(:rsa_deploy_key_2048, public: true)
-    project_key = create(:deploy_key, key: 'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAAAgQCdMHEHyhRjbhEZVddFn6lTWdgEy5Q6Bz4nwGB76xWZI5YT/1WJOMEW+sL5zYd31kk7sd3FJ5L9ft8zWMWrr/iWXQikC2cqZK24H1xy+ZUmrRuJD4qGAaIVoyyzBL+avL+lF8J5lg6YSw8gwJY/lX64/vnJHUlWw2n5BF8IFOWhiw== dummy@gitlab.com')
-    internal_key = create(:deploy_key, key: 'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAAAgQDNd/UJWhPrpb+b/G5oL109y57yKuCxE+WUGJGYaj7WQKsYRJmLYh1mgjrl+KVyfsWpq4ylOxIfFSnN9xBBFN8mlb0Fma5DC7YsSsibJr3MZ19ZNBprwNcdogET7aW9I0In7Wu5f2KqI6e5W/spJHCy4JVxzVMUvk6Myab0LnJ2iQ== dummy@gitlab.com')
+    create(:rsa_deploy_key_5120, public: true)
+    project_key = create(:deploy_key)
+    internal_key = create(:deploy_key)
     create(:deploy_keys_project, project: project, deploy_key: project_key)
     create(:deploy_keys_project, project: project2, deploy_key: internal_key)
     create(:deploy_keys_project, project: project3, deploy_key: project_key)
diff --git a/spec/frontend/fixtures/jobs.rb b/spec/frontend/fixtures/jobs.rb
index 3cc87432655..2e15eefdce6 100644
--- a/spec/frontend/fixtures/jobs.rb
+++ b/spec/frontend/fixtures/jobs.rb
@@ -2,40 +2,94 @@
 
 require 'spec_helper'
 
-RSpec.describe Projects::JobsController, '(JavaScript fixtures)', type: :controller do
+RSpec.describe 'Jobs (JavaScript fixtures)' do
+  include ApiHelpers
   include JavaScriptFixturesHelpers
+  include GraphqlHelpers
 
   let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
   let(:project) { create(:project, :repository, namespace: namespace, path: 'builds-project') }
   let(:user) { project.first_owner }
   let(:pipeline) { create(:ci_empty_pipeline, project: project, sha: project.commit.id) }
-  let!(:build_with_artifacts) { create(:ci_build, :success, :artifacts, :trace_artifact, pipeline: pipeline, stage: 'test', artifacts_expire_at: Time.now + 18.months) }
-  let!(:failed_build) { create(:ci_build, :failed, pipeline: pipeline, stage: 'build') }
-  let!(:pending_build) { create(:ci_build, :pending, pipeline: pipeline, stage: 'deploy') }
-  let!(:delayed_job) do
-    create(:ci_build, :scheduled,
-           pipeline: pipeline,
-           name: 'delayed job',
-           stage: 'test')
+
+  after do
+    remove_repository(project)
   end
 
-  render_views
+  describe Projects::JobsController, type: :controller do
+    let!(:delayed) { create(:ci_build, :scheduled, pipeline: pipeline, name: 'delayed job') }
 
-  before do
-    sign_in(user)
-  end
+    before do
+      sign_in(user)
+    end
 
-  after do
-    remove_repository(project)
+    it 'jobs/delayed.json' do
+      get :show, params: {
+        namespace_id: project.namespace.to_param,
+        project_id: project,
+        id: delayed.to_param
+      }, format: :json
+
+      expect(response).to be_successful
+    end
   end
 
-  it 'jobs/delayed.json' do
-    get :show, params: {
-      namespace_id: project.namespace.to_param,
-      project_id: project,
-      id: delayed_job.to_param
-    }, format: :json
+  describe GraphQL::Query, type: :request do
+    let(:artifact) { create(:ci_job_artifact, file_type: :archive, file_format: :zip) }
+
+    let!(:build) { create(:ci_build, :success, name: 'build', pipeline: pipeline) }
+    let!(:cancelable) { create(:ci_build, :cancelable, name: 'cancelable', pipeline: pipeline) }
+    let!(:created_by_tag) { create(:ci_build, :success, name: 'created_by_tag', tag: true, pipeline: pipeline) }
+    let!(:pending) { create(:ci_build, :pending, name: 'pending', pipeline: pipeline) }
+    let!(:playable) { create(:ci_build, :playable, name: 'playable', pipeline: pipeline) }
+    let!(:retryable) { create(:ci_build, :retryable, name: 'retryable', pipeline: pipeline) }
+    let!(:scheduled) { create(:ci_build, :scheduled, name: 'scheduled', pipeline: pipeline) }
+    let!(:with_artifact) { create(:ci_build, :success, name: 'with_artifact', job_artifacts: [artifact], pipeline: pipeline) }
+    let!(:with_coverage) { create(:ci_build, :success, name: 'with_coverage', coverage: 40.0, pipeline: pipeline) }
+
+    fixtures_path = 'graphql/jobs/'
+    get_jobs_query = 'get_jobs.query.graphql'
+    full_path = 'frontend-fixtures/builds-project'
+
+    let_it_be(:query) do
+      get_graphql_query_as_string("jobs/components/table/graphql/queries/#{get_jobs_query}")
+    end
+
+    it "#{fixtures_path}#{get_jobs_query}.json" do
+      post_graphql(query, current_user: user, variables: {
+        fullPath: full_path
+      })
+
+      expect_graphql_errors_to_be_empty
+    end
+
+    it "#{fixtures_path}#{get_jobs_query}.as_guest.json" do
+      guest = create(:user)
+      project.add_guest(guest)
+
+      post_graphql(query, current_user: guest, variables: {
+        fullPath: full_path
+      })
+
+      expect_graphql_errors_to_be_empty
+    end
+
+    it "#{fixtures_path}#{get_jobs_query}.paginated.json" do
+      post_graphql(query, current_user: user, variables: {
+        fullPath: full_path,
+        first: 2
+      })
+
+      expect_graphql_errors_to_be_empty
+    end
+
+    it "#{fixtures_path}#{get_jobs_query}.empty.json" do
+      post_graphql(query, current_user: user, variables: {
+        fullPath: full_path,
+        first: 0
+      })
 
-    expect(response).to be_successful
+      expect_graphql_errors_to_be_empty
+    end
   end
 end
diff --git a/spec/frontend/fixtures/runner.rb b/spec/frontend/fixtures/runner.rb
index a79982fa647..36281af0219 100644
--- a/spec/frontend/fixtures/runner.rb
+++ b/spec/frontend/fixtures/runner.rb
@@ -29,7 +29,7 @@ RSpec.describe 'Runner (JavaScript fixtures)' do
   before do
     allow(Gitlab::Ci::RunnerUpgradeCheck.instance)
       .to receive(:check_runner_upgrade_status)
-      .and_return(:not_available)
+      .and_return({ not_available: nil })
   end
 
   describe do
@@ -39,19 +39,19 @@ RSpec.describe 'Runner (JavaScript fixtures)' do
     end
 
     describe GraphQL::Query, type: :request do
-      admin_runners_query = 'list/admin_runners.query.graphql'
+      all_runners_query = 'list/all_runners.query.graphql'
 
       let_it_be(:query) do
-        get_graphql_query_as_string("#{query_path}#{admin_runners_query}")
+        get_graphql_query_as_string("#{query_path}#{all_runners_query}")
       end
 
-      it "#{fixtures_path}#{admin_runners_query}.json" do
+      it "#{fixtures_path}#{all_runners_query}.json" do
         post_graphql(query, current_user: admin, variables: {})
 
         expect_graphql_errors_to_be_empty
       end
 
-      it "#{fixtures_path}#{admin_runners_query}.paginated.json" do
+      it "#{fixtures_path}#{all_runners_query}.paginated.json" do
         post_graphql(query, current_user: admin, variables: { first: 2 })
 
         expect_graphql_errors_to_be_empty
@@ -59,13 +59,13 @@ RSpec.describe 'Runner (JavaScript fixtures)' do
     end
 
     describe GraphQL::Query, type: :request do
-      admin_runners_count_query = 'list/admin_runners_count.query.graphql'
+      all_runners_count_query = 'list/all_runners_count.query.graphql'
 
       let_it_be(:query) do
-        get_graphql_query_as_string("#{query_path}#{admin_runners_count_query}")
+        get_graphql_query_as_string("#{query_path}#{all_runners_count_query}")
       end
 
-      it "#{fixtures_path}#{admin_runners_count_query}.json" do
+      it "#{fixtures_path}#{all_runners_count_query}.json" do
         post_graphql(query, current_user: admin, variables: {})
 
         expect_graphql_errors_to_be_empty
diff --git a/spec/frontend/gfm_auto_complete_spec.js b/spec/frontend/gfm_auto_complete_spec.js
index 552377e3381..072cf34d0ef 100644
--- a/spec/frontend/gfm_auto_complete_spec.js
+++ b/spec/frontend/gfm_auto_complete_spec.js
@@ -738,7 +738,7 @@ describe('GfmAutoComplete', () => {
       $textarea.trigger('focus').val(text).caret('pos', -1);
       $textarea.trigger('keyup');
 
-      return new Promise(window.requestAnimationFrame);
+      jest.runOnlyPendingTimers();
     };
 
     const getDropdownItems = () => {
@@ -747,10 +747,11 @@ describe('GfmAutoComplete', () => {
       return [].map.call(items, (item) => item.textContent.trim());
     };
 
-    const expectLabels = ({ input, output }) =>
-      triggerDropdown(input).then(() => {
-        expect(getDropdownItems()).toEqual(output.map((label) => label.title));
-      });
+    const expectLabels = ({ input, output }) => {
+      triggerDropdown(input);
+
+      expect(getDropdownItems()).toEqual(output.map((label) => label.title));
+    };
 
     describe('with no labels assigned', () => {
       beforeEach(() => {
diff --git a/spec/frontend/gitlab_pages/new/pages/pages_pipeline_wizard_spec.js b/spec/frontend/gitlab_pages/new/pages/pages_pipeline_wizard_spec.js
new file mode 100644
index 00000000000..685b5144a95
--- /dev/null
+++ b/spec/frontend/gitlab_pages/new/pages/pages_pipeline_wizard_spec.js
@@ -0,0 +1,102 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import waitForPromises from 'helpers/wait_for_promises';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import PagesPipelineWizard, { i18n } from '~/gitlab_pages/components/pages_pipeline_wizard.vue';
+import PipelineWizard from '~/pipeline_wizard/pipeline_wizard.vue';
+import pagesTemplate from '~/pipeline_wizard/templates/pages.yml';
+import pagesMarkOnboardingComplete from '~/gitlab_pages/queries/mark_onboarding_complete.graphql';
+import { redirectTo } from '~/lib/utils/url_utility';
+
+Vue.use(VueApollo);
+
+jest.mock('~/lib/utils/url_utility');
+
+describe('PagesPipelineWizard', () => {
+  const markOnboardingCompleteMutationHandler = jest.fn();
+  let wrapper;
+  const props = {
+    projectPath: '/user/repo',
+    defaultBranch: 'main',
+    redirectToWhenDone: './',
+  };
+
+  const findPipelineWizardWrapper = () => wrapper.findComponent(PipelineWizard);
+  const createMockApolloProvider = () => {
+    return createMockApollo([
+      [
+        pagesMarkOnboardingComplete,
+        markOnboardingCompleteMutationHandler.mockResolvedValue({
+          data: {
+            pagesMarkOnboardingComplete: {
+              onboardingComplete: true,
+              errors: [],
+            },
+          },
+        }),
+      ],
+    ]);
+  };
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(PagesPipelineWizard, {
+      apolloProvider: createMockApolloProvider(),
+      propsData: props,
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('shows the pipeline wizard', () => {
+    expect(findPipelineWizardWrapper().exists()).toBe(true);
+  });
+
+  it('passes the appropriate props', () => {
+    const pipelineWizardWrapperProps = findPipelineWizardWrapper().props();
+
+    expect(pipelineWizardWrapperProps.template).toBe(pagesTemplate);
+    expect(pipelineWizardWrapperProps.projectPath).toBe(props.projectPath);
+    expect(pipelineWizardWrapperProps.defaultBranch).toBe(props.defaultBranch);
+  });
+
+  describe('after the steps are complete', () => {
+    const mockDone = () => findPipelineWizardWrapper().vm.$emit('done');
+
+    it('shows a loading screen during the update', async () => {
+      mockDone();
+
+      await nextTick();
+
+      const loadingScreenWrapper = wrapper.findByTestId('onboarding-mutation-loading');
+      expect(loadingScreenWrapper.exists()).toBe(true);
+      expect(loadingScreenWrapper.text()).toBe(i18n.loadingMessage);
+    });
+
+    it('calls pagesMarkOnboardingComplete mutation when done', async () => {
+      mockDone();
+
+      await waitForPromises();
+
+      expect(markOnboardingCompleteMutationHandler).toHaveBeenCalledWith({
+        input: {
+          projectPath: props.projectPath,
+        },
+      });
+    });
+
+    it('navigates to the path defined in redirectToWhenDone when done', async () => {
+      mockDone();
+
+      await waitForPromises();
+
+      expect(redirectTo).toHaveBeenCalledWith(props.redirectToWhenDone);
+    });
+  });
+});
diff --git a/spec/frontend/google_cloud/components/app_spec.js b/spec/frontend/google_cloud/components/app_spec.js
deleted file mode 100644
index 0cafe6d3b9d..00000000000
--- a/spec/frontend/google_cloud/components/app_spec.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { mapValues } from 'lodash';
-import App from '~/google_cloud/components/app.vue';
-import Home from '~/google_cloud/components/home.vue';
-import IncubationBanner from '~/google_cloud/components/incubation_banner.vue';
-import ServiceAccountsForm from '~/google_cloud/components/service_accounts_form.vue';
-import GcpError from '~/google_cloud/components/errors/gcp_error.vue';
-import NoGcpProjects from '~/google_cloud/components/errors/no_gcp_projects.vue';
-
-const BASE_FEEDBACK_URL =
-  'https://gitlab.com/gitlab-org/incubation-engineering/five-minute-production/feedback/-/issues/new';
-const SCREEN_COMPONENTS = {
-  Home,
-  ServiceAccountsForm,
-  GcpError,
-  NoGcpProjects,
-};
-const SERVICE_ACCOUNTS_FORM_PROPS = {
-  gcpProjects: [1, 2, 3],
-  refs: [4, 5, 6],
-  cancelPath: '',
-};
-const HOME_PROPS = {
-  serviceAccounts: [{}, {}],
-  gcpRegions: [{}, {}],
-  createServiceAccountUrl: '#url-create-service-account',
-  configureGcpRegionsUrl: '#url-configure-gcp-regions',
-  emptyIllustrationUrl: '#url-empty-illustration',
-  enableCloudRunUrl: '#url-enable-cloud-run',
-  enableCloudStorageUrl: '#enableCloudStorageUrl',
-  revokeOauthUrl: '#revokeOauthUrl',
-};
-
-describe('google_cloud App component', () => {
-  let wrapper;
-
-  const findIncubationBanner = () => wrapper.findComponent(IncubationBanner);
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe.each`
-    screen                     | extraProps                            | componentName
-    ${'gcp_error'}             | ${{ error: 'mock_gcp_client_error' }} | ${'GcpError'}
-    ${'no_gcp_projects'}       | ${{}}                                 | ${'NoGcpProjects'}
-    ${'service_accounts_form'} | ${SERVICE_ACCOUNTS_FORM_PROPS}        | ${'ServiceAccountsForm'}
-    ${'home'}                  | ${HOME_PROPS}                         | ${'Home'}
-  `('for screen=$screen', ({ screen, extraProps, componentName }) => {
-    const component = SCREEN_COMPONENTS[componentName];
-
-    beforeEach(() => {
-      wrapper = shallowMount(App, { propsData: { screen, ...extraProps } });
-    });
-
-    it(`renders only ${componentName}`, () => {
-      const existences = mapValues(SCREEN_COMPONENTS, (x) => wrapper.findComponent(x).exists());
-
-      expect(existences).toEqual({
-        ...mapValues(SCREEN_COMPONENTS, () => false),
-        [componentName]: true,
-      });
-    });
-
-    it(`renders the ${componentName} with props`, () => {
-      expect(wrapper.findComponent(component).props()).toEqual(extraProps);
-    });
-
-    it('renders incubation banner', () => {
-      expect(findIncubationBanner().props()).toEqual({
-        shareFeedbackUrl: `${BASE_FEEDBACK_URL}?issuable_template=general_feedback`,
-        reportBugUrl: `${BASE_FEEDBACK_URL}?issuable_template=report_bug`,
-        featureRequestUrl: `${BASE_FEEDBACK_URL}?issuable_template=feature_request`,
-      });
-    });
-  });
-});
diff --git a/spec/frontend/google_cloud/components/errors/gcp_error_spec.js b/spec/frontend/google_cloud/components/errors/gcp_error_spec.js
deleted file mode 100644
index 4062a8b902a..00000000000
--- a/spec/frontend/google_cloud/components/errors/gcp_error_spec.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { GlAlert } from '@gitlab/ui';
-import GcpError from '~/google_cloud/components/errors/gcp_error.vue';
-
-describe('GcpError component', () => {
-  let wrapper;
-
-  const findAlert = () => wrapper.findComponent(GlAlert);
-  const findBlockquote = () => wrapper.find('blockquote');
-
-  const propsData = { error: 'IAM and CloudResourceManager API disabled' };
-
-  beforeEach(() => {
-    wrapper = shallowMount(GcpError, { propsData });
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('contains alert', () => {
-    expect(findAlert().exists()).toBe(true);
-  });
-
-  it('contains relevant text', () => {
-    const alertText = findAlert().text();
-    expect(findAlert().props('title')).toBe(GcpError.i18n.title);
-    expect(alertText).toContain(GcpError.i18n.description);
-  });
-
-  it('contains error stacktrace', () => {
-    expect(findBlockquote().text()).toBe(propsData.error);
-  });
-});
diff --git a/spec/frontend/google_cloud/components/errors/no_gcp_projects_spec.js b/spec/frontend/google_cloud/components/errors/no_gcp_projects_spec.js
deleted file mode 100644
index e1e20377880..00000000000
--- a/spec/frontend/google_cloud/components/errors/no_gcp_projects_spec.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { GlAlert, GlButton } from '@gitlab/ui';
-import NoGcpProjects from '~/google_cloud/components/errors/no_gcp_projects.vue';
-
-describe('NoGcpProjects component', () => {
-  let wrapper;
-
-  const findAlert = () => wrapper.findComponent(GlAlert);
-  const findButton = () => wrapper.findComponent(GlButton);
-
-  beforeEach(() => {
-    wrapper = mount(NoGcpProjects);
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('contains alert', () => {
-    expect(findAlert().exists()).toBe(true);
-  });
-
-  it('contains relevant text', () => {
-    expect(findAlert().props('title')).toBe(NoGcpProjects.i18n.title);
-    expect(findAlert().text()).toContain(NoGcpProjects.i18n.description);
-  });
-
-  it('contains create gcp project button', () => {
-    const button = findButton();
-    expect(button.text()).toBe(NoGcpProjects.i18n.createLabel);
-    expect(button.attributes('href')).toBe('https://console.cloud.google.com/projectcreate');
-  });
-});
diff --git a/spec/frontend/google_cloud/components/google_cloud_menu_spec.js b/spec/frontend/google_cloud/components/google_cloud_menu_spec.js
new file mode 100644
index 00000000000..4809ea37045
--- /dev/null
+++ b/spec/frontend/google_cloud/components/google_cloud_menu_spec.js
@@ -0,0 +1,40 @@
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import GoogleCloudMenu from '~/google_cloud/components/google_cloud_menu.vue';
+
+describe('google_cloud/components/google_cloud_menu', () => {
+  let wrapper;
+
+  const props = {
+    active: 'configuration',
+    configurationUrl: 'configuration-url',
+    deploymentsUrl: 'deployments-url',
+    databasesUrl: 'databases-url',
+  };
+
+  beforeEach(() => {
+    wrapper = mountExtended(GoogleCloudMenu, { propsData: props });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('contains active configuration link', () => {
+    const link = wrapper.findByTestId('configurationLink');
+    expect(link.text()).toBe(GoogleCloudMenu.i18n.configuration.title);
+    expect(link.attributes('href')).toBe(props.configurationUrl);
+    expect(link.element.classList.contains('gl-tab-nav-item-active')).toBe(true);
+  });
+
+  it('contains deployments link', () => {
+    const link = wrapper.findByTestId('deploymentsLink');
+    expect(link.text()).toBe(GoogleCloudMenu.i18n.deployments.title);
+    expect(link.attributes('href')).toBe(props.deploymentsUrl);
+  });
+
+  it('contains databases link', () => {
+    const link = wrapper.findByTestId('databasesLink');
+    expect(link.text()).toBe(GoogleCloudMenu.i18n.databases.title);
+    expect(link.attributes('href')).toBe(props.databasesUrl);
+  });
+});
diff --git a/spec/frontend/google_cloud/components/home_spec.js b/spec/frontend/google_cloud/components/home_spec.js
deleted file mode 100644
index 42e3d72577d..00000000000
--- a/spec/frontend/google_cloud/components/home_spec.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { GlTab, GlTabs } from '@gitlab/ui';
-import Home from '~/google_cloud/components/home.vue';
-import ServiceAccountsList from '~/google_cloud/components/service_accounts_list.vue';
-
-describe('google_cloud Home component', () => {
-  let wrapper;
-
-  const findTabs = () => wrapper.findComponent(GlTabs);
-  const findTabItems = () => findTabs().findAllComponents(GlTab);
-  const findTabItemsModel = () =>
-    findTabs()
-      .findAllComponents(GlTab)
-      .wrappers.map((x) => ({
-        title: x.attributes('title'),
-        disabled: x.attributes('disabled'),
-      }));
-
-  const TEST_HOME_PROPS = {
-    serviceAccounts: [{}, {}],
-    gcpRegions: [{}, {}],
-    createServiceAccountUrl: '#url-create-service-account',
-    configureGcpRegionsUrl: '#url-configure-gcp-regions',
-    emptyIllustrationUrl: '#url-empty-illustration',
-    enableCloudRunUrl: '#url-enable-cloud-run',
-    enableCloudStorageUrl: '#enableCloudStorageUrl',
-    revokeOauthUrl: '#revokeOauthUrl',
-  };
-
-  beforeEach(() => {
-    const propsData = {
-      screen: 'home',
-      ...TEST_HOME_PROPS,
-    };
-    wrapper = shallowMount(Home, { propsData });
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('google_cloud App tabs', () => {
-    it('should contain tabs', () => {
-      expect(findTabs().exists()).toBe(true);
-    });
-
-    it('should contain three tab items', () => {
-      expect(findTabItemsModel()).toEqual([
-        { title: 'Configuration', disabled: undefined },
-        { title: 'Deployments', disabled: undefined },
-        { title: 'Services', disabled: '' },
-      ]);
-    });
-
-    describe('configuration tab', () => {
-      it('should contain service accounts component', () => {
-        const serviceAccounts = findTabItems().at(0).findComponent(ServiceAccountsList);
-        expect(serviceAccounts.props()).toEqual({
-          list: TEST_HOME_PROPS.serviceAccounts,
-          createUrl: TEST_HOME_PROPS.createServiceAccountUrl,
-          emptyIllustrationUrl: TEST_HOME_PROPS.emptyIllustrationUrl,
-        });
-      });
-    });
-  });
-});
diff --git a/spec/frontend/google_cloud/components/incubation_banner_spec.js b/spec/frontend/google_cloud/components/incubation_banner_spec.js
index 89517be4ef1..09a4d92dca2 100644
--- a/spec/frontend/google_cloud/components/incubation_banner_spec.js
+++ b/spec/frontend/google_cloud/components/incubation_banner_spec.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { GlAlert, GlLink } from '@gitlab/ui';
 import IncubationBanner from '~/google_cloud/components/incubation_banner.vue';
 
-describe('IncubationBanner component', () => {
+describe('google_cloud/components/incubation_banner', () => {
   let wrapper;
 
   const findAlert = () => wrapper.findComponent(GlAlert);
@@ -12,12 +12,7 @@ describe('IncubationBanner component', () => {
   const findShareFeedbackLink = () => findLinks().at(2);
 
   beforeEach(() => {
-    const propsData = {
-      shareFeedbackUrl: 'url_general_feedback',
-      reportBugUrl: 'url_report_bug',
-      featureRequestUrl: 'url_feature_request',
-    };
-    wrapper = mount(IncubationBanner, { propsData });
+    wrapper = mount(IncubationBanner);
   });
 
   afterEach(() => {
@@ -41,20 +36,26 @@ describe('IncubationBanner component', () => {
 
     it('contains feature request link', () => {
       const link = findFeatureRequestLink();
+      const expected =
+        'https://gitlab.com/gitlab-org/incubation-engineering/five-minute-production/feedback/-/issues/new?issuable_template=feature_request';
       expect(link.text()).toBe('request a feature');
-      expect(link.attributes('href')).toBe('url_feature_request');
+      expect(link.attributes('href')).toBe(expected);
     });
 
     it('contains report bug link', () => {
       const link = findReportBugLink();
+      const expected =
+        'https://gitlab.com/gitlab-org/incubation-engineering/five-minute-production/feedback/-/issues/new?issuable_template=report_bug';
       expect(link.text()).toBe('report a bug');
-      expect(link.attributes('href')).toBe('url_report_bug');
+      expect(link.attributes('href')).toBe(expected);
     });
 
     it('contains share feedback link', () => {
       const link = findShareFeedbackLink();
+      const expected =
+        'https://gitlab.com/gitlab-org/incubation-engineering/five-minute-production/feedback/-/issues/new?issuable_template=general_feedback';
       expect(link.text()).toBe('share feedback');
-      expect(link.attributes('href')).toBe('url_general_feedback');
+      expect(link.attributes('href')).toBe(expected);
     });
   });
 });
diff --git a/spec/frontend/google_cloud/components/revoke_oauth_spec.js b/spec/frontend/google_cloud/components/revoke_oauth_spec.js
index 87580dbf6de..faaec07fc35 100644
--- a/spec/frontend/google_cloud/components/revoke_oauth_spec.js
+++ b/spec/frontend/google_cloud/components/revoke_oauth_spec.js
@@ -5,7 +5,7 @@ import RevokeOauth, {
   GOOGLE_CLOUD_REVOKE_DESCRIPTION,
 } from '~/google_cloud/components/revoke_oauth.vue';
 
-describe('RevokeOauth component', () => {
+describe('google_cloud/components/revoke_oauth', () => {
   let wrapper;
 
   const findTitle = () => wrapper.find('h2');
diff --git a/spec/frontend/google_cloud/configuration/panel_spec.js b/spec/frontend/google_cloud/configuration/panel_spec.js
new file mode 100644
index 00000000000..79eb4cb4918
--- /dev/null
+++ b/spec/frontend/google_cloud/configuration/panel_spec.js
@@ -0,0 +1,65 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import Panel from '~/google_cloud/configuration/panel.vue';
+import IncubationBanner from '~/google_cloud/components/incubation_banner.vue';
+import GoogleCloudMenu from '~/google_cloud/components/google_cloud_menu.vue';
+import ServiceAccountsList from '~/google_cloud/service_accounts/list.vue';
+import GcpRegionsList from '~/google_cloud/gcp_regions/list.vue';
+import RevokeOauth from '~/google_cloud/components/revoke_oauth.vue';
+
+describe('google_cloud/configuration/panel', () => {
+  let wrapper;
+
+  const props = {
+    configurationUrl: 'configuration-url',
+    deploymentsUrl: 'deployments-url',
+    databasesUrl: 'databases-url',
+    serviceAccounts: [],
+    createServiceAccountUrl: 'create-service-account-url',
+    emptyIllustrationUrl: 'empty-illustration-url',
+    gcpRegions: [],
+    configureGcpRegionsUrl: 'configure-gcp-regions-url',
+    revokeOauthUrl: 'revoke-oauth-url',
+  };
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(Panel, { propsData: props });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('contains incubation banner', () => {
+    const target = wrapper.findComponent(IncubationBanner);
+    expect(target.exists()).toBe(true);
+  });
+
+  it('contains google cloud menu with `configuration` active', () => {
+    const target = wrapper.findComponent(GoogleCloudMenu);
+    expect(target.exists()).toBe(true);
+    expect(target.props('active')).toBe('configuration');
+    expect(target.props('configurationUrl')).toBe(props.configurationUrl);
+    expect(target.props('deploymentsUrl')).toBe(props.deploymentsUrl);
+    expect(target.props('databasesUrl')).toBe(props.databasesUrl);
+  });
+
+  it('contains service accounts list', () => {
+    const target = wrapper.findComponent(ServiceAccountsList);
+    expect(target.exists()).toBe(true);
+    expect(target.props('list')).toBe(props.serviceAccounts);
+    expect(target.props('createUrl')).toBe(props.createServiceAccountUrl);
+    expect(target.props('emptyIllustrationUrl')).toBe(props.emptyIllustrationUrl);
+  });
+
+  it('contains gcp regions list', () => {
+    const target = wrapper.findComponent(GcpRegionsList);
+    expect(target.props('list')).toBe(props.gcpRegions);
+    expect(target.props('createUrl')).toBe(props.configureGcpRegionsUrl);
+    expect(target.props('emptyIllustrationUrl')).toBe(props.emptyIllustrationUrl);
+  });
+
+  it('contains revoke oauth', () => {
+    const target = wrapper.findComponent(RevokeOauth);
+    expect(target.props('url')).toBe(props.revokeOauthUrl);
+  });
+});
diff --git a/spec/frontend/google_cloud/databases/cloudsql/create_instance_form_spec.js b/spec/frontend/google_cloud/databases/cloudsql/create_instance_form_spec.js
new file mode 100644
index 00000000000..48e4b0ca1ad
--- /dev/null
+++ b/spec/frontend/google_cloud/databases/cloudsql/create_instance_form_spec.js
@@ -0,0 +1,103 @@
+import { GlFormCheckbox } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import InstanceForm from '~/google_cloud/databases/cloudsql/create_instance_form.vue';
+
+describe('google_cloud/databases/cloudsql/create_instance_form', () => {
+  let wrapper;
+
+  const findByTestId = (id) => wrapper.findByTestId(id);
+  const findCancelButton = () => findByTestId('cancel-button');
+  const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findHeader = () => wrapper.find('header');
+  const findSubmitButton = () => findByTestId('submit-button');
+
+  const propsData = {
+    gcpProjects: [],
+    refs: [],
+    cancelPath: '#cancel-url',
+    formTitle: 'mock form title',
+    formDescription: 'mock form description',
+    databaseVersions: [],
+    tiers: [],
+  };
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(InstanceForm, { propsData, stubs: { GlFormCheckbox } });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('contains header', () => {
+    expect(findHeader().exists()).toBe(true);
+  });
+
+  it('contains GCP project form group', () => {
+    const formGroup = findByTestId('form_group_gcp_project');
+    expect(formGroup.exists()).toBe(true);
+    expect(formGroup.attributes('label')).toBe(InstanceForm.i18n.gcpProjectLabel);
+    expect(formGroup.attributes('description')).toBe(InstanceForm.i18n.gcpProjectDescription);
+  });
+
+  it('contains GCP project dropdown', () => {
+    const select = findByTestId('select_gcp_project');
+    expect(select.exists()).toBe(true);
+  });
+
+  it('contains Environments form group', () => {
+    const formGroup = findByTestId('form_group_environments');
+    expect(formGroup.exists()).toBe(true);
+    expect(formGroup.attributes('label')).toBe(InstanceForm.i18n.refsLabel);
+    expect(formGroup.attributes('description')).toBe(InstanceForm.i18n.refsDescription);
+  });
+
+  it('contains Environments dropdown', () => {
+    const select = findByTestId('select_environments');
+    expect(select.exists()).toBe(true);
+  });
+
+  it('contains Tier form group', () => {
+    const formGroup = findByTestId('form_group_tier');
+    expect(formGroup.exists()).toBe(true);
+    expect(formGroup.attributes('label')).toBe(InstanceForm.i18n.tierLabel);
+    expect(formGroup.attributes('description')).toBe(InstanceForm.i18n.tierDescription);
+  });
+
+  it('contains Tier dropdown', () => {
+    const select = findByTestId('select_tier');
+    expect(select.exists()).toBe(true);
+  });
+
+  it('contains Database Version form group', () => {
+    const formGroup = findByTestId('form_group_database_version');
+    expect(formGroup.exists()).toBe(true);
+    expect(formGroup.attributes('label')).toBe(InstanceForm.i18n.databaseVersionLabel);
+  });
+
+  it('contains Database Version dropdown', () => {
+    const select = findByTestId('select_database_version');
+    expect(select.exists()).toBe(true);
+  });
+
+  it('contains Submit button', () => {
+    expect(findSubmitButton().exists()).toBe(true);
+    expect(findSubmitButton().text()).toBe(InstanceForm.i18n.submitLabel);
+  });
+
+  it('contains Cancel button', () => {
+    expect(findCancelButton().exists()).toBe(true);
+    expect(findCancelButton().text()).toBe(InstanceForm.i18n.cancelLabel);
+    expect(findCancelButton().attributes('href')).toBe('#cancel-url');
+  });
+
+  it('contains Confirmation checkbox', () => {
+    const checkbox = findCheckbox();
+    expect(checkbox.text()).toBe(InstanceForm.i18n.checkboxLabel);
+  });
+
+  it('checkbox must be required', () => {
+    const checkbox = findCheckbox();
+    expect(checkbox.attributes('required')).toBe('true');
+  });
+});
diff --git a/spec/frontend/google_cloud/databases/cloudsql/instance_table_spec.js b/spec/frontend/google_cloud/databases/cloudsql/instance_table_spec.js
new file mode 100644
index 00000000000..a5736d0a524
--- /dev/null
+++ b/spec/frontend/google_cloud/databases/cloudsql/instance_table_spec.js
@@ -0,0 +1,65 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlEmptyState, GlTable } from '@gitlab/ui';
+import InstanceTable from '~/google_cloud/databases/cloudsql/instance_table.vue';
+
+describe('google_cloud/databases/cloudsql/instance_table', () => {
+  let wrapper;
+
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findTable = () => wrapper.findComponent(GlTable);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when there are no instances', () => {
+    beforeEach(() => {
+      const propsData = {
+        cloudsqlInstances: [],
+        emptyIllustrationUrl: '#empty-illustration-url',
+      };
+      wrapper = shallowMount(InstanceTable, { propsData });
+    });
+
+    it('should depict empty state', () => {
+      const emptyState = findEmptyState();
+      expect(emptyState.exists()).toBe(true);
+      expect(emptyState.attributes('title')).toBe(InstanceTable.i18n.noInstancesTitle);
+      expect(emptyState.attributes('description')).toBe(InstanceTable.i18n.noInstancesDescription);
+    });
+  });
+
+  describe('when there are three instances', () => {
+    beforeEach(() => {
+      const propsData = {
+        cloudsqlInstances: [
+          {
+            ref: '*',
+            gcp_project: 'test-gcp-project',
+            instance_name: 'postgres-14-instance',
+            version: 'POSTGRES_14',
+          },
+          {
+            ref: 'production',
+            gcp_project: 'prod-gcp-project',
+            instance_name: 'postgres-14-instance',
+            version: 'POSTGRES_14',
+          },
+          {
+            ref: 'staging',
+            gcp_project: 'test-gcp-project',
+            instance_name: 'postgres-14-instance',
+            version: 'POSTGRES_14',
+          },
+        ],
+        emptyIllustrationUrl: '#empty-illustration-url',
+      };
+      wrapper = shallowMount(InstanceTable, { propsData });
+    });
+
+    it('should contain a table', () => {
+      const table = findTable();
+      expect(table.exists()).toBe(true);
+    });
+  });
+});
diff --git a/spec/frontend/google_cloud/databases/panel_spec.js b/spec/frontend/google_cloud/databases/panel_spec.js
new file mode 100644
index 00000000000..490c0136651
--- /dev/null
+++ b/spec/frontend/google_cloud/databases/panel_spec.js
@@ -0,0 +1,36 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import Panel from '~/google_cloud/databases/panel.vue';
+import IncubationBanner from '~/google_cloud/components/incubation_banner.vue';
+import GoogleCloudMenu from '~/google_cloud/components/google_cloud_menu.vue';
+
+describe('google_cloud/databases/panel', () => {
+  let wrapper;
+
+  const props = {
+    configurationUrl: 'configuration-url',
+    deploymentsUrl: 'deployments-url',
+    databasesUrl: 'databases-url',
+  };
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(Panel, { propsData: props });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('contains incubation banner', () => {
+    const target = wrapper.findComponent(IncubationBanner);
+    expect(target.exists()).toBe(true);
+  });
+
+  it('contains google cloud menu with `databases` active', () => {
+    const target = wrapper.findComponent(GoogleCloudMenu);
+    expect(target.exists()).toBe(true);
+    expect(target.props('active')).toBe('databases');
+    expect(target.props('configurationUrl')).toBe(props.configurationUrl);
+    expect(target.props('deploymentsUrl')).toBe(props.deploymentsUrl);
+    expect(target.props('databasesUrl')).toBe(props.databasesUrl);
+  });
+});
diff --git a/spec/frontend/google_cloud/databases/service_table_spec.js b/spec/frontend/google_cloud/databases/service_table_spec.js
new file mode 100644
index 00000000000..4a622e544e1
--- /dev/null
+++ b/spec/frontend/google_cloud/databases/service_table_spec.js
@@ -0,0 +1,44 @@
+import { GlTable } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import ServiceTable from '~/google_cloud/databases/service_table.vue';
+
+describe('google_cloud/databases/service_table', () => {
+  let wrapper;
+
+  const findTable = () => wrapper.findComponent(GlTable);
+
+  beforeEach(() => {
+    const propsData = {
+      cloudsqlPostgresUrl: '#url-cloudsql-postgres',
+      cloudsqlMysqlUrl: '#url-cloudsql-mysql',
+      cloudsqlSqlserverUrl: '#url-cloudsql-sqlserver',
+      alloydbPostgresUrl: '#url-alloydb-postgres',
+      memorystoreRedisUrl: '#url-memorystore-redis',
+      firestoreUrl: '#url-firestore',
+    };
+    wrapper = mountExtended(ServiceTable, { propsData });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should contain a table', () => {
+    expect(findTable().exists()).toBe(true);
+  });
+
+  it.each`
+    name                    | testId                         | url
+    ${'cloudsql-postgres'}  | ${'button-cloudsql-postgres'}  | ${'#url-cloudsql-postgres'}
+    ${'cloudsql-mysql'}     | ${'button-cloudsql-mysql'}     | ${'#url-cloudsql-mysql'}
+    ${'cloudsql-sqlserver'} | ${'button-cloudsql-sqlserver'} | ${'#url-cloudsql-sqlserver'}
+    ${'alloydb-postgres'}   | ${'button-alloydb-postgres'}   | ${'#url-alloydb-postgres'}
+    ${'memorystore-redis'}  | ${'button-memorystore-redis'}  | ${'#url-memorystore-redis'}
+    ${'firestore'}          | ${'button-firestore'}          | ${'#url-firestore'}
+  `('renders $name button with correct url', ({ testId, url }) => {
+    const button = wrapper.findByTestId(testId);
+
+    expect(button.exists()).toBe(true);
+    expect(button.attributes('href')).toBe(url);
+  });
+});
diff --git a/spec/frontend/google_cloud/deployments/panel_spec.js b/spec/frontend/google_cloud/deployments/panel_spec.js
new file mode 100644
index 00000000000..729db1707a7
--- /dev/null
+++ b/spec/frontend/google_cloud/deployments/panel_spec.js
@@ -0,0 +1,46 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import Panel from '~/google_cloud/deployments/panel.vue';
+import IncubationBanner from '~/google_cloud/components/incubation_banner.vue';
+import GoogleCloudMenu from '~/google_cloud/components/google_cloud_menu.vue';
+import ServiceTable from '~/google_cloud/deployments/service_table.vue';
+
+describe('google_cloud/deployments/panel', () => {
+  let wrapper;
+
+  const props = {
+    configurationUrl: 'configuration-url',
+    deploymentsUrl: 'deployments-url',
+    databasesUrl: 'databases-url',
+    enableCloudRunUrl: 'cloud-run-url',
+    enableCloudStorageUrl: 'cloud-storage-url',
+  };
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(Panel, { propsData: props });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('contains incubation banner', () => {
+    const target = wrapper.findComponent(IncubationBanner);
+    expect(target.exists()).toBe(true);
+  });
+
+  it('contains google cloud menu with `deployments` active', () => {
+    const target = wrapper.findComponent(GoogleCloudMenu);
+    expect(target.exists()).toBe(true);
+    expect(target.props('active')).toBe('deployments');
+    expect(target.props('configurationUrl')).toBe(props.configurationUrl);
+    expect(target.props('deploymentsUrl')).toBe(props.deploymentsUrl);
+    expect(target.props('databasesUrl')).toBe(props.databasesUrl);
+  });
+
+  it('contains service-table', () => {
+    const target = wrapper.findComponent(ServiceTable);
+    expect(target.exists()).toBe(true);
+    expect(target.props('cloudRunUrl')).toBe(props.enableCloudRunUrl);
+    expect(target.props('cloudStorageUrl')).toBe(props.enableCloudStorageUrl);
+  });
+});
diff --git a/spec/frontend/google_cloud/components/deployments_service_table_spec.js b/spec/frontend/google_cloud/deployments/service_table_spec.js
index 882376547c4..8faad64e313 100644
--- a/spec/frontend/google_cloud/components/deployments_service_table_spec.js
+++ b/spec/frontend/google_cloud/deployments/service_table_spec.js
@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils';
 import { GlButton, GlTable } from '@gitlab/ui';
-import DeploymentsServiceTable from '~/google_cloud/components/deployments_service_table.vue';
+import DeploymentsServiceTable from '~/google_cloud/deployments/service_table.vue';
 
-describe('google_cloud DeploymentsServiceTable component', () => {
+describe('google_cloud/deployments/service_table', () => {
   let wrapper;
 
   const findTable = () => wrapper.findComponent(GlTable);
diff --git a/spec/frontend/google_cloud/components/gcp_regions_form_spec.js b/spec/frontend/google_cloud/gcp_regions/form_spec.js
index a8b7593e7c8..1030e9c8a18 100644
--- a/spec/frontend/google_cloud/components/gcp_regions_form_spec.js
+++ b/spec/frontend/google_cloud/gcp_regions/form_spec.js
@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlButton, GlFormGroup, GlFormSelect } from '@gitlab/ui';
-import GcpRegionsForm from '~/google_cloud/components/gcp_regions_form.vue';
+import GcpRegionsForm from '~/google_cloud/gcp_regions/form.vue';
 
-describe('GcpRegionsForm component', () => {
+describe('google_cloud/gcp_regions/form', () => {
   let wrapper;
 
   const findHeader = () => wrapper.find('header');
diff --git a/spec/frontend/google_cloud/components/gcp_regions_list_spec.js b/spec/frontend/google_cloud/gcp_regions/list_spec.js
index ab0c17451e8..6d8c389e5a1 100644
--- a/spec/frontend/google_cloud/components/gcp_regions_list_spec.js
+++ b/spec/frontend/google_cloud/gcp_regions/list_spec.js
@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils';
 import { GlButton, GlEmptyState, GlTable } from '@gitlab/ui';
-import GcpRegionsList from '~/google_cloud/components/gcp_regions_list.vue';
+import GcpRegionsList from '~/google_cloud/gcp_regions/list.vue';
 
-describe('GcpRegions component', () => {
+describe('google_cloud/gcp_regions/list', () => {
   describe('when the project does not have any configured regions', () => {
     let wrapper;
 
diff --git a/spec/frontend/google_cloud/components/service_accounts_form_spec.js b/spec/frontend/google_cloud/service_accounts/form_spec.js
index 38602d4e8cc..8be481774fa 100644
--- a/spec/frontend/google_cloud/components/service_accounts_form_spec.js
+++ b/spec/frontend/google_cloud/service_accounts/form_spec.js
@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlButton, GlFormGroup, GlFormSelect, GlFormCheckbox } from '@gitlab/ui';
-import ServiceAccountsForm from '~/google_cloud/components/service_accounts_form.vue';
+import ServiceAccountsForm from '~/google_cloud/service_accounts/form.vue';
 
-describe('ServiceAccountsForm component', () => {
+describe('google_cloud/service_accounts/form', () => {
   let wrapper;
 
   const findHeader = () => wrapper.find('header');
diff --git a/spec/frontend/google_cloud/components/service_accounts_list_spec.js b/spec/frontend/google_cloud/service_accounts/list_spec.js
index f7051c8a53d..7a76a893757 100644
--- a/spec/frontend/google_cloud/components/service_accounts_list_spec.js
+++ b/spec/frontend/google_cloud/service_accounts/list_spec.js
@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils';
 import { GlAlert, GlButton, GlEmptyState, GlTable } from '@gitlab/ui';
-import ServiceAccountsList from '~/google_cloud/components/service_accounts_list.vue';
+import ServiceAccountsList from '~/google_cloud/service_accounts/list.vue';
 
-describe('ServiceAccounts component', () => {
+describe('google_cloud/service_accounts/list', () => {
   describe('when the project does not have any service accounts', () => {
     let wrapper;
 
diff --git a/spec/frontend/google_tag_manager/index_spec.js b/spec/frontend/google_tag_manager/index_spec.js
index 50811f43fc3..6a7eb1fd9f1 100644
--- a/spec/frontend/google_tag_manager/index_spec.js
+++ b/spec/frontend/google_tag_manager/index_spec.js
@@ -10,6 +10,7 @@ import {
   trackSaasTrialGroup,
   trackSaasTrialProject,
   trackSaasTrialGetStarted,
+  trackTrialAcceptTerms,
   trackCheckout,
   trackTransaction,
   trackAddToCartUsageTab,
@@ -255,6 +256,16 @@ describe('~/google_tag_manager/index', () => {
       expect(logError).not.toHaveBeenCalled();
     });
 
+    it('when trackTrialAcceptTerms is invoked', () => {
+      expect(spy).not.toHaveBeenCalled();
+
+      trackTrialAcceptTerms();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith({ event: 'saasTrialAcceptTerms' });
+      expect(logError).not.toHaveBeenCalled();
+    });
+
     describe('when trackCheckout is invoked', () => {
       it('with selectedPlan: 2c92a00d76f0d5060176f2fb0a5029ff', () => {
         expect(spy).not.toHaveBeenCalled();
diff --git a/spec/frontend/groups/components/group_folder_spec.js b/spec/frontend/groups/components/group_folder_spec.js
index 98b7c2dd6c6..f223333360d 100644
--- a/spec/frontend/groups/components/group_folder_spec.js
+++ b/spec/frontend/groups/components/group_folder_spec.js
@@ -1,65 +1,50 @@
-import Vue, { nextTick } from 'vue';
-
-import groupFolderComponent from '~/groups/components/group_folder.vue';
-import groupItemComponent from '~/groups/components/group_item.vue';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import GroupFolder from '~/groups/components/group_folder.vue';
+import GroupItem from '~/groups/components/group_item.vue';
+import { MAX_CHILDREN_COUNT } from '~/groups/constants';
 import { mockGroups, mockParentGroupItem } from '../mock_data';
 
-const createComponent = (groups = mockGroups, parentGroup = mockParentGroupItem) => {
-  const Component = Vue.extend(groupFolderComponent);
-
-  return new Component({
-    propsData: {
-      groups,
-      parentGroup,
-    },
-  });
-};
+describe('GroupFolder component', () => {
+  let wrapper;
 
-describe('GroupFolderComponent', () => {
-  let vm;
+  Vue.component('GroupItem', GroupItem);
 
-  beforeEach(async () => {
-    Vue.component('GroupItem', groupItemComponent);
+  const findLink = () => wrapper.find('a');
 
-    vm = createComponent();
-    vm.$mount();
-
-    await nextTick();
-  });
+  const createComponent = ({ groups = mockGroups, parentGroup = mockParentGroupItem } = {}) =>
+    shallowMount(GroupFolder, {
+      propsData: {
+        groups,
+        parentGroup,
+      },
+    });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  describe('computed', () => {
-    describe('hasMoreChildren', () => {
-      it('should return false when childrenCount of group is less than MAX_CHILDREN_COUNT', () => {
-        expect(vm.hasMoreChildren).toBeFalsy();
-      });
-    });
+  it('does not render more children stats link when children count of group is under limit', () => {
+    wrapper = createComponent();
 
-    describe('moreChildrenStats', () => {
-      it('should return message with count of excess children over MAX_CHILDREN_COUNT limit', () => {
-        expect(vm.moreChildrenStats).toBe('3 more items');
-      });
-    });
+    expect(findLink().exists()).toBe(false);
   });
 
-  describe('template', () => {
-    it('should render component template correctly', () => {
-      expect(vm.$el.classList.contains('group-list-tree')).toBeTruthy();
-      expect(vm.$el.querySelectorAll('li.group-row').length).toBe(7);
+  it('renders text of count of excess children when children count of group is over limit', () => {
+    const childrenCount = MAX_CHILDREN_COUNT + 1;
+    wrapper = createComponent({
+      parentGroup: {
+        ...mockParentGroupItem,
+        childrenCount,
+      },
     });
 
-    it('should render more children link when groups list has children over MAX_CHILDREN_COUNT limit', () => {
-      const parentGroup = { ...mockParentGroupItem };
-      parentGroup.childrenCount = 21;
+    expect(findLink().text()).toBe(`${childrenCount} more items`);
+  });
 
-      const newVm = createComponent(mockGroups, parentGroup);
-      newVm.$mount();
+  it('renders group items', () => {
+    wrapper = createComponent();
 
-      expect(newVm.$el.querySelector('li.group-row a.has-more-items')).toBeDefined();
-      newVm.$destroy();
-    });
+    expect(wrapper.findAllComponents(GroupItem)).toHaveLength(7);
   });
 });
diff --git a/spec/frontend/groups/components/group_item_spec.js b/spec/frontend/groups/components/group_item_spec.js
index 8ea7e54aef4..0bc80df6535 100644
--- a/spec/frontend/groups/components/group_item_spec.js
+++ b/spec/frontend/groups/components/group_item_spec.js
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { GlPopover } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
 import GroupFolder from '~/groups/components/group_folder.vue';
 import GroupItem from '~/groups/components/group_item.vue';
@@ -6,14 +6,25 @@ import ItemActions from '~/groups/components/item_actions.vue';
 import eventHub from '~/groups/event_hub';
 import { getGroupItemMicrodata } from '~/groups/store/utils';
 import * as urlUtilities from '~/lib/utils/url_utility';
+import {
+  ITEM_TYPE,
+  VISIBILITY_INTERNAL,
+  VISIBILITY_PRIVATE,
+  VISIBILITY_PUBLIC,
+} from '~/groups/constants';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { mockParentGroupItem, mockChildren } from '../mock_data';
 
 const createComponent = (
   propsData = { group: mockParentGroupItem, parentGroup: mockChildren[0] },
+  provide = {
+    currentGroupVisibility: VISIBILITY_PRIVATE,
+  },
 ) => {
-  return mount(GroupItem, {
+  return mountExtended(GroupItem, {
     propsData,
     components: { GroupFolder },
+    provide,
   });
 };
 
@@ -276,4 +287,90 @@ describe('GroupItemComponent', () => {
       });
     });
   });
+
+  describe('visibility warning popover', () => {
+    const findPopover = () => wrapper.findComponent(GlPopover);
+
+    const itDoesNotRenderVisibilityWarningPopover = () => {
+      it('does not render visibility warning popover', () => {
+        expect(findPopover().exists()).toBe(false);
+      });
+    };
+
+    describe('when showing groups', () => {
+      beforeEach(() => {
+        wrapper = createComponent();
+      });
+
+      itDoesNotRenderVisibilityWarningPopover();
+    });
+
+    describe('when `action` prop is not `shared`', () => {
+      beforeEach(() => {
+        wrapper = createComponent({
+          group: mockParentGroupItem,
+          parentGroup: mockChildren[0],
+          action: 'subgroups_and_projects',
+        });
+      });
+
+      itDoesNotRenderVisibilityWarningPopover();
+    });
+
+    describe('when showing projects', () => {
+      describe.each`
+        itemVisibility         | currentGroupVisibility | isPopoverShown
+        ${VISIBILITY_PRIVATE}  | ${VISIBILITY_PUBLIC}   | ${false}
+        ${VISIBILITY_INTERNAL} | ${VISIBILITY_PUBLIC}   | ${false}
+        ${VISIBILITY_PUBLIC}   | ${VISIBILITY_PUBLIC}   | ${false}
+        ${VISIBILITY_PRIVATE}  | ${VISIBILITY_PRIVATE}  | ${false}
+        ${VISIBILITY_INTERNAL} | ${VISIBILITY_PRIVATE}  | ${true}
+        ${VISIBILITY_PUBLIC}   | ${VISIBILITY_PRIVATE}  | ${true}
+      `(
+        'when item visibility is $itemVisibility and parent group visibility is $currentGroupVisibility',
+        ({ itemVisibility, currentGroupVisibility, isPopoverShown }) => {
+          beforeEach(() => {
+            wrapper = createComponent(
+              {
+                group: {
+                  ...mockParentGroupItem,
+                  visibility: itemVisibility,
+                  type: ITEM_TYPE.PROJECT,
+                },
+                parentGroup: mockChildren[0],
+                action: 'shared',
+              },
+              {
+                currentGroupVisibility,
+              },
+            );
+          });
+
+          if (isPopoverShown) {
+            it('renders visibility warning popover', () => {
+              expect(findPopover().exists()).toBe(true);
+            });
+          } else {
+            itDoesNotRenderVisibilityWarningPopover();
+          }
+        },
+      );
+    });
+
+    it('sets up popover `target` prop correctly', () => {
+      wrapper = createComponent({
+        group: {
+          ...mockParentGroupItem,
+          visibility: VISIBILITY_PUBLIC,
+          type: ITEM_TYPE.PROJECT,
+        },
+        parentGroup: mockChildren[0],
+        action: 'shared',
+      });
+
+      expect(findPopover().props('target')()).toEqual(
+        wrapper.findByRole('button', { name: GroupItem.i18n.popoverTitle }).element,
+      );
+    });
+  });
 });
diff --git a/spec/frontend/groups/components/group_name_and_path_spec.js b/spec/frontend/groups/components/group_name_and_path_spec.js
index eaa0801ab50..9c9bdead6fa 100644
--- a/spec/frontend/groups/components/group_name_and_path_spec.js
+++ b/spec/frontend/groups/components/group_name_and_path_spec.js
@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { merge } from 'lodash';
 import { GlAlert } from '@gitlab/ui';
 import { mountExtended, extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -50,17 +51,17 @@ describe('GroupNameAndPath', () => {
   const findAlert = () => extendedWrapper(wrapper.findComponent(GlAlert));
 
   const apiMockAvailablePath = () => {
-    getGroupPathAvailability.mockResolvedValue({
+    getGroupPathAvailability.mockResolvedValueOnce({
       data: { exists: false, suggests: [] },
     });
   };
   const apiMockUnavailablePath = (suggests = [mockGroupUrlSuggested]) => {
-    getGroupPathAvailability.mockResolvedValue({
+    getGroupPathAvailability.mockResolvedValueOnce({
       data: { exists: true, suggests },
     });
   };
   const apiMockLoading = () => {
-    getGroupPathAvailability.mockImplementation(() => new Promise(() => {}));
+    getGroupPathAvailability.mockImplementationOnce(() => new Promise(() => {}));
   };
 
   const expectLoadingMessageExists = () => {
@@ -169,7 +170,7 @@ describe('GroupNameAndPath', () => {
 
     describe('when API call fails', () => {
       it('calls `createAlert`', async () => {
-        getGroupPathAvailability.mockRejectedValue({});
+        getGroupPathAvailability.mockRejectedValueOnce({});
 
         createComponent();
 
@@ -184,14 +185,20 @@ describe('GroupNameAndPath', () => {
 
     describe('when multiple API calls are in-flight', () => {
       it('aborts the first API call and resolves second API call', async () => {
-        apiMockLoading();
+        getGroupPathAvailability.mockRejectedValueOnce({ __CANCEL__: true });
         apiMockUnavailablePath();
+
         const abortSpy = jest.spyOn(AbortController.prototype, 'abort');
 
         createComponent();
 
         await findGroupNameField().setValue('Foo');
         await findGroupNameField().setValue(mockGroupName);
+
+        // Wait for re-render to ensure loading message is still there
+        await nextTick();
+        expectLoadingMessageExists();
+
         await waitForPromises();
 
         expect(createAlert).not.toHaveBeenCalled();
diff --git a/spec/frontend/groups/components/groups_spec.js b/spec/frontend/groups/components/groups_spec.js
index 590b4fb3d57..48a2319cf96 100644
--- a/spec/frontend/groups/components/groups_spec.js
+++ b/spec/frontend/groups/components/groups_spec.js
@@ -1,45 +1,55 @@
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
 
-import mountComponent from 'helpers/vue_mount_component_helper';
-import groupFolderComponent from '~/groups/components/group_folder.vue';
-import groupItemComponent from '~/groups/components/group_item.vue';
-import groupsComponent from '~/groups/components/groups.vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import GroupFolderComponent from '~/groups/components/group_folder.vue';
+import GroupItemComponent from '~/groups/components/group_item.vue';
+import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
+import GroupsComponent from '~/groups/components/groups.vue';
 import eventHub from '~/groups/event_hub';
+import { VISIBILITY_PRIVATE } from '~/groups/constants';
 import { mockGroups, mockPageInfo } from '../mock_data';
 
-const createComponent = (searchEmpty = false) => {
-  const Component = Vue.extend(groupsComponent);
+describe('GroupsComponent', () => {
+  let wrapper;
 
-  return mountComponent(Component, {
+  const defaultPropsData = {
     groups: mockGroups,
     pageInfo: mockPageInfo,
     searchEmptyMessage: 'No matching results',
-    searchEmpty,
-  });
-};
+    searchEmpty: false,
+  };
 
-describe('GroupsComponent', () => {
-  let vm;
-
-  beforeEach(async () => {
-    Vue.component('GroupFolder', groupFolderComponent);
-    Vue.component('GroupItem', groupItemComponent);
+  const createComponent = ({ propsData } = {}) => {
+    wrapper = mountExtended(GroupsComponent, {
+      propsData: {
+        ...defaultPropsData,
+        ...propsData,
+      },
+      provide: {
+        currentGroupVisibility: VISIBILITY_PRIVATE,
+      },
+    });
+  };
 
-    vm = createComponent();
+  const findPaginationLinks = () => wrapper.findComponent(PaginationLinks);
 
-    await nextTick();
+  beforeEach(async () => {
+    Vue.component('GroupFolder', GroupFolderComponent);
+    Vue.component('GroupItem', GroupItemComponent);
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('methods', () => {
     describe('change', () => {
       it('should emit `fetchPage` event when page is changed via pagination', () => {
+        createComponent();
+
         jest.spyOn(eventHub, '$emit').mockImplementation();
 
-        vm.change(2);
+        findPaginationLinks().props('change')(2);
 
         expect(eventHub.$emit).toHaveBeenCalledWith('fetchPage', {
           page: 2,
@@ -52,18 +62,18 @@ describe('GroupsComponent', () => {
   });
 
   describe('template', () => {
-    it('should render component template correctly', async () => {
-      await nextTick();
-      expect(vm.$el.querySelector('.groups-list-tree-container')).toBeDefined();
-      expect(vm.$el.querySelector('.group-list-tree')).toBeDefined();
-      expect(vm.$el.querySelector('.gl-pagination')).toBeDefined();
-      expect(vm.$el.querySelectorAll('.has-no-search-results').length).toBe(0);
+    it('should render component template correctly', () => {
+      createComponent();
+
+      expect(wrapper.findComponent(GroupFolderComponent).exists()).toBe(true);
+      expect(findPaginationLinks().exists()).toBe(true);
+      expect(wrapper.findByText(defaultPropsData.searchEmptyMessage).exists()).toBe(false);
     });
 
-    it('should render empty search message when `searchEmpty` is `true`', async () => {
-      vm.searchEmpty = true;
-      await nextTick();
-      expect(vm.$el.querySelector('.has-no-search-results')).toBeDefined();
+    it('should render empty search message when `searchEmpty` is `true`', () => {
+      createComponent({ propsData: { searchEmpty: true } });
+
+      expect(wrapper.findByText(defaultPropsData.searchEmptyMessage).exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/groups/mock_data.js b/spec/frontend/groups/mock_data.js
index 603cb27deec..9a325776374 100644
--- a/spec/frontend/groups/mock_data.js
+++ b/spec/frontend/groups/mock_data.js
@@ -5,26 +5,6 @@ export const ITEM_TYPE = {
   GROUP: 'group',
 };
 
-export const GROUP_VISIBILITY_TYPE = {
-  public: 'Public - The group and any public projects can be viewed without any authentication.',
-  internal:
-    'Internal - The group and any internal projects can be viewed by any logged in user except external users.',
-  private: 'Private - The group and its projects can only be viewed by members.',
-};
-
-export const PROJECT_VISIBILITY_TYPE = {
-  public: 'Public - The project can be accessed without any authentication.',
-  internal: 'Internal - The project can be accessed by any logged in user except external users.',
-  private:
-    'Private - Project access must be granted explicitly to each user. If this project is part of a group, access will be granted to members of the group.',
-};
-
-export const VISIBILITY_TYPE_ICON = {
-  public: 'earth',
-  internal: 'shield',
-  private: 'lock',
-};
-
 export const mockParentGroupItem = {
   id: 55,
   name: 'hardware',
@@ -49,6 +29,7 @@ export const mockParentGroupItem = {
   isChildrenLoading: false,
   isBeingRemoved: false,
   updatedAt: '2017-04-09T18:40:39.101Z',
+  lastActivityAt: '2017-04-09T18:40:39.101Z',
 };
 
 export const mockRawChildren = [
diff --git a/spec/frontend/header_search/components/app_spec.js b/spec/frontend/header_search/components/app_spec.js
index f0de5b083ae..d89218f5542 100644
--- a/spec/frontend/header_search/components/app_spec.js
+++ b/spec/frontend/header_search/components/app_spec.js
@@ -1,22 +1,32 @@
-import { GlSearchBoxByType } from '@gitlab/ui';
+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 { s__, sprintf } from '~/locale';
 import HeaderSearchApp from '~/header_search/components/app.vue';
 import HeaderSearchAutocompleteItems from '~/header_search/components/header_search_autocomplete_items.vue';
 import HeaderSearchDefaultItems from '~/header_search/components/header_search_default_items.vue';
 import HeaderSearchScopedItems from '~/header_search/components/header_search_scoped_items.vue';
-import { SEARCH_INPUT_DESCRIPTION, SEARCH_RESULTS_DESCRIPTION } from '~/header_search/constants';
+import {
+  SEARCH_INPUT_DESCRIPTION,
+  SEARCH_RESULTS_DESCRIPTION,
+  SEARCH_BOX_INDEX,
+  ICON_PROJECT,
+  ICON_GROUP,
+  ICON_SUBGROUP,
+  SCOPE_TOKEN_MAX_LENGTH,
+} from '~/header_search/constants';
 import DropdownKeyboardNavigation from '~/vue_shared/components/dropdown_keyboard_navigation.vue';
 import { ENTER_KEY } from '~/lib/utils/keys';
 import { visitUrl } from '~/lib/utils/url_utility';
+import { truncate } from '~/lib/utils/text_utility';
 import {
   MOCK_SEARCH,
   MOCK_SEARCH_QUERY,
   MOCK_USERNAME,
   MOCK_DEFAULT_SEARCH_OPTIONS,
   MOCK_SCOPED_SEARCH_OPTIONS,
-  MOCK_SORTED_AUTOCOMPLETE_OPTIONS,
+  MOCK_SEARCH_CONTEXT_FULL,
 } from '../mock_data';
 
 Vue.use(Vuex);
@@ -52,11 +62,27 @@ describe('HeaderSearchApp', () => {
     });
   };
 
+  const formatScopeName = (scopeName) => {
+    if (!scopeName) {
+      return false;
+    }
+    const searchResultsScope = s__('GlobalSearch|in %{scope}');
+    return truncate(
+      sprintf(searchResultsScope, {
+        scope: scopeName,
+      }),
+      SCOPE_TOKEN_MAX_LENGTH,
+    );
+  };
+
   afterEach(() => {
     wrapper.destroy();
   });
 
+  const findHeaderSearchForm = () => wrapper.findByTestId('header-search-form');
   const findHeaderSearchInput = () => wrapper.findComponent(GlSearchBoxByType);
+  const findScopeToken = () => wrapper.findComponent(GlToken);
+  const findHeaderSearchInputKBD = () => wrapper.find('.keyboard-shortcut-helper');
   const findHeaderSearchDropdown = () => wrapper.findByTestId('header-search-dropdown-menu');
   const findHeaderSearchDefaultItems = () => wrapper.findComponent(HeaderSearchDefaultItems);
   const findHeaderSearchScopedItems = () => wrapper.findComponent(HeaderSearchScopedItems);
@@ -76,6 +102,14 @@ describe('HeaderSearchApp', () => {
         expect(findHeaderSearchInput().exists()).toBe(true);
       });
 
+      it('Header Search Input KBD hint', () => {
+        expect(findHeaderSearchInputKBD().exists()).toBe(true);
+        expect(findHeaderSearchInputKBD().text()).toContain('/');
+        expect(findHeaderSearchInputKBD().attributes('title')).toContain(
+          'Use the shortcut key <kbd>/</kbd> to start a search',
+        );
+      });
+
       it('Search Input Description', () => {
         expect(findSearchInputDescription().exists()).toBe(true);
       });
@@ -106,53 +140,38 @@ describe('HeaderSearchApp', () => {
     });
 
     describe.each`
-      search         | showDefault | showScoped | showAutocomplete | showDropdownNavigation
-      ${null}        | ${true}     | ${false}   | ${false}         | ${true}
-      ${''}          | ${true}     | ${false}   | ${false}         | ${true}
-      ${'1'}         | ${false}    | ${false}   | ${false}         | ${false}
-      ${')'}         | ${false}    | ${false}   | ${false}         | ${false}
-      ${'t'}         | ${false}    | ${false}   | ${true}          | ${true}
-      ${'te'}        | ${false}    | ${true}    | ${true}          | ${true}
-      ${'tes'}       | ${false}    | ${true}    | ${true}          | ${true}
-      ${MOCK_SEARCH} | ${false}    | ${true}    | ${true}          | ${true}
-    `(
-      'Header Search Dropdown Items',
-      ({ search, showDefault, showScoped, showAutocomplete, showDropdownNavigation }) => {
-        describe(`when search is ${search}`, () => {
-          beforeEach(() => {
-            window.gon.current_username = MOCK_USERNAME;
-            createComponent(
-              { search },
-              {
-                autocompleteGroupedSearchOptions: () =>
-                  search.match(/^[A-Za-z]+$/g) ? MOCK_SORTED_AUTOCOMPLETE_OPTIONS : [],
-              },
-            );
-            findHeaderSearchInput().vm.$emit('click');
-          });
+      search         | showDefault | showScoped | showAutocomplete
+      ${null}        | ${true}     | ${false}   | ${false}
+      ${''}          | ${true}     | ${false}   | ${false}
+      ${'t'}         | ${false}    | ${false}   | ${true}
+      ${'te'}        | ${false}    | ${false}   | ${true}
+      ${'tes'}       | ${false}    | ${true}    | ${true}
+      ${MOCK_SEARCH} | ${false}    | ${true}    | ${true}
+    `('Header Search Dropdown Items', ({ search, showDefault, showScoped, showAutocomplete }) => {
+      describe(`when search is ${search}`, () => {
+        beforeEach(() => {
+          window.gon.current_username = MOCK_USERNAME;
+          createComponent({ search }, {});
+          findHeaderSearchInput().vm.$emit('click');
+        });
 
-          it(`should${showDefault ? '' : ' not'} render the Default Dropdown Items`, () => {
-            expect(findHeaderSearchDefaultItems().exists()).toBe(showDefault);
-          });
+        it(`should${showDefault ? '' : ' not'} render the Default Dropdown Items`, () => {
+          expect(findHeaderSearchDefaultItems().exists()).toBe(showDefault);
+        });
 
-          it(`should${showScoped ? '' : ' not'} render the Scoped Dropdown Items`, () => {
-            expect(findHeaderSearchScopedItems().exists()).toBe(showScoped);
-          });
+        it(`should${showScoped ? '' : ' not'} render the Scoped Dropdown Items`, () => {
+          expect(findHeaderSearchScopedItems().exists()).toBe(showScoped);
+        });
 
-          it(`should${
-            showAutocomplete ? '' : ' not'
-          } render the Autocomplete Dropdown Items`, () => {
-            expect(findHeaderSearchAutocompleteItems().exists()).toBe(showAutocomplete);
-          });
+        it(`should${showAutocomplete ? '' : ' not'} render the Autocomplete Dropdown Items`, () => {
+          expect(findHeaderSearchAutocompleteItems().exists()).toBe(showAutocomplete);
+        });
 
-          it(`should${
-            showDropdownNavigation ? '' : ' not'
-          } render the Dropdown Navigation Component`, () => {
-            expect(findDropdownKeyboardNavigation().exists()).toBe(showDropdownNavigation);
-          });
+        it(`should render the Dropdown Navigation Component`, () => {
+          expect(findDropdownKeyboardNavigation().exists()).toBe(true);
         });
-      },
-    );
+      });
+    });
 
     describe.each`
       username         | showDropdown | expectedDesc
@@ -185,12 +204,18 @@ describe('HeaderSearchApp', () => {
     `(
       'Search Results Description',
       ({ username, showDropdown, search, loading, searchOptions, expectedDesc }) => {
-        describe(`search is ${search}, loading is ${loading}, and showSearchDropdown is ${
-          Boolean(username) && showDropdown
-        }`, () => {
+        describe(`search is "${search}", loading is ${loading}, and showSearchDropdown is ${showDropdown}`, () => {
           beforeEach(() => {
             window.gon.current_username = username;
-            createComponent({ search, loading }, { searchOptions: () => searchOptions });
+            createComponent(
+              {
+                search,
+                loading,
+              },
+              {
+                searchOptions: () => searchOptions,
+              },
+            );
             findHeaderSearchInput().vm.$emit(showDropdown ? 'click' : '');
           });
 
@@ -200,6 +225,121 @@ describe('HeaderSearchApp', () => {
         });
       },
     );
+
+    describe('input box', () => {
+      describe.each`
+        search         | searchOptions                      | hasToken
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[0]]} | ${true}
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[1]]} | ${true}
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[2]]} | ${true}
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[3]]} | ${true}
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[4]]} | ${true}
+        ${'te'}        | ${[MOCK_SCOPED_SEARCH_OPTIONS[5]]} | ${false}
+        ${'x'}         | ${[]}                              | ${false}
+      `('token', ({ search, searchOptions, hasToken }) => {
+        beforeEach(() => {
+          window.gon.current_username = MOCK_USERNAME;
+          createComponent(
+            { search },
+            {
+              searchOptions: () => searchOptions,
+            },
+          );
+        });
+
+        it(`${hasToken ? 'is' : 'is NOT'} rendered when data set has type "${
+          searchOptions[0]?.html_id
+        }"`, () => {
+          expect(findScopeToken().exists()).toBe(hasToken);
+        });
+
+        it(`text ${hasToken ? 'is correctly' : 'is NOT'} rendered when text is "${
+          searchOptions[0]?.scope || searchOptions[0]?.description
+        }"`, () => {
+          expect(findScopeToken().exists() && findScopeToken().text()).toBe(
+            formatScopeName(searchOptions[0]?.scope || searchOptions[0]?.description),
+          );
+        });
+      });
+    });
+
+    describe('form wrapper', () => {
+      describe.each`
+        searchContext               | search         | searchOptions
+        ${MOCK_SEARCH_CONTEXT_FULL} | ${null}        | ${[]}
+        ${MOCK_SEARCH_CONTEXT_FULL} | ${MOCK_SEARCH} | ${[]}
+        ${MOCK_SEARCH_CONTEXT_FULL} | ${MOCK_SEARCH} | ${MOCK_SCOPED_SEARCH_OPTIONS}
+        ${null}                     | ${MOCK_SEARCH} | ${MOCK_SCOPED_SEARCH_OPTIONS}
+        ${null}                     | ${null}        | ${MOCK_SCOPED_SEARCH_OPTIONS}
+        ${null}                     | ${null}        | ${[]}
+      `('', ({ searchContext, search, searchOptions }) => {
+        beforeEach(() => {
+          window.gon.current_username = MOCK_USERNAME;
+
+          createComponent({ search, searchContext }, { searchOptions: () => searchOptions });
+
+          findHeaderSearchInput().vm.$emit('click');
+        });
+
+        const hasIcon = Boolean(searchContext?.group);
+        const isSearching = Boolean(search);
+        const isActive = Boolean(searchOptions.length > 0);
+
+        it(`${hasIcon ? 'with' : 'without'} search context classes contain "${
+          hasIcon ? 'has-icon' : 'has-no-icon'
+        }"`, () => {
+          const iconClassRegex = hasIcon ? 'has-icon' : 'has-no-icon';
+          expect(findHeaderSearchForm().classes()).toContain(iconClassRegex);
+        });
+
+        it(`${isSearching ? 'with' : 'without'} search string classes contain "${
+          isSearching ? 'is-searching' : 'is-not-searching'
+        }"`, () => {
+          const iconClassRegex = isSearching ? 'is-searching' : 'is-not-searching';
+          expect(findHeaderSearchForm().classes()).toContain(iconClassRegex);
+        });
+
+        it(`${isActive ? 'with' : 'without'} search results classes contain "${
+          isActive ? 'is-active' : 'is-not-active'
+        }"`, () => {
+          const iconClassRegex = isActive ? 'is-active' : 'is-not-active';
+          expect(findHeaderSearchForm().classes()).toContain(iconClassRegex);
+        });
+      });
+    });
+
+    describe.each`
+      search         | searchOptions                      | hasIcon  | iconName
+      ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[0]]} | ${true}  | ${ICON_PROJECT}
+      ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[2]]} | ${true}  | ${ICON_GROUP}
+      ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[3]]} | ${true}  | ${ICON_SUBGROUP}
+      ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[4]]} | ${false} | ${false}
+    `('token', ({ search, searchOptions, hasIcon, iconName }) => {
+      beforeEach(() => {
+        window.gon.current_username = MOCK_USERNAME;
+        createComponent(
+          { search },
+          {
+            searchOptions: () => searchOptions,
+          },
+        );
+      });
+
+      it(`icon for data set type "${searchOptions[0]?.html_id}" ${
+        hasIcon ? 'is' : 'is NOT'
+      } rendered`, () => {
+        expect(findScopeToken().findComponent(GlIcon).exists()).toBe(hasIcon);
+      });
+
+      it(`render ${iconName ? `"${iconName}"` : 'NO'} icon for data set type "${
+        searchOptions[0]?.html_id
+      }"`, () => {
+        expect(
+          findScopeToken().findComponent(GlIcon).exists() &&
+            findScopeToken().findComponent(GlIcon).attributes('name'),
+        ).toBe(iconName);
+      });
+    });
   });
 
   describe('events', () => {
@@ -285,18 +425,20 @@ describe('HeaderSearchApp', () => {
   });
 
   describe('computed', () => {
-    describe('currentFocusedOption', () => {
-      const MOCK_INDEX = 1;
-
+    describe.each`
+      MOCK_INDEX          | search
+      ${1}                | ${null}
+      ${SEARCH_BOX_INDEX} | ${'test'}
+      ${2}                | ${'test1'}
+    `('currentFocusedOption', ({ MOCK_INDEX, search }) => {
       beforeEach(() => {
-        createComponent();
+        createComponent({ search });
         window.gon.current_username = MOCK_USERNAME;
         findHeaderSearchInput().vm.$emit('click');
       });
 
-      it(`when currentFocusIndex changes to ${MOCK_INDEX} updates the data to searchOptions[${MOCK_INDEX}]`, async () => {
+      it(`when currentFocusIndex changes to ${MOCK_INDEX} updates the data to searchOptions[${MOCK_INDEX}]`, () => {
         findDropdownKeyboardNavigation().vm.$emit('change', MOCK_INDEX);
-        await nextTick();
         expect(wrapper.vm.currentFocusedOption).toBe(MOCK_DEFAULT_SEARCH_OPTIONS[MOCK_INDEX]);
       });
     });
@@ -308,15 +450,25 @@ describe('HeaderSearchApp', () => {
         createComponent();
       });
 
-      it('onKey-enter submits a search', async () => {
+      it('onKey-enter submits a search', () => {
         findHeaderSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY }));
 
-        await nextTick();
-
         expect(visitUrl).toHaveBeenCalledWith(MOCK_SEARCH_QUERY);
       });
     });
 
+    describe('with less than min characters and no dropdown results', () => {
+      beforeEach(() => {
+        createComponent({ search: 'x' });
+      });
+
+      it('onKey-enter will NOT submit a search', () => {
+        findHeaderSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY }));
+
+        expect(visitUrl).not.toHaveBeenCalledWith(MOCK_SEARCH_QUERY);
+      });
+    });
+
     describe('with currentFocusedOption', () => {
       const MOCK_INDEX = 1;
 
@@ -326,9 +478,9 @@ describe('HeaderSearchApp', () => {
         findHeaderSearchInput().vm.$emit('click');
       });
 
-      it('onKey-enter clicks the selected dropdown item rather than submitting a search', async () => {
+      it('onKey-enter clicks the selected dropdown item rather than submitting a search', () => {
         findDropdownKeyboardNavigation().vm.$emit('change', MOCK_INDEX);
-        await nextTick();
+
         findHeaderSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY }));
         expect(visitUrl).toHaveBeenCalledWith(MOCK_DEFAULT_SEARCH_OPTIONS[MOCK_INDEX].url);
       });
diff --git a/spec/frontend/header_search/components/header_search_scoped_items_spec.js b/spec/frontend/header_search/components/header_search_scoped_items_spec.js
index 8788fb23458..2db9f71d702 100644
--- a/spec/frontend/header_search/components/header_search_scoped_items_spec.js
+++ b/spec/frontend/header_search/components/header_search_scoped_items_spec.js
@@ -1,9 +1,11 @@
-import { GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
+import { GlDropdownItem, GlToken, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { trimText } from 'helpers/text_helper';
 import HeaderSearchScopedItems from '~/header_search/components/header_search_scoped_items.vue';
+import { truncate } from '~/lib/utils/text_utility';
+import { MSG_IN_ALL_GITLAB, SCOPE_TOKEN_MAX_LENGTH } from '~/header_search/constants';
 import {
   MOCK_SEARCH,
   MOCK_SCOPED_SEARCH_OPTIONS,
@@ -41,9 +43,12 @@ describe('HeaderSearchScopedItems', () => {
   });
 
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findGlDropdownDivider = () => wrapper.findComponent(GlDropdownDivider);
   const findFirstDropdownItem = () => findDropdownItems().at(0);
   const findDropdownItemTitles = () => findDropdownItems().wrappers.map((w) => trimText(w.text()));
+  const findScopeTokens = () => wrapper.findAllComponents(GlToken);
+  const findScopeTokensText = () => findScopeTokens().wrappers.map((w) => trimText(w.text()));
+  const findScopeTokensIcons = () =>
+    findScopeTokens().wrappers.map((w) => w.findAllComponents(GlIcon));
   const findDropdownItemAriaLabels = () =>
     findDropdownItems().wrappers.map((w) => trimText(w.attributes('aria-label')));
   const findDropdownItemLinks = () => findDropdownItems().wrappers.map((w) => w.attributes('href'));
@@ -59,15 +64,31 @@ describe('HeaderSearchScopedItems', () => {
       });
 
       it('renders titles correctly', () => {
+        findDropdownItemTitles().forEach((title) => expect(title).toContain(MOCK_SEARCH));
+      });
+
+      it('renders scope names correctly', () => {
         const expectedTitles = MOCK_SCOPED_SEARCH_OPTIONS.map((o) =>
-          trimText(`"${MOCK_SEARCH}" ${o.description} ${o.scope || ''}`),
+          truncate(trimText(`in ${o.description || o.scope}`), SCOPE_TOKEN_MAX_LENGTH),
         );
-        expect(findDropdownItemTitles()).toStrictEqual(expectedTitles);
+
+        expect(findScopeTokensText()).toStrictEqual(expectedTitles);
+      });
+
+      it('renders scope icons correctly', () => {
+        findScopeTokensIcons().forEach((icon, i) => {
+          const w = icon.wrappers[0];
+          expect(w?.attributes('name')).toBe(MOCK_SCOPED_SEARCH_OPTIONS[i].icon);
+        });
+      });
+
+      it(`renders scope ${MSG_IN_ALL_GITLAB} correctly`, () => {
+        expect(findScopeTokens().at(-1).findComponent(GlIcon).exists()).toBe(false);
       });
 
       it('renders aria-labels correctly', () => {
         const expectedLabels = MOCK_SCOPED_SEARCH_OPTIONS.map((o) =>
-          trimText(`${MOCK_SEARCH} ${o.description} ${o.scope || ''}`),
+          trimText(`${MOCK_SEARCH} ${o.description || o.icon} ${o.scope || ''}`),
         );
         expect(findDropdownItemAriaLabels()).toStrictEqual(expectedLabels);
       });
@@ -98,21 +119,5 @@ describe('HeaderSearchScopedItems', () => {
         });
       });
     });
-
-    describe.each`
-      autosuggestResults                   | showDivider
-      ${[]}                                | ${false}
-      ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${true}
-    `('scoped search items', ({ autosuggestResults, showDivider }) => {
-      describe(`when when we have ${autosuggestResults.length} auto-sugest results`, () => {
-        beforeEach(() => {
-          createComponent({}, { autocompleteGroupedSearchOptions: () => autosuggestResults }, {});
-        });
-
-        it(`divider should${showDivider ? '' : ' not'} be shown`, () => {
-          expect(findGlDropdownDivider().exists()).toBe(showDivider);
-        });
-      });
-    });
   });
 });
diff --git a/spec/frontend/header_search/init_spec.js b/spec/frontend/header_search/init_spec.js
new file mode 100644
index 00000000000..9515ca8c812
--- /dev/null
+++ b/spec/frontend/header_search/init_spec.js
@@ -0,0 +1,74 @@
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+
+import initHeaderSearch, { eventHandler, cleanEventListeners } from '~/header_search/init';
+
+describe('Header Search EventListener', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.restoreAllMocks();
+    setHTMLFixture(`
+      <div class="js-header-content">
+        <div class="header-search" id="js-header-search" data-autocomplete-path="/search/autocomplete" data-issues-path="/dashboard/issues" data-mr-path="/dashboard/merge_requests" data-search-context="{}" data-search-path="/search">
+          <input autocomplete="off" class="form-control gl-form-input gl-search-box-by-type-input" data-qa-selector="search_box" id="search" name="search" placeholder="Search GitLab" type="text">
+        </div>
+      </div>`);
+  });
+
+  afterEach(() => {
+    resetHTMLFixture();
+    jest.clearAllMocks();
+  });
+
+  it('attached event listener', () => {
+    const searchInputBox = document?.querySelector('#search');
+    const addEventListenerSpy = jest.spyOn(searchInputBox, 'addEventListener');
+    initHeaderSearch();
+
+    expect(addEventListenerSpy).toBeCalledTimes(2);
+  });
+
+  it('removes event listener ', async () => {
+    const searchInputBox = document?.querySelector('#search');
+    const removeEventListenerSpy = jest.spyOn(searchInputBox, 'removeEventListener');
+    jest.mock('~/header_search', () => ({ initHeaderSearchApp: jest.fn() }));
+    await eventHandler.apply(
+      {
+        newHeaderSearchFeatureFlag: true,
+        searchInputBox: document.querySelector('#search'),
+      },
+      [cleanEventListeners],
+    );
+
+    expect(removeEventListenerSpy).toBeCalledTimes(2);
+  });
+
+  it('attaches new vue dropdown  when feature flag is enabled', async () => {
+    const mockVueApp = jest.fn();
+    jest.mock('~/header_search', () => ({ initHeaderSearchApp: mockVueApp }));
+    await eventHandler.apply(
+      {
+        newHeaderSearchFeatureFlag: true,
+        searchInputBox: document.querySelector('#search'),
+      },
+      () => {},
+    );
+
+    expect(mockVueApp).toBeCalled();
+  });
+
+  it('attaches old vue dropdown when feature flag is disabled', async () => {
+    const mockLegacyApp = jest.fn(() => ({
+      onSearchInputFocus: jest.fn(),
+    }));
+    jest.mock('~/search_autocomplete', () => mockLegacyApp);
+    await eventHandler.apply(
+      {
+        newHeaderSearchFeatureFlag: false,
+        searchInputBox: document.querySelector('#search'),
+      },
+      () => {},
+    );
+
+    expect(mockLegacyApp).toBeCalled();
+  });
+});
diff --git a/spec/frontend/header_search/mock_data.js b/spec/frontend/header_search/mock_data.js
index b6f0fdcc29d..8ccd7fb17e3 100644
--- a/spec/frontend/header_search/mock_data.js
+++ b/spec/frontend/header_search/mock_data.js
@@ -4,9 +4,12 @@ import {
   MSG_MR_ASSIGNED_TO_ME,
   MSG_MR_IM_REVIEWER,
   MSG_MR_IVE_CREATED,
-  MSG_IN_PROJECT,
-  MSG_IN_GROUP,
   MSG_IN_ALL_GITLAB,
+  PROJECTS_CATEGORY,
+  ICON_PROJECT,
+  GROUPS_CATEGORY,
+  ICON_GROUP,
+  ICON_SUBGROUP,
 } from '~/header_search/constants';
 
 export const MOCK_USERNAME = 'anyone';
@@ -27,12 +30,24 @@ export const MOCK_PROJECT = {
   path: '/mock-project',
 };
 
+export const MOCK_PROJECT_LONG = {
+  id: 124,
+  name: 'Mock Project Name That Is Ridiculously Long And It Goes Forever',
+  path: '/mock-project-name-that-is-ridiculously-long-and-it-goes-forever',
+};
+
 export const MOCK_GROUP = {
   id: 321,
   name: 'MockGroup',
   path: '/mock-group',
 };
 
+export const MOCK_SUBGROUP = {
+  id: 322,
+  name: 'MockSubGroup',
+  path: `${MOCK_GROUP}/mock-subgroup`,
+};
+
 export const MOCK_SEARCH_QUERY = 'http://gitlab.com/search?search=test';
 
 export const MOCK_SEARCH = 'test';
@@ -44,6 +59,20 @@ export const MOCK_SEARCH_CONTEXT = {
   group_metadata: {},
 };
 
+export const MOCK_SEARCH_CONTEXT_FULL = {
+  group: {
+    id: 31,
+    name: 'testGroup',
+    full_name: 'testGroup',
+  },
+  group_metadata: {
+    group_path: 'testGroup',
+    name: 'testGroup',
+    issues_path: '/groups/testGroup/-/issues',
+    mr_path: '/groups/testGroup/-/merge_requests',
+  },
+};
+
 export const MOCK_DEFAULT_SEARCH_OPTIONS = [
   {
     html_id: 'default-issues-assigned',
@@ -76,13 +105,51 @@ export const MOCK_SCOPED_SEARCH_OPTIONS = [
   {
     html_id: 'scoped-in-project',
     scope: MOCK_PROJECT.name,
-    description: MSG_IN_PROJECT,
+    scopeCategory: PROJECTS_CATEGORY,
+    icon: ICON_PROJECT,
+    url: MOCK_PROJECT.path,
+  },
+  {
+    html_id: 'scoped-in-project-long',
+    scope: MOCK_PROJECT_LONG.name,
+    scopeCategory: PROJECTS_CATEGORY,
+    icon: ICON_PROJECT,
+    url: MOCK_PROJECT_LONG.path,
+  },
+  {
+    html_id: 'scoped-in-group',
+    scope: MOCK_GROUP.name,
+    scopeCategory: GROUPS_CATEGORY,
+    icon: ICON_GROUP,
+    url: MOCK_GROUP.path,
+  },
+  {
+    html_id: 'scoped-in-subgroup',
+    scope: MOCK_SUBGROUP.name,
+    scopeCategory: GROUPS_CATEGORY,
+    icon: ICON_SUBGROUP,
+    url: MOCK_SUBGROUP.path,
+  },
+  {
+    html_id: 'scoped-in-all',
+    description: MSG_IN_ALL_GITLAB,
+    url: MOCK_ALL_PATH,
+  },
+];
+
+export const MOCK_SCOPED_SEARCH_OPTIONS_DEF = [
+  {
+    html_id: 'scoped-in-project',
+    scope: MOCK_PROJECT.name,
+    scopeCategory: PROJECTS_CATEGORY,
+    icon: ICON_PROJECT,
     url: MOCK_PROJECT.path,
   },
   {
     html_id: 'scoped-in-group',
     scope: MOCK_GROUP.name,
-    description: MSG_IN_GROUP,
+    scopeCategory: GROUPS_CATEGORY,
+    icon: ICON_GROUP,
     url: MOCK_GROUP.path,
   },
   {
diff --git a/spec/frontend/header_search/store/getters_spec.js b/spec/frontend/header_search/store/getters_spec.js
index d3510de1439..c76be3c0360 100644
--- a/spec/frontend/header_search/store/getters_spec.js
+++ b/spec/frontend/header_search/store/getters_spec.js
@@ -9,6 +9,7 @@ import {
   MOCK_SEARCH_CONTEXT,
   MOCK_DEFAULT_SEARCH_OPTIONS,
   MOCK_SCOPED_SEARCH_OPTIONS,
+  MOCK_SCOPED_SEARCH_OPTIONS_DEF,
   MOCK_PROJECT,
   MOCK_GROUP,
   MOCK_ALL_PATH,
@@ -284,7 +285,7 @@ describe('Header Search Store Getters', () => {
 
     it('returns the correct array', () => {
       expect(getters.scopedSearchOptions(state, mockGetters)).toStrictEqual(
-        MOCK_SCOPED_SEARCH_OPTIONS,
+        MOCK_SCOPED_SEARCH_OPTIONS_DEF,
       );
     });
   });
@@ -308,6 +309,11 @@ describe('Header Search Store Getters', () => {
     ${MOCK_SEARCH} | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${[]}                                | ${MOCK_SCOPED_SEARCH_OPTIONS}
     ${MOCK_SEARCH} | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${[]}                         | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SORTED_AUTOCOMPLETE_OPTIONS}
     ${MOCK_SEARCH} | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS.concat(MOCK_SORTED_AUTOCOMPLETE_OPTIONS)}
+    ${1}           | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${[]}                         | ${[]}                                | ${[]}
+    ${'('}         | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${[]}                         | ${[]}                                | ${[]}
+    ${'t'}         | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SORTED_AUTOCOMPLETE_OPTIONS}
+    ${'te'}        | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SORTED_AUTOCOMPLETE_OPTIONS}
+    ${'tes'}       | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS.concat(MOCK_SORTED_AUTOCOMPLETE_OPTIONS)}
   `(
     'searchOptions',
     ({
diff --git a/spec/frontend/header_spec.js b/spec/frontend/header_spec.js
index 19849fba63c..4e2fb70a2cb 100644
--- a/spec/frontend/header_spec.js
+++ b/spec/frontend/header_spec.js
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import initTodoToggle, { initNavUserDropdownTracking } from '~/header';
 import { loadHTMLFixture, setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
@@ -9,11 +8,17 @@ describe('Header', () => {
     const fixtureTemplate = 'issues/open-issue.html';
 
     function isTodosCountHidden() {
-      return $(todosPendingCount).hasClass('hidden');
+      return document.querySelector(todosPendingCount).classList.contains('hidden');
     }
 
     function triggerToggle(newCount) {
-      $(document).trigger('todo:toggle', newCount);
+      const event = new CustomEvent('todo:toggle', {
+        detail: {
+          count: newCount,
+        },
+      });
+
+      document.dispatchEvent(event);
     }
 
     beforeEach(() => {
@@ -28,7 +33,7 @@ describe('Header', () => {
     it('should update todos-count after receiving the todo:toggle event', () => {
       triggerToggle(5);
 
-      expect($(todosPendingCount).text()).toEqual('5');
+      expect(document.querySelector(todosPendingCount).textContent).toEqual('5');
     });
 
     it('should hide todos-count when it is 0', () => {
@@ -53,7 +58,7 @@ describe('Header', () => {
       });
 
       it('should show 99+ for todos-count', () => {
-        expect($(todosPendingCount).text()).toEqual('99+');
+        expect(document.querySelector(todosPendingCount).textContent).toEqual('99+');
       });
     });
   });
@@ -67,7 +72,11 @@ describe('Header', () => {
         <a class="js-buy-pipeline-minutes-link" data-track-action="click_buy_ci_minutes" data-track-label="free" data-track-property="user_dropdown">Buy Pipeline minutes</a>
       </li>`);
 
-      trackingSpy = mockTracking('_category_', $('.js-nav-user-dropdown').element, jest.spyOn);
+      trackingSpy = mockTracking(
+        '_category_',
+        document.querySelector('.js-nav-user-dropdown').element,
+        jest.spyOn,
+      );
       document.body.dataset.page = 'some:page';
 
       initNavUserDropdownTracking();
@@ -79,7 +88,8 @@ describe('Header', () => {
     });
 
     it('sends a tracking event when the dropdown is opened and contains Buy Pipeline minutes link', () => {
-      $('.js-nav-user-dropdown').trigger('shown.bs.dropdown');
+      const event = new CustomEvent('shown.bs.dropdown');
+      document.querySelector('.js-nav-user-dropdown').dispatchEvent(event);
 
       expect(trackingSpy).toHaveBeenCalledWith('some:page', 'show_buy_ci_minutes', {
         label: 'free',
diff --git a/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js b/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js
index 4f81c0aa5d3..7c48c0e6f95 100644
--- a/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js
@@ -1,29 +1,21 @@
-import Vue from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import emptyState from '~/ide/components/commit_sidebar/empty_state.vue';
+import { shallowMount } from '@vue/test-utils';
+import EmptyState from '~/ide/components/commit_sidebar/empty_state.vue';
 import { createStore } from '~/ide/stores';
 
-describe('IDE commit panel empty state', () => {
-  let vm;
-  let store;
+describe('IDE commit panel EmptyState component', () => {
+  let wrapper;
 
   beforeEach(() => {
-    store = createStore();
-
-    const Component = Vue.extend(emptyState);
-
-    Vue.set(store.state, 'noChangesStateSvgPath', 'no-changes');
-
-    vm = createComponentWithStore(Component, store);
-
-    vm.$mount();
+    const store = createStore();
+    store.state.noChangesStateSvgPath = 'no-changes';
+    wrapper = shallowMount(EmptyState, { store });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders no changes text when last commit message is empty', () => {
-    expect(vm.$el.textContent).toContain('No changes');
+    expect(wrapper.find('h4').text()).toBe('No changes');
   });
 });
diff --git a/spec/frontend/ide/components/commit_sidebar/list_spec.js b/spec/frontend/ide/components/commit_sidebar/list_spec.js
index 1d42512c9ee..81c81fc0a9f 100644
--- a/spec/frontend/ide/components/commit_sidebar/list_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/list_spec.js
@@ -1,51 +1,47 @@
-import Vue, { nextTick } from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import commitSidebarList from '~/ide/components/commit_sidebar/list.vue';
-import { createStore } from '~/ide/stores';
+import { shallowMount } from '@vue/test-utils';
+import CommitSidebarList from '~/ide/components/commit_sidebar/list.vue';
+import ListItem from '~/ide/components/commit_sidebar/list_item.vue';
 import { file } from '../../helpers';
 
 describe('Multi-file editor commit sidebar list', () => {
-  let store;
-  let vm;
-
-  beforeEach(() => {
-    store = createStore();
-
-    const Component = Vue.extend(commitSidebarList);
-
-    vm = createComponentWithStore(Component, store, {
-      title: 'Staged',
-      fileList: [],
-      action: 'stageAllChanges',
-      actionBtnText: 'stage all',
-      actionBtnIcon: 'history',
-      activeFileKey: 'staged-testing',
-      keyPrefix: 'staged',
+  let wrapper;
+
+  const mountComponent = ({ fileList }) =>
+    shallowMount(CommitSidebarList, {
+      propsData: {
+        title: 'Staged',
+        fileList,
+        action: 'stageAllChanges',
+        actionBtnText: 'stage all',
+        actionBtnIcon: 'history',
+        activeFileKey: 'staged-testing',
+        keyPrefix: 'staged',
+      },
     });
 
-    vm.$mount();
-  });
-
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('with a list of files', () => {
     beforeEach(async () => {
       const f = file('file name');
       f.changed = true;
-      vm.fileList.push(f);
-      await nextTick();
+      wrapper = mountComponent({ fileList: [f] });
     });
 
     it('renders list', () => {
-      expect(vm.$el.querySelectorAll('.multi-file-commit-list > li').length).toBe(1);
+      expect(wrapper.findAllComponents(ListItem)).toHaveLength(1);
     });
   });
 
-  describe('empty files array', () => {
-    it('renders no changes text when empty', () => {
-      expect(vm.$el.textContent).toContain('No changes');
+  describe('with empty files array', () => {
+    beforeEach(() => {
+      wrapper = mountComponent({ fileList: [] });
+    });
+
+    it('renders no changes text ', () => {
+      expect(wrapper.text()).toContain('No changes');
     });
   });
 });
diff --git a/spec/frontend/ide/components/commit_sidebar/success_message_spec.js b/spec/frontend/ide/components/commit_sidebar/success_message_spec.js
index 52e35bdbb73..63d51953915 100644
--- a/spec/frontend/ide/components/commit_sidebar/success_message_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/success_message_spec.js
@@ -1,32 +1,22 @@
-import Vue, { nextTick } from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import successMessage from '~/ide/components/commit_sidebar/success_message.vue';
+import { shallowMount } from '@vue/test-utils';
+import SuccessMessage from '~/ide/components/commit_sidebar/success_message.vue';
 import { createStore } from '~/ide/stores';
 
 describe('IDE commit panel successful commit state', () => {
-  let vm;
-  let store;
+  let wrapper;
 
   beforeEach(() => {
-    store = createStore();
-
-    const Component = Vue.extend(successMessage);
-
-    vm = createComponentWithStore(Component, store, {
-      committedStateSvgPath: 'committed-state',
-    });
-
-    vm.$mount();
+    const store = createStore();
+    store.state.committedStateSvgPath = 'committed-state';
+    store.state.lastCommitMsg = 'testing commit message';
+    wrapper = shallowMount(SuccessMessage, { store });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  it('renders last commit message when it exists', async () => {
-    vm.$store.state.lastCommitMsg = 'testing commit message';
-
-    await nextTick();
-    expect(vm.$el.textContent).toContain('testing commit message');
+  it('renders last commit message when it exists', () => {
+    expect(wrapper.text()).toContain('testing commit message');
   });
 });
diff --git a/spec/frontend/ide/components/ide_spec.js b/spec/frontend/ide/components/ide_spec.js
index 37b42001a80..9172c69b10e 100644
--- a/spec/frontend/ide/components/ide_spec.js
+++ b/spec/frontend/ide/components/ide_spec.js
@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import waitForPromises from 'helpers/wait_for_promises';
+import { stubPerformanceWebAPI } from 'helpers/performance';
 import CannotPushCodeAlert from '~/ide/components/cannot_push_code_alert.vue';
 import ErrorMessage from '~/ide/components/error_message.vue';
 import Ide from '~/ide/components/ide.vue';
@@ -40,6 +41,8 @@ describe('WebIDE', () => {
   const findAlert = () => wrapper.findComponent(CannotPushCodeAlert);
 
   beforeEach(() => {
+    stubPerformanceWebAPI();
+
     store = createStore();
   });
 
diff --git a/spec/frontend/ide/components/ide_tree_list_spec.js b/spec/frontend/ide/components/ide_tree_list_spec.js
index a85c52f5e86..0f61aa80e53 100644
--- a/spec/frontend/ide/components/ide_tree_list_spec.js
+++ b/spec/frontend/ide/components/ide_tree_list_spec.js
@@ -1,82 +1,72 @@
-import Vue, { nextTick } from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { GlSkeletonLoader } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import IdeTreeList from '~/ide/components/ide_tree_list.vue';
 import { createStore } from '~/ide/stores';
+import FileTree from '~/vue_shared/components/file_tree.vue';
 import { file } from '../helpers';
 import { projectData } from '../mock_data';
 
-describe('IDE tree list', () => {
-  const Component = Vue.extend(IdeTreeList);
-  const normalBranchTree = [file('fileName')];
-  const emptyBranchTree = [];
-  let vm;
-  let store;
+describe('IdeTreeList component', () => {
+  let wrapper;
 
-  const bootstrapWithTree = (tree = normalBranchTree) => {
+  const mountComponent = ({ tree, loading = false } = {}) => {
+    const store = createStore();
     store.state.currentProjectId = 'abcproject';
     store.state.currentBranchId = 'main';
     store.state.projects.abcproject = { ...projectData };
-    Vue.set(store.state.trees, 'abcproject/main', {
-      tree,
-      loading: false,
-    });
+    Vue.set(store.state.trees, 'abcproject/main', { tree, loading });
 
-    vm = createComponentWithStore(Component, store, {
-      viewerType: 'edit',
+    wrapper = shallowMount(IdeTreeList, {
+      propsData: {
+        viewerType: 'edit',
+      },
+      store,
     });
   };
 
-  beforeEach(() => {
-    store = createStore();
-  });
-
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('normal branch', () => {
-    beforeEach(() => {
-      bootstrapWithTree();
-
-      jest.spyOn(vm, '$emit').mockImplementation(() => {});
-
-      vm.$mount();
-    });
+    const tree = [file('fileName')];
 
     it('emits tree-ready event', () => {
-      expect(vm.$emit).toHaveBeenCalledTimes(1);
-      expect(vm.$emit).toHaveBeenCalledWith('tree-ready');
+      mountComponent({ tree });
+
+      expect(wrapper.emitted('tree-ready')).toEqual([[]]);
     });
 
-    it('renders loading indicator', async () => {
-      store.state.trees['abcproject/main'].loading = true;
+    it('renders loading indicator', () => {
+      mountComponent({ tree, loading: true });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.multi-file-loading-container')).not.toBeNull();
-      expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toBe(3);
+      expect(wrapper.findAllComponents(GlSkeletonLoader)).toHaveLength(3);
     });
 
     it('renders list of files', () => {
-      expect(vm.$el.textContent).toContain('fileName');
+      mountComponent({ tree });
+
+      expect(wrapper.findAllComponents(FileTree)).toHaveLength(1);
+      expect(wrapper.findComponent(FileTree).props('file')).toEqual(tree[0]);
     });
   });
 
   describe('empty-branch state', () => {
     beforeEach(() => {
-      bootstrapWithTree(emptyBranchTree);
-
-      jest.spyOn(vm, '$emit').mockImplementation(() => {});
+      mountComponent({ tree: [] });
+    });
 
-      vm.$mount();
+    it('emits tree-ready event', () => {
+      expect(wrapper.emitted('tree-ready')).toEqual([[]]);
     });
 
-    it('still emits tree-ready event', () => {
-      expect(vm.$emit).toHaveBeenCalledWith('tree-ready');
+    it('does not render files', () => {
+      expect(wrapper.findAllComponents(FileTree)).toHaveLength(0);
     });
 
-    it('does not load files if the branch is empty', () => {
-      expect(vm.$el.textContent).not.toContain('fileName');
-      expect(vm.$el.textContent).toContain('No files');
+    it('renders empty state text', () => {
+      expect(wrapper.text()).toBe('No files');
     });
   });
 });
diff --git a/spec/frontend/ide/components/nav_dropdown_button_spec.js b/spec/frontend/ide/components/nav_dropdown_button_spec.js
index 1c14685df68..8eebcdd9e08 100644
--- a/spec/frontend/ide/components/nav_dropdown_button_spec.js
+++ b/spec/frontend/ide/components/nav_dropdown_button_spec.js
@@ -1,81 +1,74 @@
-import Vue, { nextTick } from 'vue';
 import { trimText } from 'helpers/text_helper';
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import NavDropdownButton from '~/ide/components/nav_dropdown_button.vue';
 import { createStore } from '~/ide/stores';
+import { __ } from '~/locale';
 
-describe('NavDropdown', () => {
+describe('NavDropdownButton component', () => {
   const TEST_BRANCH_ID = 'lorem-ipsum-dolar';
   const TEST_MR_ID = '12345';
-  let store;
-  let vm;
-
-  beforeEach(() => {
-    store = createStore();
-  });
+  let wrapper;
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  const createComponent = (props = {}) => {
-    vm = mountComponentWithStore(Vue.extend(NavDropdownButton), { props, store });
-    vm.$mount();
+  const createComponent = ({ props = {}, state = {} } = {}) => {
+    const store = createStore();
+    store.replaceState(state);
+    wrapper = mountExtended(NavDropdownButton, { propsData: props, store });
   };
 
-  const findIcon = (name) => vm.$el.querySelector(`[data-testid="${name}-icon"]`);
-  const findMRIcon = () => findIcon('merge-request');
-  const findBranchIcon = () => findIcon('branch');
+  const findMRIcon = () => wrapper.findByLabelText(__('Merge request'));
+  const findBranchIcon = () => wrapper.findByLabelText(__('Current Branch'));
 
   describe('normal', () => {
-    beforeEach(() => {
+    it('renders empty placeholders, if state is falsey', () => {
       createComponent();
-    });
 
-    it('renders empty placeholders, if state is falsey', () => {
-      expect(trimText(vm.$el.textContent)).toEqual('- -');
+      expect(trimText(wrapper.text())).toBe('- -');
     });
 
-    it('renders branch name, if state has currentBranchId', async () => {
-      vm.$store.state.currentBranchId = TEST_BRANCH_ID;
+    it('renders branch name, if state has currentBranchId', () => {
+      createComponent({ state: { currentBranchId: TEST_BRANCH_ID } });
 
-      await nextTick();
-      expect(trimText(vm.$el.textContent)).toEqual(`${TEST_BRANCH_ID} -`);
+      expect(trimText(wrapper.text())).toBe(`${TEST_BRANCH_ID} -`);
     });
 
-    it('renders mr id, if state has currentMergeRequestId', async () => {
-      vm.$store.state.currentMergeRequestId = TEST_MR_ID;
+    it('renders mr id, if state has currentMergeRequestId', () => {
+      createComponent({ state: { currentMergeRequestId: TEST_MR_ID } });
 
-      await nextTick();
-      expect(trimText(vm.$el.textContent)).toEqual(`- !${TEST_MR_ID}`);
+      expect(trimText(wrapper.text())).toBe(`- !${TEST_MR_ID}`);
     });
 
-    it('renders branch and mr, if state has both', async () => {
-      vm.$store.state.currentBranchId = TEST_BRANCH_ID;
-      vm.$store.state.currentMergeRequestId = TEST_MR_ID;
+    it('renders branch and mr, if state has both', () => {
+      createComponent({
+        state: { currentBranchId: TEST_BRANCH_ID, currentMergeRequestId: TEST_MR_ID },
+      });
 
-      await nextTick();
-      expect(trimText(vm.$el.textContent)).toEqual(`${TEST_BRANCH_ID} !${TEST_MR_ID}`);
+      expect(trimText(wrapper.text())).toBe(`${TEST_BRANCH_ID} !${TEST_MR_ID}`);
     });
 
     it('shows icons', () => {
-      expect(findBranchIcon()).toBeTruthy();
-      expect(findMRIcon()).toBeTruthy();
+      createComponent();
+
+      expect(findBranchIcon().exists()).toBe(true);
+      expect(findMRIcon().exists()).toBe(true);
     });
   });
 
-  describe('with showMergeRequests false', () => {
+  describe('when showMergeRequests=false', () => {
     beforeEach(() => {
-      createComponent({ showMergeRequests: false });
+      createComponent({ props: { showMergeRequests: false } });
     });
 
     it('shows single empty placeholder, if state is falsey', () => {
-      expect(trimText(vm.$el.textContent)).toEqual('-');
+      expect(trimText(wrapper.text())).toBe('-');
     });
 
     it('shows only branch icon', () => {
-      expect(findBranchIcon()).toBeTruthy();
-      expect(findMRIcon()).toBe(null);
+      expect(findBranchIcon().exists()).toBe(true);
+      expect(findMRIcon().exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/ide/components/new_dropdown/modal_spec.js b/spec/frontend/ide/components/new_dropdown/modal_spec.js
index e8635444801..68cc08d2ebc 100644
--- a/spec/frontend/ide/components/new_dropdown/modal_spec.js
+++ b/spec/frontend/ide/components/new_dropdown/modal_spec.js
@@ -1,209 +1,419 @@
-import Vue, { nextTick } from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { GlButton, GlModal } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import createFlash from '~/flash';
-import modal from '~/ide/components/new_dropdown/modal.vue';
+import Modal from '~/ide/components/new_dropdown/modal.vue';
 import { createStore } from '~/ide/stores';
+import { stubComponent } from 'helpers/stub_component';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { createEntriesFromPaths } from '../../helpers';
 
 jest.mock('~/flash');
 
+const NEW_NAME = 'babar';
+
 describe('new file modal component', () => {
-  const Component = Vue.extend(modal);
-  let vm;
+  const showModal = jest.fn();
+  const toggleModal = jest.fn();
+
+  let store;
+  let wrapper;
+
+  const findForm = () => wrapper.findByTestId('file-name-form');
+  const findGlModal = () => wrapper.findComponent(GlModal);
+  const findInput = () => wrapper.findByTestId('file-name-field');
+  const findTemplateButtons = () => wrapper.findAllComponents(GlButton);
+  const findTemplateButtonsModel = () =>
+    findTemplateButtons().wrappers.map((x) => ({
+      text: x.text(),
+      variant: x.props('variant'),
+      category: x.props('category'),
+    }));
+
+  const open = (type, path) => {
+    // TODO: This component can not be passed props
+    // We have to interact with the open() method?
+    wrapper.vm.open(type, path);
+  };
+  const triggerSubmitForm = () => {
+    findForm().trigger('submit');
+  };
+  const triggerSubmitModal = () => {
+    findGlModal().vm.$emit('primary');
+  };
+  const triggerCancel = () => {
+    findGlModal().vm.$emit('cancel');
+  };
+
+  const mountComponent = () => {
+    const GlModalStub = stubComponent(GlModal);
+    jest.spyOn(GlModalStub.methods, 'show').mockImplementation(showModal);
+    jest.spyOn(GlModalStub.methods, 'toggle').mockImplementation(toggleModal);
+
+    wrapper = shallowMountExtended(Modal, {
+      store,
+      stubs: {
+        GlModal: GlModalStub,
+      },
+      // We need to attach to document for "focus" to work
+      attachTo: document.body,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStore();
+
+    Object.assign(
+      store.state.entries,
+      createEntriesFromPaths([
+        'README.md',
+        'src',
+        'src/deleted.js',
+        'src/parent_dir',
+        'src/parent_dir/foo.js',
+      ]),
+    );
+    Object.assign(store.state.entries['src/deleted.js'], { deleted: true });
+
+    jest.spyOn(store, 'dispatch').mockImplementation();
+  });
 
   afterEach(() => {
-    vm.$destroy();
+    store = null;
+    wrapper.destroy();
+    document.body.innerHTML = '';
   });
 
-  describe.each`
-    entryType | modalTitle                | btnTitle              | showsFileTemplates
-    ${'tree'} | ${'Create new directory'} | ${'Create directory'} | ${false}
-    ${'blob'} | ${'Create new file'}      | ${'Create file'}      | ${true}
-  `('$entryType', ({ entryType, modalTitle, btnTitle, showsFileTemplates }) => {
+  describe('default', () => {
     beforeEach(async () => {
-      const store = createStore();
-
-      vm = createComponentWithStore(Component, store).$mount();
-      vm.open(entryType);
-      vm.name = 'testing';
+      mountComponent();
 
+      // Not necessarily needed, but used to ensure that nothing extra is happening after the tick
       await nextTick();
     });
 
-    afterEach(() => {
-      vm.close();
+    it('renders modal', () => {
+      expect(findGlModal().props()).toMatchObject({
+        actionCancel: {
+          attributes: [{ variant: 'default' }],
+          text: 'Cancel',
+        },
+        actionPrimary: {
+          attributes: [{ variant: 'confirm' }],
+          text: 'Create file',
+        },
+        actionSecondary: null,
+        size: 'lg',
+        modalId: 'ide-new-entry',
+        title: 'Create new file',
+      });
     });
 
-    it(`sets modal title as ${entryType}`, () => {
-      expect(document.querySelector('.modal-title').textContent.trim()).toBe(modalTitle);
+    it('renders name label', () => {
+      expect(wrapper.find('label').text()).toBe('Name');
     });
 
-    it(`sets button label as ${entryType}`, () => {
-      expect(document.querySelector('.btn-confirm').textContent.trim()).toBe(btnTitle);
+    it('renders template buttons', () => {
+      const actual = findTemplateButtonsModel();
+
+      expect(actual.length).toBeGreaterThan(0);
+      expect(actual).toEqual(
+        store.getters['fileTemplates/templateTypes'].map((template) => ({
+          category: 'secondary',
+          text: template.name,
+          variant: 'dashed',
+        })),
+      );
     });
 
-    it(`sets form label as ${entryType}`, () => {
-      expect(document.querySelector('.label-bold').textContent.trim()).toBe('Name');
+    // These negative ".not.toHaveBeenCalled" assertions complement the positive "toHaveBeenCalled"
+    // assertions that show up later in this spec. Without these, we're not guaranteed the "act"
+    // actually caused the change in behavior.
+    it('does not dispatch actions by default', () => {
+      expect(store.dispatch).not.toHaveBeenCalled();
     });
 
-    it(`shows file templates: ${showsFileTemplates}`, () => {
-      const templateFilesEl = document.querySelector('.file-templates');
-      expect(Boolean(templateFilesEl)).toBe(showsFileTemplates);
+    it('does not trigger modal by default', () => {
+      expect(showModal).not.toHaveBeenCalled();
+      expect(toggleModal).not.toHaveBeenCalled();
     });
-  });
 
-  describe('rename entry', () => {
-    beforeEach(() => {
-      const store = createStore();
-      store.state.entries = {
-        'test-path': {
-          name: 'test',
-          type: 'blob',
-          path: 'test-path',
-        },
-      };
-
-      vm = createComponentWithStore(Component, store).$mount();
+    it('does not focus input by default', () => {
+      expect(document.activeElement).toBe(document.body);
     });
+  });
 
-    it.each`
-      entryType | modalTitle         | btnTitle
-      ${'tree'} | ${'Rename folder'} | ${'Rename folder'}
-      ${'blob'} | ${'Rename file'}   | ${'Rename file'}
-    `(
-      'renders title and button for renaming $entryType',
-      async ({ entryType, modalTitle, btnTitle }) => {
-        vm.$store.state.entries['test-path'].type = entryType;
-        vm.open('rename', 'test-path');
+  describe.each`
+    entryType | path         | modalTitle                | btnTitle              | showsFileTemplates | inputValue    | inputPlaceholder
+    ${'tree'} | ${''}        | ${'Create new directory'} | ${'Create directory'} | ${false}           | ${''}         | ${'dir/'}
+    ${'blob'} | ${''}        | ${'Create new file'}      | ${'Create file'}      | ${true}            | ${''}         | ${'dir/file_name'}
+    ${'blob'} | ${'foo/bar'} | ${'Create new file'}      | ${'Create file'}      | ${true}            | ${'foo/bar/'} | ${'dir/file_name'}
+  `(
+    'when opened as $entryType with path "$path"',
+    ({
+      entryType,
+      path,
+      modalTitle,
+      btnTitle,
+      showsFileTemplates,
+      inputValue,
+      inputPlaceholder,
+    }) => {
+      beforeEach(async () => {
+        mountComponent();
+
+        open(entryType, path);
 
         await nextTick();
-        expect(document.querySelector('.modal-title').textContent.trim()).toBe(modalTitle);
-        expect(document.querySelector('.btn-confirm').textContent.trim()).toBe(btnTitle);
-      },
-    );
+      });
 
-    describe('entryName', () => {
-      it('returns entries name', () => {
-        vm.open('rename', 'test-path');
+      it('sets modal props', () => {
+        expect(findGlModal().props()).toMatchObject({
+          title: modalTitle,
+          actionPrimary: {
+            attributes: [{ variant: 'confirm' }],
+            text: btnTitle,
+          },
+        });
+      });
 
-        expect(vm.entryName).toBe('test-path');
+      it('sets input attributes', () => {
+        expect(findInput().element.value).toBe(inputValue);
+        expect(findInput().attributes('placeholder')).toBe(inputPlaceholder);
       });
 
-      it('does not reset entryName to its old value if empty', () => {
-        vm.entryName = 'hello';
-        vm.entryName = '';
+      it(`shows file templates: ${showsFileTemplates}`, () => {
+        const actual = findTemplateButtonsModel().length > 0;
 
-        expect(vm.entryName).toBe('');
+        expect(actual).toBe(showsFileTemplates);
+      });
+
+      it('shows modal', () => {
+        expect(showModal).toHaveBeenCalled();
       });
-    });
 
-    describe('open', () => {
-      it('sets entryName to path provided if modalType is rename', () => {
-        vm.open('rename', 'test-path');
+      it('focus on input', () => {
+        expect(document.activeElement).toBe(findInput().element);
+      });
+
+      it('resets when canceled', async () => {
+        triggerCancel();
+
+        await nextTick();
 
-        expect(vm.entryName).toBe('test-path');
+        // Resets input value
+        expect(findInput().element.value).toBe('');
+        // Resets to blob mode
+        expect(findGlModal().props('title')).toBe('Create new file');
       });
+    },
+  );
+
+  describe.each`
+    modalType | name             | expectedName
+    ${'blob'} | ${'foo/bar.js'}  | ${'foo/bar.js'}
+    ${'blob'} | ${'foo /bar.js'} | ${'foo/bar.js'}
+    ${'tree'} | ${'foo/dir'}     | ${'foo/dir'}
+    ${'tree'} | ${'foo /dir'}    | ${'foo/dir'}
+  `('when submitting as $modalType with "$name"', ({ modalType, name, expectedName }) => {
+    describe('when using the modal primary button', () => {
+      beforeEach(async () => {
+        mountComponent();
+
+        open(modalType, '');
+        await nextTick();
 
-      it("appends '/' to the path if modalType isn't rename", () => {
-        vm.open('blob', 'test-path');
+        findInput().setValue(name);
+        triggerSubmitModal();
+      });
 
-        expect(vm.entryName).toBe('test-path/');
+      it('triggers createTempEntry action', () => {
+        expect(store.dispatch).toHaveBeenCalledWith('createTempEntry', {
+          name: expectedName,
+          type: modalType,
+        });
       });
+    });
+
+    describe('when triggering form submit (pressing enter)', () => {
+      beforeEach(async () => {
+        mountComponent();
+
+        open(modalType, '');
+        await nextTick();
 
-      it('leaves entryName blank if no path is provided', () => {
-        vm.open('blob');
+        findInput().setValue(name);
+        triggerSubmitForm();
+      });
 
-        expect(vm.entryName).toBe('');
+      it('triggers createTempEntry action', () => {
+        expect(store.dispatch).toHaveBeenCalledWith('createTempEntry', {
+          name: expectedName,
+          type: modalType,
+        });
       });
     });
   });
 
-  describe('createFromTemplate', () => {
-    let store;
+  describe('when creating from template type', () => {
+    beforeEach(async () => {
+      mountComponent();
 
-    beforeEach(() => {
-      store = createStore();
-      store.state.entries = {
-        'test-path/test': {
-          name: 'test',
-          deleted: false,
-        },
-      };
+      open('blob', 'some_dir');
 
-      vm = createComponentWithStore(Component, store).$mount();
-      vm.open('blob');
+      await nextTick();
 
-      jest.spyOn(vm, 'createTempEntry').mockImplementation();
+      // Set input, then trigger button
+      findInput().setValue('some_dir/foo.js');
+      findTemplateButtons().at(1).vm.$emit('click');
     });
 
-    it.each`
-      entryName                  | newFilePath
-      ${''}                      | ${'.gitignore'}
-      ${'README.md'}             | ${'.gitignore'}
-      ${'test-path/test/'}       | ${'test-path/test/.gitignore'}
-      ${'test-path/test'}        | ${'test-path/.gitignore'}
-      ${'test-path/test/abc.md'} | ${'test-path/test/.gitignore'}
-    `(
-      'creates a new file with the given template name in appropriate directory for path: $path',
-      ({ entryName, newFilePath }) => {
-        vm.entryName = entryName;
+    it('triggers createTempEntry action', () => {
+      const { name: expectedName } = store.getters['fileTemplates/templateTypes'][1];
 
-        vm.createFromTemplate({ name: '.gitignore' });
+      expect(store.dispatch).toHaveBeenCalledWith('createTempEntry', {
+        name: `some_dir/${expectedName}`,
+        type: 'blob',
+      });
+    });
 
-        expect(vm.createTempEntry).toHaveBeenCalledWith({
-          name: newFilePath,
-          type: 'blob',
-        });
-      },
-    );
+    it('toggles modal', () => {
+      expect(toggleModal).toHaveBeenCalled();
+    });
   });
 
-  describe('submitForm', () => {
-    let store;
+  describe.each`
+    origPath            | title              | inputValue          | inputSelectionStart
+    ${'src/parent_dir'} | ${'Rename folder'} | ${'src/parent_dir'} | ${'src/'.length}
+    ${'README.md'}      | ${'Rename file'}   | ${'README.md'}      | ${0}
+  `('when renaming for $origPath', ({ origPath, title, inputValue, inputSelectionStart }) => {
+    beforeEach(async () => {
+      mountComponent();
+
+      open('rename', origPath);
+
+      await nextTick();
+    });
 
-    beforeEach(() => {
-      store = createStore();
-      store.state.entries = {
-        'test-path/test': {
-          name: 'test',
-          deleted: false,
+    it('sets modal props for renaming', () => {
+      expect(findGlModal().props()).toMatchObject({
+        title,
+        actionPrimary: {
+          attributes: [{ variant: 'confirm' }],
+          text: title,
         },
-      };
+      });
+    });
+
+    it('sets input value', () => {
+      expect(findInput().element.value).toBe(inputValue);
+    });
 
-      vm = createComponentWithStore(Component, store).$mount();
+    it(`does not show file templates`, () => {
+      expect(findTemplateButtonsModel()).toHaveLength(0);
     });
 
-    it('throws an error when target entry exists', () => {
-      vm.open('rename', 'test-path/test');
+    it('shows modal when renaming', () => {
+      expect(showModal).toHaveBeenCalled();
+    });
 
-      expect(createFlash).not.toHaveBeenCalled();
+    it('focus on input when renaming', () => {
+      expect(document.activeElement).toBe(findInput().element);
+    });
+
+    it('selects name part of the input', () => {
+      expect(findInput().element.selectionStart).toBe(inputSelectionStart);
+      expect(findInput().element.selectionEnd).toBe(origPath.length);
+    });
+
+    describe('when renames is submitted successfully', () => {
+      describe('when using the modal primary button', () => {
+        beforeEach(() => {
+          findInput().setValue(NEW_NAME);
+          triggerSubmitModal();
+        });
+
+        it('dispatches renameEntry event', () => {
+          expect(store.dispatch).toHaveBeenCalledWith('renameEntry', {
+            path: origPath,
+            parentPath: '',
+            name: NEW_NAME,
+          });
+        });
+
+        it('does not trigger flash', () => {
+          expect(createFlash).not.toHaveBeenCalled();
+        });
+      });
 
-      vm.submitForm();
+      describe('when triggering form submit (pressing enter)', () => {
+        beforeEach(() => {
+          findInput().setValue(NEW_NAME);
+          triggerSubmitForm();
+        });
 
+        it('dispatches renameEntry event', () => {
+          expect(store.dispatch).toHaveBeenCalledWith('renameEntry', {
+            path: origPath,
+            parentPath: '',
+            name: NEW_NAME,
+          });
+        });
+
+        it('does not trigger flash', () => {
+          expect(createFlash).not.toHaveBeenCalled();
+        });
+      });
+    });
+  });
+
+  describe('when renaming and file already exists', () => {
+    beforeEach(async () => {
+      mountComponent();
+
+      open('rename', 'src/parent_dir');
+
+      await nextTick();
+
+      // Set to something that already exists!
+      findInput().setValue('src');
+      triggerSubmitModal();
+    });
+
+    it('creates flash', () => {
       expect(createFlash).toHaveBeenCalledWith({
-        message: 'The name "test-path/test" is already taken in this directory.',
+        message: 'The name "src" is already taken in this directory.',
         fadeTransition: false,
         addBodyClass: true,
       });
     });
 
-    it('does not throw error when target entry does not exist', () => {
-      jest.spyOn(vm, 'renameEntry').mockImplementation();
+    it('does not dispatch event', () => {
+      expect(store.dispatch).not.toHaveBeenCalled();
+    });
+  });
 
-      vm.open('rename', 'test-path/test');
-      vm.entryName = 'test-path/test2';
-      vm.submitForm();
+  describe('when renaming and file has been deleted', () => {
+    beforeEach(async () => {
+      mountComponent();
 
-      expect(createFlash).not.toHaveBeenCalled();
-    });
+      open('rename', 'src/parent_dir/foo.js');
 
-    it('removes leading/trailing found in the new name', () => {
-      vm.open('rename', 'test-path/test');
+      await nextTick();
 
-      vm.entryName = 'test-path /test';
+      findInput().setValue('src/deleted.js');
+      triggerSubmitModal();
+    });
 
-      vm.submitForm();
+    it('does not create flash', () => {
+      expect(createFlash).not.toHaveBeenCalled();
+    });
 
-      expect(vm.entryName).toBe('test-path/test');
+    it('dispatches event', () => {
+      expect(store.dispatch).toHaveBeenCalledWith('renameEntry', {
+        path: 'src/parent_dir/foo.js',
+        name: 'deleted.js',
+        parentPath: 'src',
+      });
     });
   });
 });
diff --git a/spec/frontend/ide/components/repo_editor_spec.js b/spec/frontend/ide/components/repo_editor_spec.js
index b44651481e9..7a0bcda1b7a 100644
--- a/spec/frontend/ide/components/repo_editor_spec.js
+++ b/spec/frontend/ide/components/repo_editor_spec.js
@@ -1,3 +1,4 @@
+import { GlTab } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { editor as monacoEditor, Range } from 'monaco-editor';
 import Vue, { nextTick } from 'vue';
@@ -5,6 +6,7 @@ import Vuex from 'vuex';
 import { shallowMount } from '@vue/test-utils';
 import '~/behaviors/markdown/render_gfm';
 import waitForPromises from 'helpers/wait_for_promises';
+import { stubPerformanceWebAPI } from 'helpers/performance';
 import { exampleConfigs, exampleFiles } from 'jest/ide/lib/editorconfig/mock_data';
 import { EDITOR_CODE_INSTANCE_FN, EDITOR_DIFF_INSTANCE_FN } from '~/editor/constants';
 import { EditorMarkdownExtension } from '~/editor/extensions/source_editor_markdown_ext';
@@ -125,10 +127,12 @@ describe('RepoEditor', () => {
   };
 
   const findEditor = () => wrapper.find('[data-testid="editor-container"]');
-  const findTabs = () => wrapper.findAll('.ide-mode-tabs .nav-links li');
+  const findTabs = () => wrapper.findAllComponents(GlTab);
   const findPreviewTab = () => wrapper.find('[data-testid="preview-tab"]');
 
   beforeEach(() => {
+    stubPerformanceWebAPI();
+
     createInstanceSpy = jest.spyOn(SourceEditor.prototype, EDITOR_CODE_INSTANCE_FN);
     createDiffInstanceSpy = jest.spyOn(SourceEditor.prototype, EDITOR_DIFF_INSTANCE_FN);
     createModelSpy = jest.spyOn(monacoEditor, 'createModel');
@@ -201,12 +205,12 @@ describe('RepoEditor', () => {
         const tabs = findTabs();
 
         expect(tabs).toHaveLength(2);
-        expect(tabs.at(0).text()).toBe('Edit');
-        expect(tabs.at(1).text()).toBe('Preview Markdown');
+        expect(tabs.at(0).element.dataset.testid).toBe('edit-tab');
+        expect(tabs.at(1).element.dataset.testid).toBe('preview-tab');
       });
 
       it('renders markdown for tempFile', async () => {
-        findPreviewTab().trigger('click');
+        findPreviewTab().vm.$emit('click');
         await waitForPromises();
         expect(wrapper.find(ContentViewer).html()).toContain(dummyFile.text.content);
       });
diff --git a/spec/frontend/ide/ide_router_spec.js b/spec/frontend/ide/ide_router_spec.js
index cd10812f8ea..adbdba1b11e 100644
--- a/spec/frontend/ide/ide_router_spec.js
+++ b/spec/frontend/ide/ide_router_spec.js
@@ -1,4 +1,5 @@
 import waitForPromises from 'helpers/wait_for_promises';
+import { stubPerformanceWebAPI } from 'helpers/performance';
 import { createRouter } from '~/ide/ide_router';
 import { createStore } from '~/ide/stores';
 
@@ -12,6 +13,8 @@ describe('IDE router', () => {
   let router;
 
   beforeEach(() => {
+    stubPerformanceWebAPI();
+
     window.history.replaceState({}, '', '/');
     store = createStore();
     router = createRouter(store, DEFAULT_BRANCH);
diff --git a/spec/frontend/ide/stores/actions/file_spec.js b/spec/frontend/ide/stores/actions/file_spec.js
index 45d1beea3f8..6c1dee1e5ca 100644
--- a/spec/frontend/ide/stores/actions/file_spec.js
+++ b/spec/frontend/ide/stores/actions/file_spec.js
@@ -7,6 +7,7 @@ import { createStore } from '~/ide/stores';
 import * as actions from '~/ide/stores/actions/file';
 import * as types from '~/ide/stores/mutation_types';
 import axios from '~/lib/utils/axios_utils';
+import { stubPerformanceWebAPI } from 'helpers/performance';
 import { file, createTriggerRenameAction, createTriggerUpdatePayload } from '../../helpers';
 
 const ORIGINAL_CONTENT = 'original content';
@@ -19,6 +20,8 @@ describe('IDE store file actions', () => {
   let router;
 
   beforeEach(() => {
+    stubPerformanceWebAPI();
+
     mock = new MockAdapter(axios);
     originalGon = window.gon;
     window.gon = {
diff --git a/spec/frontend/ide/stores/actions/merge_request_spec.js b/spec/frontend/ide/stores/actions/merge_request_spec.js
index 5592e2664c4..abc3ba5b0a2 100644
--- a/spec/frontend/ide/stores/actions/merge_request_spec.js
+++ b/spec/frontend/ide/stores/actions/merge_request_spec.js
@@ -1,5 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 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';
@@ -35,6 +36,8 @@ describe('IDE store merge request actions', () => {
   let mock;
 
   beforeEach(() => {
+    stubPerformanceWebAPI();
+
     store = createStore();
 
     mock = new MockAdapter(axios);
diff --git a/spec/frontend/ide/stores/actions/tree_spec.js b/spec/frontend/ide/stores/actions/tree_spec.js
index fc44cbb21ae..d43393875eb 100644
--- a/spec/frontend/ide/stores/actions/tree_spec.js
+++ b/spec/frontend/ide/stores/actions/tree_spec.js
@@ -1,4 +1,5 @@
 import MockAdapter from 'axios-mock-adapter';
+import { stubPerformanceWebAPI } from 'helpers/performance';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
 import { createRouter } from '~/ide/ide_router';
@@ -24,6 +25,8 @@ describe('Multi-file store tree actions', () => {
   };
 
   beforeEach(() => {
+    stubPerformanceWebAPI();
+
     store = createStore();
     router = createRouter(store);
     jest.spyOn(router, 'push').mockImplementation();
diff --git a/spec/frontend/ide/stores/actions_spec.js b/spec/frontend/ide/stores/actions_spec.js
index 3889c4f11c3..f6d54491d77 100644
--- a/spec/frontend/ide/stores/actions_spec.js
+++ b/spec/frontend/ide/stores/actions_spec.js
@@ -1,4 +1,5 @@
 import MockAdapter from 'axios-mock-adapter';
+import { stubPerformanceWebAPI } from 'helpers/performance';
 import testAction from 'helpers/vuex_action_helper';
 import eventHub from '~/ide/eventhub';
 import { createRouter } from '~/ide/ide_router';
@@ -34,6 +35,8 @@ describe('Multi-file store actions', () => {
   let router;
 
   beforeEach(() => {
+    stubPerformanceWebAPI();
+
     store = createStore();
     router = createRouter(store);
 
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 0279ad454d2..cdc508a0033 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
@@ -50,13 +50,13 @@ describe('import table', () => {
   const findPaginationDropdownText = () => findPaginationDropdown().find('button').text();
   const findSelectionCount = () => wrapper.find('[data-test-id="selection-count"]');
 
-  const triggerSelectAllCheckbox = () =>
-    wrapper.find('thead input[type=checkbox]').trigger('click');
+  const triggerSelectAllCheckbox = (checked = true) =>
+    wrapper.find('thead input[type=checkbox]').setChecked(checked);
 
   const selectRow = (idx) =>
-    wrapper.findAll('tbody td input[type=checkbox]').at(idx).trigger('click');
+    wrapper.findAll('tbody td input[type=checkbox]').at(idx).setChecked(true);
 
-  const createComponent = ({ bulkImportSourceGroups, importGroups }) => {
+  const createComponent = ({ bulkImportSourceGroups, importGroups, defaultTargetNamespace }) => {
     apolloProvider = createMockApollo([], {
       Query: {
         availableNamespaces: () => availableNamespacesFixture,
@@ -73,6 +73,7 @@ describe('import table', () => {
         jobsPath: '/fake_job_path',
         sourceUrl: SOURCE_URL,
         historyPath: '/fake_history_path',
+        defaultTargetNamespace,
       },
       apolloProvider,
     });
@@ -165,6 +166,27 @@ describe('import table', () => {
     expect(targetNamespaceDropdownButton.text()).toBe('No parent');
   });
 
+  it('respects default namespace if provided', async () => {
+    const targetNamespace = availableNamespacesFixture[1];
+
+    createComponent({
+      bulkImportSourceGroups: () => ({
+        nodes: FAKE_GROUPS,
+        pageInfo: FAKE_PAGE_INFO,
+        versionValidation: FAKE_VERSION_VALIDATION,
+      }),
+      defaultTargetNamespace: targetNamespace.id,
+    });
+
+    await waitForPromises();
+
+    const firstRow = wrapper.find('tbody tr');
+    const targetNamespaceDropdownButton = findTargetNamespaceDropdown(firstRow).find(
+      '[aria-haspopup]',
+    );
+    expect(targetNamespaceDropdownButton.text()).toBe(targetNamespace.fullPath);
+  });
+
   it('does not render status string when result list is empty', async () => {
     createComponent({
       bulkImportSourceGroups: jest.fn().mockResolvedValue({
@@ -388,7 +410,7 @@ describe('import table', () => {
       expect(findSelectionCount().text()).toMatchInterpolatedText('0 selected');
       await triggerSelectAllCheckbox();
       expect(findSelectionCount().text()).toMatchInterpolatedText('2 selected');
-      await triggerSelectAllCheckbox();
+      await triggerSelectAllCheckbox(false);
       expect(findSelectionCount().text()).toMatchInterpolatedText('0 selected');
     });
 
diff --git a/spec/frontend/integrations/edit/components/active_checkbox_spec.js b/spec/frontend/integrations/edit/components/active_checkbox_spec.js
index 633389578a0..1f7a5f0dbc9 100644
--- a/spec/frontend/integrations/edit/components/active_checkbox_spec.js
+++ b/spec/frontend/integrations/edit/components/active_checkbox_spec.js
@@ -1,7 +1,6 @@
 import { GlFormCheckbox } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 
-import { nextTick } from 'vue';
 import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue';
 import { createStore } from '~/integrations/edit/store';
 
@@ -74,22 +73,13 @@ describe('ActiveCheckbox', () => {
         expect(findGlFormCheckbox().vm.$attrs.checked).toBe(true);
       });
 
-      describe('on checkbox click', () => {
-        it('switches the form value', async () => {
-          findInputInCheckbox().trigger('click');
-
-          await nextTick();
-          expect(findGlFormCheckbox().vm.$attrs.checked).toBe(false);
-        });
-      });
-
       it('emits `toggle-integration-active` event with `true` on mount', () => {
         expect(wrapper.emitted('toggle-integration-active')[0]).toEqual([true]);
       });
 
       describe('on checkbox `change` event', () => {
-        it('emits `toggle-integration-active` event', () => {
-          findGlFormCheckbox().vm.$emit('change', false);
+        it('emits `toggle-integration-active` event', async () => {
+          await findInputInCheckbox().setChecked(false);
 
           expect(wrapper.emitted('toggle-integration-active')[1]).toEqual([false]);
         });
diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js
index a2bdece821f..21e57a2e33c 100644
--- a/spec/frontend/integrations/edit/components/integration_form_spec.js
+++ b/spec/frontend/integrations/edit/components/integration_form_spec.js
@@ -596,37 +596,42 @@ describe('IntegrationForm', () => {
       });
 
       describe.each`
-        scenario                                   | replyStatus                         | errorMessage  | expectToast                           | expectSentry
-        ${'when "test settings" request fails'}    | ${httpStatus.INTERNAL_SERVER_ERROR} | ${undefined}  | ${I18N_DEFAULT_ERROR_MESSAGE}         | ${true}
-        ${'when "test settings" returns an error'} | ${httpStatus.OK}                    | ${'an error'} | ${'an error'}                         | ${false}
-        ${'when "test settings" succeeds'}         | ${httpStatus.OK}                    | ${undefined}  | ${I18N_SUCCESSFUL_CONNECTION_MESSAGE} | ${false}
-      `('$scenario', ({ replyStatus, errorMessage, expectToast, expectSentry }) => {
-        beforeEach(async () => {
-          mockAxios.onPut(mockTestPath).replyOnce(replyStatus, {
-            error: Boolean(errorMessage),
-            message: errorMessage,
+        scenario                                                | replyStatus                         | errorMessage   | serviceResponse | expectToast                           | expectSentry
+        ${'when "test settings" request fails'}                 | ${httpStatus.INTERNAL_SERVER_ERROR} | ${undefined}   | ${undefined}    | ${I18N_DEFAULT_ERROR_MESSAGE}         | ${true}
+        ${'when "test settings" returns an error'}              | ${httpStatus.OK}                    | ${'an error'}  | ${undefined}    | ${'an error'}                         | ${false}
+        ${'when "test settings" returns an error with details'} | ${httpStatus.OK}                    | ${'an error.'} | ${'extra info'} | ${'an error. extra info'}             | ${false}
+        ${'when "test settings" succeeds'}                      | ${httpStatus.OK}                    | ${undefined}   | ${undefined}    | ${I18N_SUCCESSFUL_CONNECTION_MESSAGE} | ${false}
+      `(
+        '$scenario',
+        ({ replyStatus, errorMessage, serviceResponse, expectToast, expectSentry }) => {
+          beforeEach(async () => {
+            mockAxios.onPut(mockTestPath).replyOnce(replyStatus, {
+              error: Boolean(errorMessage),
+              message: errorMessage,
+              service_response: serviceResponse,
+            });
+
+            await findTestButton().vm.$emit('click', new Event('click'));
+            await waitForPromises();
           });
 
-          await findTestButton().vm.$emit('click', new Event('click'));
-          await waitForPromises();
-        });
-
-        it(`calls toast with '${expectToast}'`, () => {
-          expect(mockToastShow).toHaveBeenCalledWith(expectToast);
-        });
+          it(`calls toast with '${expectToast}'`, () => {
+            expect(mockToastShow).toHaveBeenCalledWith(expectToast);
+          });
 
-        it('sets `loading` prop of test button to `false`', () => {
-          expect(findTestButton().props('loading')).toBe(false);
-        });
+          it('sets `loading` prop of test button to `false`', () => {
+            expect(findTestButton().props('loading')).toBe(false);
+          });
 
-        it('sets save button `disabled` prop to `false`', () => {
-          expect(findProjectSaveButton().props('disabled')).toBe(false);
-        });
+          it('sets save button `disabled` prop to `false`', () => {
+            expect(findProjectSaveButton().props('disabled')).toBe(false);
+          });
 
-        it(`${expectSentry ? 'does' : 'does not'} capture exception in Sentry`, () => {
-          expect(Sentry.captureException).toHaveBeenCalledTimes(expectSentry ? 1 : 0);
-        });
-      });
+          it(`${expectSentry ? 'does' : 'does not'} capture exception in Sentry`, () => {
+            expect(Sentry.captureException).toHaveBeenCalledTimes(expectSentry ? 1 : 0);
+          });
+        },
+      );
     });
   });
 
diff --git a/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js b/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js
index 49fbebb9396..6011b3e6edc 100644
--- a/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js
+++ b/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js
@@ -115,9 +115,8 @@ describe('JiraTriggerFields', () => {
 
         const checkbox = findIssueTransitionEnabled();
         expect(checkbox.element.checked).toBe(false);
-        checkbox.trigger('click');
+        await checkbox.setChecked(true);
 
-        await nextTick();
         const [radio1, radio2] = findIssueTransitionModeRadios().wrappers;
         expect(radio1.element.checked).toBe(true);
         expect(radio2.element.checked).toBe(false);
diff --git a/spec/frontend/invite_members/components/import_a_project_modal_spec.js b/spec/frontend/invite_members/components/import_project_members_modal_spec.js
index 6db881d5c75..b4d42d90d99 100644
--- a/spec/frontend/invite_members/components/import_a_project_modal_spec.js
+++ b/spec/frontend/invite_members/components/import_project_members_modal_spec.js
@@ -5,7 +5,7 @@ import { stubComponent } from 'helpers/stub_component';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import * as ProjectsApi from '~/api/projects_api';
-import ImportAProjectModal from '~/invite_members/components/import_a_project_modal.vue';
+import ImportProjectMembersModal from '~/invite_members/components/import_project_members_modal.vue';
 import ProjectSelect from '~/invite_members/components/project_select.vue';
 import axios from '~/lib/utils/axios_utils';
 
@@ -20,7 +20,7 @@ const $toast = {
 };
 
 const createComponent = () => {
-  wrapper = shallowMountExtended(ImportAProjectModal, {
+  wrapper = shallowMountExtended(ImportProjectMembersModal, {
     propsData: {
       projectId,
       projectName,
@@ -51,12 +51,11 @@ afterEach(() => {
   mock.restore();
 });
 
-describe('ImportAProjectModal', () => {
+describe('ImportProjectMembersModal', () => {
+  const findGlModal = () => wrapper.findComponent(GlModal);
   const findIntroText = () => wrapper.find({ ref: 'modalIntro' }).text();
-  const findCancelButton = () => wrapper.findByTestId('cancel-button');
-  const findImportButton = () => wrapper.findByTestId('import-button');
-  const clickImportButton = () => findImportButton().vm.$emit('click');
-  const clickCancelButton = () => findCancelButton().vm.$emit('click');
+  const clickImportButton = () => findGlModal().vm.$emit('primary', { preventDefault: jest.fn() });
+  const closeModal = () => findGlModal().vm.$emit('hidden', { preventDefault: jest.fn() });
   const findFormGroup = () => wrapper.findByTestId('form-group');
   const formGroupInvalidFeedback = () => findFormGroup().props('invalidFeedback');
   const formGroupErrorState = () => findFormGroup().props('state');
@@ -68,37 +67,40 @@ describe('ImportAProjectModal', () => {
     });
 
     it('renders the modal with the correct title', () => {
-      expect(wrapper.findComponent(GlModal).props('title')).toBe(
-        'Import members from another project',
-      );
+      expect(findGlModal().props('title')).toBe('Import members from another project');
     });
 
     it('renders the Cancel button text correctly', () => {
-      expect(findCancelButton().text()).toBe('Cancel');
+      expect(findGlModal().props('actionCancel')).toMatchObject({
+        text: 'Cancel',
+      });
     });
 
     it('renders the Import button text correctly', () => {
-      expect(findImportButton().text()).toBe('Import project members');
+      expect(findGlModal().props('actionPrimary')).toMatchObject({
+        text: 'Import project members',
+        attributes: {
+          variant: 'confirm',
+          disabled: true,
+          loading: false,
+        },
+      });
     });
 
     it('renders the modal intro text correctly', () => {
       expect(findIntroText()).toBe("You're importing members to the test name project.");
     });
 
-    it('renders the Import button modal without isLoading', () => {
-      expect(findImportButton().props('loading')).toBe(false);
-    });
-
     it('sets isLoading to true when the Invite button is clicked', async () => {
       clickImportButton();
 
       await nextTick();
 
-      expect(findImportButton().props('loading')).toBe(true);
+      expect(findGlModal().props('actionPrimary').attributes.loading).toBe(true);
     });
   });
 
-  describe('submitting the import form', () => {
+  describe('submitting the import', () => {
     describe('when the import is successful', () => {
       beforeEach(() => {
         createComponent();
@@ -125,7 +127,7 @@ describe('ImportAProjectModal', () => {
       });
 
       it('sets isLoading to false after success', () => {
-        expect(findImportButton().props('loading')).toBe(false);
+        expect(findGlModal().props('actionPrimary').attributes.loading).toBe(false);
       });
     });
 
@@ -149,14 +151,14 @@ describe('ImportAProjectModal', () => {
       });
 
       it('sets isLoading to false after error', () => {
-        expect(findImportButton().props('loading')).toBe(false);
+        expect(findGlModal().props('actionPrimary').attributes.loading).toBe(false);
       });
 
       it('clears the error when the modal is closed with an error', async () => {
         expect(formGroupInvalidFeedback()).toBe('Unable to import project members');
         expect(formGroupErrorState()).toBe(false);
 
-        clickCancelButton();
+        closeModal();
 
         await nextTick();
 
diff --git a/spec/frontend/invite_members/components/import_project_members_trigger_spec.js b/spec/frontend/invite_members/components/import_project_members_trigger_spec.js
new file mode 100644
index 00000000000..b6375fcfa22
--- /dev/null
+++ b/spec/frontend/invite_members/components/import_project_members_trigger_spec.js
@@ -0,0 +1,49 @@
+import { GlButton } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import ImportProjectMembersTrigger from '~/invite_members/components/import_project_members_trigger.vue';
+import eventHub from '~/invite_members/event_hub';
+
+const displayText = 'Import Project Members';
+
+const createComponent = (props = {}) => {
+  return mount(ImportProjectMembersTrigger, {
+    propsData: {
+      displayText,
+      ...props,
+    },
+  });
+};
+
+describe('ImportProjectMembersTrigger', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  describe('displayText', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('includes the correct displayText for the link', () => {
+      expect(findButton().text()).toBe(displayText);
+    });
+  });
+
+  describe('when button is clicked', () => {
+    beforeEach(() => {
+      eventHub.$emit = jest.fn();
+
+      wrapper = createComponent();
+
+      findButton().trigger('click');
+    });
+
+    it('emits event that triggers opening the modal', () => {
+      expect(eventHub.$emit).toHaveBeenLastCalledWith('openProjectMembersModal');
+    });
+  });
+});
diff --git a/spec/frontend/invite_members/components/invite_members_modal_spec.js b/spec/frontend/invite_members/components/invite_members_modal_spec.js
index 13985ce7d74..045a454e63a 100644
--- a/spec/frontend/invite_members/components/invite_members_modal_spec.js
+++ b/spec/frontend/invite_members/components/invite_members_modal_spec.js
@@ -35,6 +35,7 @@ import {
   user2,
   user3,
   user4,
+  user5,
   GlEmoji,
 } from '../mock_data/member_modal';
 
@@ -93,6 +94,11 @@ describe('InviteMembersModal', () => {
   const findModal = () => wrapper.findComponent(GlModal);
   const findBase = () => wrapper.findComponent(InviteModalBase);
   const findIntroText = () => wrapper.findByTestId('modal-base-intro-text').text();
+  const findMemberErrorAlert = () => wrapper.findByTestId('alert-member-error');
+  const findMemberErrorMessage = (element) =>
+    `${Object.keys(invitationsApiResponse.MULTIPLE_RESTRICTED.message)[element]}: ${
+      Object.values(invitationsApiResponse.MULTIPLE_RESTRICTED.message)[element]
+    }`;
   const emitEventFromModal = (eventName) => () =>
     findModal().vm.$emit(eventName, { preventDefault: jest.fn() });
   const clickInviteButton = emitEventFromModal('primary');
@@ -123,6 +129,10 @@ describe('InviteMembersModal', () => {
     findBase().vm.$emit('access-level', val);
     await nextTick();
   };
+  const removeMembersToken = async (val) => {
+    findMembersSelect().vm.$emit('token-remove', val);
+    await nextTick();
+  };
 
   describe('rendering the tasks to be done', () => {
     const setupComponent = async (props = {}, urlParameter = ['invite_members_for_task']) => {
@@ -431,17 +441,20 @@ describe('InviteMembersModal', () => {
           });
 
           it('clears the error when the list of members to invite is cleared', async () => {
-            expect(membersFormGroupInvalidFeedback()).toBe(
+            expect(findMemberErrorAlert().exists()).toBe(true);
+            expect(findMemberErrorAlert().text()).toContain(
               Object.values(invitationsApiResponse.EMAIL_TAKEN.message)[0],
             );
-            expect(findMembersSelect().props('validationState')).toBe(false);
+            expect(membersFormGroupInvalidFeedback()).toBe('');
+            expect(findMembersSelect().props('exceptionState')).not.toBe(false);
 
             findMembersSelect().vm.$emit('clear');
 
             await nextTick();
 
+            expect(findMemberErrorAlert().exists()).toBe(false);
             expect(membersFormGroupInvalidFeedback()).toBe('');
-            expect(findMembersSelect().props('validationState')).not.toBe(false);
+            expect(findMembersSelect().props('exceptionState')).not.toBe(false);
           });
 
           it('clears the error when the cancel button is clicked', async () => {
@@ -450,7 +463,7 @@ describe('InviteMembersModal', () => {
             await nextTick();
 
             expect(membersFormGroupInvalidFeedback()).toBe('');
-            expect(findMembersSelect().props('validationState')).not.toBe(false);
+            expect(findMembersSelect().props('exceptionState')).not.toBe(false);
           });
 
           it('clears the error when the modal is hidden', async () => {
@@ -458,33 +471,12 @@ describe('InviteMembersModal', () => {
 
             await nextTick();
 
+            expect(findMemberErrorAlert().exists()).toBe(false);
             expect(membersFormGroupInvalidFeedback()).toBe('');
-            expect(findMembersSelect().props('validationState')).not.toBe(false);
+            expect(findMembersSelect().props('exceptionState')).not.toBe(false);
           });
         });
 
-        it('clears the invalid state and message once the list of members to invite is cleared', async () => {
-          mockInvitationsApi(httpStatus.CREATED, invitationsApiResponse.EMAIL_TAKEN);
-
-          clickInviteButton();
-
-          await waitForPromises();
-
-          expect(membersFormGroupInvalidFeedback()).toBe(
-            Object.values(invitationsApiResponse.EMAIL_TAKEN.message)[0],
-          );
-          expect(findMembersSelect().props('validationState')).toBe(false);
-          expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
-
-          findMembersSelect().vm.$emit('clear');
-
-          await waitForPromises();
-
-          expect(membersFormGroupInvalidFeedback()).toBe('');
-          expect(findMembersSelect().props('validationState')).toBe(null);
-          expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
-        });
-
         it('displays the generic error for http server error', async () => {
           mockInvitationsApi(
             httpStatus.INTERNAL_SERVER_ERROR,
@@ -496,6 +488,7 @@ describe('InviteMembersModal', () => {
           await waitForPromises();
 
           expect(membersFormGroupInvalidFeedback()).toBe('Something went wrong');
+          expect(findMembersSelect().props('exceptionState')).toBe(false);
         });
 
         it('displays the restricted user api message for response with bad request', async () => {
@@ -505,20 +498,31 @@ describe('InviteMembersModal', () => {
 
           await waitForPromises();
 
-          expect(membersFormGroupInvalidFeedback()).toBe(expectedEmailRestrictedError);
+          expect(findMemberErrorAlert().exists()).toBe(true);
+          expect(findMemberErrorAlert().text()).toContain(expectedEmailRestrictedError);
+          expect(membersFormGroupInvalidFeedback()).toBe('');
+          expect(findMembersSelect().props('exceptionState')).not.toBe(false);
         });
 
-        it('displays the first part of the error when multiple existing users are restricted by email', async () => {
+        it('displays all errors when there are multiple existing users that are restricted by email', async () => {
           mockInvitationsApi(httpStatus.CREATED, invitationsApiResponse.MULTIPLE_RESTRICTED);
 
           clickInviteButton();
 
           await waitForPromises();
 
-          expect(membersFormGroupInvalidFeedback()).toBe(
-            "The member's email address is not allowed for this project. Go to the Admin area > Sign-up restrictions, and check Allowed domains for sign-ups.",
+          expect(findMemberErrorAlert().exists()).toBe(true);
+          expect(findMemberErrorAlert().text()).toContain(
+            Object.values(invitationsApiResponse.MULTIPLE_RESTRICTED.message)[0],
+          );
+          expect(findMemberErrorAlert().text()).toContain(
+            Object.values(invitationsApiResponse.MULTIPLE_RESTRICTED.message)[1],
           );
-          expect(findMembersSelect().props('validationState')).toBe(false);
+          expect(findMemberErrorAlert().text()).toContain(
+            Object.values(invitationsApiResponse.MULTIPLE_RESTRICTED.message)[2],
+          );
+          expect(membersFormGroupInvalidFeedback()).toBe('');
+          expect(findMembersSelect().props('exceptionState')).not.toBe(false);
         });
       });
     });
@@ -573,10 +577,30 @@ describe('InviteMembersModal', () => {
           await waitForPromises();
 
           expect(membersFormGroupInvalidFeedback()).toBe(expectedSyntaxError);
-          expect(findMembersSelect().props('validationState')).toBe(false);
+          expect(findMembersSelect().props('exceptionState')).toBe(false);
           expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
         });
 
+        it('clears the error when the modal is hidden', async () => {
+          mockInvitationsApi(httpStatus.BAD_REQUEST, invitationsApiResponse.EMAIL_INVALID);
+
+          clickInviteButton();
+
+          await waitForPromises();
+
+          expect(membersFormGroupInvalidFeedback()).toBe(expectedSyntaxError);
+          expect(findMembersSelect().props('exceptionState')).toBe(false);
+          expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
+
+          findModal().vm.$emit('hidden');
+
+          await nextTick();
+
+          expect(findMemberErrorAlert().exists()).toBe(false);
+          expect(membersFormGroupInvalidFeedback()).toBe('');
+          expect(findMembersSelect().props('exceptionState')).not.toBe(false);
+        });
+
         it('displays the restricted email error when restricted email is invited', async () => {
           mockInvitationsApi(httpStatus.CREATED, invitationsApiResponse.EMAIL_RESTRICTED);
 
@@ -584,20 +608,32 @@ describe('InviteMembersModal', () => {
 
           await waitForPromises();
 
-          expect(membersFormGroupInvalidFeedback()).toContain(expectedEmailRestrictedError);
-          expect(findMembersSelect().props('validationState')).toBe(false);
+          expect(findMemberErrorAlert().exists()).toBe(true);
+          expect(findMemberErrorAlert().text()).toContain(expectedEmailRestrictedError);
+          expect(membersFormGroupInvalidFeedback()).toBe('');
+          expect(findMembersSelect().props('exceptionState')).not.toBe(false);
           expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
         });
 
-        it('displays the first error message when multiple emails return a restricted error message', async () => {
+        it('displays all errors when there are multiple emails that return a restricted error message', async () => {
           mockInvitationsApi(httpStatus.CREATED, invitationsApiResponse.MULTIPLE_RESTRICTED);
 
           clickInviteButton();
 
           await waitForPromises();
 
-          expect(membersFormGroupInvalidFeedback()).toContain(expectedEmailRestrictedError);
-          expect(findMembersSelect().props('validationState')).toBe(false);
+          expect(findMemberErrorAlert().exists()).toBe(true);
+          expect(findMemberErrorAlert().text()).toContain(
+            Object.values(invitationsApiResponse.MULTIPLE_RESTRICTED.message)[0],
+          );
+          expect(findMemberErrorAlert().text()).toContain(
+            Object.values(invitationsApiResponse.MULTIPLE_RESTRICTED.message)[1],
+          );
+          expect(findMemberErrorAlert().text()).toContain(
+            Object.values(invitationsApiResponse.MULTIPLE_RESTRICTED.message)[2],
+          );
+          expect(membersFormGroupInvalidFeedback()).toBe('');
+          expect(findMembersSelect().props('exceptionState')).not.toBe(false);
         });
 
         it('displays the invalid syntax error for bad request', async () => {
@@ -608,7 +644,7 @@ describe('InviteMembersModal', () => {
           await waitForPromises();
 
           expect(membersFormGroupInvalidFeedback()).toBe(expectedSyntaxError);
-          expect(findMembersSelect().props('validationState')).toBe(false);
+          expect(findMembersSelect().props('exceptionState')).toBe(false);
         });
       });
 
@@ -617,14 +653,51 @@ describe('InviteMembersModal', () => {
           createInviteMembersToGroupWrapper();
 
           await triggerMembersTokenSelect([user3, user4]);
-          mockInvitationsApi(httpStatus.CREATED, invitationsApiResponse.ERROR_EMAIL_INVALID);
+          mockInvitationsApi(httpStatus.BAD_REQUEST, invitationsApiResponse.ERROR_EMAIL_INVALID);
 
           clickInviteButton();
 
           await waitForPromises();
 
           expect(membersFormGroupInvalidFeedback()).toBe(expectedSyntaxError);
-          expect(findMembersSelect().props('validationState')).toBe(false);
+          expect(findMembersSelect().props('exceptionState')).toBe(false);
+        });
+
+        it('displays errors for multiple and allows clearing', async () => {
+          createInviteMembersToGroupWrapper();
+
+          await triggerMembersTokenSelect([user3, user4, user5]);
+          mockInvitationsApi(httpStatus.CREATED, invitationsApiResponse.MULTIPLE_RESTRICTED);
+
+          clickInviteButton();
+
+          await waitForPromises();
+
+          expect(findMemberErrorAlert().exists()).toBe(true);
+          expect(findMemberErrorAlert().props('title')).toContain(
+            "The following 3 members couldn't be invited",
+          );
+          expect(findMemberErrorAlert().text()).toContain(findMemberErrorMessage(0));
+          expect(findMemberErrorAlert().text()).toContain(findMemberErrorMessage(1));
+          expect(findMemberErrorAlert().text()).toContain(findMemberErrorMessage(2));
+
+          await removeMembersToken(user3);
+
+          expect(findMemberErrorAlert().props('title')).toContain(
+            "The following 2 members couldn't be invited",
+          );
+          expect(findMemberErrorAlert().text()).not.toContain(findMemberErrorMessage(0));
+
+          await removeMembersToken(user4);
+
+          expect(findMemberErrorAlert().props('title')).toContain(
+            "The following member couldn't be invited",
+          );
+          expect(findMemberErrorAlert().text()).not.toContain(findMemberErrorMessage(1));
+
+          await removeMembersToken(user5);
+
+          expect(findMemberErrorAlert().exists()).toBe(false);
         });
       });
     });
@@ -675,24 +748,6 @@ describe('InviteMembersModal', () => {
           });
         });
       });
-
-      describe('when any invite failed for any reason', () => {
-        beforeEach(async () => {
-          createInviteMembersToGroupWrapper();
-
-          await triggerMembersTokenSelect([user1, user3]);
-
-          mockInvitationsApi(httpStatus.BAD_REQUEST, invitationsApiResponse.EMAIL_INVALID);
-
-          clickInviteButton();
-        });
-
-        it('displays the first error message', async () => {
-          await waitForPromises();
-
-          expect(membersFormGroupInvalidFeedback()).toBe(expectedSyntaxError);
-        });
-      });
     });
 
     describe('tracking', () => {
diff --git a/spec/frontend/invite_members/components/invite_modal_base_spec.js b/spec/frontend/invite_members/components/invite_modal_base_spec.js
index cc19e90a5fa..b55eeb72471 100644
--- a/spec/frontend/invite_members/components/invite_modal_base_spec.js
+++ b/spec/frontend/invite_members/components/invite_modal_base_spec.js
@@ -254,7 +254,7 @@ describe('InviteModalBase', () => {
     expect(wrapper.findComponent(GlModal).props('actionPrimary').attributes.loading).toBe(true);
   });
 
-  it('with invalidFeedbackMessage, set members form group validation state', () => {
+  it('with invalidFeedbackMessage, set members form group exception state', () => {
     createComponent({
       invalidFeedbackMessage: 'invalid message!',
     });
diff --git a/spec/frontend/invite_members/components/members_token_select_spec.js b/spec/frontend/invite_members/components/members_token_select_spec.js
index bf5564e4d63..6375d0f7e2e 100644
--- a/spec/frontend/invite_members/components/members_token_select_spec.js
+++ b/spec/frontend/invite_members/components/members_token_select_spec.js
@@ -16,6 +16,7 @@ const createComponent = (props) => {
   return shallowMount(MembersTokenSelect, {
     propsData: {
       ariaLabelledby: label,
+      invalidMembers: {},
       placeholder,
       ...props,
     },
@@ -124,12 +125,14 @@ describe('MembersTokenSelect', () => {
         findTokenSelector().vm.$emit('token-remove', [user1]);
 
         expect(wrapper.emitted('clear')).toEqual([[]]);
+        expect(wrapper.emitted('token-remove')).toBeUndefined();
       });
 
-      it('does not emit `clear` event when there are still tokens selected', () => {
+      it('emits `token-remove` event with the token when there are still tokens selected', () => {
         findTokenSelector().vm.$emit('input', [user1, user2]);
         findTokenSelector().vm.$emit('token-remove', [user1]);
 
+        expect(wrapper.emitted('token-remove')).toEqual([[[user1]]]);
         expect(wrapper.emitted('clear')).toBeUndefined();
       });
     });
diff --git a/spec/frontend/invite_members/mock_data/member_modal.js b/spec/frontend/invite_members/mock_data/member_modal.js
index 474234cfacb..7d675b6206c 100644
--- a/spec/frontend/invite_members/mock_data/member_modal.js
+++ b/spec/frontend/invite_members/mock_data/member_modal.js
@@ -26,13 +26,17 @@ export const user2 = { id: 2, name: 'Name Two', username: 'one_2', avatar_url: '
 export const user3 = {
   id: 'user-defined-token',
   name: 'email@example.com',
-  username: 'one_2',
   avatar_url: '',
 };
 export const user4 = {
-  id: 'user-defined-token',
+  id: 'user-defined-token2',
   name: 'email4@example.com',
-  username: 'one_4',
+  avatar_url: '',
+};
+export const user5 = {
+  id: '3',
+  username: 'root',
+  name: 'root',
   avatar_url: '',
 };
 
diff --git a/spec/frontend/invite_members/utils/member_utils_spec.js b/spec/frontend/invite_members/utils/member_utils_spec.js
new file mode 100644
index 00000000000..eb76c9845d4
--- /dev/null
+++ b/spec/frontend/invite_members/utils/member_utils_spec.js
@@ -0,0 +1,12 @@
+import { memberName } from '~/invite_members/utils/member_utils';
+
+describe('Member Name', () => {
+  it.each([
+    [{ username: '_username_', name: '_name_' }, '_username_'],
+    [{ username: '_username_' }, '_username_'],
+    [{ name: '_name_' }, '_name_'],
+    [{}, undefined],
+  ])(`returns name from supplied member token: %j`, (member, result) => {
+    expect(memberName(member)).toBe(result);
+  });
+});
diff --git a/spec/frontend/invite_members/utils/response_message_parser_spec.js b/spec/frontend/invite_members/utils/response_message_parser_spec.js
index 8b2064df374..92f38c54c99 100644
--- a/spec/frontend/invite_members/utils/response_message_parser_spec.js
+++ b/spec/frontend/invite_members/utils/response_message_parser_spec.js
@@ -1,5 +1,5 @@
 import {
-  responseMessageFromSuccess,
+  responseFromSuccess,
   responseMessageFromError,
 } from '~/invite_members/utils/response_message_parser';
 import { invitationsApiResponse } from '../mock_data/api_responses';
@@ -11,12 +11,12 @@ describe('Response message parser', () => {
     const exampleKeyedMsg = { 'email@example.com': expectedMessage };
 
     it.each([
-      [{ data: { message: expectedMessage } }],
-      [{ data: { error: expectedMessage } }],
-      [{ data: { message: [expectedMessage] } }],
-      [{ data: { message: exampleKeyedMsg } }],
-    ])(`returns "${expectedMessage}" from success response: %j`, (successResponse) => {
-      expect(responseMessageFromSuccess(successResponse)).toBe(expectedMessage);
+      [{ data: { message: expectedMessage } }, { error: true, message: expectedMessage }],
+      [{ data: { error: expectedMessage } }, { error: true, message: expectedMessage }],
+      [{ data: { message: [expectedMessage] } }, { error: true, message: expectedMessage }],
+      [{ data: { message: exampleKeyedMsg } }, { error: true, message: { ...exampleKeyedMsg } }],
+    ])(`returns "${expectedMessage}" from success response: %j`, (successResponse, result) => {
+      expect(responseFromSuccess(successResponse)).toStrictEqual(result);
     });
   });
 
@@ -30,15 +30,18 @@ describe('Response message parser', () => {
     });
   });
 
-  describe('displaying only the first error when a response has messages for multiple users', () => {
-    const expected =
-      "The member's email address is not allowed for this project. Go to the Admin area > Sign-up restrictions, and check Allowed domains for sign-ups.";
-
+  describe('displaying all errors when a response has messages for multiple users', () => {
     it.each([
-      [{ data: invitationsApiResponse.MULTIPLE_RESTRICTED }],
-      [{ data: invitationsApiResponse.EMAIL_RESTRICTED }],
-    ])(`returns "${expectedMessage}" from success response: %j`, (restrictedResponse) => {
-      expect(responseMessageFromSuccess(restrictedResponse)).toBe(expected);
+      [
+        { data: invitationsApiResponse.MULTIPLE_RESTRICTED },
+        { error: true, message: { ...invitationsApiResponse.MULTIPLE_RESTRICTED.message } },
+      ],
+      [
+        { data: invitationsApiResponse.EMAIL_RESTRICTED },
+        { error: true, message: { ...invitationsApiResponse.EMAIL_RESTRICTED.message } },
+      ],
+    ])(`returns "${expectedMessage}" from success response: %j`, (restrictedResponse, result) => {
+      expect(responseFromSuccess(restrictedResponse)).toStrictEqual(result);
     });
   });
 });
diff --git a/spec/frontend/issuable/issuable_form_spec.js b/spec/frontend/issuable/issuable_form_spec.js
index a1583076b41..d844f3394d5 100644
--- a/spec/frontend/issuable/issuable_form_spec.js
+++ b/spec/frontend/issuable/issuable_form_spec.js
@@ -47,6 +47,25 @@ describe('IssuableForm', () => {
     });
   });
 
+  describe('resetAutosave', () => {
+    it('resets autosave on elements with the .js-reset-autosave class', () => {
+      setHTMLFixture(`
+        <form>
+          <input name="[title]" />
+          <textarea name="[description]"></textarea>
+          <a class="js-reset-autosave">Cancel</a>
+        </form>
+      `);
+      const $form = $('form');
+      const resetAutosave = jest.spyOn(IssuableForm.prototype, 'resetAutosave');
+      createIssuable($form);
+
+      $form.find('.js-reset-autosave').trigger('click');
+
+      expect(resetAutosave).toHaveBeenCalled();
+    });
+  });
+
   describe('removeWip', () => {
     it.each`
       prefix
diff --git a/spec/frontend/issues/list/components/issues_list_app_spec.js b/spec/frontend/issues/list/components/issues_list_app_spec.js
index 3f2c3c3ec5f..3d3dbfa6853 100644
--- a/spec/frontend/issues/list/components/issues_list_app_spec.js
+++ b/spec/frontend/issues/list/components/issues_list_app_spec.js
@@ -29,6 +29,7 @@ import IssuableList from '~/vue_shared/issuable/list/components/issuable_list_ro
 import { IssuableListTabs, IssuableStates } from '~/vue_shared/issuable/list/constants';
 import IssuesListApp from '~/issues/list/components/issues_list_app.vue';
 import NewIssueDropdown from '~/issues/list/components/new_issue_dropdown.vue';
+
 import {
   CREATED_DESC,
   RELATIVE_POSITION,
@@ -98,6 +99,7 @@ describe('CE IssuesListApp component', () => {
   };
 
   let defaultQueryResponse = getIssuesQueryResponse;
+  let router;
   if (IS_EE) {
     defaultQueryResponse = cloneDeep(getIssuesQueryResponse);
     defaultQueryResponse.data.project.issues.nodes[0].blockingCount = 1;
@@ -133,9 +135,11 @@ describe('CE IssuesListApp component', () => {
       [setSortPreferenceMutation, sortPreferenceMutationResponse],
     ];
 
+    router = new VueRouter({ mode: 'history' });
+
     return mountFn(IssuesListApp, {
       apolloProvider: createMockApollo(requestHandlers),
-      router: new VueRouter({ mode: 'history' }),
+      router,
       provide: {
         ...defaultProvide,
         ...provide,
@@ -736,7 +740,7 @@ describe('CE IssuesListApp component', () => {
     describe('when "click-tab" event is emitted by IssuableList', () => {
       beforeEach(() => {
         wrapper = mountComponent();
-        jest.spyOn(wrapper.vm.$router, 'push');
+        router.push = jest.fn();
 
         findIssuableList().vm.$emit('click-tab', IssuableStates.Closed);
       });
@@ -746,16 +750,26 @@ describe('CE IssuesListApp component', () => {
       });
 
       it('updates url to the new tab', () => {
-        expect(wrapper.vm.$router.push).toHaveBeenCalledWith({
+        expect(router.push).toHaveBeenCalledWith({
           query: expect.objectContaining({ state: IssuableStates.Closed }),
         });
       });
     });
 
     describe.each`
-      event              | params
-      ${'next-page'}     | ${{ page_after: 'endCursor', page_before: undefined, first_page_size: 20, last_page_size: undefined }}
-      ${'previous-page'} | ${{ page_after: undefined, page_before: 'startCursor', first_page_size: undefined, last_page_size: 20 }}
+      event | params
+      ${'next-page'} | ${{
+  page_after: 'endCursor',
+  page_before: undefined,
+  first_page_size: 20,
+  last_page_size: undefined,
+}}
+      ${'previous-page'} | ${{
+  page_after: undefined,
+  page_before: 'startCursor',
+  first_page_size: undefined,
+  last_page_size: 20,
+}}
     `('when "$event" event is emitted by IssuableList', ({ event, params }) => {
       beforeEach(() => {
         wrapper = mountComponent({
@@ -766,7 +780,7 @@ describe('CE IssuesListApp component', () => {
             },
           },
         });
-        jest.spyOn(wrapper.vm.$router, 'push');
+        router.push = jest.fn();
 
         findIssuableList().vm.$emit(event);
       });
@@ -776,7 +790,7 @@ describe('CE IssuesListApp component', () => {
       });
 
       it(`updates url`, () => {
-        expect(wrapper.vm.$router.push).toHaveBeenCalledWith({
+        expect(router.push).toHaveBeenCalledWith({
           query: expect.objectContaining(params),
         });
       });
@@ -888,13 +902,13 @@ describe('CE IssuesListApp component', () => {
         'updates to the new sort when payload is `%s`',
         async (sortKey) => {
           wrapper = mountComponent();
-          jest.spyOn(wrapper.vm.$router, 'push');
+          router.push = jest.fn();
 
           findIssuableList().vm.$emit('sort', sortKey);
           jest.runOnlyPendingTimers();
           await nextTick();
 
-          expect(wrapper.vm.$router.push).toHaveBeenCalledWith({
+          expect(router.push).toHaveBeenCalledWith({
             query: expect.objectContaining({ sort: urlSortParams[sortKey] }),
           });
         },
@@ -907,13 +921,13 @@ describe('CE IssuesListApp component', () => {
           wrapper = mountComponent({
             provide: { initialSort, isIssueRepositioningDisabled: true },
           });
-          jest.spyOn(wrapper.vm.$router, 'push');
+          router.push = jest.fn();
 
           findIssuableList().vm.$emit('sort', RELATIVE_POSITION_ASC);
         });
 
         it('does not update the sort to manual', () => {
-          expect(wrapper.vm.$router.push).not.toHaveBeenCalled();
+          expect(router.push).not.toHaveBeenCalled();
         });
 
         it('shows an alert to tell the user that manual reordering is disabled', () => {
@@ -978,12 +992,12 @@ describe('CE IssuesListApp component', () => {
     describe('when "filter" event is emitted by IssuableList', () => {
       it('updates IssuableList with url params', async () => {
         wrapper = mountComponent();
-        jest.spyOn(wrapper.vm.$router, 'push');
+        router.push = jest.fn();
 
         findIssuableList().vm.$emit('filter', filteredTokens);
         await nextTick();
 
-        expect(wrapper.vm.$router.push).toHaveBeenCalledWith({
+        expect(router.push).toHaveBeenCalledWith({
           query: expect.objectContaining(urlParams),
         });
       });
@@ -993,13 +1007,13 @@ describe('CE IssuesListApp component', () => {
           wrapper = mountComponent({
             provide: { isAnonymousSearchDisabled: true, isSignedIn: false },
           });
-          jest.spyOn(wrapper.vm.$router, 'push');
+          router.push = jest.fn();
 
           findIssuableList().vm.$emit('filter', filteredTokens);
         });
 
         it('does not update url params', () => {
-          expect(wrapper.vm.$router.push).not.toHaveBeenCalled();
+          expect(router.push).not.toHaveBeenCalled();
         });
 
         it('shows an alert to tell the user they must be signed in to search', () => {
@@ -1030,4 +1044,19 @@ describe('CE IssuesListApp component', () => {
       expect(mockQuery).toHaveBeenCalledWith(expect.objectContaining({ hideUsers }));
     });
   });
+
+  describe('when "page-size-change" event is emitted by IssuableList', () => {
+    it('updates url params with new page size', async () => {
+      wrapper = mountComponent();
+      router.push = jest.fn();
+
+      findIssuableList().vm.$emit('page-size-change', 50);
+      await nextTick();
+
+      expect(router.push).toHaveBeenCalledTimes(1);
+      expect(router.push).toHaveBeenCalledWith({
+        query: expect.objectContaining({ first_page_size: 50 }),
+      });
+    });
+  });
 });
diff --git a/spec/frontend/issues/list/mock_data.js b/spec/frontend/issues/list/mock_data.js
index 42f2d08082e..4347c580a4d 100644
--- a/spec/frontend/issues/list/mock_data.js
+++ b/spec/frontend/issues/list/mock_data.js
@@ -32,6 +32,7 @@ export const getIssuesQueryResponse = {
             state: 'opened',
             title: 'Issue title',
             updatedAt: '2021-05-22T04:08:01Z',
+            closedAt: null,
             upvotes: 3,
             userDiscussionsCount: 4,
             webPath: 'project/-/issues/789',
diff --git a/spec/frontend/issues/list/utils_spec.js b/spec/frontend/issues/list/utils_spec.js
index e8ffba9bc80..3c6332d5728 100644
--- a/spec/frontend/issues/list/utils_spec.js
+++ b/spec/frontend/issues/list/utils_spec.js
@@ -10,12 +10,7 @@ import {
   urlParams,
   urlParamsWithSpecialValues,
 } from 'jest/issues/list/mock_data';
-import {
-  PAGE_SIZE,
-  PAGE_SIZE_MANUAL,
-  RELATIVE_POSITION_ASC,
-  urlSortParams,
-} from '~/issues/list/constants';
+import { PAGE_SIZE, urlSortParams } from '~/issues/list/constants';
 import {
   convertToApiParams,
   convertToSearchQuery,
@@ -29,52 +24,30 @@ import {
 import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants';
 
 describe('getInitialPageParams', () => {
-  it.each(Object.keys(urlSortParams))(
-    'returns the correct page params for sort key %s',
-    (sortKey) => {
-      const firstPageSize = sortKey === RELATIVE_POSITION_ASC ? PAGE_SIZE_MANUAL : PAGE_SIZE;
+  it('returns page params with a default page size when no arguments are given', () => {
+    expect(getInitialPageParams()).toEqual({ firstPageSize: PAGE_SIZE });
+  });
 
-      expect(getInitialPageParams(sortKey)).toEqual({ firstPageSize });
-    },
-  );
+  it('returns page params with the given page size', () => {
+    const pageSize = 100;
+    expect(getInitialPageParams(pageSize)).toEqual({ firstPageSize: pageSize });
+  });
 
-  it.each(Object.keys(urlSortParams))(
-    'returns the correct page params for sort key %s with afterCursor',
-    (sortKey) => {
-      const firstPageSize = sortKey === RELATIVE_POSITION_ASC ? PAGE_SIZE_MANUAL : PAGE_SIZE;
-      const lastPageSize = undefined;
-      const afterCursor = 'randomCursorString';
-      const beforeCursor = undefined;
-      const pageParams = getInitialPageParams(
-        sortKey,
-        firstPageSize,
-        lastPageSize,
-        afterCursor,
-        beforeCursor,
-      );
-
-      expect(pageParams).toEqual({ firstPageSize, afterCursor });
-    },
-  );
+  it('does not return firstPageSize when lastPageSize is provided', () => {
+    const firstPageSize = 100;
+    const lastPageSize = 50;
+    const afterCursor = undefined;
+    const beforeCursor = 'randomCursorString';
+    const pageParams = getInitialPageParams(
+      100,
+      firstPageSize,
+      lastPageSize,
+      afterCursor,
+      beforeCursor,
+    );
 
-  it.each(Object.keys(urlSortParams))(
-    'returns the correct page params for sort key %s with beforeCursor',
-    (sortKey) => {
-      const firstPageSize = undefined;
-      const lastPageSize = PAGE_SIZE;
-      const afterCursor = undefined;
-      const beforeCursor = 'anotherRandomCursorString';
-      const pageParams = getInitialPageParams(
-        sortKey,
-        firstPageSize,
-        lastPageSize,
-        afterCursor,
-        beforeCursor,
-      );
-
-      expect(pageParams).toEqual({ lastPageSize, beforeCursor });
-    },
-  );
+    expect(pageParams).toEqual({ lastPageSize, beforeCursor });
+  });
 });
 
 describe('getSortKey', () => {
@@ -97,10 +70,10 @@ describe('isSortKey', () => {
 describe('getSortOptions', () => {
   describe.each`
     hasIssueWeightsFeature | hasBlockedIssuesFeature | length | containsWeight | containsBlocking
-    ${false}               | ${false}                | ${9}   | ${false}       | ${false}
-    ${true}                | ${false}                | ${10}  | ${true}        | ${false}
-    ${false}               | ${true}                 | ${10}  | ${false}       | ${true}
-    ${true}                | ${true}                 | ${11}  | ${true}        | ${true}
+    ${false}               | ${false}                | ${10}  | ${false}       | ${false}
+    ${true}                | ${false}                | ${11}  | ${true}        | ${false}
+    ${false}               | ${true}                 | ${11}  | ${false}       | ${true}
+    ${true}                | ${true}                 | ${12}  | ${true}        | ${true}
   `(
     'when hasIssueWeightsFeature=$hasIssueWeightsFeature and hasBlockedIssuesFeature=$hasBlockedIssuesFeature',
     ({
diff --git a/spec/frontend/issues/new/components/__snapshots__/type_popover_spec.js.snap b/spec/frontend/issues/new/components/__snapshots__/type_popover_spec.js.snap
index 881dcda126f..1a199ed2ee9 100644
--- a/spec/frontend/issues/new/components/__snapshots__/type_popover_spec.js.snap
+++ b/spec/frontend/issues/new/components/__snapshots__/type_popover_spec.js.snap
@@ -2,10 +2,11 @@
 
 exports[`Issue type info popover renders 1`] = `
 <span
+  class="gl-ml-2"
   id="popovercontainer"
 >
   <gl-icon-stub
-    class="gl-ml-5 gl-text-gray-500"
+    class="gl-text-blue-600"
     id="issue-type-info"
     name="question-o"
     size="16"
diff --git a/spec/frontend/issues/show/components/description_spec.js b/spec/frontend/issues/show/components/description_spec.js
index 2cc27309e59..8ee57f97754 100644
--- a/spec/frontend/issues/show/components/description_spec.js
+++ b/spec/frontend/issues/show/components/description_spec.js
@@ -15,10 +15,15 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import Description from '~/issues/show/components/description.vue';
 import { updateHistory } from '~/lib/utils/url_utility';
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
+import workItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
+import createWorkItemFromTaskMutation from '~/work_items/graphql/create_work_item_from_task.mutation.graphql';
 import TaskList from '~/task_list';
 import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
 import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
-import CreateWorkItem from '~/work_items/pages/create_work_item.vue';
+import {
+  projectWorkItemTypesQueryResponse,
+  createWorkItemFromTaskMutationResponse,
+} from 'jest/work_items/mock_data';
 import {
   descriptionProps as initialProps,
   descriptionHtmlWithCheckboxes,
@@ -46,6 +51,10 @@ const workItemQueryResponse = {
 };
 
 const queryHandler = jest.fn().mockResolvedValue(workItemQueryResponse);
+const workItemTypesQueryHandler = jest.fn().mockResolvedValue(projectWorkItemTypesQueryResponse);
+const createWorkItemFromTaskSuccessHandler = jest
+  .fn()
+  .mockResolvedValue(createWorkItemFromTaskMutationResponse);
 
 describe('Description component', () => {
   let wrapper;
@@ -60,18 +69,24 @@ describe('Description component', () => {
 
   const findTooltips = () => wrapper.findAllComponents(GlTooltip);
   const findModal = () => wrapper.findComponent(GlModal);
-  const findCreateWorkItem = () => wrapper.findComponent(CreateWorkItem);
   const findWorkItemDetailModal = () => wrapper.findComponent(WorkItemDetailModal);
 
-  function createComponent({ props = {}, provide = {} } = {}) {
+  function createComponent({ props = {}, provide } = {}) {
     wrapper = shallowMountExtended(Description, {
       propsData: {
         issueId: 1,
         ...initialProps,
         ...props,
       },
-      provide,
-      apolloProvider: createMockApollo([[workItemQuery, queryHandler]]),
+      provide: {
+        fullPath: 'gitlab-org/gitlab-test',
+        ...provide,
+      },
+      apolloProvider: createMockApollo([
+        [workItemQuery, queryHandler],
+        [workItemTypesQuery, workItemTypesQueryHandler],
+        [createWorkItemFromTaskMutation, createWorkItemFromTaskSuccessHandler],
+      ]),
       mocks: {
         $toast,
       },
@@ -299,24 +314,16 @@ describe('Description component', () => {
       });
 
       it('does not show a modal by default', () => {
-        expect(findModal().props('visible')).toBe(false);
+        expect(findModal().exists()).toBe(false);
       });
 
-      it('opens a modal when a button is clicked and displays correct title', async () => {
-        await findConvertToTaskButton().trigger('click');
-        expect(findCreateWorkItem().props('initialTitle').trim()).toBe('todo 1');
-      });
+      it('emits `updateDescription` after creating new work item', async () => {
+        const newDescription = `<p>New description</p>`;
 
-      it('closes the modal on `closeCreateTaskModal` event', async () => {
         await findConvertToTaskButton().trigger('click');
-        findCreateWorkItem().vm.$emit('closeModal');
-        expect(hideModal).toHaveBeenCalled();
-      });
 
-      it('emits `updateDescription` on `onCreate` event', () => {
-        const newDescription = `<p>New description</p>`;
-        findCreateWorkItem().vm.$emit('onCreate', newDescription);
-        expect(hideModal).toHaveBeenCalled();
+        await waitForPromises();
+
         expect(wrapper.emitted('updateDescription')).toEqual([[newDescription]]);
       });
 
@@ -325,7 +332,7 @@ describe('Description component', () => {
         findWorkItemDetailModal().vm.$emit('workItemDeleted', newDesc);
 
         expect(wrapper.emitted('updateDescription')).toEqual([[newDesc]]);
-        expect($toast.show).toHaveBeenCalledWith('Work item deleted');
+        expect($toast.show).toHaveBeenCalledWith('Task deleted');
       });
     });
 
diff --git a/spec/frontend/issues/show/components/edited_spec.js b/spec/frontend/issues/show/components/edited_spec.js
index 8a8fe23230a..8a240c38b5f 100644
--- a/spec/frontend/issues/show/components/edited_spec.js
+++ b/spec/frontend/issues/show/components/edited_spec.js
@@ -1,49 +1,50 @@
-import Vue from 'vue';
-import edited from '~/issues/show/components/edited.vue';
-
-function formatText(text) {
-  return text.trim().replace(/\s\s+/g, ' ');
-}
-
-describe('edited', () => {
-  const EditedComponent = Vue.extend(edited);
-
-  it('should render an edited at+by string', () => {
-    const editedComponent = new EditedComponent({
-      propsData: {
-        updatedAt: '2017-05-15T12:31:04.428Z',
-        updatedByName: 'Some User',
-        updatedByPath: '/some_user',
-      },
-    }).$mount();
-
-    expect(formatText(editedComponent.$el.innerText)).toMatch(/Edited[\s\S]+?by Some User/);
-    expect(editedComponent.$el.querySelector('.author-link').href).toMatch(/\/some_user$/);
-    expect(editedComponent.$el.querySelector('time')).toBeTruthy();
+import { shallowMount } from '@vue/test-utils';
+import Edited from '~/issues/show/components/edited.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+describe('Edited component', () => {
+  let wrapper;
+
+  const findAuthorLink = () => wrapper.find('a');
+  const findTimeAgoTooltip = () => wrapper.findComponent(TimeAgoTooltip);
+  const formatText = (text) => text.trim().replace(/\s\s+/g, ' ');
+
+  const mountComponent = (propsData) => shallowMount(Edited, { propsData });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders an edited at+by string', () => {
+    wrapper = mountComponent({
+      updatedAt: '2017-05-15T12:31:04.428Z',
+      updatedByName: 'Some User',
+      updatedByPath: '/some_user',
+    });
+
+    expect(formatText(wrapper.text())).toBe('Edited by Some User');
+    expect(findAuthorLink().attributes('href')).toBe('/some_user');
+    expect(findTimeAgoTooltip().exists()).toBe(true);
   });
 
   it('if no updatedAt is provided, no time element will be rendered', () => {
-    const editedComponent = new EditedComponent({
-      propsData: {
-        updatedByName: 'Some User',
-        updatedByPath: '/some_user',
-      },
-    }).$mount();
-
-    expect(formatText(editedComponent.$el.innerText)).toMatch(/Edited by Some User/);
-    expect(editedComponent.$el.querySelector('.author-link').href).toMatch(/\/some_user$/);
-    expect(editedComponent.$el.querySelector('time')).toBeFalsy();
+    wrapper = mountComponent({
+      updatedByName: 'Some User',
+      updatedByPath: '/some_user',
+    });
+
+    expect(formatText(wrapper.text())).toBe('Edited by Some User');
+    expect(findAuthorLink().attributes('href')).toBe('/some_user');
+    expect(findTimeAgoTooltip().exists()).toBe(false);
   });
 
   it('if no updatedByName and updatedByPath is provided, no user element will be rendered', () => {
-    const editedComponent = new EditedComponent({
-      propsData: {
-        updatedAt: '2017-05-15T12:31:04.428Z',
-      },
-    }).$mount();
-
-    expect(formatText(editedComponent.$el.innerText)).not.toMatch(/by Some User/);
-    expect(editedComponent.$el.querySelector('.author-link')).toBeFalsy();
-    expect(editedComponent.$el.querySelector('time')).toBeTruthy();
+    wrapper = mountComponent({
+      updatedAt: '2017-05-15T12:31:04.428Z',
+    });
+
+    expect(formatText(wrapper.text())).toBe('Edited');
+    expect(findAuthorLink().exists()).toBe(false);
+    expect(findTimeAgoTooltip().exists()).toBe(true);
   });
 });
diff --git a/spec/frontend/issues/show/components/incidents/highlight_bar_spec.js b/spec/frontend/issues/show/components/incidents/highlight_bar_spec.js
index a4910d63bb5..155ae703e48 100644
--- a/spec/frontend/issues/show/components/incidents/highlight_bar_spec.js
+++ b/spec/frontend/issues/show/components/incidents/highlight_bar_spec.js
@@ -74,7 +74,7 @@ describe('Highlight Bar', () => {
     });
 
     it('renders a number of alert events', () => {
-      expect(wrapper.text()).toContain(alert.eventCount);
+      expect(wrapper.text()).toContain(alert.eventCount.toString());
     });
   });
 
diff --git a/spec/frontend/issues/show/components/incidents/mock_data.js b/spec/frontend/issues/show/components/incidents/mock_data.js
index b5346a6089a..afc6099caf4 100644
--- a/spec/frontend/issues/show/components/incidents/mock_data.js
+++ b/spec/frontend/issues/show/components/incidents/mock_data.js
@@ -70,3 +70,36 @@ export const timelineEventsQueryEmptyResponse = {
     },
   },
 };
+
+export const timelineEventsCreateEventResponse = {
+  timelineEvent: {
+    ...mockEvents[0],
+  },
+  errors: [],
+};
+
+export const timelineEventsCreateEventError = {
+  data: {
+    timelineEventCreate: {
+      timelineEvent: {
+        ...mockEvents[0],
+      },
+      errors: ['Create error'],
+    },
+  },
+};
+
+const timelineEventDeleteData = (errors = []) => {
+  return {
+    data: {
+      timelineEventDestroy: {
+        timelineEvent: { ...mockEvents[0] },
+        errors,
+      },
+    },
+  };
+};
+
+export const timelineEventsDeleteEventResponse = timelineEventDeleteData();
+
+export const timelineEventsDeleteEventError = timelineEventDeleteData(['Item does not exist']);
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
new file mode 100644
index 00000000000..620cdfc53b0
--- /dev/null
+++ b/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js
@@ -0,0 +1,181 @@
+import VueApollo from 'vue-apollo';
+import Vue, { nextTick } from 'vue';
+import { GlDatepicker } from '@gitlab/ui';
+import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import IncidentTimelineEventForm from '~/issues/show/components/incidents/timeline_events_form.vue';
+import createTimelineEventMutation from '~/issues/show/components/incidents/graphql/queries/create_timeline_event.mutation.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { createAlert } from '~/flash';
+import { useFakeDate } from 'helpers/fake_date';
+import { timelineEventsCreateEventResponse, timelineEventsCreateEventError } from './mock_data';
+
+Vue.use(VueApollo);
+
+jest.mock('~/flash');
+
+const addEventResponse = jest.fn().mockResolvedValue(timelineEventsCreateEventResponse);
+
+function createMockApolloProvider(response = addEventResponse) {
+  const requestHandlers = [[createTimelineEventMutation, response]];
+  return createMockApollo(requestHandlers);
+}
+
+describe('Timeline events form', () => {
+  // July 8 2020
+  useFakeDate(2020, 6, 8);
+  let wrapper;
+
+  const mountComponent = ({ mockApollo, mountMethod = shallowMountExtended, stubs }) => {
+    wrapper = mountMethod(IncidentTimelineEventForm, {
+      propsData: {
+        hasTimelineEvents: true,
+      },
+      provide: {
+        fullPath: 'group/project',
+        issuableId: '1',
+      },
+      apolloProvider: mockApollo,
+      stubs,
+    });
+  };
+
+  afterEach(() => {
+    addEventResponse.mockReset();
+    createAlert.mockReset();
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  const findSubmitButton = () => wrapper.findByText('Save');
+  const findSubmitAndAddButton = () => wrapper.findByText('Save and add another event');
+  const findCancelButton = () => wrapper.findByText('Cancel');
+  const findDatePicker = () => wrapper.findComponent(GlDatepicker);
+  const findDatePickerInput = () => wrapper.findByTestId('input-datepicker');
+  const findHourInput = () => wrapper.findByTestId('input-hours');
+  const findMinuteInput = () => wrapper.findByTestId('input-minutes');
+  const setDatetime = () => {
+    findDatePicker().vm.$emit('input', new Date('2021-08-12'));
+    findHourInput().vm.$emit('input', 5);
+    findMinuteInput().vm.$emit('input', 45);
+  };
+
+  const submitForm = async () => {
+    findSubmitButton().trigger('click');
+    await waitForPromises();
+  };
+  const submitFormAndAddAnother = async () => {
+    findSubmitAndAddButton().trigger('click');
+    await waitForPromises();
+  };
+  const cancelForm = async () => {
+    findCancelButton().trigger('click');
+    await waitForPromises();
+  };
+
+  describe('form button behaviour', () => {
+    const closeFormEvent = { 'hide-incident-timeline-event-form': [[]] };
+    beforeEach(() => {
+      mountComponent({ mockApollo: createMockApolloProvider(), mountMethod: mountExtended });
+    });
+
+    it('should close the form on submit', async () => {
+      await submitForm();
+      expect(wrapper.emitted()).toEqual(closeFormEvent);
+    });
+
+    it('should not close the form on "submit and add another"', async () => {
+      await submitFormAndAddAnother();
+      expect(wrapper.emitted()).toEqual({});
+    });
+
+    it('should close the form on cancel', async () => {
+      await cancelForm();
+      expect(wrapper.emitted()).toEqual(closeFormEvent);
+    });
+
+    it('should clear the form', async () => {
+      setDatetime();
+      await nextTick();
+
+      expect(findDatePickerInput().element.value).toBe('2021-08-12');
+      expect(findHourInput().element.value).toBe('5');
+      expect(findMinuteInput().element.value).toBe('45');
+
+      wrapper.vm.clear();
+      await nextTick();
+
+      expect(findDatePickerInput().element.value).toBe('2020-07-08');
+      expect(findHourInput().element.value).toBe('0');
+      expect(findMinuteInput().element.value).toBe('0');
+    });
+  });
+
+  describe('addTimelineEventQuery', () => {
+    const expectedData = {
+      input: {
+        incidentId: 'gid://gitlab/Issue/1',
+        note: '',
+        occurredAt: '2020-07-08T00:00:00.000Z',
+      },
+    };
+
+    let mockApollo;
+
+    beforeEach(() => {
+      mockApollo = createMockApolloProvider();
+      mountComponent({ mockApollo, mountMethod: mountExtended });
+    });
+
+    it('should call the mutation with the right variables', async () => {
+      await submitForm();
+
+      expect(addEventResponse).toHaveBeenCalledWith(expectedData);
+    });
+
+    it('should call the mutation with user selected variables', async () => {
+      const expectedUserSelectedData = {
+        input: {
+          ...expectedData.input,
+          occurredAt: '2021-08-12T05:45:00.000Z',
+        },
+      };
+
+      setDatetime();
+
+      await nextTick();
+      await submitForm();
+
+      expect(addEventResponse).toHaveBeenCalledWith(expectedUserSelectedData);
+    });
+  });
+
+  describe('error handling', () => {
+    it('should show an error when submission returns an error', async () => {
+      const expectedAlertArgs = {
+        message: 'Error creating incident timeline event: Create error',
+      };
+      addEventResponse.mockResolvedValueOnce(timelineEventsCreateEventError);
+      mountComponent({ mockApollo: createMockApolloProvider(), mountMethod: mountExtended });
+
+      await submitForm();
+
+      expect(createAlert).toHaveBeenCalledWith(expectedAlertArgs);
+    });
+
+    it('should show an error when submission fails', async () => {
+      const expectedAlertArgs = {
+        captureError: true,
+        error: new Error(),
+        message: 'Something went wrong while creating the incident timeline event.',
+      };
+      addEventResponse.mockRejectedValueOnce();
+      mountComponent({ mockApollo: createMockApolloProvider(), mountMethod: mountExtended });
+
+      await submitForm();
+
+      expect(createAlert).toHaveBeenCalledWith(expectedAlertArgs);
+    });
+  });
+});
diff --git a/spec/frontend/issues/show/components/incidents/timeline_events_list_item_spec.js b/spec/frontend/issues/show/components/incidents/timeline_events_list_item_spec.js
index 7e51219ffa7..e686f2eb4ec 100644
--- a/spec/frontend/issues/show/components/incidents/timeline_events_list_item_spec.js
+++ b/spec/frontend/issues/show/components/incidents/timeline_events_list_item_spec.js
@@ -1,6 +1,6 @@
 import timezoneMock from 'timezone-mock';
-import merge from 'lodash/merge';
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlDropdown } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import IncidentTimelineEventListItem from '~/issues/show/components/incidents/timeline_events_list_item.vue';
 import { mockEvents } from './mock_data';
@@ -8,25 +8,28 @@ import { mockEvents } from './mock_data';
 describe('IncidentTimelineEventList', () => {
   let wrapper;
 
-  const mountComponent = (propsData) => {
+  const mountComponent = ({ propsData, provide } = {}) => {
     const { action, noteHtml, occurredAt } = mockEvents[0];
-    wrapper = mountExtended(
-      IncidentTimelineEventListItem,
-      merge({
-        propsData: {
-          action,
-          noteHtml,
-          occurredAt,
-          isLastItem: false,
-          ...propsData,
-        },
-      }),
-    );
+    wrapper = mountExtended(IncidentTimelineEventListItem, {
+      propsData: {
+        action,
+        noteHtml,
+        occurredAt,
+        isLastItem: false,
+        ...propsData,
+      },
+      provide: {
+        canUpdate: false,
+        ...provide,
+      },
+    });
   };
 
   const findCommentIcon = () => wrapper.findComponent(GlIcon);
   const findTextContainer = () => wrapper.findByTestId('event-text-container');
   const findEventTime = () => wrapper.findByTestId('event-time');
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDeleteButton = () => wrapper.findByText('Delete');
 
   describe('template', () => {
     it('shows comment icon', () => {
@@ -55,7 +58,7 @@ describe('IncidentTimelineEventList', () => {
       });
 
       it('does not show a bottom border when the last item', () => {
-        mountComponent({ isLastItem: true });
+        mountComponent({ propsData: { isLastItem: true } });
 
         expect(wrapper.classes()).not.toContain('gl-border-1');
       });
@@ -83,5 +86,31 @@ describe('IncidentTimelineEventList', () => {
         });
       });
     });
+
+    describe('action dropdown', () => {
+      it('does not show the action dropdown by default', () => {
+        mountComponent();
+
+        expect(findDropdown().exists()).toBe(false);
+        expect(findDeleteButton().exists()).toBe(false);
+      });
+
+      it('shows dropdown and delete item when user has update permission', () => {
+        mountComponent({ provide: { canUpdate: true } });
+
+        expect(findDropdown().exists()).toBe(true);
+        expect(findDeleteButton().exists()).toBe(true);
+      });
+
+      it('triggers a delete when the delete button is clicked', async () => {
+        mountComponent({ provide: { canUpdate: true } });
+
+        findDeleteButton().trigger('click');
+
+        await nextTick();
+
+        expect(wrapper.emitted().delete).toBeTruthy();
+      });
+    });
   });
 });
diff --git a/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js b/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js
index 6610ea0b832..ae07237cf7d 100644
--- a/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js
+++ b/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js
@@ -1,41 +1,81 @@
 import timezoneMock from 'timezone-mock';
-import merge from 'lodash/merge';
-import { shallowMountExtended, extendedWrapper } from 'helpers/vue_test_utils_helper';
+import VueApollo from 'vue-apollo';
+import Vue from 'vue';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import IncidentTimelineEventList from '~/issues/show/components/incidents/timeline_events_list.vue';
-import { mockEvents } from './mock_data';
+import IncidentTimelineEventListItem from '~/issues/show/components/incidents/timeline_events_list_item.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import deleteTimelineEventMutation from '~/issues/show/components/incidents/graphql/queries/delete_timeline_event.mutation.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { createAlert } from '~/flash';
+import {
+  mockEvents,
+  timelineEventsDeleteEventResponse,
+  timelineEventsDeleteEventError,
+} from './mock_data';
+
+Vue.use(VueApollo);
+
+jest.mock('~/flash');
+jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
+
+const deleteEventResponse = jest.fn();
+
+function createMockApolloProvider() {
+  deleteEventResponse.mockResolvedValue(timelineEventsDeleteEventResponse);
+  const requestHandlers = [[deleteTimelineEventMutation, deleteEventResponse]];
+  return createMockApollo(requestHandlers);
+}
+
+const mockConfirmAction = ({ confirmed }) => {
+  confirmAction.mockResolvedValueOnce(confirmed);
+};
 
 describe('IncidentTimelineEventList', () => {
   let wrapper;
 
-  const mountComponent = () => {
-    wrapper = shallowMountExtended(
-      IncidentTimelineEventList,
-      merge({
-        provide: {
-          fullPath: 'group/project',
-          issuableId: '1',
-        },
-        propsData: {
-          timelineEvents: mockEvents,
-        },
-      }),
-    );
+  const mountComponent = (mockApollo) => {
+    const apollo = mockApollo ? { apolloProvider: mockApollo } : {};
+
+    wrapper = shallowMountExtended(IncidentTimelineEventList, {
+      provide: {
+        fullPath: 'group/project',
+        issuableId: '1',
+      },
+      propsData: {
+        timelineEvents: mockEvents,
+      },
+      ...apollo,
+    });
   };
 
-  const findGroups = () => wrapper.findAllByTestId('timeline-group');
-  const findItems = (base = wrapper) => base.findAllByTestId('timeline-event');
-  const findFirstGroup = () => extendedWrapper(findGroups().at(0));
-  const findSecondGroup = () => extendedWrapper(findGroups().at(1));
+  const findTimelineEventGroups = () => wrapper.findAllByTestId('timeline-group');
+  const findItems = (base = wrapper) => base.findAll(IncidentTimelineEventListItem);
+  const findFirstTimelineEventGroup = () => findTimelineEventGroups().at(0);
+  const findSecondTimelineEventGroup = () => findTimelineEventGroups().at(1);
   const findDates = () => wrapper.findAllByTestId('event-date');
+  const clickFirstDeleteButton = async () => {
+    findItems()
+      .at(0)
+      .vm.$emit('delete', { ...mockEvents[0] });
+    await waitForPromises();
+  };
+
+  afterEach(() => {
+    confirmAction.mockReset();
+    deleteEventResponse.mockReset();
+    wrapper.destroy();
+  });
 
   describe('template', () => {
     it('groups items correctly', () => {
       mountComponent();
 
-      expect(findGroups()).toHaveLength(2);
+      expect(findTimelineEventGroups()).toHaveLength(2);
 
-      expect(findItems(findFirstGroup())).toHaveLength(1);
-      expect(findItems(findSecondGroup())).toHaveLength(2);
+      expect(findItems(findFirstTimelineEventGroup())).toHaveLength(1);
+      expect(findItems(findSecondTimelineEventGroup())).toHaveLength(2);
     });
 
     it('sets the isLastItem prop correctly', () => {
@@ -83,5 +123,48 @@ describe('IncidentTimelineEventList', () => {
         });
       });
     });
+
+    describe('delete functionality', () => {
+      beforeEach(() => {
+        mockConfirmAction({ confirmed: true });
+      });
+
+      it('should delete when button is clicked', async () => {
+        const expectedVars = { input: { id: mockEvents[0].id } };
+
+        mountComponent(createMockApolloProvider());
+
+        await clickFirstDeleteButton();
+
+        expect(deleteEventResponse).toHaveBeenCalledWith(expectedVars);
+      });
+
+      it('should show an error when delete returns an error', async () => {
+        const expectedError = {
+          message: 'Error deleting incident timeline event: Item does not exist',
+        };
+
+        mountComponent(createMockApolloProvider());
+        deleteEventResponse.mockResolvedValue(timelineEventsDeleteEventError);
+
+        await clickFirstDeleteButton();
+
+        expect(createAlert).toHaveBeenCalledWith(expectedError);
+      });
+
+      it('should show an error when delete fails', async () => {
+        const expectedAlertArgs = {
+          captureError: true,
+          error: new Error(),
+          message: 'Something went wrong while deleting the incident timeline event.',
+        };
+        mountComponent(createMockApolloProvider());
+        deleteEventResponse.mockRejectedValueOnce();
+
+        await clickFirstDeleteButton();
+
+        expect(createAlert).toHaveBeenCalledWith(expectedAlertArgs);
+      });
+    });
   });
 });
diff --git a/spec/frontend/issues/show/components/incidents/timeline_events_tab_spec.js b/spec/frontend/issues/show/components/incidents/timeline_events_tab_spec.js
index cf81f4cdf66..2d87851a761 100644
--- a/spec/frontend/issues/show/components/incidents/timeline_events_tab_spec.js
+++ b/spec/frontend/issues/show/components/incidents/timeline_events_tab_spec.js
@@ -1,13 +1,15 @@
-import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
 import Vue from 'vue';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import TimelineEventsTab from '~/issues/show/components/incidents/timeline_events_tab.vue';
 import IncidentTimelineEventsList from '~/issues/show/components/incidents/timeline_events_list.vue';
+import IncidentTimelineEventForm from '~/issues/show/components/incidents/timeline_events_form.vue';
 import timelineEventsQuery from '~/issues/show/components/incidents/graphql/queries/get_timeline_events.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { createAlert } from '~/flash';
+import { timelineTabI18n } from '~/issues/show/components/incidents/constants';
 import { timelineEventsQueryListResponse, timelineEventsQueryEmptyResponse } from './mock_data';
 
 Vue.use(VueApollo);
@@ -28,14 +30,17 @@ describe('TimelineEventsTab', () => {
   let wrapper;
 
   const mountComponent = (options = {}) => {
-    const { mockApollo, mountMethod = shallowMountExtended } = options;
+    const { mockApollo, mountMethod = shallowMountExtended, stubs, provide } = options;
 
     wrapper = mountMethod(TimelineEventsTab, {
       provide: {
         fullPath: 'group/project',
         issuableId: '1',
+        canUpdate: true,
+        ...provide,
       },
       apolloProvider: mockApollo,
+      stubs,
     });
   };
 
@@ -48,6 +53,8 @@ describe('TimelineEventsTab', () => {
   const findLoadingSpinner = () => wrapper.findComponent(GlLoadingIcon);
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findTimelineEventsList = () => wrapper.findComponent(IncidentTimelineEventsList);
+  const findTimelineEventForm = () => wrapper.findComponent(IncidentTimelineEventForm);
+  const findAddEventButton = () => wrapper.findByText(timelineTabI18n.addEventButton);
 
   describe('Timeline events tab', () => {
     describe('empty state', () => {
@@ -82,24 +89,85 @@ describe('TimelineEventsTab', () => {
   describe('timelineEventsQuery', () => {
     let mockApollo;
 
-    beforeEach(() => {
+    const setup = () => {
       mockApollo = createMockApolloProvider();
       mountComponent({ mockApollo });
-    });
+    };
 
     it('should request data', () => {
+      setup();
+
       expect(listResponse).toHaveBeenCalled();
     });
 
     it('should show the loading state', () => {
+      setup();
+
       expect(findEmptyState().exists()).toBe(false);
       expect(findLoadingSpinner().exists()).toBe(true);
     });
 
     it('should render the list', async () => {
+      setup();
       await waitForPromises();
+
       expect(findEmptyState().exists()).toBe(false);
       expect(findTimelineEventsList().props('timelineEvents')).toHaveLength(3);
     });
   });
+
+  describe('add new event form', () => {
+    beforeEach(async () => {
+      mountComponent({
+        mockApollo: createMockApolloProvider(emptyResponse),
+        mountMethod: mountExtended,
+        stubs: {
+          'incident-timeline-events-list': true,
+          'gl-tab': true,
+        },
+      });
+      await waitForPromises();
+    });
+
+    it('should show a button when user can update', () => {
+      expect(findAddEventButton().exists()).toBe(true);
+    });
+
+    it('should not show a button when user cannot update', () => {
+      mountComponent({
+        mockApollo: createMockApolloProvider(emptyResponse),
+        provide: { canUpdate: false },
+      });
+
+      expect(findAddEventButton().exists()).toBe(false);
+    });
+
+    it('should not show a form by default', () => {
+      expect(findTimelineEventForm().isVisible()).toBe(false);
+    });
+
+    it('should show a form when button is clicked', async () => {
+      await findAddEventButton().trigger('click');
+
+      expect(findTimelineEventForm().isVisible()).toBe(true);
+    });
+
+    it('should clear the form when button is clicked', async () => {
+      const mockClear = jest.fn();
+      wrapper.vm.$refs.eventForm.clear = mockClear;
+
+      await findAddEventButton().trigger('click');
+
+      expect(mockClear).toHaveBeenCalled();
+    });
+
+    it('should hide the form when the hide event is emitted', async () => {
+      // open the form
+      await findAddEventButton().trigger('click');
+
+      await findTimelineEventForm().vm.$emit('hide-incident-timeline-event-form');
+
+      expect(findTimelineEventForm().isVisible()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/issues/show/components/incidents/utils_spec.js b/spec/frontend/issues/show/components/incidents/utils_spec.js
index e6f7082d280..0da0114c654 100644
--- a/spec/frontend/issues/show/components/incidents/utils_spec.js
+++ b/spec/frontend/issues/show/components/incidents/utils_spec.js
@@ -1,4 +1,9 @@
-import { displayAndLogError, getEventIcon } from '~/issues/show/components/incidents/utils';
+import timezoneMock from 'timezone-mock';
+import {
+  displayAndLogError,
+  getEventIcon,
+  getUtcShiftedDateNow,
+} from '~/issues/show/components/incidents/utils';
 import { createAlert } from '~/flash';
 
 jest.mock('~/flash');
@@ -19,13 +24,31 @@ describe('incident utils', () => {
 
   describe('get event icon', () => {
     it('should display a matching event icon name', () => {
-      const name = 'comment';
-
-      expect(getEventIcon(name)).toBe(name);
+      ['comment', 'issues', 'status'].forEach((name) => {
+        expect(getEventIcon(name)).toBe(name);
+      });
     });
 
     it('should return a default icon name', () => {
       expect(getEventIcon('non-existent-icon-name')).toBe('comment');
     });
   });
+
+  describe('getUtcShiftedDateNow', () => {
+    beforeEach(() => {
+      timezoneMock.register('US/Pacific');
+    });
+
+    afterEach(() => {
+      timezoneMock.unregister();
+    });
+
+    it('should shift the date by the timezone offset', () => {
+      const date = new Date();
+
+      const shiftedDate = getUtcShiftedDateNow();
+
+      expect(shiftedDate > date).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/jobs/bridge/app_spec.js b/spec/frontend/jobs/bridge/app_spec.js
deleted file mode 100644
index 210dcfa364b..00000000000
--- a/spec/frontend/jobs/bridge/app_spec.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import Vue, { nextTick } from 'vue';
-import { shallowMount } from '@vue/test-utils';
-
-import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
-import { GlLoadingIcon } from '@gitlab/ui';
-import VueApollo from 'vue-apollo';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import getPipelineQuery from '~/jobs/bridge/graphql/queries/pipeline.query.graphql';
-import waitForPromises from 'helpers/wait_for_promises';
-import BridgeApp from '~/jobs/bridge/app.vue';
-import BridgeEmptyState from '~/jobs/bridge/components/empty_state.vue';
-import BridgeSidebar from '~/jobs/bridge/components/sidebar.vue';
-import CiHeader from '~/vue_shared/components/header_ci_component.vue';
-import {
-  MOCK_BUILD_ID,
-  MOCK_PIPELINE_IID,
-  MOCK_PROJECT_FULL_PATH,
-  mockPipelineQueryResponse,
-} from './mock_data';
-
-describe('Bridge Show Page', () => {
-  let wrapper;
-  let mockApollo;
-  let mockPipelineQuery;
-
-  const createComponent = (options) => {
-    wrapper = shallowMount(BridgeApp, {
-      provide: {
-        buildId: MOCK_BUILD_ID,
-        projectFullPath: MOCK_PROJECT_FULL_PATH,
-        pipelineIid: MOCK_PIPELINE_IID,
-      },
-      mocks: {
-        $apollo: {
-          queries: {
-            pipeline: {
-              loading: true,
-            },
-          },
-        },
-      },
-      ...options,
-    });
-  };
-
-  const createComponentWithApollo = () => {
-    const handlers = [[getPipelineQuery, mockPipelineQuery]];
-    Vue.use(VueApollo);
-    mockApollo = createMockApollo(handlers);
-
-    createComponent({
-      apolloProvider: mockApollo,
-      mocks: {},
-    });
-  };
-
-  const findCiHeader = () => wrapper.findComponent(CiHeader);
-  const findEmptyState = () => wrapper.findComponent(BridgeEmptyState);
-  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findSidebar = () => wrapper.findComponent(BridgeSidebar);
-
-  beforeEach(() => {
-    mockPipelineQuery = jest.fn();
-  });
-
-  afterEach(() => {
-    mockPipelineQuery.mockReset();
-    wrapper.destroy();
-  });
-
-  describe('while pipeline query is loading', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('renders loading icon', () => {
-      expect(findLoadingIcon().exists()).toBe(true);
-    });
-  });
-
-  describe('after pipeline query is loaded', () => {
-    beforeEach(async () => {
-      mockPipelineQuery.mockResolvedValue(mockPipelineQueryResponse);
-      createComponentWithApollo();
-      await waitForPromises();
-    });
-
-    it('query is called with correct variables', async () => {
-      expect(mockPipelineQuery).toHaveBeenCalledTimes(1);
-      expect(mockPipelineQuery).toHaveBeenCalledWith({
-        fullPath: MOCK_PROJECT_FULL_PATH,
-        iid: MOCK_PIPELINE_IID,
-      });
-    });
-
-    it('renders CI header state', () => {
-      expect(findCiHeader().exists()).toBe(true);
-    });
-
-    it('renders empty state', () => {
-      expect(findEmptyState().exists()).toBe(true);
-    });
-
-    it('renders sidebar', () => {
-      expect(findSidebar().exists()).toBe(true);
-    });
-  });
-
-  describe('sidebar expansion', () => {
-    beforeEach(async () => {
-      mockPipelineQuery.mockResolvedValue(mockPipelineQueryResponse);
-      createComponentWithApollo();
-      await waitForPromises();
-    });
-
-    describe('on resize', () => {
-      it.each`
-        breakpoint | isSidebarExpanded
-        ${'xs'}    | ${false}
-        ${'sm'}    | ${false}
-        ${'md'}    | ${true}
-        ${'lg'}    | ${true}
-        ${'xl'}    | ${true}
-      `(
-        'sets isSidebarExpanded to `$isSidebarExpanded` when the breakpoint is "$breakpoint"',
-        async ({ breakpoint, isSidebarExpanded }) => {
-          jest.spyOn(GlBreakpointInstance, 'getBreakpointSize').mockReturnValue(breakpoint);
-
-          window.dispatchEvent(new Event('resize'));
-          await nextTick();
-
-          expect(findSidebar().exists()).toBe(isSidebarExpanded);
-        },
-      );
-    });
-
-    it('toggles expansion on button click', async () => {
-      expect(findSidebar().exists()).toBe(true);
-
-      wrapper.vm.toggleSidebar();
-      await nextTick();
-
-      expect(findSidebar().exists()).toBe(false);
-    });
-  });
-});
diff --git a/spec/frontend/jobs/bridge/components/empty_state_spec.js b/spec/frontend/jobs/bridge/components/empty_state_spec.js
deleted file mode 100644
index 38c55b296f0..00000000000
--- a/spec/frontend/jobs/bridge/components/empty_state_spec.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { GlButton } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import BridgeEmptyState from '~/jobs/bridge/components/empty_state.vue';
-import { MOCK_EMPTY_ILLUSTRATION_PATH, MOCK_PATH_TO_DOWNSTREAM } from '../mock_data';
-
-describe('Bridge Empty State', () => {
-  let wrapper;
-
-  const createComponent = ({ downstreamPipelinePath }) => {
-    wrapper = shallowMount(BridgeEmptyState, {
-      provide: {
-        emptyStateIllustrationPath: MOCK_EMPTY_ILLUSTRATION_PATH,
-      },
-      propsData: {
-        downstreamPipelinePath,
-      },
-    });
-  };
-
-  const findSvg = () => wrapper.find('img');
-  const findTitle = () => wrapper.find('h1');
-  const findLinkBtn = () => wrapper.findComponent(GlButton);
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('template', () => {
-    beforeEach(() => {
-      createComponent({ downstreamPipelinePath: MOCK_PATH_TO_DOWNSTREAM });
-    });
-
-    it('renders illustration', () => {
-      expect(findSvg().exists()).toBe(true);
-    });
-
-    it('renders title', () => {
-      expect(findTitle().exists()).toBe(true);
-      expect(findTitle().text()).toBe(wrapper.vm.$options.i18n.title);
-    });
-
-    it('renders CTA button', () => {
-      expect(findLinkBtn().exists()).toBe(true);
-      expect(findLinkBtn().text()).toBe(wrapper.vm.$options.i18n.linkBtnText);
-      expect(findLinkBtn().attributes('href')).toBe(MOCK_PATH_TO_DOWNSTREAM);
-    });
-  });
-
-  describe('without downstream pipeline', () => {
-    beforeEach(() => {
-      createComponent({ downstreamPipelinePath: undefined });
-    });
-
-    it('does not render CTA button', () => {
-      expect(findLinkBtn().exists()).toBe(false);
-    });
-  });
-});
diff --git a/spec/frontend/jobs/bridge/components/sidebar_spec.js b/spec/frontend/jobs/bridge/components/sidebar_spec.js
deleted file mode 100644
index 5006d4f08a6..00000000000
--- a/spec/frontend/jobs/bridge/components/sidebar_spec.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import { GlButton, GlDropdown } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import BridgeSidebar from '~/jobs/bridge/components/sidebar.vue';
-import CommitBlock from '~/jobs/components/commit_block.vue';
-import { mockCommit, mockJob } from '../mock_data';
-
-describe('Bridge Sidebar', () => {
-  let wrapper;
-
-  const MockHeaderEl = {
-    getBoundingClientRect() {
-      return {
-        bottom: '40',
-      };
-    },
-  };
-
-  const createComponent = ({ featureFlag } = {}) => {
-    wrapper = shallowMount(BridgeSidebar, {
-      provide: {
-        glFeatures: {
-          triggerJobRetryAction: featureFlag,
-        },
-      },
-      propsData: {
-        bridgeJob: mockJob,
-        commit: mockCommit,
-      },
-    });
-  };
-
-  const findJobTitle = () => wrapper.find('h4');
-  const findCommitBlock = () => wrapper.findComponent(CommitBlock);
-  const findRetryDropdown = () => wrapper.find(GlDropdown);
-  const findToggleBtn = () => wrapper.findComponent(GlButton);
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('template', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('renders job name', () => {
-      expect(findJobTitle().text()).toBe(mockJob.name);
-    });
-
-    it('renders commit information', () => {
-      expect(findCommitBlock().exists()).toBe(true);
-    });
-  });
-
-  describe('styles', () => {
-    beforeEach(async () => {
-      jest.spyOn(document, 'querySelector').mockReturnValue(MockHeaderEl);
-      createComponent();
-    });
-
-    it('calculates root styles correctly', () => {
-      expect(wrapper.attributes('style')).toBe('width: 290px; top: 40px;');
-    });
-  });
-
-  describe('sidebar expansion', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('emits toggle sidebar event on button click', async () => {
-      expect(wrapper.emitted('toggleSidebar')).toBe(undefined);
-
-      findToggleBtn().vm.$emit('click');
-
-      expect(wrapper.emitted('toggleSidebar')).toHaveLength(1);
-    });
-  });
-
-  describe('retry action', () => {
-    describe('when feature flag is ON', () => {
-      beforeEach(() => {
-        createComponent({ featureFlag: true });
-      });
-
-      it('renders retry dropdown', () => {
-        expect(findRetryDropdown().exists()).toBe(true);
-      });
-    });
-
-    describe('when feature flag is OFF', () => {
-      it('does not render retry dropdown', () => {
-        createComponent({ featureFlag: false });
-
-        expect(findRetryDropdown().exists()).toBe(false);
-      });
-    });
-  });
-});
diff --git a/spec/frontend/jobs/bridge/mock_data.js b/spec/frontend/jobs/bridge/mock_data.js
deleted file mode 100644
index 4084bb54163..00000000000
--- a/spec/frontend/jobs/bridge/mock_data.js
+++ /dev/null
@@ -1,102 +0,0 @@
-export const MOCK_EMPTY_ILLUSTRATION_PATH = '/path/to/svg';
-export const MOCK_PATH_TO_DOWNSTREAM = '/path/to/downstream/pipeline';
-export const MOCK_BUILD_ID = '1331';
-export const MOCK_PIPELINE_IID = '174';
-export const MOCK_PROJECT_FULL_PATH = '/root/project/';
-export const MOCK_SHA = '38f3d89147765427a7ce58be28cd76d14efa682a';
-
-export const mockCommit = {
-  id: `gid://gitlab/CommitPresenter/${MOCK_SHA}`,
-  shortId: '38f3d891',
-  title: 'Update .gitlab-ci.yml file',
-  webPath: `/root/project/-/commit/${MOCK_SHA}`,
-  __typename: 'Commit',
-};
-
-export const mockJob = {
-  createdAt: '2021-12-10T09:05:45Z',
-  id: 'gid://gitlab/Ci::Build/1331',
-  name: 'triggerJobName',
-  scheduledAt: null,
-  startedAt: '2021-12-10T09:13:43Z',
-  status: 'SUCCESS',
-  triggered: null,
-  detailedStatus: {
-    id: '1',
-    detailsPath: '/root/project/-/jobs/1331',
-    icon: 'status_success',
-    group: 'success',
-    text: 'passed',
-    tooltip: 'passed',
-    __typename: 'DetailedStatus',
-  },
-  downstreamPipeline: {
-    id: '1',
-    path: '/root/project/-/pipelines/175',
-  },
-  stage: {
-    id: '1',
-    name: 'build',
-    __typename: 'CiStage',
-  },
-  __typename: 'CiJob',
-};
-
-export const mockUser = {
-  id: 'gid://gitlab/User/1',
-  avatarUrl: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-  name: 'Administrator',
-  username: 'root',
-  webPath: '/root',
-  webUrl: 'http://gdk.test:3000/root',
-  status: {
-    message: 'making great things',
-    __typename: 'UserStatus',
-  },
-  __typename: 'UserCore',
-};
-
-export const mockStage = {
-  id: '1',
-  name: 'build',
-  jobs: {
-    nodes: [mockJob],
-    __typename: 'CiJobConnection',
-  },
-  __typename: 'CiStage',
-};
-
-export const mockPipelineQueryResponse = {
-  data: {
-    project: {
-      id: '1',
-      pipeline: {
-        commit: mockCommit,
-        id: 'gid://gitlab/Ci::Pipeline/174',
-        iid: '88',
-        path: '/root/project/-/pipelines/174',
-        sha: MOCK_SHA,
-        ref: 'main',
-        refPath: 'path/to/ref',
-        user: mockUser,
-        detailedStatus: {
-          id: '1',
-          icon: 'status_failed',
-          group: 'failed',
-          __typename: 'DetailedStatus',
-        },
-        stages: {
-          edges: [
-            {
-              node: mockStage,
-              __typename: 'CiStageEdge',
-            },
-          ],
-          __typename: 'CiStageConnection',
-        },
-        __typename: 'Pipeline',
-      },
-      __typename: 'Project',
-    },
-  },
-};
diff --git a/spec/frontend/jobs/components/job_app_spec.js b/spec/frontend/jobs/components/job_app_spec.js
index fc308766ab9..b4b5bc4669d 100644
--- a/spec/frontend/jobs/components/job_app_spec.js
+++ b/spec/frontend/jobs/components/job_app_spec.js
@@ -22,7 +22,6 @@ describe('Job App', () => {
   let store;
   let wrapper;
   let mock;
-  let origGon;
 
   const initSettings = {
     endpoint: `${TEST_HOST}jobs/123.json`,
@@ -80,17 +79,11 @@ describe('Job App', () => {
   beforeEach(() => {
     mock = new MockAdapter(axios);
     store = createStore();
-
-    origGon = window.gon;
-
-    window.gon = { features: { infinitelyCollapsibleSections: false } }; // NOTE: All of this passes with the feature flag
   });
 
   afterEach(() => {
     wrapper.destroy();
     mock.restore();
-
-    window.gon = origGon;
   });
 
   describe('while loading', () => {
diff --git a/spec/frontend/jobs/components/job_log_controllers_spec.js b/spec/frontend/jobs/components/job_log_controllers_spec.js
index cd3ee734466..cc97d111c06 100644
--- a/spec/frontend/jobs/components/job_log_controllers_spec.js
+++ b/spec/frontend/jobs/components/job_log_controllers_spec.js
@@ -1,6 +1,11 @@
+import { GlSearchBoxByClick } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import JobLogControllers from '~/jobs/components/job_log_controllers.vue';
+import HelpPopover from '~/vue_shared/components/help_popover.vue';
+import { mockJobLog } from '../mock_data';
+
+const mockToastShow = jest.fn();
 
 describe('Job log controllers', () => {
   let wrapper;
@@ -19,14 +24,30 @@ describe('Job log controllers', () => {
     isScrollBottomDisabled: false,
     isScrollingDown: true,
     isJobLogSizeVisible: true,
+    jobLog: mockJobLog,
   };
 
-  const createWrapper = (props) => {
+  const createWrapper = (props, jobLogSearch = false) => {
     wrapper = mount(JobLogControllers, {
       propsData: {
         ...defaultProps,
         ...props,
       },
+      provide: {
+        glFeatures: {
+          jobLogSearch,
+        },
+      },
+      data() {
+        return {
+          searchTerm: '82',
+        };
+      },
+      mocks: {
+        $toast: {
+          show: mockToastShow,
+        },
+      },
     });
   };
 
@@ -35,6 +56,8 @@ describe('Job log controllers', () => {
   const findRawLinkController = () => wrapper.find('[data-testid="job-raw-link-controller"]');
   const findScrollTop = () => wrapper.find('[data-testid="job-controller-scroll-top"]');
   const findScrollBottom = () => wrapper.find('[data-testid="job-controller-scroll-bottom"]');
+  const findJobLogSearch = () => wrapper.findComponent(GlSearchBoxByClick);
+  const findSearchHelp = () => wrapper.findComponent(HelpPopover);
 
   describe('Truncate information', () => {
     describe('with isJobLogSizeVisible', () => {
@@ -179,4 +202,40 @@ describe('Job log controllers', () => {
       });
     });
   });
+
+  describe('Job log search', () => {
+    describe('with feature flag off', () => {
+      it('does not display job log search', () => {
+        createWrapper();
+
+        expect(findJobLogSearch().exists()).toBe(false);
+        expect(findSearchHelp().exists()).toBe(false);
+      });
+    });
+
+    describe('with feature flag on', () => {
+      beforeEach(() => {
+        createWrapper({}, { jobLogSearch: true });
+      });
+
+      it('displays job log search', () => {
+        expect(findJobLogSearch().exists()).toBe(true);
+        expect(findSearchHelp().exists()).toBe(true);
+      });
+
+      it('emits search results', () => {
+        const expectedSearchResults = [[[mockJobLog[6].lines[1], mockJobLog[6].lines[2]]]];
+
+        findJobLogSearch().vm.$emit('submit');
+
+        expect(wrapper.emitted('searchResults')).toEqual(expectedSearchResults);
+      });
+
+      it('clears search results', () => {
+        findJobLogSearch().vm.$emit('clear');
+
+        expect(wrapper.emitted('searchResults')).toEqual([[[]]]);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/jobs/components/job_sidebar_details_container_spec.js b/spec/frontend/jobs/components/job_sidebar_details_container_spec.js
index cc9a5e4ee25..4046f0269dd 100644
--- a/spec/frontend/jobs/components/job_sidebar_details_container_spec.js
+++ b/spec/frontend/jobs/components/job_sidebar_details_container_spec.js
@@ -42,7 +42,7 @@ describe('Job Sidebar Details Container', () => {
       expect(wrapper.html()).toBe('');
     });
 
-    it.each(['duration', 'erased_at', 'finished_at', 'queued', 'runner', 'coverage'])(
+    it.each(['duration', 'erased_at', 'finished_at', 'queued_at', 'runner', 'coverage'])(
       'should not render %s details when missing',
       async (detail) => {
         await store.dispatch('receiveJobSuccess', { [detail]: undefined });
@@ -59,7 +59,7 @@ describe('Job Sidebar Details Container', () => {
       ['duration', 'Elapsed time: 6 seconds'],
       ['erased_at', 'Erased: 3 weeks ago'],
       ['finished_at', 'Finished: 3 weeks ago'],
-      ['queued', 'Queued: 9 seconds'],
+      ['queued_duration', 'Queued: 9 seconds'],
       ['runner', 'Runner: #1 (ABCDEFGH) local ci runner'],
       ['coverage', 'Coverage: 20%'],
     ])('uses %s to render job-%s', async (detail, value) => {
diff --git a/spec/frontend/jobs/components/jobs_container_spec.js b/spec/frontend/jobs/components/jobs_container_spec.js
index 1cde72682a2..127570b8184 100644
--- a/spec/frontend/jobs/components/jobs_container_spec.js
+++ b/spec/frontend/jobs/components/jobs_container_spec.js
@@ -106,7 +106,7 @@ describe('Jobs List block', () => {
     });
 
     expect(findJob().text()).toBe(job.name);
-    expect(findJob().text()).not.toContain(job.id);
+    expect(findJob().text()).not.toContain(job.id.toString());
   });
 
   it('renders job id when job name is not available', () => {
diff --git a/spec/frontend/jobs/components/log/collapsible_section_spec.js b/spec/frontend/jobs/components/log/collapsible_section_spec.js
index 2ab7f5fe22d..646935568b1 100644
--- a/spec/frontend/jobs/components/log/collapsible_section_spec.js
+++ b/spec/frontend/jobs/components/log/collapsible_section_spec.js
@@ -5,7 +5,6 @@ import { collapsibleSectionClosed, collapsibleSectionOpened } from './mock_data'
 
 describe('Job Log Collapsible Section', () => {
   let wrapper;
-  let origGon;
 
   const jobLogEndpoint = 'jobs/335';
 
@@ -20,16 +19,8 @@ describe('Job Log Collapsible Section', () => {
     });
   };
 
-  beforeEach(() => {
-    origGon = window.gon;
-
-    window.gon = { features: { infinitelyCollapsibleSections: false } }; // NOTE: This also works with true
-  });
-
   afterEach(() => {
     wrapper.destroy();
-
-    window.gon = origGon;
   });
 
   describe('with closed section', () => {
diff --git a/spec/frontend/jobs/components/log/line_spec.js b/spec/frontend/jobs/components/log/line_spec.js
index d184696cd1f..bf80d90e299 100644
--- a/spec/frontend/jobs/components/log/line_spec.js
+++ b/spec/frontend/jobs/components/log/line_spec.js
@@ -179,4 +179,46 @@ describe('Job Log Line', () => {
       expect(findLink().exists()).toBe(false);
     });
   });
+
+  describe('job log search', () => {
+    const mockSearchResults = [
+      {
+        offset: 1533,
+        content: [{ text: '$ echo "82.71"', style: 'term-fg-l-green term-bold' }],
+        section: 'step-script',
+        lineNumber: 20,
+      },
+      { offset: 1560, content: [{ text: '82.71' }], section: 'step-script', lineNumber: 21 },
+    ];
+
+    it('applies highlight class to search result elements', () => {
+      createComponent({
+        line: {
+          offset: 1560,
+          content: [{ text: '82.71' }],
+          section: 'step-script',
+          lineNumber: 21,
+        },
+        path: '/root/ci-project/-/jobs/1089',
+        searchResults: mockSearchResults,
+      });
+
+      expect(wrapper.classes()).toContain('gl-bg-gray-500');
+    });
+
+    it('does not apply highlight class to search result elements', () => {
+      createComponent({
+        line: {
+          offset: 1560,
+          content: [{ text: 'docker' }],
+          section: 'step-script',
+          lineNumber: 29,
+        },
+        path: '/root/ci-project/-/jobs/1089',
+        searchResults: mockSearchResults,
+      });
+
+      expect(wrapper.classes()).not.toContain('gl-bg-gray-500');
+    });
+  });
 });
diff --git a/spec/frontend/jobs/components/log/log_spec.js b/spec/frontend/jobs/components/log/log_spec.js
index 9cc56cce9b3..c933ed5c3e1 100644
--- a/spec/frontend/jobs/components/log/log_spec.js
+++ b/spec/frontend/jobs/components/log/log_spec.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import Log from '~/jobs/components/log/log.vue';
-import { logLinesParserLegacy, logLinesParser } from '~/jobs/store/utils';
+import { logLinesParser } from '~/jobs/store/utils';
 import { jobLog } from './mock_data';
 
 describe('Job Log', () => {
@@ -10,7 +10,6 @@ describe('Job Log', () => {
   let actions;
   let state;
   let store;
-  let origGon;
 
   Vue.use(Vuex);
 
@@ -25,12 +24,8 @@ describe('Job Log', () => {
       toggleCollapsibleLine: () => {},
     };
 
-    origGon = window.gon;
-
-    window.gon = { features: { infinitelyCollapsibleSections: false } };
-
     state = {
-      jobLog: logLinesParserLegacy(jobLog),
+      jobLog: logLinesParser(jobLog),
       jobLogEndpoint: 'jobs/id',
     };
 
@@ -44,88 +39,6 @@ describe('Job Log', () => {
 
   afterEach(() => {
     wrapper.destroy();
-
-    window.gon = origGon;
-  });
-
-  const findCollapsibleLine = () => wrapper.find('.collapsible-line');
-
-  describe('line numbers', () => {
-    it('renders a line number for each open line', () => {
-      expect(wrapper.find('#L1').text()).toBe('1');
-      expect(wrapper.find('#L2').text()).toBe('2');
-      expect(wrapper.find('#L3').text()).toBe('3');
-    });
-
-    it('links to the provided path and correct line number', () => {
-      expect(wrapper.find('#L1').attributes('href')).toBe(`${state.jobLogEndpoint}#L1`);
-    });
-  });
-
-  describe('collapsible sections', () => {
-    it('renders a clickable header section', () => {
-      expect(findCollapsibleLine().attributes('role')).toBe('button');
-    });
-
-    it('renders an icon with the open state', () => {
-      expect(findCollapsibleLine().find('[data-testid="chevron-lg-down-icon"]').exists()).toBe(
-        true,
-      );
-    });
-
-    describe('on click header section', () => {
-      it('calls toggleCollapsibleLine', () => {
-        jest.spyOn(wrapper.vm, 'toggleCollapsibleLine');
-
-        findCollapsibleLine().trigger('click');
-
-        expect(wrapper.vm.toggleCollapsibleLine).toHaveBeenCalled();
-      });
-    });
-  });
-});
-
-describe('Job Log, infinitelyCollapsibleSections feature flag enabled', () => {
-  let wrapper;
-  let actions;
-  let state;
-  let store;
-  let origGon;
-
-  Vue.use(Vuex);
-
-  const createComponent = () => {
-    wrapper = mount(Log, {
-      store,
-    });
-  };
-
-  beforeEach(() => {
-    actions = {
-      toggleCollapsibleLine: () => {},
-    };
-
-    origGon = window.gon;
-
-    window.gon = { features: { infinitelyCollapsibleSections: true } };
-
-    state = {
-      jobLog: logLinesParser(jobLog).parsedLines,
-      jobLogEndpoint: 'jobs/id',
-    };
-
-    store = new Vuex.Store({
-      actions,
-      state,
-    });
-
-    createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-
-    window.gon = origGon;
   });
 
   const findCollapsibleLine = () => wrapper.find('.collapsible-line');
diff --git a/spec/frontend/jobs/components/log/mock_data.js b/spec/frontend/jobs/components/log/mock_data.js
index 3ff0bd73581..eb8c4fe8bc9 100644
--- a/spec/frontend/jobs/components/log/mock_data.js
+++ b/spec/frontend/jobs/components/log/mock_data.js
@@ -58,80 +58,6 @@ export const utilsMockData = [
   },
 ];
 
-export const multipleCollapsibleSectionsMockData = [
-  {
-    offset: 1001,
-    content: [{ text: ' on docker-auto-scale-com 8a6210b8' }],
-  },
-  {
-    offset: 1002,
-    content: [
-      {
-        text: 'Executing "step_script" stage of the job script',
-      },
-    ],
-    section: 'step-script',
-    section_header: true,
-  },
-  {
-    offset: 1003,
-    content: [{ text: 'sleep 60' }],
-    section: 'step-script',
-  },
-  {
-    offset: 1004,
-    content: [
-      {
-        text:
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lorem dolor, congue ac condimentum vitae',
-      },
-    ],
-    section: 'step-script',
-  },
-  {
-    offset: 1005,
-    content: [{ text: 'executing...' }],
-    section: 'step-script',
-  },
-  {
-    offset: 1006,
-    content: [{ text: '1st collapsible section' }],
-    section: 'collapsible-1',
-    section_header: true,
-  },
-  {
-    offset: 1007,
-    content: [
-      {
-        text:
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lorem dolor, congue ac condimentum vitae',
-      },
-    ],
-    section: 'collapsible-1',
-  },
-  {
-    offset: 1008,
-    content: [],
-    section: 'collapsible-1',
-    section_duration: '01:00',
-  },
-  {
-    offset: 1009,
-    content: [],
-    section: 'step-script',
-    section_duration: '10:00',
-  },
-];
-
-export const backwardsCompatibilityTrace = [
-  {
-    offset: 2365,
-    content: [],
-    section: 'download-artifacts',
-    section_duration: '00:01',
-  },
-];
-
 export const originalTrace = [
   {
     offset: 1,
diff --git a/spec/frontend/jobs/components/table/cells/actions_cell_spec.js b/spec/frontend/jobs/components/table/cells/actions_cell_spec.js
index 976b128532d..7cc008f332d 100644
--- a/spec/frontend/jobs/components/table/cells/actions_cell_spec.js
+++ b/spec/frontend/jobs/components/table/cells/actions_cell_spec.js
@@ -12,17 +12,12 @@ import JobRetryMutation from '~/jobs/components/table/graphql/mutations/job_retr
 import JobUnscheduleMutation from '~/jobs/components/table/graphql/mutations/job_unschedule.mutation.graphql';
 import JobCancelMutation from '~/jobs/components/table/graphql/mutations/job_cancel.mutation.graphql';
 import {
-  playableJob,
-  retryableJob,
-  cancelableJob,
-  scheduledJob,
-  cannotRetryJob,
-  cannotPlayJob,
-  cannotPlayScheduledJob,
-  retryMutationResponse,
+  mockJobsNodes,
+  mockJobsNodesAsGuest,
   playMutationResponse,
-  cancelMutationResponse,
+  retryMutationResponse,
   unscheduleMutationResponse,
+  cancelMutationResponse,
 } from '../../../mock_data';
 
 jest.mock('~/lib/utils/url_utility');
@@ -32,6 +27,22 @@ Vue.use(VueApollo);
 describe('Job actions cell', () => {
   let wrapper;
 
+  const findMockJob = (jobName, nodes = mockJobsNodes) => {
+    const job = nodes.find(({ name }) => name === jobName);
+    expect(job).toBeDefined(); // ensure job is present
+    return job;
+  };
+
+  const mockJob = findMockJob('build');
+  const cancelableJob = findMockJob('cancelable');
+  const playableJob = findMockJob('playable');
+  const retryableJob = findMockJob('retryable');
+  const scheduledJob = findMockJob('scheduled');
+  const jobWithArtifact = findMockJob('with_artifact');
+  const cannotPlayJob = findMockJob('playable', mockJobsNodesAsGuest);
+  const cannotRetryJob = findMockJob('retryable', mockJobsNodesAsGuest);
+  const cannotPlayScheduledJob = findMockJob('scheduled', mockJobsNodesAsGuest);
+
   const findRetryButton = () => wrapper.findByTestId('retry');
   const findPlayButton = () => wrapper.findByTestId('play');
   const findCancelButton = () => wrapper.findByTestId('cancel-button');
@@ -55,10 +66,10 @@ describe('Job actions cell', () => {
     return createMockApollo(requestHandlers);
   };
 
-  const createComponent = (jobType, requestHandlers, props = {}) => {
+  const createComponent = (job, requestHandlers, props = {}) => {
     wrapper = shallowMountExtended(ActionsCell, {
       propsData: {
-        job: jobType,
+        job,
         ...props,
       },
       apolloProvider: createMockApolloProvider(requestHandlers),
@@ -73,15 +84,15 @@ describe('Job actions cell', () => {
   });
 
   it('displays the artifacts download button with correct link', () => {
-    createComponent(playableJob);
+    createComponent(jobWithArtifact);
 
     expect(findDownloadArtifactsButton().attributes('href')).toBe(
-      playableJob.artifacts.nodes[0].downloadPath,
+      jobWithArtifact.artifacts.nodes[0].downloadPath,
     );
   });
 
   it('does not display an artifacts download button', () => {
-    createComponent(retryableJob);
+    createComponent(mockJob);
 
     expect(findDownloadArtifactsButton().exists()).toBe(false);
   });
@@ -101,7 +112,7 @@ describe('Job actions cell', () => {
     button                         | action                  | jobType
     ${findPlayButton}              | ${'play'}               | ${playableJob}
     ${findRetryButton}             | ${'retry'}              | ${retryableJob}
-    ${findDownloadArtifactsButton} | ${'download artifacts'} | ${playableJob}
+    ${findDownloadArtifactsButton} | ${'download artifacts'} | ${jobWithArtifact}
     ${findCancelButton}            | ${'cancel'}             | ${cancelableJob}
   `('displays the $action button', ({ button, jobType }) => {
     createComponent(jobType);
diff --git a/spec/frontend/jobs/components/table/cells/job_cell_spec.js b/spec/frontend/jobs/components/table/cells/job_cell_spec.js
index fc4e5586349..ddc196129a7 100644
--- a/spec/frontend/jobs/components/table/cells/job_cell_spec.js
+++ b/spec/frontend/jobs/components/table/cells/job_cell_spec.js
@@ -2,16 +2,22 @@ import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import JobCell from '~/jobs/components/table/cells/job_cell.vue';
-import { mockJobsInTable } from '../../../mock_data';
-
-const mockJob = mockJobsInTable[0];
-const mockJobCreatedByTag = mockJobsInTable[1];
-const mockJobLimitedAccess = mockJobsInTable[2];
-const mockStuckJob = mockJobsInTable[3];
+import { mockJobsNodes, mockJobsNodesAsGuest } from '../../../mock_data';
 
 describe('Job Cell', () => {
   let wrapper;
 
+  const findMockJob = (jobName, nodes = mockJobsNodes) => {
+    const job = nodes.find(({ name }) => name === jobName);
+    expect(job).toBeDefined(); // ensure job is present
+    return job;
+  };
+
+  const mockJob = findMockJob('build');
+  const jobCreatedByTag = findMockJob('created_by_tag');
+  const pendingJob = findMockJob('pending');
+  const jobAsGuest = findMockJob('build', mockJobsNodesAsGuest);
+
   const findJobIdLink = () => wrapper.findByTestId('job-id-link');
   const findJobIdNoLink = () => wrapper.findByTestId('job-id-limited-access');
   const findJobRef = () => wrapper.findByTestId('job-ref');
@@ -23,11 +29,11 @@ describe('Job Cell', () => {
 
   const findBadgeById = (id) => wrapper.findByTestId(id);
 
-  const createComponent = (jobData = mockJob) => {
+  const createComponent = (job = mockJob) => {
     wrapper = extendedWrapper(
       shallowMount(JobCell, {
         propsData: {
-          job: jobData,
+          job,
         },
       }),
     );
@@ -49,9 +55,9 @@ describe('Job Cell', () => {
     });
 
     it('display the job id with no link', () => {
-      createComponent(mockJobLimitedAccess);
+      createComponent(jobAsGuest);
 
-      const expectedJobId = `#${getIdFromGraphQLId(mockJobLimitedAccess.id)}`;
+      const expectedJobId = `#${getIdFromGraphQLId(jobAsGuest.id)}`;
 
       expect(findJobIdNoLink().text()).toBe(expectedJobId);
       expect(findJobIdNoLink().exists()).toBe(true);
@@ -75,7 +81,7 @@ describe('Job Cell', () => {
     });
 
     it('displays label icon when job is created by a tag', () => {
-      createComponent(mockJobCreatedByTag);
+      createComponent(jobCreatedByTag);
 
       expect(findLabelIcon().exists()).toBe(true);
       expect(findForkIcon().exists()).toBe(false);
@@ -130,8 +136,8 @@ describe('Job Cell', () => {
       expect(findStuckIcon().exists()).toBe(false);
     });
 
-    it('stuck icon is shown if job is stuck', () => {
-      createComponent(mockStuckJob);
+    it('stuck icon is shown if job is pending', () => {
+      createComponent(pendingJob);
 
       expect(findStuckIcon().exists()).toBe(true);
       expect(findStuckIcon().attributes('name')).toBe('warning');
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 986fba21fb9..374768c3ee4 100644
--- a/spec/frontend/jobs/components/table/job_table_app_spec.js
+++ b/spec/frontend/jobs/components/table/job_table_app_spec.js
@@ -6,7 +6,7 @@ import {
   GlLoadingIcon,
 } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { s__ } from '~/locale';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -18,8 +18,8 @@ import JobsTableApp from '~/jobs/components/table/jobs_table_app.vue';
 import JobsTableTabs from '~/jobs/components/table/jobs_table_tabs.vue';
 import JobsFilteredSearch from '~/jobs/components/filtered_search/jobs_filtered_search.vue';
 import {
-  mockJobsQueryResponse,
-  mockJobsQueryEmptyResponse,
+  mockJobsResponsePaginated,
+  mockJobsResponseEmpty,
   mockFailedSearchToken,
 } from '../../mock_data';
 
@@ -30,11 +30,10 @@ jest.mock('~/flash');
 
 describe('Job table app', () => {
   let wrapper;
-  let jobsTableVueSearch = true;
 
-  const successHandler = jest.fn().mockResolvedValue(mockJobsQueryResponse);
+  const successHandler = jest.fn().mockResolvedValue(mockJobsResponsePaginated);
   const failedHandler = jest.fn().mockRejectedValue(new Error('GraphQL error'));
-  const emptyHandler = jest.fn().mockResolvedValue(mockJobsQueryEmptyResponse);
+  const emptyHandler = jest.fn().mockResolvedValue(mockJobsResponseEmpty);
 
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findLoadingSpinner = () => wrapper.findComponent(GlLoadingIcon);
@@ -66,7 +65,6 @@ describe('Job table app', () => {
       },
       provide: {
         fullPath: projectPath,
-        glFeatures: { jobsTableVueSearch },
       },
       apolloProvider: createMockApolloProvider(handler),
     });
@@ -77,17 +75,17 @@ describe('Job table app', () => {
   });
 
   describe('loading state', () => {
-    beforeEach(() => {
+    it('should display skeleton loader when loading', () => {
       createComponent();
-    });
 
-    it('should display skeleton loader when loading', () => {
       expect(findSkeletonLoader().exists()).toBe(true);
       expect(findTable().exists()).toBe(false);
       expect(findLoadingSpinner().exists()).toBe(false);
     });
 
     it('when switching tabs only the skeleton loader should show', () => {
+      createComponent();
+
       findTabs().vm.$emit('fetchJobsByStatus', null);
 
       expect(findSkeletonLoader().exists()).toBe(true);
@@ -119,24 +117,29 @@ describe('Job table app', () => {
     });
 
     describe('when infinite scrolling is triggered', () => {
-      beforeEach(() => {
+      it('does not display a skeleton loader', () => {
         triggerInfiniteScroll();
-      });
 
-      it('does not display a skeleton loader', () => {
         expect(findSkeletonLoader().exists()).toBe(false);
       });
 
       it('handles infinite scrolling by calling fetch more', async () => {
+        triggerInfiniteScroll();
+
+        await nextTick();
+
+        const pageSize = 30;
+
         expect(findLoadingSpinner().exists()).toBe(true);
 
         await waitForPromises();
 
         expect(findLoadingSpinner().exists()).toBe(false);
 
-        expect(successHandler).toHaveBeenCalledWith({
-          after: 'eyJpZCI6IjIzMTcifQ',
-          fullPath: 'gitlab-org/gitlab',
+        expect(successHandler).toHaveBeenLastCalledWith({
+          first: pageSize,
+          fullPath: projectPath,
+          after: mockJobsResponsePaginated.data.project.jobs.pageInfo.endCursor,
         });
       });
     });
@@ -227,13 +230,5 @@ describe('Job table app', () => {
       expect(createFlash).toHaveBeenCalledWith(expectedWarning);
       expect(wrapper.vm.$apollo.queries.jobs.refetch).toHaveBeenCalledTimes(0);
     });
-
-    it('should not display filtered search', () => {
-      jobsTableVueSearch = false;
-
-      createComponent();
-
-      expect(findFilteredSearch().exists()).toBe(false);
-    });
   });
 });
diff --git a/spec/frontend/jobs/components/table/jobs_table_spec.js b/spec/frontend/jobs/components/table/jobs_table_spec.js
index ac8bef675f8..803df3df37f 100644
--- a/spec/frontend/jobs/components/table/jobs_table_spec.js
+++ b/spec/frontend/jobs/components/table/jobs_table_spec.js
@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import JobsTable from '~/jobs/components/table/jobs_table.vue';
 import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
-import { mockJobsInTable } from '../../mock_data';
+import { mockJobsNodes } from '../../mock_data';
 
 describe('Jobs Table', () => {
   let wrapper;
@@ -19,7 +19,7 @@ describe('Jobs Table', () => {
     wrapper = extendedWrapper(
       mount(JobsTable, {
         propsData: {
-          jobs: mockJobsInTable,
+          jobs: mockJobsNodes,
           ...props,
         },
       }),
@@ -39,7 +39,7 @@ describe('Jobs Table', () => {
   });
 
   it('displays correct number of job rows', () => {
-    expect(findTableRows()).toHaveLength(mockJobsInTable.length);
+    expect(findTableRows()).toHaveLength(mockJobsNodes.length);
   });
 
   it('displays job status', () => {
@@ -47,14 +47,14 @@ describe('Jobs Table', () => {
   });
 
   it('displays the job stage and name', () => {
-    const firstJob = mockJobsInTable[0];
+    const firstJob = mockJobsNodes[0];
 
     expect(findJobStage().text()).toBe(firstJob.stage.name);
     expect(findJobName().text()).toBe(firstJob.name);
   });
 
   it('displays the coverage for only jobs that have coverage', () => {
-    const jobsThatHaveCoverage = mockJobsInTable.filter((job) => job.coverage !== null);
+    const jobsThatHaveCoverage = mockJobsNodes.filter((job) => job.coverage !== null);
 
     jobsThatHaveCoverage.forEach((job, index) => {
       expect(findAllCoverageJobs().at(index).text()).toBe(`${job.coverage}%`);
diff --git a/spec/frontend/jobs/mock_data.js b/spec/frontend/jobs/mock_data.js
index 4676635cce0..bf238b2e39a 100644
--- a/spec/frontend/jobs/mock_data.js
+++ b/spec/frontend/jobs/mock_data.js
@@ -1,8 +1,18 @@
+import mockJobsEmpty from 'test_fixtures/graphql/jobs/get_jobs.query.graphql.empty.json';
+import mockJobsPaginated from 'test_fixtures/graphql/jobs/get_jobs.query.graphql.paginated.json';
+import mockJobs from 'test_fixtures/graphql/jobs/get_jobs.query.graphql.json';
+import mockJobsAsGuest from 'test_fixtures/graphql/jobs/get_jobs.query.graphql.as_guest.json';
 import { TEST_HOST } from 'spec/test_constants';
 
 const threeWeeksAgo = new Date();
 threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
 
+// Fixtures generated at spec/frontend/fixtures/jobs.rb
+export const mockJobsResponsePaginated = mockJobsPaginated;
+export const mockJobsResponseEmpty = mockJobsEmpty;
+export const mockJobsNodes = mockJobs.data.project.jobs.nodes;
+export const mockJobsNodesAsGuest = mockJobsAsGuest.data.project.jobs.nodes;
+
 export const stages = [
   {
     name: 'build',
@@ -924,7 +934,7 @@ export default {
   created_at: threeWeeksAgo.toISOString(),
   updated_at: threeWeeksAgo.toISOString(),
   finished_at: threeWeeksAgo.toISOString(),
-  queued: 9.54,
+  queued_duration: 9.54,
   status: {
     icon: 'status_success',
     text: 'passed',
@@ -1283,602 +1293,6 @@ export const mockPipelineDetached = {
   },
 };
 
-export const mockJobsInTable = [
-  {
-    detailedStatus: {
-      icon: 'status_manual',
-      label: 'manual play action',
-      text: 'manual',
-      tooltip: 'manual action',
-      action: {
-        buttonTitle: 'Trigger this manual action',
-        icon: 'play',
-        method: 'post',
-        path: '/root/ci-project/-/jobs/2004/play',
-        title: 'Play',
-        __typename: 'StatusAction',
-      },
-      detailsPath: '/root/ci-project/-/jobs/2004',
-      __typename: 'DetailedStatus',
-    },
-    id: 'gid://gitlab/Ci::Build/2004',
-    refName: 'main',
-    refPath: '/root/ci-project/-/commits/main',
-    tags: [],
-    shortSha: '2d5d8323',
-    commitPath: '/root/ci-project/-/commit/2d5d83230bdea0e003d83ef4c16d2bf9a8808ebe',
-    pipeline: {
-      id: 'gid://gitlab/Ci::Pipeline/423',
-      path: '/root/ci-project/-/pipelines/423',
-      user: {
-        webPath: '/root',
-        avatarUrl:
-          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-        __typename: 'User',
-      },
-      __typename: 'Pipeline',
-    },
-    stage: { name: 'test', __typename: 'CiStage' },
-    name: 'test_manual_job',
-    duration: null,
-    finishedAt: null,
-    coverage: null,
-    createdByTag: false,
-    retryable: false,
-    playable: true,
-    cancelable: false,
-    active: false,
-    stuck: false,
-    userPermissions: { readBuild: true, __typename: 'JobPermissions' },
-    __typename: 'CiJob',
-  },
-  {
-    detailedStatus: {
-      icon: 'status_skipped',
-      label: 'skipped',
-      text: 'skipped',
-      tooltip: 'skipped',
-      action: null,
-      __typename: 'DetailedStatus',
-    },
-    id: 'gid://gitlab/Ci::Build/2021',
-    refName: 'main',
-    refPath: '/root/ci-project/-/commits/main',
-    tags: [],
-    shortSha: '2d5d8323',
-    commitPath: '/root/ci-project/-/commit/2d5d83230bdea0e003d83ef4c16d2bf9a8808ebe',
-    pipeline: {
-      id: 'gid://gitlab/Ci::Pipeline/425',
-      path: '/root/ci-project/-/pipelines/425',
-      user: {
-        webPath: '/root',
-        avatarUrl:
-          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-        __typename: 'User',
-      },
-      __typename: 'Pipeline',
-    },
-    stage: { name: 'test', __typename: 'CiStage' },
-    name: 'coverage_job',
-    duration: null,
-    finishedAt: null,
-    coverage: null,
-    createdByTag: true,
-    retryable: false,
-    playable: false,
-    cancelable: false,
-    active: false,
-    stuck: false,
-    userPermissions: { readBuild: true, __typename: 'JobPermissions' },
-    __typename: 'CiJob',
-  },
-  {
-    detailedStatus: {
-      icon: 'status_success',
-      label: 'passed',
-      text: 'passed',
-      tooltip: 'passed',
-      action: {
-        buttonTitle: 'Retry this job',
-        icon: 'retry',
-        method: 'post',
-        path: '/root/ci-project/-/jobs/2015/retry',
-        title: 'Retry',
-        __typename: 'StatusAction',
-      },
-      __typename: 'DetailedStatus',
-    },
-    id: 'gid://gitlab/Ci::Build/2015',
-    refName: 'main',
-    refPath: '/root/ci-project/-/commits/main',
-    tags: [],
-    shortSha: '2d5d8323',
-    commitPath: '/root/ci-project/-/commit/2d5d83230bdea0e003d83ef4c16d2bf9a8808ebe',
-    pipeline: {
-      id: 'gid://gitlab/Ci::Pipeline/424',
-      path: '/root/ci-project/-/pipelines/424',
-      user: {
-        webPath: '/root',
-        avatarUrl:
-          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-        __typename: 'User',
-      },
-      __typename: 'Pipeline',
-    },
-    stage: { name: 'deploy', __typename: 'CiStage' },
-    name: 'artifact_job',
-    duration: 2,
-    finishedAt: '2021-04-01T17:36:18Z',
-    coverage: 82.71,
-    createdByTag: false,
-    retryable: true,
-    playable: false,
-    cancelable: false,
-    active: false,
-    stuck: false,
-    userPermissions: { readBuild: false, __typename: 'JobPermissions' },
-    __typename: 'CiJob',
-  },
-  {
-    artifacts: { nodes: [], __typename: 'CiJobArtifactConnection' },
-    allowFailure: false,
-    status: 'PENDING',
-    scheduledAt: null,
-    manualJob: false,
-    triggered: null,
-    createdByTag: false,
-    detailedStatus: {
-      detailsPath: '/root/ci-project/-/jobs/2391',
-      group: 'pending',
-      icon: 'status_pending',
-      label: 'pending',
-      text: 'pending',
-      tooltip: 'pending',
-      action: {
-        buttonTitle: 'Cancel this job',
-        icon: 'cancel',
-        method: 'post',
-        path: '/root/ci-project/-/jobs/2391/cancel',
-        title: 'Cancel',
-        __typename: 'StatusAction',
-      },
-      __typename: 'DetailedStatus',
-    },
-    id: 'gid://gitlab/Ci::Build/2391',
-    refName: 'master',
-    refPath: '/root/ci-project/-/commits/master',
-    tags: [],
-    shortSha: '916330b4',
-    commitPath: '/root/ci-project/-/commit/916330b4fda5dae226524ceb51c756c0ed26679d',
-    pipeline: {
-      id: 'gid://gitlab/Ci::Pipeline/482',
-      path: '/root/ci-project/-/pipelines/482',
-      user: {
-        webPath: '/root',
-        avatarUrl:
-          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-        __typename: 'UserCore',
-      },
-      __typename: 'Pipeline',
-    },
-    stage: { name: 'build', __typename: 'CiStage' },
-    name: 'build_job',
-    duration: null,
-    finishedAt: null,
-    coverage: null,
-    retryable: false,
-    playable: false,
-    cancelable: true,
-    active: true,
-    stuck: true,
-    userPermissions: { readBuild: true, __typename: 'JobPermissions' },
-    __typename: 'CiJob',
-  },
-];
-
-export const mockJobsQueryResponse = {
-  data: {
-    project: {
-      id: '1',
-      jobs: {
-        count: 1,
-        pageInfo: {
-          endCursor: 'eyJpZCI6IjIzMTcifQ',
-          hasNextPage: true,
-          hasPreviousPage: false,
-          startCursor: 'eyJpZCI6IjIzMzYifQ',
-          __typename: 'PageInfo',
-        },
-        nodes: [
-          {
-            artifacts: {
-              nodes: [
-                {
-                  downloadPath: '/root/ci-project/-/jobs/2336/artifacts/download?file_type=trace',
-                  fileType: 'TRACE',
-                  __typename: 'CiJobArtifact',
-                },
-                {
-                  downloadPath:
-                    '/root/ci-project/-/jobs/2336/artifacts/download?file_type=metadata',
-                  fileType: 'METADATA',
-                  __typename: 'CiJobArtifact',
-                },
-                {
-                  downloadPath: '/root/ci-project/-/jobs/2336/artifacts/download?file_type=archive',
-                  fileType: 'ARCHIVE',
-                  __typename: 'CiJobArtifact',
-                },
-              ],
-              __typename: 'CiJobArtifactConnection',
-            },
-            allowFailure: false,
-            status: 'SUCCESS',
-            scheduledAt: null,
-            manualJob: false,
-            triggered: null,
-            createdByTag: false,
-            detailedStatus: {
-              id: 'status-1',
-              detailsPath: '/root/ci-project/-/jobs/2336',
-              group: 'success',
-              icon: 'status_success',
-              label: 'passed',
-              text: 'passed',
-              tooltip: 'passed',
-              action: {
-                id: 'action-1',
-                buttonTitle: 'Retry this job',
-                icon: 'retry',
-                method: 'post',
-                path: '/root/ci-project/-/jobs/2336/retry',
-                title: 'Retry',
-                __typename: 'StatusAction',
-              },
-              __typename: 'DetailedStatus',
-            },
-            id: 'gid://gitlab/Ci::Build/2336',
-            refName: 'main',
-            refPath: '/root/ci-project/-/commits/main',
-            tags: [],
-            shortSha: '4408fa2a',
-            commitPath: '/root/ci-project/-/commit/4408fa2a27aaadfdf42d8dda3d6a9c01ce6cad78',
-            pipeline: {
-              id: 'gid://gitlab/Ci::Pipeline/473',
-              path: '/root/ci-project/-/pipelines/473',
-              user: {
-                id: 'user-1',
-                webPath: '/root',
-                avatarUrl:
-                  'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-                __typename: 'UserCore',
-              },
-              __typename: 'Pipeline',
-            },
-            stage: {
-              id: 'stage-1',
-              name: 'deploy',
-              __typename: 'CiStage',
-            },
-            name: 'artifact_job',
-            duration: 3,
-            finishedAt: '2021-04-29T14:19:50Z',
-            coverage: null,
-            retryable: true,
-            playable: false,
-            cancelable: false,
-            active: false,
-            stuck: false,
-            userPermissions: {
-              readBuild: true,
-              readJobArtifacts: true,
-              updateBuild: true,
-              __typename: 'JobPermissions',
-            },
-            __typename: 'CiJob',
-          },
-        ],
-        __typename: 'CiJobConnection',
-      },
-      __typename: 'Project',
-    },
-  },
-};
-
-export const mockJobsQueryEmptyResponse = {
-  data: {
-    project: {
-      id: '1',
-      jobs: [],
-    },
-  },
-};
-
-export const retryableJob = {
-  artifacts: {
-    nodes: [
-      {
-        downloadPath: '/root/ci-project/-/jobs/847/artifacts/download?file_type=trace',
-        fileType: 'TRACE',
-        __typename: 'CiJobArtifact',
-      },
-    ],
-    __typename: 'CiJobArtifactConnection',
-  },
-  allowFailure: false,
-  status: 'SUCCESS',
-  scheduledAt: null,
-  manualJob: false,
-  triggered: null,
-  createdByTag: false,
-  detailedStatus: {
-    detailsPath: '/root/test-job-artifacts/-/jobs/1981',
-    group: 'success',
-    icon: 'status_success',
-    label: 'passed',
-    text: 'passed',
-    tooltip: 'passed',
-    action: {
-      buttonTitle: 'Retry this job',
-      icon: 'retry',
-      method: 'post',
-      path: '/root/test-job-artifacts/-/jobs/1981/retry',
-      title: 'Retry',
-      __typename: 'StatusAction',
-    },
-    __typename: 'DetailedStatus',
-  },
-  id: 'gid://gitlab/Ci::Build/1981',
-  refName: 'main',
-  refPath: '/root/test-job-artifacts/-/commits/main',
-  tags: [],
-  shortSha: '75daf01b',
-  commitPath: '/root/test-job-artifacts/-/commit/75daf01b465e7eab5a04a315e44660c9a17c8055',
-  pipeline: {
-    id: 'gid://gitlab/Ci::Pipeline/288',
-    path: '/root/test-job-artifacts/-/pipelines/288',
-    user: {
-      webPath: '/root',
-      avatarUrl:
-        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-      __typename: 'UserCore',
-    },
-    __typename: 'Pipeline',
-  },
-  stage: { name: 'test', __typename: 'CiStage' },
-  name: 'hello_world',
-  duration: 7,
-  finishedAt: '2021-08-30T20:33:56Z',
-  coverage: null,
-  retryable: true,
-  playable: false,
-  cancelable: false,
-  active: false,
-  stuck: false,
-  userPermissions: { readBuild: true, updateBuild: true, __typename: 'JobPermissions' },
-  __typename: 'CiJob',
-};
-
-export const cancelableJob = {
-  artifacts: {
-    nodes: [],
-    __typename: 'CiJobArtifactConnection',
-  },
-  allowFailure: false,
-  status: 'PENDING',
-  scheduledAt: null,
-  manualJob: false,
-  triggered: null,
-  createdByTag: false,
-  detailedStatus: {
-    id: 'pending-1305-1305',
-    detailsPath: '/root/lots-of-jobs-project/-/jobs/1305',
-    group: 'pending',
-    icon: 'status_pending',
-    label: 'pending',
-    text: 'pending',
-    tooltip: 'pending',
-    action: {
-      id: 'Ci::Build-pending-1305',
-      buttonTitle: 'Cancel this job',
-      icon: 'cancel',
-      method: 'post',
-      path: '/root/lots-of-jobs-project/-/jobs/1305/cancel',
-      title: 'Cancel',
-      __typename: 'StatusAction',
-    },
-    __typename: 'DetailedStatus',
-  },
-  id: 'gid://gitlab/Ci::Build/1305',
-  refName: 'main',
-  refPath: '/root/lots-of-jobs-project/-/commits/main',
-  tags: [],
-  shortSha: '750605f2',
-  commitPath: '/root/lots-of-jobs-project/-/commit/750605f29530778cf0912779eba6d073128962a5',
-  stage: {
-    id: 'gid://gitlab/Ci::Stage/181',
-    name: 'deploy',
-    __typename: 'CiStage',
-  },
-  name: 'job_212',
-  duration: null,
-  finishedAt: null,
-  coverage: null,
-  retryable: false,
-  playable: false,
-  cancelable: true,
-  active: true,
-  stuck: false,
-  userPermissions: {
-    readBuild: true,
-    readJobArtifacts: true,
-    updateBuild: true,
-    __typename: 'JobPermissions',
-  },
-  __typename: 'CiJob',
-};
-
-export const cannotRetryJob = {
-  ...retryableJob,
-  userPermissions: { readBuild: true, updateBuild: false, __typename: 'JobPermissions' },
-};
-
-export const playableJob = {
-  artifacts: {
-    nodes: [
-      {
-        downloadPath: '/root/ci-project/-/jobs/621/artifacts/download?file_type=archive',
-        fileType: 'ARCHIVE',
-        __typename: 'CiJobArtifact',
-      },
-      {
-        downloadPath: '/root/ci-project/-/jobs/621/artifacts/download?file_type=metadata',
-        fileType: 'METADATA',
-        __typename: 'CiJobArtifact',
-      },
-      {
-        downloadPath: '/root/ci-project/-/jobs/621/artifacts/download?file_type=trace',
-        fileType: 'TRACE',
-        __typename: 'CiJobArtifact',
-      },
-    ],
-    __typename: 'CiJobArtifactConnection',
-  },
-  allowFailure: false,
-  status: 'SUCCESS',
-  scheduledAt: null,
-  manualJob: true,
-  triggered: null,
-  createdByTag: false,
-  detailedStatus: {
-    detailsPath: '/root/test-job-artifacts/-/jobs/1982',
-    group: 'success',
-    icon: 'status_success',
-    label: 'manual play action',
-    text: 'passed',
-    tooltip: 'passed',
-    action: {
-      buttonTitle: 'Trigger this manual action',
-      icon: 'play',
-      method: 'post',
-      path: '/root/test-job-artifacts/-/jobs/1982/play',
-      title: 'Play',
-      __typename: 'StatusAction',
-    },
-    __typename: 'DetailedStatus',
-  },
-  id: 'gid://gitlab/Ci::Build/1982',
-  refName: 'main',
-  refPath: '/root/test-job-artifacts/-/commits/main',
-  tags: [],
-  shortSha: '75daf01b',
-  commitPath: '/root/test-job-artifacts/-/commit/75daf01b465e7eab5a04a315e44660c9a17c8055',
-  pipeline: {
-    id: 'gid://gitlab/Ci::Pipeline/288',
-    path: '/root/test-job-artifacts/-/pipelines/288',
-    user: {
-      webPath: '/root',
-      avatarUrl:
-        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-      __typename: 'UserCore',
-    },
-    __typename: 'Pipeline',
-  },
-  stage: { name: 'test', __typename: 'CiStage' },
-  name: 'hello_world_delayed',
-  duration: 6,
-  finishedAt: '2021-08-30T20:36:12Z',
-  coverage: null,
-  retryable: true,
-  playable: true,
-  cancelable: false,
-  active: false,
-  stuck: false,
-  userPermissions: {
-    readBuild: true,
-    readJobArtifacts: true,
-    updateBuild: true,
-    __typename: 'JobPermissions',
-  },
-  __typename: 'CiJob',
-};
-
-export const cannotPlayJob = {
-  ...playableJob,
-  userPermissions: {
-    readBuild: true,
-    readJobArtifacts: true,
-    updateBuild: false,
-    __typename: 'JobPermissions',
-  },
-};
-
-export const scheduledJob = {
-  artifacts: { nodes: [], __typename: 'CiJobArtifactConnection' },
-  allowFailure: false,
-  status: 'SCHEDULED',
-  scheduledAt: '2021-08-31T22:36:05Z',
-  manualJob: true,
-  triggered: null,
-  createdByTag: false,
-  detailedStatus: {
-    detailsPath: '/root/test-job-artifacts/-/jobs/1986',
-    group: 'scheduled',
-    icon: 'status_scheduled',
-    label: 'unschedule action',
-    text: 'delayed',
-    tooltip: 'delayed manual action (%{remainingTime})',
-    action: {
-      buttonTitle: 'Unschedule job',
-      icon: 'time-out',
-      method: 'post',
-      path: '/root/test-job-artifacts/-/jobs/1986/unschedule',
-      title: 'Unschedule',
-      __typename: 'StatusAction',
-    },
-    __typename: 'DetailedStatus',
-  },
-  id: 'gid://gitlab/Ci::Build/1986',
-  refName: 'main',
-  refPath: '/root/test-job-artifacts/-/commits/main',
-  tags: [],
-  shortSha: '75daf01b',
-  commitPath: '/root/test-job-artifacts/-/commit/75daf01b465e7eab5a04a315e44660c9a17c8055',
-  pipeline: {
-    id: 'gid://gitlab/Ci::Pipeline/290',
-    path: '/root/test-job-artifacts/-/pipelines/290',
-    user: {
-      webPath: '/root',
-      avatarUrl:
-        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-      __typename: 'UserCore',
-    },
-    __typename: 'Pipeline',
-  },
-  stage: { name: 'test', __typename: 'CiStage' },
-  name: 'hello_world_delayed',
-  duration: null,
-  finishedAt: null,
-  coverage: null,
-  retryable: false,
-  playable: true,
-  cancelable: false,
-  active: false,
-  stuck: false,
-  userPermissions: { readBuild: true, updateBuild: true, __typename: 'JobPermissions' },
-  __typename: 'CiJob',
-};
-
-export const cannotPlayScheduledJob = {
-  ...scheduledJob,
-  userPermissions: {
-    readBuild: true,
-    readJobArtifacts: true,
-    updateBuild: false,
-    __typename: 'JobPermissions',
-  },
-};
-
 export const CIJobConnectionIncomingCache = {
   __typename: 'CiJobConnection',
   pageInfo: {
@@ -2000,3 +1414,167 @@ export const unscheduleMutationResponse = {
     },
   },
 };
+
+export const mockJobLog = [
+  { offset: 0, content: [{ text: 'Running with gitlab-runner 15.0.0 (febb2a09)' }], lineNumber: 0 },
+  { offset: 54, content: [{ text: '  on colima-docker EwM9WzgD' }], lineNumber: 1 },
+  {
+    isClosed: false,
+    isHeader: true,
+    line: {
+      offset: 91,
+      content: [{ text: 'Resolving secrets', style: 'term-fg-l-cyan term-bold' }],
+      section: 'resolve-secrets',
+      section_header: true,
+      lineNumber: 2,
+      section_duration: '00:00',
+    },
+    lines: [],
+  },
+  {
+    isClosed: false,
+    isHeader: true,
+    line: {
+      offset: 218,
+      content: [{ text: 'Preparing the "docker" executor', style: 'term-fg-l-cyan term-bold' }],
+      section: 'prepare-executor',
+      section_header: true,
+      lineNumber: 4,
+      section_duration: '00:01',
+    },
+    lines: [
+      {
+        offset: 317,
+        content: [{ text: 'Using Docker executor with image ruby:2.7 ...' }],
+        section: 'prepare-executor',
+        lineNumber: 5,
+      },
+      {
+        offset: 372,
+        content: [{ text: 'Pulling docker image ruby:2.7 ...' }],
+        section: 'prepare-executor',
+        lineNumber: 6,
+      },
+      {
+        offset: 415,
+        content: [
+          {
+            text:
+              'Using docker image sha256:55106bf6ba7f452c38d01ea760affc6ceb67d4b60068ffadab98d1b7b007668c for ruby:2.7 with digest ruby@sha256:23d08a4bae1a12ee3fce017f83204fcf9a02243443e4a516e65e5ff73810a449 ...',
+          },
+        ],
+        section: 'prepare-executor',
+        lineNumber: 7,
+      },
+    ],
+  },
+  {
+    isClosed: false,
+    isHeader: true,
+    line: {
+      offset: 665,
+      content: [{ text: 'Preparing environment', style: 'term-fg-l-cyan term-bold' }],
+      section: 'prepare-script',
+      section_header: true,
+      lineNumber: 9,
+      section_duration: '00:01',
+    },
+    lines: [
+      {
+        offset: 752,
+        content: [
+          { text: 'Running on runner-ewm9wzgd-project-20-concurrent-0 via 8ea689ec6969...' },
+        ],
+        section: 'prepare-script',
+        lineNumber: 10,
+      },
+    ],
+  },
+  {
+    isClosed: false,
+    isHeader: true,
+    line: {
+      offset: 865,
+      content: [{ text: 'Getting source from Git repository', style: 'term-fg-l-cyan term-bold' }],
+      section: 'get-sources',
+      section_header: true,
+      lineNumber: 12,
+      section_duration: '00:01',
+    },
+    lines: [
+      {
+        offset: 962,
+        content: [
+          {
+            text: 'Fetching changes with git depth set to 20...',
+            style: 'term-fg-l-green term-bold',
+          },
+        ],
+        section: 'get-sources',
+        lineNumber: 13,
+      },
+      {
+        offset: 1019,
+        content: [
+          { text: 'Reinitialized existing Git repository in /builds/root/ci-project/.git/' },
+        ],
+        section: 'get-sources',
+        lineNumber: 14,
+      },
+      {
+        offset: 1090,
+        content: [{ text: 'Checking out e0f63d76 as main...', style: 'term-fg-l-green term-bold' }],
+        section: 'get-sources',
+        lineNumber: 15,
+      },
+      {
+        offset: 1136,
+        content: [{ text: 'Skipping Git submodules setup', style: 'term-fg-l-green term-bold' }],
+        section: 'get-sources',
+        lineNumber: 16,
+      },
+    ],
+  },
+  {
+    isClosed: false,
+    isHeader: true,
+    line: {
+      offset: 1217,
+      content: [
+        {
+          text: 'Executing "step_script" stage of the job script',
+          style: 'term-fg-l-cyan term-bold',
+        },
+      ],
+      section: 'step-script',
+      section_header: true,
+      lineNumber: 18,
+      section_duration: '00:00',
+    },
+    lines: [
+      {
+        offset: 1327,
+        content: [
+          {
+            text:
+              'Using docker image sha256:55106bf6ba7f452c38d01ea760affc6ceb67d4b60068ffadab98d1b7b007668c for ruby:2.7 with digest ruby@sha256:23d08a4bae1a12ee3fce017f83204fcf9a02243443e4a516e65e5ff73810a449 ...',
+          },
+        ],
+        section: 'step-script',
+        lineNumber: 19,
+      },
+      {
+        offset: 1533,
+        content: [{ text: '$ echo "82.71"', style: 'term-fg-l-green term-bold' }],
+        section: 'step-script',
+        lineNumber: 20,
+      },
+      { offset: 1560, content: [{ text: '82.71' }], section: 'step-script', lineNumber: 21 },
+    ],
+  },
+  {
+    offset: 1605,
+    content: [{ text: 'Job succeeded', style: 'term-fg-l-green term-bold' }],
+    lineNumber: 23,
+  },
+];
diff --git a/spec/frontend/jobs/store/mutations_spec.js b/spec/frontend/jobs/store/mutations_spec.js
index b73aa8abf4e..ea1ec383d6e 100644
--- a/spec/frontend/jobs/store/mutations_spec.js
+++ b/spec/frontend/jobs/store/mutations_spec.js
@@ -4,21 +4,12 @@ import state from '~/jobs/store/state';
 
 describe('Jobs Store Mutations', () => {
   let stateCopy;
-  let origGon;
 
   const html =
     'I, [2018-08-17T22:57:45.707325 #1841]  INFO -- : Writing /builds/ab89e95b0fa0b9272ea0c797b76908f24d36992630e9325273a4ce3.png<br>I';
 
   beforeEach(() => {
     stateCopy = state();
-
-    origGon = window.gon;
-
-    window.gon = { features: { infinitelyCollapsibleSections: false } };
-  });
-
-  afterEach(() => {
-    window.gon = origGon;
   });
 
   describe('SET_JOB_ENDPOINT', () => {
@@ -276,88 +267,3 @@ describe('Jobs Store Mutations', () => {
     });
   });
 });
-
-describe('Job Store mutations, feature flag ON', () => {
-  let stateCopy;
-  let origGon;
-
-  const html =
-    'I, [2018-08-17T22:57:45.707325 #1841]  INFO -- : Writing /builds/ab89e95b0fa0b9272ea0c797b76908f24d36992630e9325273a4ce3.png<br>I';
-
-  beforeEach(() => {
-    stateCopy = state();
-
-    origGon = window.gon;
-
-    window.gon = { features: { infinitelyCollapsibleSections: true } };
-  });
-
-  afterEach(() => {
-    window.gon = origGon;
-  });
-
-  describe('RECEIVE_JOB_LOG_SUCCESS', () => {
-    describe('with new job log', () => {
-      describe('log.lines', () => {
-        describe('when append is true', () => {
-          it('sets the parsed log ', () => {
-            mutations[types.RECEIVE_JOB_LOG_SUCCESS](stateCopy, {
-              append: true,
-              size: 511846,
-              complete: true,
-              lines: [
-                {
-                  offset: 1,
-                  content: [{ text: 'Running with gitlab-runner 11.12.1 (5a147c92)' }],
-                },
-              ],
-            });
-
-            expect(stateCopy.jobLog).toEqual([
-              {
-                offset: 1,
-                content: [{ text: 'Running with gitlab-runner 11.12.1 (5a147c92)' }],
-                lineNumber: 1,
-              },
-            ]);
-          });
-        });
-
-        describe('when lines are defined', () => {
-          it('sets the parsed log ', () => {
-            mutations[types.RECEIVE_JOB_LOG_SUCCESS](stateCopy, {
-              append: false,
-              size: 511846,
-              complete: true,
-              lines: [
-                { offset: 0, content: [{ text: 'Running with gitlab-runner 11.11.1 (5a147c92)' }] },
-              ],
-            });
-
-            expect(stateCopy.jobLog).toEqual([
-              {
-                offset: 0,
-                content: [{ text: 'Running with gitlab-runner 11.11.1 (5a147c92)' }],
-                lineNumber: 1,
-              },
-            ]);
-          });
-        });
-
-        describe('when lines are null', () => {
-          it('sets the default value', () => {
-            mutations[types.RECEIVE_JOB_LOG_SUCCESS](stateCopy, {
-              append: true,
-              html,
-              size: 511846,
-              complete: false,
-              lines: null,
-            });
-
-            expect(stateCopy.jobLog).toEqual([]);
-          });
-        });
-      });
-    });
-  });
-});
diff --git a/spec/frontend/jobs/store/utils_spec.js b/spec/frontend/jobs/store/utils_spec.js
index 92ac33c8792..9458c2184f5 100644
--- a/spec/frontend/jobs/store/utils_spec.js
+++ b/spec/frontend/jobs/store/utils_spec.js
@@ -1,6 +1,5 @@
 import {
   logLinesParser,
-  logLinesParserLegacy,
   updateIncrementalJobLog,
   parseHeaderLine,
   parseLine,
@@ -18,8 +17,6 @@ import {
   headerTraceIncremental,
   collapsibleTrace,
   collapsibleTraceIncremental,
-  multipleCollapsibleSectionsMockData,
-  backwardsCompatibilityTrace,
 } from '../components/log/mock_data';
 
 describe('Jobs Store Utils', () => {
@@ -178,11 +175,11 @@ describe('Jobs Store Utils', () => {
       expect(isCollapsibleSection()).toEqual(false);
     });
   });
-  describe('logLinesParserLegacy', () => {
+  describe('logLinesParser', () => {
     let result;
 
     beforeEach(() => {
-      result = logLinesParserLegacy(utilsMockData);
+      result = logLinesParser(utilsMockData);
     });
 
     describe('regular line', () => {
@@ -219,102 +216,6 @@ describe('Jobs Store Utils', () => {
     });
   });
 
-  describe('logLinesParser', () => {
-    let result;
-
-    beforeEach(() => {
-      result = logLinesParser(utilsMockData);
-    });
-
-    describe('regular line', () => {
-      it('adds a lineNumber property with correct index', () => {
-        expect(result.parsedLines[0].lineNumber).toEqual(1);
-        expect(result.parsedLines[1].line.lineNumber).toEqual(2);
-      });
-    });
-
-    describe('collapsible section', () => {
-      it('adds a `isClosed` property', () => {
-        expect(result.parsedLines[1].isClosed).toEqual(false);
-      });
-
-      it('adds a `isHeader` property', () => {
-        expect(result.parsedLines[1].isHeader).toEqual(true);
-      });
-
-      it('creates a lines array property with the content of the collapsible section', () => {
-        expect(result.parsedLines[1].lines.length).toEqual(2);
-        expect(result.parsedLines[1].lines[0].content).toEqual(utilsMockData[2].content);
-        expect(result.parsedLines[1].lines[1].content).toEqual(utilsMockData[3].content);
-      });
-    });
-
-    describe('section duration', () => {
-      it('adds the section information to the header section', () => {
-        expect(result.parsedLines[1].line.section_duration).toEqual(
-          utilsMockData[4].section_duration,
-        );
-      });
-
-      it('does not add section duration as a line', () => {
-        expect(result.parsedLines[1].lines.includes(utilsMockData[4])).toEqual(false);
-      });
-    });
-
-    describe('multiple collapsible sections', () => {
-      beforeEach(() => {
-        result = logLinesParser(multipleCollapsibleSectionsMockData);
-      });
-
-      it('should contain a section inside another section', () => {
-        const innerSection = [
-          {
-            isClosed: false,
-            isHeader: true,
-            line: {
-              content: [{ text: '1st collapsible section' }],
-              lineNumber: 6,
-              offset: 1006,
-              section: 'collapsible-1',
-              section_duration: '01:00',
-              section_header: true,
-            },
-            lines: [
-              {
-                content: [
-                  {
-                    text:
-                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lorem dolor, congue ac condimentum vitae',
-                  },
-                ],
-                lineNumber: 7,
-                offset: 1007,
-                section: 'collapsible-1',
-              },
-            ],
-          },
-        ];
-
-        expect(result.parsedLines[1].lines).toEqual(expect.arrayContaining(innerSection));
-      });
-    });
-
-    describe('backwards compatibility', () => {
-      beforeEach(() => {
-        result = logLinesParser(backwardsCompatibilityTrace);
-      });
-
-      it('should return an object with a parsedLines prop', () => {
-        expect(result).toEqual(
-          expect.objectContaining({
-            parsedLines: expect.any(Array),
-          }),
-        );
-        expect(result.parsedLines).toHaveLength(1);
-      });
-    });
-  });
-
   describe('findOffsetAndRemove', () => {
     describe('when last item is header', () => {
       const existingLog = [
@@ -490,7 +391,7 @@ describe('Jobs Store Utils', () => {
   describe('updateIncrementalJobLog', () => {
     describe('without repeated section', () => {
       it('concats and parses both arrays', () => {
-        const oldLog = logLinesParserLegacy(originalTrace);
+        const oldLog = logLinesParser(originalTrace);
         const result = updateIncrementalJobLog(regularIncremental, oldLog);
 
         expect(result).toEqual([
@@ -518,7 +419,7 @@ describe('Jobs Store Utils', () => {
 
     describe('with regular line repeated offset', () => {
       it('updates the last line and formats with the incremental part', () => {
-        const oldLog = logLinesParserLegacy(originalTrace);
+        const oldLog = logLinesParser(originalTrace);
         const result = updateIncrementalJobLog(regularIncrementalRepeated, oldLog);
 
         expect(result).toEqual([
@@ -537,7 +438,7 @@ describe('Jobs Store Utils', () => {
 
     describe('with header line repeated', () => {
       it('updates the header line and formats with the incremental part', () => {
-        const oldLog = logLinesParserLegacy(headerTrace);
+        const oldLog = logLinesParser(headerTrace);
         const result = updateIncrementalJobLog(headerTraceIncremental, oldLog);
 
         expect(result).toEqual([
@@ -563,7 +464,7 @@ describe('Jobs Store Utils', () => {
 
     describe('with collapsible line repeated', () => {
       it('updates the collapsible line and formats with the incremental part', () => {
-        const oldLog = logLinesParserLegacy(collapsibleTrace);
+        const oldLog = logLinesParser(collapsibleTrace);
         const result = updateIncrementalJobLog(collapsibleTraceIncremental, oldLog);
 
         expect(result).toEqual([
diff --git a/spec/frontend/lib/dompurify_spec.js b/spec/frontend/lib/dompurify_spec.js
index 34325dad6a1..b585c69e911 100644
--- a/spec/frontend/lib/dompurify_spec.js
+++ b/spec/frontend/lib/dompurify_spec.js
@@ -34,6 +34,17 @@ const unsafeUrls = [
   `${absoluteGon.sprite_file_icons}/../../https://evil.url`,
 ];
 
+/* 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'];
+
 const forbiddenDataAttrs = ['data-remote', 'data-url', 'data-type', 'data-method'];
 const acceptedDataAttrs = ['data-random', 'data-custom'];
 
@@ -150,4 +161,16 @@ describe('~/lib/dompurify', () => {
       expect(sanitize(htmlHref)).toBe(`<a ${attrWithValue}>hello</a>`);
     });
   });
+
+  describe('with non-http links', () => {
+    it.each(validProtocolUrls)('should allow %s', (url) => {
+      const html = `<a href="${url}">internal link</a>`;
+      expect(sanitize(html)).toBe(`<a href="${url}">internal link</a>`);
+    });
+
+    it.each(invalidProtocolUrls)('should not allow %s', (url) => {
+      const html = `<a href="${url}">internal link</a>`;
+      expect(sanitize(html)).toBe(`<a>internal link</a>`);
+    });
+  });
 });
diff --git a/spec/frontend/lib/gfm/index_spec.js b/spec/frontend/lib/gfm/index_spec.js
index 7aab0072364..b722315d63a 100644
--- a/spec/frontend/lib/gfm/index_spec.js
+++ b/spec/frontend/lib/gfm/index_spec.js
@@ -1,11 +1,12 @@
 import { render } from '~/lib/gfm';
 
 describe('gfm', () => {
-  const markdownToAST = async (markdown) => {
+  const markdownToAST = async (markdown, skipRendering = []) => {
     let result;
 
     await render({
       markdown,
+      skipRendering,
       renderer: (tree) => {
         result = tree;
       },
@@ -58,36 +59,62 @@ describe('gfm', () => {
       expect(result).toEqual(rendered);
     });
 
-    it('transforms footnotes into footnotedefinition and footnotereference tags', async () => {
-      const result = await markdownToAST(
-        `footnote reference [^footnote]
+    describe('when skipping the rendering of footnote reference and definition nodes', () => {
+      it('transforms footnotes into footnotedefinition and footnotereference tags', async () => {
+        const result = await markdownToAST(
+          `footnote reference [^footnote]
 
 [^footnote]: Footnote definition`,
-      );
+          ['footnoteReference', 'footnoteDefinition'],
+        );
 
-      expectInRoot(
-        result,
-        expect.objectContaining({
-          children: expect.arrayContaining([
-            expect.objectContaining({
-              type: 'element',
-              tagName: 'footnotereference',
-              properties: {
-                identifier: 'footnote',
-                label: 'footnote',
-              },
-            }),
-          ]),
-        }),
+        expectInRoot(
+          result,
+          expect.objectContaining({
+            children: expect.arrayContaining([
+              expect.objectContaining({
+                type: 'element',
+                tagName: 'footnotereference',
+                properties: {
+                  identifier: 'footnote',
+                  label: 'footnote',
+                },
+              }),
+            ]),
+          }),
+        );
+
+        expectInRoot(
+          result,
+          expect.objectContaining({
+            tagName: 'footnotedefinition',
+            properties: {
+              identifier: 'footnote',
+              label: 'footnote',
+            },
+          }),
+        );
+      });
+    });
+  });
+
+  describe('when skipping the rendering of code blocks', () => {
+    it('transforms code nodes into codeblock html tags', async () => {
+      const result = await markdownToAST(
+        `
+\`\`\`javascript
+console.log('Hola');
+\`\`\`\
+          `,
+        ['code'],
       );
 
       expectInRoot(
         result,
         expect.objectContaining({
-          tagName: 'footnotedefinition',
+          tagName: 'codeblock',
           properties: {
-            identifier: 'footnote',
-            label: 'footnote',
+            language: 'javascript',
           },
         }),
       );
diff --git a/spec/frontend/lib/utils/common_utils_spec.js b/spec/frontend/lib/utils/common_utils_spec.js
index 8e499844406..7cf101a5e59 100644
--- a/spec/frontend/lib/utils/common_utils_spec.js
+++ b/spec/frontend/lib/utils/common_utils_spec.js
@@ -88,6 +88,28 @@ describe('common_utils', () => {
       expectGetElementIdToHaveBeenCalledWith('user-content-definição');
     });
 
+    it(`does not scroll when ${commonUtils.NO_SCROLL_TO_HASH_CLASS} is set on target`, () => {
+      jest.spyOn(window, 'scrollBy');
+
+      document.body.innerHTML += `
+        <div id="parent">
+          <a href="#test">Link</a>
+          <div style="height: 2000px;"></div>
+          <div id="test" style="height: 2000px;" class="${commonUtils.NO_SCROLL_TO_HASH_CLASS}"></div>
+        </div>
+      `;
+
+      window.history.pushState({}, null, '#test');
+      commonUtils.handleLocationHash();
+      jest.runOnlyPendingTimers();
+
+      try {
+        expect(window.scrollBy).not.toHaveBeenCalled();
+      } finally {
+        document.getElementById('parent').remove();
+      }
+    });
+
     it('scrolls element into view', () => {
       document.body.innerHTML += `
         <div id="parent">
diff --git a/spec/frontend/lib/utils/navigation_utility_spec.js b/spec/frontend/lib/utils/navigation_utility_spec.js
index 632a8904578..6d3a871eb33 100644
--- a/spec/frontend/lib/utils/navigation_utility_spec.js
+++ b/spec/frontend/lib/utils/navigation_utility_spec.js
@@ -81,8 +81,6 @@ describe('initPrefetchLinks', () => {
     const mouseOverEvent = new Event('mouseover');
 
     beforeEach(() => {
-      jest.useFakeTimers();
-
       jest.spyOn(global, 'setTimeout');
       jest.spyOn(newLink, 'removeEventListener');
     });
diff --git a/spec/frontend/lib/utils/rails_ujs_spec.js b/spec/frontend/lib/utils/rails_ujs_spec.js
index 00c29b72e73..c10301523c9 100644
--- a/spec/frontend/lib/utils/rails_ujs_spec.js
+++ b/spec/frontend/lib/utils/rails_ujs_spec.js
@@ -8,7 +8,7 @@ beforeAll(async () => {
   // that jQuery isn't available *before* we import @rails/ujs.
   delete global.jQuery;
 
-  const { initRails } = await import('~/lib/utils/rails_ujs.js');
+  const { initRails } = await import('~/lib/utils/rails_ujs');
   initRails();
 });
 
diff --git a/spec/frontend/lib/utils/text_utility_spec.js b/spec/frontend/lib/utils/text_utility_spec.js
index 9570d2a831c..8e31fc792c5 100644
--- a/spec/frontend/lib/utils/text_utility_spec.js
+++ b/spec/frontend/lib/utils/text_utility_spec.js
@@ -384,4 +384,17 @@ describe('text_utility', () => {
       );
     });
   });
+
+  describe('limitedCounterWithDelimiter', () => {
+    it('returns 1,000+ for count greater than 1000', () => {
+      const expectedOutput = '1,000+';
+
+      expect(textUtils.limitedCounterWithDelimiter(1001)).toBe(expectedOutput);
+      expect(textUtils.limitedCounterWithDelimiter(2300)).toBe(expectedOutput);
+    });
+
+    it('returns exact number for count less than 1000', () => {
+      expect(textUtils.limitedCounterWithDelimiter(120)).toBe(120);
+    });
+  });
 });
diff --git a/spec/frontend/logs/components/environment_logs_spec.js b/spec/frontend/logs/components/environment_logs_spec.js
deleted file mode 100644
index 84dc0bdf6cd..00000000000
--- a/spec/frontend/logs/components/environment_logs_spec.js
+++ /dev/null
@@ -1,370 +0,0 @@
-import { GlSprintf, GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import { scrollDown } from '~/lib/utils/scroll_utils';
-import EnvironmentLogs from '~/logs/components/environment_logs.vue';
-
-import { createStore } from '~/logs/stores';
-import {
-  mockEnvName,
-  mockEnvironments,
-  mockPods,
-  mockLogsResult,
-  mockTrace,
-  mockEnvironmentsEndpoint,
-  mockDocumentationPath,
-} from '../mock_data';
-
-jest.mock('~/lib/utils/scroll_utils');
-
-const module = 'environmentLogs';
-
-jest.mock('lodash/throttle', () =>
-  jest.fn((func) => {
-    return func;
-  }),
-);
-
-describe('EnvironmentLogs', () => {
-  let store;
-  let dispatch;
-  let wrapper;
-  let state;
-
-  const propsData = {
-    environmentName: mockEnvName,
-    environmentsPath: mockEnvironmentsEndpoint,
-    clusterApplicationsDocumentationPath: mockDocumentationPath,
-    clustersPath: '/gitlab-org',
-  };
-
-  const updateControlBtnsMock = jest.fn();
-  const LogControlButtonsStub = {
-    template: '<div/>',
-    methods: {
-      update: updateControlBtnsMock,
-    },
-    props: {
-      scrollDownButtonDisabled: false,
-    },
-  };
-
-  const findEnvironmentsDropdown = () => wrapper.find('.js-environments-dropdown');
-
-  const findSimpleFilters = () => wrapper.find({ ref: 'log-simple-filters' });
-  const findAdvancedFilters = () => wrapper.find({ ref: 'log-advanced-filters' });
-  const findElasticsearchNotice = () => wrapper.find({ ref: 'elasticsearchNotice' });
-  const findLogControlButtons = () => wrapper.find(LogControlButtonsStub);
-
-  const findInfiniteScroll = () => wrapper.find({ ref: 'infiniteScroll' });
-  const findLogTrace = () => wrapper.find({ ref: 'logTrace' });
-  const findLogFooter = () => wrapper.find({ ref: 'logFooter' });
-  const getInfiniteScrollAttr = (attr) => parseInt(findInfiniteScroll().attributes(attr), 10);
-
-  const mockSetInitData = () => {
-    state.pods.options = mockPods;
-    state.environments.current = mockEnvName;
-    [state.pods.current] = state.pods.options;
-
-    state.logs.lines = [];
-  };
-
-  const mockShowPodLogs = () => {
-    state.pods.options = mockPods;
-    [state.pods.current] = mockPods;
-
-    state.logs.lines = mockLogsResult;
-  };
-
-  const mockFetchEnvs = () => {
-    state.environments.options = mockEnvironments;
-  };
-
-  const initWrapper = () => {
-    wrapper = shallowMount(EnvironmentLogs, {
-      propsData,
-      store,
-      stubs: {
-        LogControlButtons: LogControlButtonsStub,
-        GlInfiniteScroll: {
-          name: 'gl-infinite-scroll',
-          template: `
-          <div>
-            <slot name="header"></slot>
-            <slot name="items"></slot>
-            <slot></slot>
-          </div>
-          `,
-        },
-        GlSprintf,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    store = createStore();
-    state = store.state.environmentLogs;
-
-    jest.spyOn(store, 'dispatch').mockResolvedValue();
-
-    dispatch = store.dispatch;
-  });
-
-  afterEach(() => {
-    store.dispatch.mockReset();
-
-    if (wrapper) {
-      wrapper.destroy();
-    }
-  });
-
-  it('displays UI elements', () => {
-    initWrapper();
-
-    expect(findEnvironmentsDropdown().is(GlDropdown)).toBe(true);
-    expect(findSimpleFilters().exists()).toBe(true);
-    expect(findLogControlButtons().exists()).toBe(true);
-
-    expect(findInfiniteScroll().exists()).toBe(true);
-    expect(findLogTrace().exists()).toBe(true);
-  });
-
-  it('mounted inits data', () => {
-    initWrapper();
-
-    expect(dispatch).toHaveBeenCalledWith(`${module}/setInitData`, {
-      timeRange: expect.objectContaining({
-        default: true,
-      }),
-      environmentName: mockEnvName,
-      podName: null,
-    });
-
-    expect(dispatch).toHaveBeenCalledWith(`${module}/fetchEnvironments`, mockEnvironmentsEndpoint);
-  });
-
-  describe('loading state', () => {
-    beforeEach(() => {
-      state.pods.options = [];
-
-      state.logs.lines = [];
-      state.logs.isLoading = true;
-
-      state.environments = {
-        options: [],
-        isLoading: true,
-      };
-
-      initWrapper();
-    });
-
-    it('does not display an alert to upgrade to ES', () => {
-      expect(findElasticsearchNotice().exists()).toBe(false);
-    });
-
-    it('displays a disabled environments dropdown', () => {
-      expect(findEnvironmentsDropdown().attributes('disabled')).toBe('true');
-      expect(findEnvironmentsDropdown().findAll(GlDropdownItem).length).toBe(0);
-    });
-
-    it('does not update buttons state', () => {
-      expect(updateControlBtnsMock).not.toHaveBeenCalled();
-    });
-
-    it('shows an infinite scroll with no content', () => {
-      expect(getInfiniteScrollAttr('fetched-items')).toBe(0);
-    });
-
-    it('shows an infinite scroll container with no set max-height ', () => {
-      expect(findInfiniteScroll().attributes('max-list-height')).toBeUndefined();
-    });
-
-    it('shows a logs trace', () => {
-      expect(findLogTrace().text()).toBe('');
-      expect(findLogTrace().find('.js-build-loader-animation').isVisible()).toBe(true);
-    });
-  });
-
-  describe('k8s environment', () => {
-    beforeEach(() => {
-      state.pods.options = [];
-
-      state.logs.lines = [];
-      state.logs.isLoading = false;
-
-      state.environments = {
-        options: mockEnvironments,
-        current: 'staging',
-        isLoading: false,
-      };
-
-      initWrapper();
-    });
-
-    it('displays an alert to upgrade to ES', () => {
-      expect(findElasticsearchNotice().exists()).toBe(true);
-    });
-
-    it('displays simple filters for kubernetes logs API', () => {
-      expect(findSimpleFilters().exists()).toBe(true);
-      expect(findAdvancedFilters().exists()).toBe(false);
-    });
-  });
-
-  describe('state with data', () => {
-    beforeEach(() => {
-      dispatch.mockImplementation((actionName) => {
-        if (actionName === `${module}/setInitData`) {
-          mockSetInitData();
-        } else if (actionName === `${module}/showPodLogs`) {
-          mockShowPodLogs();
-        } else if (actionName === `${module}/fetchEnvironments`) {
-          mockFetchEnvs();
-          mockShowPodLogs();
-        }
-      });
-
-      initWrapper();
-    });
-
-    afterEach(() => {
-      scrollDown.mockReset();
-      updateControlBtnsMock.mockReset();
-    });
-
-    it('does not display an alert to upgrade to ES', () => {
-      expect(findElasticsearchNotice().exists()).toBe(false);
-    });
-
-    it('populates environments dropdown', () => {
-      const items = findEnvironmentsDropdown().findAll(GlDropdownItem);
-      expect(findEnvironmentsDropdown().props('text')).toBe(mockEnvName);
-      expect(items.length).toBe(mockEnvironments.length);
-      mockEnvironments.forEach((env, i) => {
-        const item = items.at(i);
-        expect(item.text()).toBe(env.name);
-      });
-    });
-
-    it('dropdown has one environment selected', () => {
-      const items = findEnvironmentsDropdown().findAll(GlDropdownItem);
-      mockEnvironments.forEach((env, i) => {
-        const item = items.at(i);
-
-        if (item.text() !== mockEnvName) {
-          expect(item.find(GlDropdownItem).attributes('ischecked')).toBeFalsy();
-        } else {
-          expect(item.find(GlDropdownItem).attributes('ischecked')).toBeTruthy();
-        }
-      });
-    });
-
-    it('displays advanced filters for elasticsearch logs API', () => {
-      expect(findSimpleFilters().exists()).toBe(false);
-      expect(findAdvancedFilters().exists()).toBe(true);
-    });
-
-    it('shows infinite scroll with content', () => {
-      expect(getInfiniteScrollAttr('fetched-items')).toBe(mockTrace.length);
-    });
-
-    it('populates logs trace', () => {
-      const trace = findLogTrace();
-      expect(trace.text().split('\n').length).toBe(mockTrace.length);
-      expect(trace.text().split('\n')).toEqual(mockTrace);
-    });
-
-    it('populates footer', () => {
-      const footer = findLogFooter().text();
-
-      expect(footer).toContain(`${mockLogsResult.length} results`);
-    });
-
-    describe('when user clicks', () => {
-      it('environment name, trace is refreshed', () => {
-        const items = findEnvironmentsDropdown().findAll(GlDropdownItem);
-        const index = 1; // any env
-
-        expect(dispatch).not.toHaveBeenCalledWith(`${module}/showEnvironment`, expect.anything());
-
-        items.at(index).vm.$emit('click');
-
-        expect(dispatch).toHaveBeenCalledWith(
-          `${module}/showEnvironment`,
-          mockEnvironments[index].name,
-        );
-      });
-
-      it('refresh button, trace is refreshed', () => {
-        expect(dispatch).not.toHaveBeenCalledWith(`${module}/refreshPodLogs`, undefined);
-
-        findLogControlButtons().vm.$emit('refresh');
-
-        expect(dispatch).toHaveBeenCalledWith(`${module}/refreshPodLogs`, undefined);
-      });
-    });
-  });
-
-  describe('listeners', () => {
-    beforeEach(() => {
-      initWrapper();
-    });
-
-    it('attaches listeners in components', () => {
-      expect(findInfiniteScroll().vm.$listeners).toEqual({
-        topReached: expect.any(Function),
-        scroll: expect.any(Function),
-      });
-    });
-
-    it('`topReached` when not loading', () => {
-      expect(store.dispatch).not.toHaveBeenCalledWith(`${module}/fetchMoreLogsPrepend`, undefined);
-
-      findInfiniteScroll().vm.$emit('topReached');
-
-      expect(store.dispatch).toHaveBeenCalledWith(`${module}/fetchMoreLogsPrepend`, undefined);
-    });
-
-    it('`topReached` does not fetches more logs when already loading', () => {
-      state.logs.isLoading = true;
-      findInfiniteScroll().vm.$emit('topReached');
-
-      expect(store.dispatch).not.toHaveBeenCalledWith(`${module}/fetchMoreLogsPrepend`, undefined);
-    });
-
-    it('`topReached` fetches more logs', () => {
-      state.logs.isLoading = true;
-      findInfiniteScroll().vm.$emit('topReached');
-
-      expect(store.dispatch).not.toHaveBeenCalledWith(`${module}/fetchMoreLogsPrepend`, undefined);
-    });
-
-    it('`scroll` on a scrollable target results in enabled scroll buttons', async () => {
-      const target = { scrollTop: 10, clientHeight: 10, scrollHeight: 21 };
-
-      state.logs.isLoading = true;
-      findInfiniteScroll().vm.$emit('scroll', { target });
-
-      await nextTick();
-      expect(findLogControlButtons().props('scrollDownButtonDisabled')).toEqual(false);
-    });
-
-    it('`scroll` on a non-scrollable target in disabled scroll buttons', async () => {
-      const target = { scrollTop: 10, clientHeight: 10, scrollHeight: 20 };
-
-      state.logs.isLoading = true;
-      findInfiniteScroll().vm.$emit('scroll', { target });
-
-      await nextTick();
-      expect(findLogControlButtons().props('scrollDownButtonDisabled')).toEqual(true);
-    });
-
-    it('`scroll` on no target results in disabled scroll buttons', async () => {
-      state.logs.isLoading = true;
-      findInfiniteScroll().vm.$emit('scroll', { target: undefined });
-
-      await nextTick();
-      expect(findLogControlButtons().props('scrollDownButtonDisabled')).toEqual(true);
-    });
-  });
-});
diff --git a/spec/frontend/logs/components/log_advanced_filters_spec.js b/spec/frontend/logs/components/log_advanced_filters_spec.js
deleted file mode 100644
index 4e4052eb4d8..00000000000
--- a/spec/frontend/logs/components/log_advanced_filters_spec.js
+++ /dev/null
@@ -1,175 +0,0 @@
-import { GlFilteredSearch } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import { convertToFixedRange } from '~/lib/utils/datetime_range';
-import LogAdvancedFilters from '~/logs/components/log_advanced_filters.vue';
-import { TOKEN_TYPE_POD_NAME } from '~/logs/constants';
-import { createStore } from '~/logs/stores';
-import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
-import { defaultTimeRange } from '~/vue_shared/constants';
-import { mockPods, mockSearch } from '../mock_data';
-
-const module = 'environmentLogs';
-
-describe('LogAdvancedFilters', () => {
-  let store;
-  let dispatch;
-  let wrapper;
-  let state;
-
-  const findFilteredSearch = () => wrapper.find(GlFilteredSearch);
-  const findTimeRangePicker = () => wrapper.find({ ref: 'dateTimePicker' });
-  const getSearchToken = (type) =>
-    findFilteredSearch()
-      .props('availableTokens')
-      .filter((token) => token.type === type)[0];
-
-  const mockStateLoading = () => {
-    state.timeRange.selected = defaultTimeRange;
-    state.timeRange.current = convertToFixedRange(defaultTimeRange);
-    state.pods.options = [];
-    state.pods.current = null;
-    state.logs.isLoading = true;
-  };
-
-  const mockStateWithData = () => {
-    state.timeRange.selected = defaultTimeRange;
-    state.timeRange.current = convertToFixedRange(defaultTimeRange);
-    state.pods.options = mockPods;
-    state.pods.current = null;
-    state.logs.isLoading = false;
-  };
-
-  const initWrapper = (propsData = {}) => {
-    wrapper = shallowMount(LogAdvancedFilters, {
-      propsData: {
-        ...propsData,
-      },
-      store,
-    });
-  };
-
-  beforeEach(() => {
-    store = createStore();
-    state = store.state.environmentLogs;
-
-    jest.spyOn(store, 'dispatch').mockResolvedValue();
-
-    dispatch = store.dispatch;
-  });
-
-  afterEach(() => {
-    store.dispatch.mockReset();
-
-    if (wrapper) {
-      wrapper.destroy();
-    }
-  });
-
-  it('displays UI elements', () => {
-    initWrapper();
-
-    expect(findFilteredSearch().exists()).toBe(true);
-    expect(findTimeRangePicker().exists()).toBe(true);
-  });
-
-  it('displays search tokens', () => {
-    initWrapper();
-
-    expect(getSearchToken(TOKEN_TYPE_POD_NAME)).toMatchObject({
-      title: 'Pod name',
-      unique: true,
-      operators: OPERATOR_IS_ONLY,
-    });
-  });
-
-  describe('disabled state', () => {
-    beforeEach(() => {
-      mockStateLoading();
-      initWrapper({
-        disabled: true,
-      });
-    });
-
-    it('displays disabled filters', () => {
-      expect(findFilteredSearch().attributes('disabled')).toBeTruthy();
-      expect(findTimeRangePicker().attributes('disabled')).toBeTruthy();
-    });
-  });
-
-  describe('when the state is loading', () => {
-    beforeEach(() => {
-      mockStateLoading();
-      initWrapper();
-    });
-
-    it('displays a disabled search', () => {
-      expect(findFilteredSearch().attributes('disabled')).toBeTruthy();
-    });
-
-    it('displays an enable date filter', () => {
-      expect(findTimeRangePicker().attributes('disabled')).toBeFalsy();
-    });
-
-    it('displays no pod options when no pods are available, so suggestions can be displayed', () => {
-      expect(getSearchToken(TOKEN_TYPE_POD_NAME).options).toBe(null);
-      expect(getSearchToken(TOKEN_TYPE_POD_NAME).loading).toBe(true);
-    });
-  });
-
-  describe('when the state has data', () => {
-    beforeEach(() => {
-      mockStateWithData();
-      initWrapper();
-    });
-
-    it('displays a single token for pods', () => {
-      initWrapper();
-
-      const tokens = findFilteredSearch().props('availableTokens');
-
-      expect(tokens).toHaveLength(1);
-      expect(tokens[0].type).toBe(TOKEN_TYPE_POD_NAME);
-    });
-
-    it('displays a enabled filters', () => {
-      expect(findFilteredSearch().attributes('disabled')).toBeFalsy();
-      expect(findTimeRangePicker().attributes('disabled')).toBeFalsy();
-    });
-
-    it('displays options in the pods token', () => {
-      const { options } = getSearchToken(TOKEN_TYPE_POD_NAME);
-
-      expect(options).toHaveLength(mockPods.length);
-    });
-
-    it('displays options in date time picker', () => {
-      const options = findTimeRangePicker().props('options');
-
-      expect(options).toEqual(expect.any(Array));
-      expect(options.length).toBeGreaterThan(0);
-    });
-
-    describe('when the user interacts', () => {
-      it('clicks on the search button, showFilteredLogs is dispatched', () => {
-        findFilteredSearch().vm.$emit('submit', null);
-
-        expect(dispatch).toHaveBeenCalledWith(`${module}/showFilteredLogs`, null);
-      });
-
-      it('clicks on the search button, showFilteredLogs is dispatched with null', () => {
-        findFilteredSearch().vm.$emit('submit', [mockSearch]);
-
-        expect(dispatch).toHaveBeenCalledWith(`${module}/showFilteredLogs`, [mockSearch]);
-      });
-
-      it('selects a new time range', () => {
-        expect(findTimeRangePicker().attributes('disabled')).toBeFalsy();
-
-        const mockRange = { start: 'START_DATE', end: 'END_DATE' };
-        findTimeRangePicker().vm.$emit('input', mockRange);
-
-        expect(dispatch).toHaveBeenCalledWith(`${module}/setTimeRange`, mockRange);
-      });
-    });
-  });
-});
diff --git a/spec/frontend/logs/components/log_control_buttons_spec.js b/spec/frontend/logs/components/log_control_buttons_spec.js
deleted file mode 100644
index e249272b87d..00000000000
--- a/spec/frontend/logs/components/log_control_buttons_spec.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { GlButton } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import LogControlButtons from '~/logs/components/log_control_buttons.vue';
-
-describe('LogControlButtons', () => {
-  let wrapper;
-
-  const findScrollToTop = () => wrapper.find('.js-scroll-to-top');
-  const findScrollToBottom = () => wrapper.find('.js-scroll-to-bottom');
-  const findRefreshBtn = () => wrapper.find('.js-refresh-log');
-
-  const initWrapper = (opts) => {
-    wrapper = shallowMount(LogControlButtons, {
-      listeners: {
-        scrollUp: () => {},
-        scrollDown: () => {},
-      },
-      ...opts,
-    });
-  };
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-    }
-  });
-
-  it('displays UI elements', () => {
-    initWrapper();
-
-    expect(findScrollToTop().is(GlButton)).toBe(true);
-    expect(findScrollToBottom().is(GlButton)).toBe(true);
-    expect(findRefreshBtn().is(GlButton)).toBe(true);
-  });
-
-  it('emits a `refresh` event on click on `refresh` button', async () => {
-    initWrapper();
-
-    // An `undefined` value means no event was emitted
-    expect(wrapper.emitted('refresh')).toBe(undefined);
-
-    findRefreshBtn().vm.$emit('click');
-
-    await nextTick();
-    expect(wrapper.emitted('refresh')).toHaveLength(1);
-  });
-
-  describe('when scrolling actions are enabled', () => {
-    beforeEach(async () => {
-      // mock scrolled to the middle of a long page
-      initWrapper();
-      await nextTick();
-    });
-
-    it('click on "scroll to top" scrolls up', () => {
-      expect(findScrollToTop().attributes('disabled')).toBeUndefined();
-
-      findScrollToTop().vm.$emit('click');
-
-      expect(wrapper.emitted('scrollUp')).toHaveLength(1);
-    });
-
-    it('click on "scroll to bottom" scrolls down', () => {
-      expect(findScrollToBottom().attributes('disabled')).toBeUndefined();
-
-      findScrollToBottom().vm.$emit('click');
-
-      expect(wrapper.emitted('scrollDown')).toHaveLength(1);
-    });
-  });
-
-  describe('when scrolling actions are disabled', () => {
-    beforeEach(async () => {
-      initWrapper({ listeners: {} });
-      await nextTick();
-    });
-
-    it('buttons are disabled', async () => {
-      await nextTick();
-      expect(findScrollToTop().exists()).toBe(false);
-      expect(findScrollToBottom().exists()).toBe(false);
-      // This should be enabled when gitlab-ui contains:
-      // https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1149
-      // expect(findScrollToBottom().is('[disabled]')).toBe(true);
-    });
-  });
-});
diff --git a/spec/frontend/logs/components/log_simple_filters_spec.js b/spec/frontend/logs/components/log_simple_filters_spec.js
deleted file mode 100644
index 04ad2e03542..00000000000
--- a/spec/frontend/logs/components/log_simple_filters_spec.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import { GlDropdownItem } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import LogSimpleFilters from '~/logs/components/log_simple_filters.vue';
-import { createStore } from '~/logs/stores';
-import { mockPods, mockPodName } from '../mock_data';
-
-const module = 'environmentLogs';
-
-describe('LogSimpleFilters', () => {
-  let store;
-  let dispatch;
-  let wrapper;
-  let state;
-
-  const findPodsDropdown = () => wrapper.find({ ref: 'podsDropdown' });
-  const findPodsNoPodsText = () => wrapper.find({ ref: 'noPodsMsg' });
-  const findPodsDropdownItems = () =>
-    findPodsDropdown()
-      .findAll(GlDropdownItem)
-      .filter((item) => !('disabled' in item.attributes()));
-
-  const mockPodsLoading = () => {
-    state.pods.options = [];
-    state.pods.current = null;
-  };
-
-  const mockPodsLoaded = () => {
-    state.pods.options = mockPods;
-    state.pods.current = mockPodName;
-  };
-
-  const initWrapper = (propsData = {}) => {
-    wrapper = shallowMount(LogSimpleFilters, {
-      propsData: {
-        ...propsData,
-      },
-      store,
-    });
-  };
-
-  beforeEach(() => {
-    store = createStore();
-    state = store.state.environmentLogs;
-
-    jest.spyOn(store, 'dispatch').mockResolvedValue();
-
-    dispatch = store.dispatch;
-  });
-
-  afterEach(() => {
-    store.dispatch.mockReset();
-
-    if (wrapper) {
-      wrapper.destroy();
-    }
-  });
-
-  it('displays UI elements', () => {
-    initWrapper();
-
-    expect(findPodsDropdown().exists()).toBe(true);
-  });
-
-  describe('disabled state', () => {
-    beforeEach(() => {
-      mockPodsLoading();
-      initWrapper({
-        disabled: true,
-      });
-    });
-
-    it('displays a disabled pods dropdown', () => {
-      expect(findPodsDropdown().props('text')).toBe('No pod selected');
-      expect(findPodsDropdown().attributes('disabled')).toBeTruthy();
-    });
-  });
-
-  describe('loading state', () => {
-    beforeEach(() => {
-      mockPodsLoading();
-      initWrapper();
-    });
-
-    it('displays an enabled pods dropdown', () => {
-      expect(findPodsDropdown().attributes('disabled')).toBeFalsy();
-      expect(findPodsDropdown().props('text')).toBe('No pod selected');
-    });
-
-    it('displays an empty pods dropdown', () => {
-      expect(findPodsNoPodsText().exists()).toBe(true);
-      expect(findPodsDropdownItems()).toHaveLength(0);
-    });
-  });
-
-  describe('pods available state', () => {
-    beforeEach(() => {
-      mockPodsLoaded();
-      initWrapper();
-    });
-
-    it('displays an enabled pods dropdown', () => {
-      expect(findPodsDropdown().attributes('disabled')).toBeFalsy();
-      expect(findPodsDropdown().props('text')).toBe(mockPods[0]);
-    });
-
-    it('displays a pods dropdown with items', () => {
-      expect(findPodsNoPodsText().exists()).toBe(false);
-      expect(findPodsDropdownItems()).toHaveLength(mockPods.length);
-    });
-
-    it('dropdown has one pod selected', () => {
-      const items = findPodsDropdownItems();
-      mockPods.forEach((pod, i) => {
-        const item = items.at(i);
-        if (item.text() !== mockPodName) {
-          expect(item.find(GlDropdownItem).attributes('ischecked')).toBeFalsy();
-        } else {
-          expect(item.find(GlDropdownItem).attributes('ischecked')).toBeTruthy();
-        }
-      });
-    });
-
-    it('when the user clicks on a pod, showPodLogs is dispatched', () => {
-      const items = findPodsDropdownItems();
-      const index = 2; // any pod
-
-      expect(dispatch).not.toHaveBeenCalledWith(`${module}/showPodLogs`, expect.anything());
-
-      items.at(index).vm.$emit('click');
-
-      expect(dispatch).toHaveBeenCalledWith(`${module}/showPodLogs`, mockPods[index]);
-    });
-  });
-});
diff --git a/spec/frontend/logs/components/tokens/token_with_loading_state_spec.js b/spec/frontend/logs/components/tokens/token_with_loading_state_spec.js
deleted file mode 100644
index f667a590a36..00000000000
--- a/spec/frontend/logs/components/tokens/token_with_loading_state_spec.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { GlFilteredSearchToken, GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-
-import TokenWithLoadingState from '~/logs/components/tokens/token_with_loading_state.vue';
-
-describe('TokenWithLoadingState', () => {
-  let wrapper;
-
-  const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken);
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-
-  const initWrapper = (props = {}, options) => {
-    wrapper = shallowMount(TokenWithLoadingState, {
-      propsData: {
-        cursorPosition: 'start',
-        ...props,
-      },
-      ...options,
-    });
-  };
-
-  beforeEach(() => {});
-
-  it('passes entire config correctly', () => {
-    const config = {
-      icon: 'pod',
-      type: 'pod',
-      title: 'Pod name',
-      unique: true,
-    };
-
-    initWrapper({ config });
-
-    expect(findFilteredSearchToken().props('config')).toEqual(config);
-  });
-
-  describe('suggestions are replaced', () => {
-    let mockNoOptsText;
-    let config;
-    let stubs;
-
-    beforeEach(() => {
-      mockNoOptsText = 'No suggestions available';
-      config = {
-        loading: false,
-        noOptionsText: mockNoOptsText,
-      };
-      stubs = {
-        GlFilteredSearchToken: {
-          template: `<div><slot name="suggestions"></slot></div>`,
-        },
-      };
-    });
-
-    it('renders a loading icon', () => {
-      config.loading = true;
-
-      initWrapper({ config }, { stubs });
-
-      expect(findLoadingIcon().exists()).toBe(true);
-      expect(wrapper.text()).toBe('');
-    });
-
-    it('renders an empty results message', () => {
-      initWrapper({ config }, { stubs });
-
-      expect(findLoadingIcon().exists()).toBe(false);
-      expect(wrapper.text()).toBe(mockNoOptsText);
-    });
-  });
-});
diff --git a/spec/frontend/logs/mock_data.js b/spec/frontend/logs/mock_data.js
deleted file mode 100644
index 14c8f7a2ba2..00000000000
--- a/spec/frontend/logs/mock_data.js
+++ /dev/null
@@ -1,71 +0,0 @@
-const mockProjectPath = 'root/autodevops-deploy';
-
-export const mockEnvName = 'production';
-export const mockEnvironmentsEndpoint = `${mockProjectPath}/environments.json`;
-export const mockEnvId = '99';
-export const mockDocumentationPath = '/documentation.md';
-export const mockLogsEndpoint = '/dummy_logs_path.json';
-export const mockCursor = 'MOCK_CURSOR';
-export const mockNextCursor = 'MOCK_NEXT_CURSOR';
-
-const makeMockEnvironment = (id, name, advancedQuerying) => ({
-  id,
-  project_path: mockProjectPath,
-  name,
-  logs_api_path: mockLogsEndpoint,
-  enable_advanced_logs_querying: advancedQuerying,
-});
-
-export const mockEnvironment = makeMockEnvironment(mockEnvId, mockEnvName, true);
-export const mockEnvironments = [
-  mockEnvironment,
-  makeMockEnvironment(101, 'staging', false),
-  makeMockEnvironment(102, 'review/a-feature', false),
-];
-
-export const mockPodName = 'production-764c58d697-aaaaa';
-export const mockPods = [
-  mockPodName,
-  'production-764c58d697-bbbbb',
-  'production-764c58d697-ccccc',
-  'production-764c58d697-ddddd',
-];
-
-export const mockLogsResult = [
-  {
-    timestamp: '2019-12-13T13:43:18.2760123Z',
-    message: 'log line 1',
-    pod: 'foo',
-  },
-  {
-    timestamp: '2019-12-13T13:43:18.2760123Z',
-    message: 'log line A',
-    pod: 'bar',
-  },
-  {
-    timestamp: '2019-12-13T13:43:26.8420123Z',
-    message: 'log line 2',
-    pod: 'foo',
-  },
-  {
-    timestamp: '2019-12-13T13:43:26.8420123Z',
-    message: 'log line B',
-    pod: 'bar',
-  },
-];
-
-export const mockTrace = [
-  'Dec 13 13:43:18.276 | foo | log line 1',
-  'Dec 13 13:43:18.276 | bar | log line A',
-  'Dec 13 13:43:26.842 | foo | log line 2',
-  'Dec 13 13:43:26.842 | bar | log line B',
-];
-
-export const mockResponse = {
-  pod_name: mockPodName,
-  pods: mockPods,
-  logs: mockLogsResult,
-  cursor: mockNextCursor,
-};
-
-export const mockSearch = 'foo +bar';
diff --git a/spec/frontend/logs/stores/actions_spec.js b/spec/frontend/logs/stores/actions_spec.js
deleted file mode 100644
index 46ef1500a20..00000000000
--- a/spec/frontend/logs/stores/actions_spec.js
+++ /dev/null
@@ -1,521 +0,0 @@
-import MockAdapter from 'axios-mock-adapter';
-import testAction from 'helpers/vuex_action_helper';
-import axios from '~/lib/utils/axios_utils';
-import { convertToFixedRange } from '~/lib/utils/datetime_range';
-import { TOKEN_TYPE_POD_NAME } from '~/logs/constants';
-import {
-  setInitData,
-  showFilteredLogs,
-  showPodLogs,
-  fetchEnvironments,
-  fetchLogs,
-  fetchMoreLogsPrepend,
-} from '~/logs/stores/actions';
-import * as types from '~/logs/stores/mutation_types';
-import logsPageState from '~/logs/stores/state';
-import Tracking from '~/tracking';
-
-import { defaultTimeRange } from '~/vue_shared/constants';
-
-import {
-  mockPodName,
-  mockEnvironmentsEndpoint,
-  mockEnvironments,
-  mockPods,
-  mockLogsResult,
-  mockEnvName,
-  mockSearch,
-  mockLogsEndpoint,
-  mockResponse,
-  mockCursor,
-  mockNextCursor,
-} from '../mock_data';
-
-jest.mock('~/lib/utils/datetime_range');
-jest.mock('~/logs/utils');
-
-const mockDefaultRange = {
-  start: '2020-01-10T18:00:00.000Z',
-  end: '2020-01-10T19:00:00.000Z',
-};
-const mockFixedRange = {
-  start: '2020-01-09T18:06:20.000Z',
-  end: '2020-01-09T18:36:20.000Z',
-};
-const mockRollingRange = {
-  duration: 120,
-};
-const mockRollingRangeAsFixed = {
-  start: '2020-01-10T18:00:00.000Z',
-  end: '2020-01-10T17:58:00.000Z',
-};
-
-describe('Logs Store actions', () => {
-  let state;
-  let mock;
-
-  const latestGetParams = () => mock.history.get[mock.history.get.length - 1].params;
-
-  convertToFixedRange.mockImplementation((range) => {
-    if (range === defaultTimeRange) {
-      return { ...mockDefaultRange };
-    }
-    if (range === mockFixedRange) {
-      return { ...mockFixedRange };
-    }
-    if (range === mockRollingRange) {
-      return { ...mockRollingRangeAsFixed };
-    }
-    throw new Error('Invalid time range');
-  });
-
-  beforeEach(() => {
-    state = logsPageState();
-  });
-
-  describe('setInitData', () => {
-    it('should commit environment and pod name mutation', () =>
-      testAction(
-        setInitData,
-        { timeRange: mockFixedRange, environmentName: mockEnvName, podName: mockPodName },
-        state,
-        [
-          { type: types.SET_TIME_RANGE, payload: mockFixedRange },
-          { type: types.SET_PROJECT_ENVIRONMENT, payload: mockEnvName },
-          { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
-        ],
-      ));
-  });
-
-  describe('showFilteredLogs', () => {
-    it('empty search should filter with defaults', () =>
-      testAction(
-        showFilteredLogs,
-        undefined,
-        state,
-        [
-          { type: types.SET_CURRENT_POD_NAME, payload: null },
-          { type: types.SET_SEARCH, payload: '' },
-        ],
-        [{ type: 'fetchLogs', payload: 'used_search_bar' }],
-      ));
-
-    it('text search should filter with a search term', () =>
-      testAction(
-        showFilteredLogs,
-        [mockSearch],
-        state,
-        [
-          { type: types.SET_CURRENT_POD_NAME, payload: null },
-          { type: types.SET_SEARCH, payload: mockSearch },
-        ],
-        [{ type: 'fetchLogs', payload: 'used_search_bar' }],
-      ));
-
-    it('pod search should filter with a search term', () =>
-      testAction(
-        showFilteredLogs,
-        [{ type: TOKEN_TYPE_POD_NAME, value: { data: mockPodName, operator: '=' } }],
-        state,
-        [
-          { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
-          { type: types.SET_SEARCH, payload: '' },
-        ],
-        [{ type: 'fetchLogs', payload: 'used_search_bar' }],
-      ));
-
-    it('pod search should filter with a pod selection and a search term', () =>
-      testAction(
-        showFilteredLogs,
-        [{ type: TOKEN_TYPE_POD_NAME, value: { data: mockPodName, operator: '=' } }, mockSearch],
-        state,
-        [
-          { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
-          { type: types.SET_SEARCH, payload: mockSearch },
-        ],
-        [{ type: 'fetchLogs', payload: 'used_search_bar' }],
-      ));
-
-    it('pod search should filter with a pod selection and two search terms', () =>
-      testAction(
-        showFilteredLogs,
-        ['term1', 'term2'],
-        state,
-        [
-          { type: types.SET_CURRENT_POD_NAME, payload: null },
-          { type: types.SET_SEARCH, payload: `term1 term2` },
-        ],
-        [{ type: 'fetchLogs', payload: 'used_search_bar' }],
-      ));
-
-    it('pod search should filter with a pod selection and a search terms before and after', () =>
-      testAction(
-        showFilteredLogs,
-        [
-          'term1',
-          { type: TOKEN_TYPE_POD_NAME, value: { data: mockPodName, operator: '=' } },
-          'term2',
-        ],
-        state,
-        [
-          { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
-          { type: types.SET_SEARCH, payload: `term1 term2` },
-        ],
-        [{ type: 'fetchLogs', payload: 'used_search_bar' }],
-      ));
-  });
-
-  describe('showPodLogs', () => {
-    it('should commit pod name', () =>
-      testAction(
-        showPodLogs,
-        mockPodName,
-        state,
-        [{ type: types.SET_CURRENT_POD_NAME, payload: mockPodName }],
-        [{ type: 'fetchLogs', payload: 'pod_log_changed' }],
-      ));
-  });
-
-  describe('fetchEnvironments', () => {
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
-    });
-
-    it('should commit RECEIVE_ENVIRONMENTS_DATA_SUCCESS mutation on correct data', () => {
-      mock.onGet(mockEnvironmentsEndpoint).replyOnce(200, mockEnvironments);
-      return testAction(
-        fetchEnvironments,
-        mockEnvironmentsEndpoint,
-        state,
-        [
-          { type: types.REQUEST_ENVIRONMENTS_DATA },
-          { type: types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS, payload: mockEnvironments },
-        ],
-        [{ type: 'fetchLogs', payload: 'environment_selected' }],
-      );
-    });
-
-    it('should commit RECEIVE_ENVIRONMENTS_DATA_ERROR on wrong data', () => {
-      mock.onGet(mockEnvironmentsEndpoint).replyOnce(500);
-      return testAction(
-        fetchEnvironments,
-        mockEnvironmentsEndpoint,
-        state,
-        [
-          { type: types.REQUEST_ENVIRONMENTS_DATA },
-          { type: types.RECEIVE_ENVIRONMENTS_DATA_ERROR },
-        ],
-        [],
-      );
-    });
-  });
-
-  describe('when the backend responds succesfully', () => {
-    let expectedMutations;
-    let expectedActions;
-
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
-      mock.onGet(mockLogsEndpoint).reply(200, mockResponse);
-      mock.onGet(mockLogsEndpoint).replyOnce(202); // mock reactive cache
-
-      state.environments.options = mockEnvironments;
-      state.environments.current = mockEnvName;
-    });
-
-    afterEach(() => {
-      mock.reset();
-    });
-
-    describe('fetchLogs', () => {
-      beforeEach(() => {
-        expectedMutations = [
-          { type: types.REQUEST_LOGS_DATA },
-          {
-            type: types.RECEIVE_LOGS_DATA_SUCCESS,
-            payload: { logs: mockLogsResult, cursor: mockNextCursor },
-          },
-          { type: types.SET_CURRENT_POD_NAME, payload: mockPodName },
-          { type: types.RECEIVE_PODS_DATA_SUCCESS, payload: mockPods },
-        ];
-
-        expectedActions = [];
-      });
-
-      it('should commit logs and pod data when there is pod name defined', () => {
-        state.pods.current = mockPodName;
-        state.timeRange.current = mockFixedRange;
-
-        return testAction(fetchLogs, null, state, expectedMutations, expectedActions, () => {
-          expect(latestGetParams()).toMatchObject({
-            pod_name: mockPodName,
-          });
-        });
-      });
-
-      it('should commit logs and pod data when there is pod name defined and a non-default date range', () => {
-        state.pods.current = mockPodName;
-        state.timeRange.current = mockFixedRange;
-        state.logs.cursor = mockCursor;
-
-        return testAction(fetchLogs, null, state, expectedMutations, expectedActions, () => {
-          expect(latestGetParams()).toEqual({
-            pod_name: mockPodName,
-            start_time: mockFixedRange.start,
-            end_time: mockFixedRange.end,
-            cursor: mockCursor,
-          });
-        });
-      });
-
-      it('should commit logs and pod data when there is pod name and search and a faulty date range', () => {
-        state.pods.current = mockPodName;
-        state.search = mockSearch;
-        state.timeRange.current = 'INVALID_TIME_RANGE';
-
-        expectedMutations.splice(1, 0, {
-          type: types.SHOW_TIME_RANGE_INVALID_WARNING,
-        });
-
-        return testAction(fetchLogs, null, state, expectedMutations, expectedActions, () => {
-          expect(latestGetParams()).toEqual({
-            pod_name: mockPodName,
-            search: mockSearch,
-          });
-        });
-      });
-
-      it('should commit logs and pod data when no pod name defined', () => {
-        state.timeRange.current = defaultTimeRange;
-
-        return testAction(fetchLogs, null, state, expectedMutations, expectedActions, () => {
-          expect(latestGetParams()).toEqual({
-            start_time: expect.any(String),
-            end_time: expect.any(String),
-          });
-        });
-      });
-    });
-
-    describe('fetchMoreLogsPrepend', () => {
-      beforeEach(() => {
-        expectedMutations = [
-          { type: types.REQUEST_LOGS_DATA_PREPEND },
-          {
-            type: types.RECEIVE_LOGS_DATA_PREPEND_SUCCESS,
-            payload: { logs: mockLogsResult, cursor: mockNextCursor },
-          },
-        ];
-
-        expectedActions = [];
-      });
-
-      it('should commit logs and pod data when there is pod name defined', () => {
-        state.pods.current = mockPodName;
-        state.timeRange.current = mockFixedRange;
-
-        expectedActions = [];
-
-        return testAction(
-          fetchMoreLogsPrepend,
-          null,
-          state,
-          expectedMutations,
-          expectedActions,
-          () => {
-            expect(latestGetParams()).toMatchObject({
-              pod_name: mockPodName,
-            });
-          },
-        );
-      });
-
-      it('should commit logs and pod data when there is pod name defined and a non-default date range', () => {
-        state.pods.current = mockPodName;
-        state.timeRange.current = mockFixedRange;
-        state.logs.cursor = mockCursor;
-
-        return testAction(
-          fetchMoreLogsPrepend,
-          null,
-          state,
-          expectedMutations,
-          expectedActions,
-          () => {
-            expect(latestGetParams()).toEqual({
-              pod_name: mockPodName,
-              start_time: mockFixedRange.start,
-              end_time: mockFixedRange.end,
-              cursor: mockCursor,
-            });
-          },
-        );
-      });
-
-      it('should commit logs and pod data when there is pod name and search and a faulty date range', () => {
-        state.pods.current = mockPodName;
-        state.search = mockSearch;
-        state.timeRange.current = 'INVALID_TIME_RANGE';
-
-        expectedMutations.splice(1, 0, {
-          type: types.SHOW_TIME_RANGE_INVALID_WARNING,
-        });
-
-        return testAction(
-          fetchMoreLogsPrepend,
-          null,
-          state,
-          expectedMutations,
-          expectedActions,
-          () => {
-            expect(latestGetParams()).toEqual({
-              pod_name: mockPodName,
-              search: mockSearch,
-            });
-          },
-        );
-      });
-
-      it('should commit logs and pod data when no pod name defined', () => {
-        state.timeRange.current = defaultTimeRange;
-
-        return testAction(
-          fetchMoreLogsPrepend,
-          null,
-          state,
-          expectedMutations,
-          expectedActions,
-          () => {
-            expect(latestGetParams()).toEqual({
-              start_time: expect.any(String),
-              end_time: expect.any(String),
-            });
-          },
-        );
-      });
-
-      it('should not commit logs or pod data when it has reached the end', () => {
-        state.logs.isComplete = true;
-        state.logs.cursor = null;
-
-        return testAction(
-          fetchMoreLogsPrepend,
-          null,
-          state,
-          [], // no mutations done
-          [], // no actions dispatched
-          () => {
-            expect(mock.history.get).toHaveLength(0);
-          },
-        );
-      });
-    });
-  });
-
-  describe('when the backend responds with an error', () => {
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
-      mock.onGet(mockLogsEndpoint).reply(500);
-    });
-
-    afterEach(() => {
-      mock.reset();
-    });
-
-    it('fetchLogs should commit logs and pod errors', () => {
-      state.environments.options = mockEnvironments;
-      state.environments.current = mockEnvName;
-      state.timeRange.current = defaultTimeRange;
-
-      return testAction(
-        fetchLogs,
-        null,
-        state,
-        [
-          { type: types.REQUEST_LOGS_DATA },
-          { type: types.RECEIVE_PODS_DATA_ERROR },
-          { type: types.RECEIVE_LOGS_DATA_ERROR },
-        ],
-        [],
-        () => {
-          expect(mock.history.get[0].url).toBe(mockLogsEndpoint);
-        },
-      );
-    });
-
-    it('fetchMoreLogsPrepend should commit logs and pod errors', () => {
-      state.environments.options = mockEnvironments;
-      state.environments.current = mockEnvName;
-      state.timeRange.current = defaultTimeRange;
-
-      return testAction(
-        fetchMoreLogsPrepend,
-        null,
-        state,
-        [
-          { type: types.REQUEST_LOGS_DATA_PREPEND },
-          { type: types.RECEIVE_LOGS_DATA_PREPEND_ERROR },
-        ],
-        [],
-        () => {
-          expect(mock.history.get[0].url).toBe(mockLogsEndpoint);
-        },
-      );
-    });
-  });
-});
-
-describe('Tracking user interaction', () => {
-  let commit;
-  let dispatch;
-  let state;
-  let mock;
-
-  beforeEach(() => {
-    jest.spyOn(Tracking, 'event');
-    commit = jest.fn();
-    dispatch = jest.fn();
-    state = logsPageState();
-    state.environments.options = mockEnvironments;
-    state.environments.current = mockEnvName;
-
-    mock = new MockAdapter(axios);
-  });
-
-  afterEach(() => {
-    mock.reset();
-  });
-
-  describe('Logs with data', () => {
-    beforeEach(() => {
-      mock.onGet(mockLogsEndpoint).reply(200, mockResponse);
-      mock.onGet(mockLogsEndpoint).replyOnce(202); // mock reactive cache
-    });
-
-    it('tracks fetched logs with data', () => {
-      return fetchLogs({ state, commit, dispatch }, 'environment_selected').then(() => {
-        expect(Tracking.event).toHaveBeenCalledWith(document.body.dataset.page, 'logs_view', {
-          label: 'environment_selected',
-          property: 'count',
-          value: 1,
-        });
-      });
-    });
-  });
-
-  describe('Logs without data', () => {
-    beforeEach(() => {
-      mock.onGet(mockLogsEndpoint).reply(200, {
-        ...mockResponse,
-        logs: [],
-      });
-      mock.onGet(mockLogsEndpoint).replyOnce(202); // mock reactive cache
-    });
-
-    it('does not track empty log responses', () => {
-      return fetchLogs({ state, commit, dispatch }).then(() => {
-        expect(Tracking.event).not.toHaveBeenCalled();
-      });
-    });
-  });
-});
diff --git a/spec/frontend/logs/stores/getters_spec.js b/spec/frontend/logs/stores/getters_spec.js
deleted file mode 100644
index 9d213d8c01f..00000000000
--- a/spec/frontend/logs/stores/getters_spec.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { trace, showAdvancedFilters } from '~/logs/stores/getters';
-import logsPageState from '~/logs/stores/state';
-
-import { mockLogsResult, mockTrace, mockEnvName, mockEnvironments } from '../mock_data';
-
-describe('Logs Store getters', () => {
-  let state;
-
-  beforeEach(() => {
-    state = logsPageState();
-  });
-
-  describe('trace', () => {
-    describe('when state is initialized', () => {
-      it('returns an empty string', () => {
-        expect(trace(state)).toEqual('');
-      });
-    });
-
-    describe('when state logs are empty', () => {
-      beforeEach(() => {
-        state.logs.lines = [];
-      });
-
-      it('returns an empty string', () => {
-        expect(trace(state)).toEqual('');
-      });
-    });
-
-    describe('when state logs are set', () => {
-      beforeEach(() => {
-        state.logs.lines = mockLogsResult;
-      });
-
-      it('returns an empty string', () => {
-        expect(trace(state)).toEqual(mockTrace.join('\n'));
-      });
-    });
-  });
-
-  describe('showAdvancedFilters', () => {
-    describe('when no environments are set', () => {
-      beforeEach(() => {
-        state.environments.current = mockEnvName;
-        state.environments.options = [];
-      });
-
-      it('returns false', () => {
-        expect(showAdvancedFilters(state)).toBe(false);
-      });
-    });
-
-    describe('when the environment supports filters', () => {
-      beforeEach(() => {
-        state.environments.current = mockEnvName;
-        state.environments.options = mockEnvironments;
-      });
-
-      it('returns true', () => {
-        expect(showAdvancedFilters(state)).toBe(true);
-      });
-    });
-
-    describe('when the environment does not support filters', () => {
-      beforeEach(() => {
-        state.environments.options = mockEnvironments;
-        state.environments.current = mockEnvironments[1].name;
-      });
-
-      it('returns true', () => {
-        expect(showAdvancedFilters(state)).toBe(false);
-      });
-    });
-  });
-});
diff --git a/spec/frontend/logs/stores/mutations_spec.js b/spec/frontend/logs/stores/mutations_spec.js
deleted file mode 100644
index 988197a8350..00000000000
--- a/spec/frontend/logs/stores/mutations_spec.js
+++ /dev/null
@@ -1,257 +0,0 @@
-import * as types from '~/logs/stores/mutation_types';
-import mutations from '~/logs/stores/mutations';
-
-import logsPageState from '~/logs/stores/state';
-import {
-  mockEnvName,
-  mockEnvironments,
-  mockPods,
-  mockPodName,
-  mockLogsResult,
-  mockSearch,
-  mockCursor,
-  mockNextCursor,
-} from '../mock_data';
-
-describe('Logs Store Mutations', () => {
-  let state;
-
-  beforeEach(() => {
-    state = logsPageState();
-  });
-
-  it('ensures mutation types are correctly named', () => {
-    Object.keys(types).forEach((k) => {
-      expect(k).toEqual(types[k]);
-    });
-  });
-
-  describe('SET_PROJECT_ENVIRONMENT', () => {
-    it('sets the environment', () => {
-      mutations[types.SET_PROJECT_ENVIRONMENT](state, mockEnvName);
-      expect(state.environments.current).toEqual(mockEnvName);
-    });
-  });
-
-  describe('SET_SEARCH', () => {
-    it('sets the search', () => {
-      mutations[types.SET_SEARCH](state, mockSearch);
-      expect(state.search).toEqual(mockSearch);
-    });
-  });
-
-  describe('REQUEST_ENVIRONMENTS_DATA', () => {
-    it('inits data', () => {
-      mutations[types.REQUEST_ENVIRONMENTS_DATA](state);
-      expect(state.environments.options).toEqual([]);
-      expect(state.environments.isLoading).toEqual(true);
-    });
-  });
-
-  describe('RECEIVE_ENVIRONMENTS_DATA_SUCCESS', () => {
-    it('receives environments data and stores it as options', () => {
-      expect(state.environments.options).toEqual([]);
-
-      mutations[types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS](state, mockEnvironments);
-
-      expect(state.environments.options).toEqual(mockEnvironments);
-      expect(state.environments.isLoading).toEqual(false);
-    });
-  });
-
-  describe('RECEIVE_ENVIRONMENTS_DATA_ERROR', () => {
-    it('captures an error loading environments', () => {
-      mutations[types.RECEIVE_ENVIRONMENTS_DATA_ERROR](state);
-
-      expect(state.environments).toEqual({
-        options: [],
-        isLoading: false,
-        current: null,
-        fetchError: true,
-      });
-    });
-  });
-
-  describe('REQUEST_LOGS_DATA', () => {
-    it('starts loading for logs', () => {
-      mutations[types.REQUEST_LOGS_DATA](state);
-
-      expect(state.timeRange.current).toEqual({
-        start: expect.any(String),
-        end: expect.any(String),
-      });
-
-      expect(state.logs).toEqual({
-        lines: [],
-        cursor: null,
-        fetchError: false,
-        isLoading: true,
-        isComplete: false,
-      });
-    });
-  });
-
-  describe('RECEIVE_LOGS_DATA_SUCCESS', () => {
-    it('receives logs lines and cursor', () => {
-      mutations[types.RECEIVE_LOGS_DATA_SUCCESS](state, {
-        logs: mockLogsResult,
-        cursor: mockCursor,
-      });
-
-      expect(state.logs).toEqual({
-        lines: mockLogsResult,
-        isLoading: false,
-        cursor: mockCursor,
-        isComplete: false,
-        fetchError: false,
-      });
-    });
-
-    it('receives logs lines and a null cursor to indicate the end', () => {
-      mutations[types.RECEIVE_LOGS_DATA_SUCCESS](state, {
-        logs: mockLogsResult,
-        cursor: null,
-      });
-
-      expect(state.logs).toEqual({
-        lines: mockLogsResult,
-        isLoading: false,
-        cursor: null,
-        isComplete: true,
-        fetchError: false,
-      });
-    });
-  });
-
-  describe('RECEIVE_LOGS_DATA_ERROR', () => {
-    it('receives log data error and stops loading', () => {
-      mutations[types.RECEIVE_LOGS_DATA_ERROR](state);
-
-      expect(state.logs).toEqual({
-        lines: [],
-        isLoading: false,
-        cursor: null,
-        isComplete: false,
-        fetchError: true,
-      });
-    });
-  });
-
-  describe('REQUEST_LOGS_DATA_PREPEND', () => {
-    it('receives logs lines and cursor', () => {
-      mutations[types.REQUEST_LOGS_DATA_PREPEND](state);
-
-      expect(state.logs.isLoading).toBe(true);
-    });
-  });
-
-  describe('RECEIVE_LOGS_DATA_PREPEND_SUCCESS', () => {
-    it('receives logs lines and cursor', () => {
-      mutations[types.RECEIVE_LOGS_DATA_PREPEND_SUCCESS](state, {
-        logs: mockLogsResult,
-        cursor: mockCursor,
-      });
-
-      expect(state.logs).toEqual({
-        lines: mockLogsResult,
-        isLoading: false,
-        cursor: mockCursor,
-        isComplete: false,
-        fetchError: false,
-      });
-    });
-
-    it('receives additional logs lines and a new cursor', () => {
-      mutations[types.RECEIVE_LOGS_DATA_PREPEND_SUCCESS](state, {
-        logs: mockLogsResult,
-        cursor: mockCursor,
-      });
-
-      mutations[types.RECEIVE_LOGS_DATA_PREPEND_SUCCESS](state, {
-        logs: mockLogsResult,
-        cursor: mockNextCursor,
-      });
-
-      expect(state.logs).toEqual({
-        lines: [...mockLogsResult, ...mockLogsResult],
-        isLoading: false,
-        cursor: mockNextCursor,
-        isComplete: false,
-        fetchError: false,
-      });
-    });
-
-    it('receives logs lines and a null cursor to indicate is complete', () => {
-      mutations[types.RECEIVE_LOGS_DATA_PREPEND_SUCCESS](state, {
-        logs: mockLogsResult,
-        cursor: null,
-      });
-
-      expect(state.logs).toEqual({
-        lines: mockLogsResult,
-        isLoading: false,
-        cursor: null,
-        isComplete: true,
-        fetchError: false,
-      });
-    });
-  });
-
-  describe('RECEIVE_LOGS_DATA_PREPEND_ERROR', () => {
-    it('receives logs lines and cursor', () => {
-      mutations[types.RECEIVE_LOGS_DATA_PREPEND_ERROR](state);
-
-      expect(state.logs.isLoading).toBe(false);
-      expect(state.logs.fetchError).toBe(true);
-    });
-  });
-
-  describe('SET_CURRENT_POD_NAME', () => {
-    it('set current pod name', () => {
-      mutations[types.SET_CURRENT_POD_NAME](state, mockPodName);
-
-      expect(state.pods.current).toEqual(mockPodName);
-    });
-  });
-
-  describe('SET_TIME_RANGE', () => {
-    it('sets a default range', () => {
-      expect(state.timeRange.selected).toEqual(expect.any(Object));
-      expect(state.timeRange.current).toEqual(expect.any(Object));
-    });
-
-    it('sets a time range', () => {
-      const mockRange = {
-        start: '2020-01-10T18:00:00.000Z',
-        end: '2020-01-10T10:00:00.000Z',
-      };
-      mutations[types.SET_TIME_RANGE](state, mockRange);
-
-      expect(state.timeRange.selected).toEqual(mockRange);
-      expect(state.timeRange.current).toEqual(mockRange);
-    });
-  });
-
-  describe('RECEIVE_PODS_DATA_SUCCESS', () => {
-    it('receives pods data success', () => {
-      mutations[types.RECEIVE_PODS_DATA_SUCCESS](state, mockPods);
-
-      expect(state.pods).toEqual(
-        expect.objectContaining({
-          options: mockPods,
-        }),
-      );
-    });
-  });
-  describe('RECEIVE_PODS_DATA_ERROR', () => {
-    it('receives pods data error', () => {
-      mutations[types.RECEIVE_PODS_DATA_ERROR](state);
-
-      expect(state.pods).toEqual(
-        expect.objectContaining({
-          options: [],
-        }),
-      );
-    });
-  });
-});
diff --git a/spec/frontend/merge_request_tabs_spec.js b/spec/frontend/merge_request_tabs_spec.js
index f0f051cbc8b..2001bb5f95e 100644
--- a/spec/frontend/merge_request_tabs_spec.js
+++ b/spec/frontend/merge_request_tabs_spec.js
@@ -2,6 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import initMrPage from 'helpers/init_vue_mr_page_helper';
+import { stubPerformanceWebAPI } from 'helpers/performance';
 import axios from '~/lib/utils/axios_utils';
 import MergeRequestTabs from '~/merge_request_tabs';
 import '~/lib/utils/common_utils';
@@ -24,6 +25,8 @@ describe('MergeRequestTabs', () => {
   };
 
   beforeEach(() => {
+    stubPerformanceWebAPI();
+
     initMrPage();
 
     testContext.class = new MergeRequestTabs({ stubLocation });
@@ -331,6 +334,8 @@ describe('MergeRequestTabs', () => {
       ${'diffs'}   | ${true}  | ${'hides'}
       ${'commits'} | ${true}  | ${'hides'}
     `('it $hidesText expand button on $tab tab', ({ tab, hides }) => {
+      window.gon = { features: { movedMrSidebar: true } };
+
       const expandButton = document.createElement('div');
       expandButton.classList.add('js-expand-sidebar');
 
@@ -344,16 +349,16 @@ describe('MergeRequestTabs', () => {
       testContext.class = new MergeRequestTabs({ stubLocation });
       testContext.class.tabShown(tab, 'foobar');
 
-      expect(testContext.class.expandSidebar.classList.contains('gl-display-none!')).toBe(hides);
+      testContext.class.expandSidebar.forEach((el) => {
+        expect(el.classList.contains('gl-display-none!')).toBe(hides);
+      });
+
+      window.gon = {};
     });
 
     describe('when switching tabs', () => {
       const SCROLL_TOP = 100;
 
-      beforeAll(() => {
-        jest.useFakeTimers();
-      });
-
       beforeEach(() => {
         jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
         testContext.class.mergeRequestTabs = document.createElement('div');
@@ -362,10 +367,6 @@ describe('MergeRequestTabs', () => {
         testContext.class.scrollPositions = { newTab: SCROLL_TOP };
       });
 
-      afterAll(() => {
-        jest.useRealTimers();
-      });
-
       it('scrolls to the stored position, if one is stored', () => {
         testContext.class.tabShown('newTab');
 
diff --git a/spec/frontend/milestones/components/delete_milestone_modal_spec.js b/spec/frontend/milestones/components/delete_milestone_modal_spec.js
index b9ba0833c4f..6692a3b9347 100644
--- a/spec/frontend/milestones/components/delete_milestone_modal_spec.js
+++ b/spec/frontend/milestones/components/delete_milestone_modal_spec.js
@@ -1,44 +1,59 @@
-import Vue from 'vue';
+import { GlSprintf, GlModal } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 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 deleteMilestoneModal from '~/milestones/components/delete_milestone_modal.vue';
+import DeleteMilestoneModal from '~/milestones/components/delete_milestone_modal.vue';
 import eventHub from '~/milestones/event_hub';
+import { redirectTo } from '~/lib/utils/url_utility';
+import { createAlert } from '~/flash';
 
-jest.mock('~/lib/utils/url_utility', () => ({
-  ...jest.requireActual('~/lib/utils/url_utility'),
-  redirectTo: jest.fn(),
-}));
+jest.mock('~/lib/utils/url_utility');
+jest.mock('~/flash');
 
-describe('delete_milestone_modal.vue', () => {
-  const Component = Vue.extend(deleteMilestoneModal);
-  const props = {
+describe('Delete milestone modal', () => {
+  let wrapper;
+  const mockProps = {
     issueCount: 1,
     mergeRequestCount: 2,
     milestoneId: 3,
     milestoneTitle: 'my milestone title',
     milestoneUrl: `${TEST_HOST}/delete_milestone_modal.vue/milestone`,
   };
-  let vm;
+
+  const findModal = () => wrapper.findComponent(GlModal);
+
+  const createComponent = (props) => {
+    wrapper = shallowMount(DeleteMilestoneModal, {
+      propsData: {
+        ...mockProps,
+        ...props,
+      },
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('onSubmit', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, props);
       jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
     });
 
     it('deletes milestone and redirects to overview page', async () => {
       const responseURL = `${TEST_HOST}/delete_milestone_modal.vue/milestoneOverview`;
       jest.spyOn(axios, 'delete').mockImplementation((url) => {
-        expect(url).toBe(props.milestoneUrl);
+        expect(url).toBe(mockProps.milestoneUrl);
         expect(eventHub.$emit).toHaveBeenCalledWith(
           'deleteMilestoneModal.requestStarted',
-          props.milestoneUrl,
+          mockProps.milestoneUrl,
         );
         eventHub.$emit.mockReset();
         return Promise.resolve({
@@ -47,55 +62,71 @@ describe('delete_milestone_modal.vue', () => {
           },
         });
       });
-
-      await vm.onSubmit();
+      await findModal().vm.$emit('primary');
       expect(redirectTo).toHaveBeenCalledWith(responseURL);
       expect(eventHub.$emit).toHaveBeenCalledWith('deleteMilestoneModal.requestFinished', {
-        milestoneUrl: props.milestoneUrl,
+        milestoneUrl: mockProps.milestoneUrl,
         successful: true,
       });
     });
 
-    it('displays error if deleting milestone failed', async () => {
-      const dummyError = new Error('deleting milestone failed');
-      dummyError.response = { status: 418 };
-      jest.spyOn(axios, 'delete').mockImplementation((url) => {
-        expect(url).toBe(props.milestoneUrl);
-        expect(eventHub.$emit).toHaveBeenCalledWith(
-          'deleteMilestoneModal.requestStarted',
-          props.milestoneUrl,
-        );
-        eventHub.$emit.mockReset();
-        return Promise.reject(dummyError);
-      });
+    it.each`
+      statusCode | alertMessage
+      ${418}     | ${`Failed to delete milestone ${mockProps.milestoneTitle}`}
+      ${404}     | ${`Milestone ${mockProps.milestoneTitle} was not found`}
+    `(
+      'displays error if deleting milestone failed with code $statusCode',
+      async ({ statusCode, alertMessage }) => {
+        const dummyError = new Error('deleting milestone failed');
+        dummyError.response = { status: statusCode };
+        jest.spyOn(axios, 'delete').mockImplementation((url) => {
+          expect(url).toBe(mockProps.milestoneUrl);
+          expect(eventHub.$emit).toHaveBeenCalledWith(
+            'deleteMilestoneModal.requestStarted',
+            mockProps.milestoneUrl,
+          );
+          eventHub.$emit.mockReset();
+          return Promise.reject(dummyError);
+        });
 
-      await expect(vm.onSubmit()).rejects.toEqual(dummyError);
-      expect(redirectTo).not.toHaveBeenCalled();
-      expect(eventHub.$emit).toHaveBeenCalledWith('deleteMilestoneModal.requestFinished', {
-        milestoneUrl: props.milestoneUrl,
-        successful: false,
-      });
-    });
+        await expect(wrapper.vm.onSubmit()).rejects.toEqual(dummyError);
+        expect(createAlert).toHaveBeenCalledWith({
+          message: alertMessage,
+        });
+        expect(redirectTo).not.toHaveBeenCalled();
+        expect(eventHub.$emit).toHaveBeenCalledWith('deleteMilestoneModal.requestFinished', {
+          milestoneUrl: mockProps.milestoneUrl,
+          successful: false,
+        });
+      },
+    );
   });
 
-  describe('text', () => {
-    it('contains the issue and milestone count', () => {
-      vm = mountComponent(Component, props);
-      const value = vm.text;
+  describe('Modal title and description', () => {
+    const emptyDescription = `You’re about to permanently delete the milestone ${mockProps.milestoneTitle}. This milestone is not currently used in any issues or merge requests.`;
+    const description = `You’re about to permanently delete the milestone ${mockProps.milestoneTitle} and remove it from 1 issue and 2 merge requests. Once deleted, it cannot be undone or recovered.`;
+    const title = `Delete milestone ${mockProps.milestoneTitle}?`;
 
-      expect(value).toContain('remove it from 1 issue and 2 merge requests');
+    it('renders proper title', () => {
+      const value = findModal().props('title');
+      expect(value).toBe(title);
     });
 
-    it('contains neither issue nor milestone count', () => {
-      vm = mountComponent(Component, {
-        ...props,
-        issueCount: 0,
-        mergeRequestCount: 0,
-      });
-
-      const value = vm.text;
+    it.each`
+      statement                         | descriptionText     | issueCount | mergeRequestCount
+      ${'1 issue and 2 merge requests'} | ${description}      | ${1}       | ${2}
+      ${'no issues and merge requests'} | ${emptyDescription} | ${0}       | ${0}
+    `(
+      'renders proper description when the milestone contains $statement',
+      ({ issueCount, mergeRequestCount, descriptionText }) => {
+        createComponent({
+          issueCount,
+          mergeRequestCount,
+        });
 
-      expect(value).toContain('is not currently used');
-    });
+        const value = findModal().text();
+        expect(value).toBe(descriptionText);
+      },
+    );
   });
 });
diff --git a/spec/frontend/milestones/components/milestone_combobox_spec.js b/spec/frontend/milestones/components/milestone_combobox_spec.js
index afd85fb78ce..a8e3d13dca0 100644
--- a/spec/frontend/milestones/components/milestone_combobox_spec.js
+++ b/spec/frontend/milestones/components/milestone_combobox_spec.js
@@ -154,9 +154,9 @@ describe('Milestone combobox component', () => {
   };
 
   describe('initialization behavior', () => {
-    beforeEach(createComponent);
-
     it('initializes the dropdown with milestones when mounted', () => {
+      createComponent();
+
       return waitForRequests().then(() => {
         expect(projectMilestonesApiCallSpy).toHaveBeenCalledTimes(1);
         expect(groupMilestonesApiCallSpy).toHaveBeenCalledTimes(1);
@@ -164,6 +164,8 @@ describe('Milestone combobox component', () => {
     });
 
     it('shows a spinner while network requests are in progress', () => {
+      createComponent();
+
       expect(findLoadingIcon().exists()).toBe(true);
 
       return waitForRequests().then(() => {
@@ -172,6 +174,8 @@ describe('Milestone combobox component', () => {
     });
 
     it('shows additional links', () => {
+      createComponent();
+
       const links = wrapper.findAll('[data-testid="milestone-combobox-extra-links"]');
       links.wrappers.forEach((item, idx) => {
         expect(item.text()).toBe(extraLinks[idx].text);
diff --git a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
index a9f37f90561..14f04d9b767 100644
--- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
@@ -35,7 +35,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
     class="prometheus-graphs-header d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 border-bottom bg-gray-light"
   >
     <div
-      class="mb-2 mr-2 d-flex d-sm-block"
+      class="gl-mb-3 gl-mr-3 gl-display-flex gl-sm-display-block"
     >
       <dashboards-dropdown-stub
         class="flex-grow-1"
diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js
index 1f9eb03b5d4..7c54a4742ac 100644
--- a/spec/frontend/monitoring/components/dashboard_panel_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js
@@ -5,7 +5,6 @@ import Vuex from 'vuex';
 import { nextTick } from 'vue';
 import { setTestTimeout } from 'helpers/timeout';
 import axios from '~/lib/utils/axios_utils';
-import invalidUrl from '~/lib/utils/invalid_url';
 
 import MonitorAnomalyChart from '~/monitoring/components/charts/anomaly.vue';
 import MonitorBarChart from '~/monitoring/components/charts/bar.vue';
@@ -27,13 +26,7 @@ import {
   heatmapGraphData,
   barGraphData,
 } from '../graph_data';
-import {
-  mockLogsHref,
-  mockLogsPath,
-  mockNamespace,
-  mockNamespacedData,
-  mockTimeRange,
-} from '../mock_data';
+import { mockNamespace, mockNamespacedData, mockTimeRange } from '../mock_data';
 
 const mocks = {
   $toast: {
@@ -65,7 +58,6 @@ describe('Dashboard Panel', () => {
       },
       store,
       mocks,
-      provide: { glFeatures: { monitorLogging: true } },
       ...options,
     });
   };
@@ -335,86 +327,6 @@ describe('Dashboard Panel', () => {
     });
   });
 
-  describe('View Logs dropdown item', () => {
-    const findViewLogsLink = () => wrapper.find({ ref: 'viewLogsLink' });
-
-    beforeEach(async () => {
-      createWrapper();
-      await nextTick();
-    });
-
-    it('is not present by default', async () => {
-      await nextTick();
-      expect(findViewLogsLink().exists()).toBe(false);
-    });
-
-    it('is not present if a time range is not set', async () => {
-      state.logsPath = mockLogsPath;
-      state.timeRange = null;
-
-      await nextTick();
-      expect(findViewLogsLink().exists()).toBe(false);
-    });
-
-    it('is not present if the logs path is default', async () => {
-      state.logsPath = invalidUrl;
-      state.timeRange = mockTimeRange;
-
-      await nextTick();
-      expect(findViewLogsLink().exists()).toBe(false);
-    });
-
-    it('is not present if the logs path is not set', async () => {
-      state.logsPath = null;
-      state.timeRange = mockTimeRange;
-
-      await nextTick();
-      expect(findViewLogsLink().exists()).toBe(false);
-    });
-
-    it('is present when logs path and time a range is present', async () => {
-      state.logsPath = mockLogsPath;
-      state.timeRange = mockTimeRange;
-
-      await nextTick();
-      expect(findViewLogsLink().attributes('href')).toMatch(mockLogsHref);
-    });
-
-    describe(':monitor_logging feature flag', () => {
-      it.each`
-        flagState | logsState  | expected
-        ${true}   | ${'shows'} | ${true}
-        ${false}  | ${'hides'} | ${false}
-      `('$logsState logs when flag state is $flagState', async ({ flagState, expected }) => {
-        createWrapper({}, { provide: { glFeatures: { monitorLogging: flagState } } });
-        state.logsPath = mockLogsPath;
-        state.timeRange = mockTimeRange;
-        await nextTick();
-
-        expect(findViewLogsLink().exists()).toBe(expected);
-      });
-    });
-
-    it('it is overridden when a datazoom event is received', async () => {
-      state.logsPath = mockLogsPath;
-      state.timeRange = mockTimeRange;
-
-      const zoomedTimeRange = {
-        start: '2020-01-01T00:00:00.000Z',
-        end: '2020-01-01T01:00:00.000Z',
-      };
-
-      findTimeChart().vm.$emit('datazoom', zoomedTimeRange);
-
-      await nextTick();
-      const start = encodeURIComponent(zoomedTimeRange.start);
-      const end = encodeURIComponent(zoomedTimeRange.end);
-      expect(findViewLogsLink().attributes('href')).toMatch(
-        `${mockLogsPath}?start=${start}&end=${end}`,
-      );
-    });
-  });
-
   describe('when clipboard data is available', () => {
     const clipboardText = 'A value to copy.';
 
@@ -507,14 +419,6 @@ describe('Dashboard Panel', () => {
       createWrapper({ namespace: mockNamespace });
     });
 
-    it('handles namespaced time range and logs path state', async () => {
-      store.state[mockNamespace].timeRange = mockTimeRange;
-      store.state[mockNamespace].logsPath = mockLogsPath;
-
-      await nextTick();
-      expect(wrapper.find({ ref: 'viewLogsLink' }).attributes().href).toBe(mockLogsHref);
-    });
-
     it('handles namespaced deployment data state', async () => {
       store.state[mockNamespace].deploymentData = mockDeploymentData;
 
diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js
index 6c5972e1140..90171cfc65e 100644
--- a/spec/frontend/monitoring/components/dashboard_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_spec.js
@@ -75,6 +75,7 @@ describe('Dashboard', () => {
     if (store.dispatch.mockReset) {
       store.dispatch.mockReset();
     }
+    wrapper.destroy();
   });
 
   describe('request information to the server', () => {
@@ -569,28 +570,37 @@ describe('Dashboard', () => {
     const findDraggablePanels = () => wrapper.findAll('.js-draggable-panel');
     const findRearrangeButton = () => wrapper.find('.js-rearrange-button');
 
-    beforeEach(async () => {
+    const setup = async () => {
       // call original dispatch
       store.dispatch.mockRestore();
 
       createShallowWrapper({ hasMetrics: true });
       setupStoreWithData(store);
       await nextTick();
-    });
+    };
+
+    it('wraps vuedraggable', async () => {
+      await setup();
 
-    it('wraps vuedraggable', () => {
       expect(findDraggablePanels().exists()).toBe(true);
       expect(findDraggablePanels().length).toEqual(metricsDashboardPanelCount);
     });
 
-    it('is disabled by default', () => {
+    it('is disabled by default', async () => {
+      await setup();
+
       expect(findRearrangeButton().exists()).toBe(false);
       expect(findEnabledDraggables().length).toBe(0);
     });
 
     describe('when rearrange is enabled', () => {
       beforeEach(async () => {
-        wrapper.setProps({ rearrangePanelsAvailable: true });
+        // call original dispatch
+        store.dispatch.mockRestore();
+
+        createShallowWrapper({ hasMetrics: true, rearrangePanelsAvailable: true });
+        setupStoreWithData(store);
+
         await nextTick();
       });
 
@@ -602,17 +612,18 @@ describe('Dashboard', () => {
         const findFirstDraggableRemoveButton = () =>
           findDraggablePanels().at(0).find('.js-draggable-remove');
 
-        beforeEach(async () => {
+        it('it enables draggables', async () => {
           findRearrangeButton().vm.$emit('click');
           await nextTick();
-        });
 
-        it('it enables draggables', () => {
           expect(findRearrangeButton().attributes('pressed')).toBeTruthy();
           expect(findEnabledDraggables().wrappers).toEqual(findDraggables().wrappers);
         });
 
         it('metrics can be swapped', async () => {
+          findRearrangeButton().vm.$emit('click');
+          await nextTick();
+
           const firstDraggable = findDraggables().at(0);
           const mockMetrics = [...metricsDashboardViewModel.panelGroups[0].panels];
 
@@ -624,6 +635,7 @@ describe('Dashboard', () => {
           firstDraggable.vm.$emit('input', mockMetrics);
 
           await nextTick();
+
           const { panels } = wrapper.vm.dashboard.panelGroups[0];
 
           expect(panels[1].title).toEqual(firstTitle);
@@ -631,18 +643,23 @@ describe('Dashboard', () => {
         });
 
         it('shows a remove button, which removes a panel', async () => {
+          findRearrangeButton().vm.$emit('click');
+          await nextTick();
+
           expect(findFirstDraggableRemoveButton().find('a').exists()).toBe(true);
 
           expect(findDraggablePanels().length).toEqual(metricsDashboardPanelCount);
-          findFirstDraggableRemoveButton().trigger('click');
+          await findFirstDraggableRemoveButton().trigger('click');
 
-          await nextTick();
           expect(findDraggablePanels().length).toEqual(metricsDashboardPanelCount - 1);
         });
 
         it('it disables draggables when clicked again', async () => {
           findRearrangeButton().vm.$emit('click');
           await nextTick();
+
+          findRearrangeButton().vm.$emit('click');
+          await nextTick();
           expect(findRearrangeButton().attributes('pressed')).toBeFalsy();
           expect(findEnabledDraggables().length).toBe(0);
         });
diff --git a/spec/frontend/monitoring/store/mutations_spec.js b/spec/frontend/monitoring/store/mutations_spec.js
index ae1a4e16b30..49e8ab9ebd4 100644
--- a/spec/frontend/monitoring/store/mutations_spec.js
+++ b/spec/frontend/monitoring/store/mutations_spec.js
@@ -180,11 +180,6 @@ describe('Monitoring mutations', () => {
     });
 
     it('should not remove previously set properties', () => {
-      const defaultLogsPath = stateCopy.logsPath;
-
-      mutations[types.SET_INITIAL_STATE](stateCopy, {
-        logsPath: defaultLogsPath,
-      });
       mutations[types.SET_INITIAL_STATE](stateCopy, {
         dashboardEndpoint: 'dashboard.json',
       });
@@ -196,7 +191,6 @@ describe('Monitoring mutations', () => {
       });
 
       expect(stateCopy).toMatchObject({
-        logsPath: defaultLogsPath,
         dashboardEndpoint: 'dashboard.json',
         projectPath: '/gitlab-org/gitlab-foss',
         currentEnvironmentName: 'canary',
@@ -227,11 +221,6 @@ describe('Monitoring mutations', () => {
     });
 
     it('should not remove previously set properties', () => {
-      const defaultLogsPath = stateCopy.logsPath;
-
-      mutations[types.SET_ENDPOINTS](stateCopy, {
-        logsPath: defaultLogsPath,
-      });
       mutations[types.SET_ENDPOINTS](stateCopy, {
         dashboardEndpoint: 'dashboard.json',
       });
@@ -240,7 +229,6 @@ describe('Monitoring mutations', () => {
       });
 
       expect(stateCopy).toMatchObject({
-        logsPath: defaultLogsPath,
         dashboardEndpoint: 'dashboard.json',
         projectPath: '/gitlab-org/gitlab-foss',
       });
diff --git a/spec/frontend/new_branch_spec.js b/spec/frontend/new_branch_spec.js
index e4f4b3fa5b5..5a09598059d 100644
--- a/spec/frontend/new_branch_spec.js
+++ b/spec/frontend/new_branch_spec.js
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import NewBranchForm from '~/new_branch_form';
 
@@ -11,17 +10,19 @@ describe('Branch', () => {
 
   describe('create a new branch', () => {
     function fillNameWith(value) {
-      $('.js-branch-name').val(value).trigger('blur');
+      document.querySelector('.js-branch-name').value = value;
+      const event = new CustomEvent('blur');
+      document.querySelector('.js-branch-name').dispatchEvent(event);
     }
 
     function expectToHaveError(error) {
-      expect($('.js-branch-name-error span').text()).toEqual(error);
+      expect(document.querySelector('.js-branch-name-error').textContent).toEqual(error);
     }
 
     beforeEach(() => {
       loadHTMLFixture('branches/new_branch.html');
-      $('form').on('submit', (e) => e.preventDefault());
-      testContext.form = new NewBranchForm($('.js-create-branch-form'), []);
+      document.querySelector('form').addEventListener('submit', (e) => e.preventDefault());
+      testContext.form = new NewBranchForm(document.querySelector('.js-create-branch-form'), []);
     });
 
     afterEach(() => {
@@ -171,34 +172,34 @@ describe('Branch', () => {
     it('removes the error message when is a valid name', () => {
       fillNameWith('foo?bar');
 
-      expect($('.js-branch-name-error span').length).toEqual(1);
+      expect(document.querySelector('.js-branch-name-error').textContent).not.toEqual('');
       fillNameWith('foobar');
 
-      expect($('.js-branch-name-error span').length).toEqual(0);
+      expect(document.querySelector('.js-branch-name-error').textContent).toEqual('');
     });
 
     it('can have dashes anywhere', () => {
       fillNameWith('-foo-bar-zoo-');
 
-      expect($('.js-branch-name-error span').length).toEqual(0);
+      expect(document.querySelector('.js-branch-name-error').textContent).toEqual('');
     });
 
     it('can have underscores anywhere', () => {
       fillNameWith('_foo_bar_zoo_');
 
-      expect($('.js-branch-name-error span').length).toEqual(0);
+      expect(document.querySelector('.js-branch-name-error').textContent).toEqual('');
     });
 
     it('can have numbers anywhere', () => {
       fillNameWith('1foo2bar3zoo4');
 
-      expect($('.js-branch-name-error span').length).toEqual(0);
+      expect(document.querySelector('.js-branch-name-error').textContent).toEqual('');
     });
 
     it('can be only letters', () => {
       fillNameWith('foo');
 
-      expect($('.js-branch-name-error span').length).toEqual(0);
+      expect(document.querySelector('.js-branch-name-error').textContent).toEqual('');
     });
   });
 });
diff --git a/spec/frontend/notebook/cells/code_spec.js b/spec/frontend/notebook/cells/code_spec.js
index 9a2db061278..10762a1c3a2 100644
--- a/spec/frontend/notebook/cells/code_spec.js
+++ b/spec/frontend/notebook/cells/code_spec.js
@@ -1,89 +1,73 @@
-import Vue, { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import fixture from 'test_fixtures/blob/notebook/basic.json';
-import CodeComponent from '~/notebook/cells/code.vue';
-
-const Component = Vue.extend(CodeComponent);
+import Code from '~/notebook/cells/code.vue';
 
 describe('Code component', () => {
-  let vm;
-
+  let wrapper;
   let json;
 
+  const mountComponent = (cell) => mount(Code, { propsData: { cell } });
+
   beforeEach(() => {
     // Clone fixture as it could be modified by tests
     json = JSON.parse(JSON.stringify(fixture));
   });
 
-  const setupComponent = (cell) => {
-    const comp = new Component({
-      propsData: {
-        cell,
-      },
-    });
-    comp.$mount();
-    return comp;
-  };
+  afterEach(() => {
+    wrapper.destroy();
+  });
 
   describe('without output', () => {
     beforeEach(() => {
-      vm = setupComponent(json.cells[0]);
-
-      return nextTick();
+      wrapper = mountComponent(json.cells[0]);
     });
 
     it('does not render output prompt', () => {
-      expect(vm.$el.querySelectorAll('.prompt').length).toBe(1);
+      expect(wrapper.findAll('.prompt')).toHaveLength(1);
     });
   });
 
   describe('with output', () => {
     beforeEach(() => {
-      vm = setupComponent(json.cells[2]);
-
-      return nextTick();
+      wrapper = mountComponent(json.cells[2]);
     });
 
     it('does not render output prompt', () => {
-      expect(vm.$el.querySelectorAll('.prompt').length).toBe(2);
+      expect(wrapper.findAll('.prompt')).toHaveLength(2);
     });
 
     it('renders output cell', () => {
-      expect(vm.$el.querySelector('.output')).toBeDefined();
+      expect(wrapper.find('.output').exists()).toBe(true);
     });
   });
 
   describe('with string for output', () => {
     // NBFormat Version 4.1 allows outputs.text to be a string
-    beforeEach(async () => {
+    beforeEach(() => {
       const cell = json.cells[2];
       cell.outputs[0].text = cell.outputs[0].text.join('');
 
-      vm = setupComponent(cell);
-      await nextTick();
+      wrapper = mountComponent(cell);
     });
 
     it('does not render output prompt', () => {
-      expect(vm.$el.querySelectorAll('.prompt').length).toBe(2);
+      expect(wrapper.findAll('.prompt')).toHaveLength(2);
     });
 
     it('renders output cell', () => {
-      expect(vm.$el.querySelector('.output')).toBeDefined();
+      expect(wrapper.find('.output').exists()).toBe(true);
     });
   });
 
   describe('with string for cell.source', () => {
-    beforeEach(async () => {
+    beforeEach(() => {
       const cell = json.cells[0];
       cell.source = cell.source.join('');
-
-      vm = setupComponent(cell);
-      await nextTick();
+      wrapper = mountComponent(cell);
     });
 
     it('renders the same input as when cell.source is an array', () => {
-      const expected = "console.log('test')";
-
-      expect(vm.$el.querySelector('.input').innerText).toContain(expected);
+      expect(wrapper.find('.input').text()).toContain("console.log('test')");
     });
   });
 });
diff --git a/spec/frontend/notebook/cells/markdown_spec.js b/spec/frontend/notebook/cells/markdown_spec.js
index de415b5bfe0..c757b55faf4 100644
--- a/spec/frontend/notebook/cells/markdown_spec.js
+++ b/spec/frontend/notebook/cells/markdown_spec.js
@@ -130,7 +130,7 @@ describe('Markdown component', () => {
       expect(columns[0].innerHTML).toContain('<img src="data:image/jpeg;base64');
       expect(columns[1].innerHTML).toContain('<img src="data:image/png;base64');
       expect(columns[2].innerHTML).toContain('<img src="data:image/jpeg;base64');
-      expect(columns[3].innerHTML).toContain('<img>');
+      expect(columns[3].innerHTML).toContain('<img src="attachment:bogus">');
       expect(columns[4].innerHTML).toContain('<img src="https://www.google.com/');
     });
   });
diff --git a/spec/frontend/notebook/cells/output/index_spec.js b/spec/frontend/notebook/cells/output/index_spec.js
index 8e04e4c146c..4d1d03e5e34 100644
--- a/spec/frontend/notebook/cells/output/index_spec.js
+++ b/spec/frontend/notebook/cells/output/index_spec.js
@@ -1,36 +1,35 @@
-import Vue, { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import json from 'test_fixtures/blob/notebook/basic.json';
-import CodeComponent from '~/notebook/cells/output/index.vue';
-
-const Component = Vue.extend(CodeComponent);
+import Output from '~/notebook/cells/output/index.vue';
 
 describe('Output component', () => {
-  let vm;
+  let wrapper;
 
   const createComponent = (output) => {
-    vm = new Component({
+    wrapper = mount(Output, {
       propsData: {
         outputs: [].concat(output),
         count: 1,
       },
     });
-    vm.$mount();
   };
 
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
   describe('text output', () => {
     beforeEach(() => {
       const textType = json.cells[2];
       createComponent(textType.outputs[0]);
-
-      return nextTick();
     });
 
     it('renders as plain text', () => {
-      expect(vm.$el.querySelector('pre')).not.toBeNull();
+      expect(wrapper.find('pre').exists()).toBe(true);
     });
 
     it('renders prompt', () => {
-      expect(vm.$el.querySelector('.prompt span')).not.toBeNull();
+      expect(wrapper.find('.prompt span').exists()).toBe(true);
     });
   });
 
@@ -38,12 +37,10 @@ describe('Output component', () => {
     beforeEach(() => {
       const imageType = json.cells[3];
       createComponent(imageType.outputs[0]);
-
-      return nextTick();
     });
 
     it('renders as an image', () => {
-      expect(vm.$el.querySelector('img')).not.toBeNull();
+      expect(wrapper.find('img').exists()).toBe(true);
     });
   });
 
@@ -52,16 +49,15 @@ describe('Output component', () => {
       const htmlType = json.cells[4];
       createComponent(htmlType.outputs[0]);
 
-      expect(vm.$el.querySelector('p')).not.toBeNull();
-      expect(vm.$el.querySelectorAll('p')).toHaveLength(1);
-      expect(vm.$el.textContent.trim()).toContain('test');
+      expect(wrapper.findAll('p')).toHaveLength(1);
+      expect(wrapper.text()).toContain('test');
     });
 
     it('renders multiple raw HTML outputs', () => {
       const htmlType = json.cells[4];
       createComponent([htmlType.outputs[0], htmlType.outputs[0]]);
 
-      expect(vm.$el.querySelectorAll('p')).toHaveLength(2);
+      expect(wrapper.findAll('p')).toHaveLength(2);
     });
   });
 
@@ -77,7 +73,7 @@ describe('Output component', () => {
       };
       createComponent(output);
 
-      expect(vm.$el.querySelector('.MathJax')).not.toBeNull();
+      expect(wrapper.find('.MathJax').exists()).toBe(true);
     });
   });
 
@@ -85,12 +81,10 @@ describe('Output component', () => {
     beforeEach(() => {
       const svgType = json.cells[5];
       createComponent(svgType.outputs[0]);
-
-      return nextTick();
     });
 
     it('renders as an svg', () => {
-      expect(vm.$el.querySelector('svg')).not.toBeNull();
+      expect(wrapper.find('svg').exists()).toBe(true);
     });
   });
 
@@ -98,27 +92,23 @@ describe('Output component', () => {
     beforeEach(() => {
       const unknownType = json.cells[6];
       createComponent(unknownType.outputs[0]);
-
-      return nextTick();
     });
 
     it('renders as plain text', () => {
-      expect(vm.$el.querySelector('pre')).not.toBeNull();
-      expect(vm.$el.textContent.trim()).toContain('testing');
+      expect(wrapper.find('pre').exists()).toBe(true);
+      expect(wrapper.text()).toContain('testing');
     });
 
-    it('renders promot', () => {
-      expect(vm.$el.querySelector('.prompt span')).not.toBeNull();
+    it('renders prompt', () => {
+      expect(wrapper.find('.prompt span').exists()).toBe(true);
     });
 
-    it("renders as plain text when doesn't recognise other types", async () => {
+    it("renders as plain text when doesn't recognise other types", () => {
       const unknownType = json.cells[7];
       createComponent(unknownType.outputs[0]);
 
-      await nextTick();
-
-      expect(vm.$el.querySelector('pre')).not.toBeNull();
-      expect(vm.$el.textContent.trim()).toContain('testing');
+      expect(wrapper.find('pre').exists()).toBe(true);
+      expect(wrapper.text()).toContain('testing');
     });
   });
 });
diff --git a/spec/frontend/notebook/cells/prompt_spec.js b/spec/frontend/notebook/cells/prompt_spec.js
index 89b2d7b2b90..0cda0c5bc2b 100644
--- a/spec/frontend/notebook/cells/prompt_spec.js
+++ b/spec/frontend/notebook/cells/prompt_spec.js
@@ -1,52 +1,40 @@
-import Vue, { nextTick } from 'vue';
-import PromptComponent from '~/notebook/cells/prompt.vue';
-
-const Component = Vue.extend(PromptComponent);
+import { shallowMount } from '@vue/test-utils';
+import Prompt from '~/notebook/cells/prompt.vue';
 
 describe('Prompt component', () => {
-  let vm;
+  let wrapper;
+
+  const mountComponent = ({ type }) => shallowMount(Prompt, { propsData: { type, count: 1 } });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
 
   describe('input', () => {
     beforeEach(() => {
-      vm = new Component({
-        propsData: {
-          type: 'In',
-          count: 1,
-        },
-      });
-      vm.$mount();
-
-      return nextTick();
+      wrapper = mountComponent({ type: 'In' });
     });
 
     it('renders in label', () => {
-      expect(vm.$el.textContent.trim()).toContain('In');
+      expect(wrapper.text()).toContain('In');
     });
 
     it('renders count', () => {
-      expect(vm.$el.textContent.trim()).toContain('1');
+      expect(wrapper.text()).toContain('1');
     });
   });
 
   describe('output', () => {
     beforeEach(() => {
-      vm = new Component({
-        propsData: {
-          type: 'Out',
-          count: 1,
-        },
-      });
-      vm.$mount();
-
-      return nextTick();
+      wrapper = mountComponent({ type: 'Out' });
     });
 
     it('renders in label', () => {
-      expect(vm.$el.textContent.trim()).toContain('Out');
+      expect(wrapper.text()).toContain('Out');
     });
 
     it('renders count', () => {
-      expect(vm.$el.textContent.trim()).toContain('1');
+      expect(wrapper.text()).toContain('1');
     });
   });
 });
diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index 116016ecae2..463787c148b 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -550,98 +550,74 @@ describe('issue_comment_form component', () => {
     });
 
     describe('confidential notes checkbox', () => {
-      describe('when confidentialNotes feature flag is `false`', () => {
-        const features = { confidentialNotes: false };
+      it('should render checkbox as unchecked by default', () => {
+        mountComponent({
+          mountFunction: mount,
+          initialData: { note: 'confidential note' },
+          noteableData: { ...notableDataMockCanUpdateIssuable },
+        });
 
-        it('should not render checkbox', () => {
+        const checkbox = findConfidentialNoteCheckbox();
+        expect(checkbox.exists()).toBe(true);
+        expect(checkbox.element.checked).toBe(false);
+      });
+
+      it.each`
+        noteableType      | rendered | message
+        ${'Issue'}        | ${true}  | ${'render'}
+        ${'Epic'}         | ${true}  | ${'render'}
+        ${'MergeRequest'} | ${false} | ${'not render'}
+      `(
+        'should $message checkbox when noteableType is $noteableType',
+        ({ noteableType, rendered }) => {
           mountComponent({
             mountFunction: mount,
-            initialData: { note: 'confidential note' },
-            noteableData: { ...notableDataMockCanUpdateIssuable },
-            features,
+            noteableType,
+            initialData: { note: 'internal note' },
+            noteableData: { ...notableDataMockCanUpdateIssuable, noteableType },
           });
 
-          const checkbox = findConfidentialNoteCheckbox();
-          expect(checkbox.exists()).toBe(false);
-        });
-      });
-
-      describe('when confidentialNotes feature flag is `true`', () => {
-        const features = { confidentialNotes: true };
+          expect(findConfidentialNoteCheckbox().exists()).toBe(rendered);
+        },
+      );
 
-        it('should render checkbox as unchecked by default', () => {
+      describe.each`
+        shouldCheckboxBeChecked
+        ${true}
+        ${false}
+      `('when checkbox value is `$shouldCheckboxBeChecked`', ({ shouldCheckboxBeChecked }) => {
+        it(`sets \`confidential\` to \`${shouldCheckboxBeChecked}\``, async () => {
           mountComponent({
             mountFunction: mount,
             initialData: { note: 'confidential note' },
             noteableData: { ...notableDataMockCanUpdateIssuable },
-            features,
           });
 
-          const checkbox = findConfidentialNoteCheckbox();
-          expect(checkbox.exists()).toBe(true);
-          expect(checkbox.element.checked).toBe(false);
-        });
+          jest.spyOn(wrapper.vm, 'saveNote').mockResolvedValue({});
 
-        it.each`
-          noteableType      | rendered | message
-          ${'Issue'}        | ${true}  | ${'render'}
-          ${'Epic'}         | ${true}  | ${'render'}
-          ${'MergeRequest'} | ${false} | ${'not render'}
-        `(
-          'should $message checkbox when noteableType is $noteableType',
-          ({ noteableType, rendered }) => {
-            mountComponent({
-              mountFunction: mount,
-              noteableType,
-              initialData: { note: 'internal note' },
-              noteableData: { ...notableDataMockCanUpdateIssuable, noteableType },
-              features,
-            });
-
-            expect(findConfidentialNoteCheckbox().exists()).toBe(rendered);
-          },
-        );
-
-        describe.each`
-          shouldCheckboxBeChecked
-          ${true}
-          ${false}
-        `('when checkbox value is `$shouldCheckboxBeChecked`', ({ shouldCheckboxBeChecked }) => {
-          it(`sets \`confidential\` to \`${shouldCheckboxBeChecked}\``, async () => {
-            mountComponent({
-              mountFunction: mount,
-              initialData: { note: 'confidential note' },
-              noteableData: { ...notableDataMockCanUpdateIssuable },
-              features,
-            });
-
-            jest.spyOn(wrapper.vm, 'saveNote').mockResolvedValue({});
-
-            const checkbox = findConfidentialNoteCheckbox();
+          const checkbox = findConfidentialNoteCheckbox();
 
-            // check checkbox
-            checkbox.element.checked = shouldCheckboxBeChecked;
-            checkbox.trigger('change');
-            await nextTick();
+          // check checkbox
+          checkbox.element.checked = shouldCheckboxBeChecked;
+          checkbox.trigger('change');
+          await nextTick();
 
-            // submit comment
-            findCommentButton().trigger('click');
+          // submit comment
+          findCommentButton().trigger('click');
 
-            const [providedData] = wrapper.vm.saveNote.mock.calls[0];
-            expect(providedData.data.note.confidential).toBe(shouldCheckboxBeChecked);
-          });
+          const [providedData] = wrapper.vm.saveNote.mock.calls[0];
+          expect(providedData.data.note.confidential).toBe(shouldCheckboxBeChecked);
         });
+      });
 
-        describe('when user cannot update issuable', () => {
-          it('should not render checkbox', () => {
-            mountComponent({
-              mountFunction: mount,
-              noteableData: { ...notableDataMockCannotUpdateIssuable },
-              features,
-            });
-
-            expect(findConfidentialNoteCheckbox().exists()).toBe(false);
+      describe('when user cannot update issuable', () => {
+        it('should not render checkbox', () => {
+          mountComponent({
+            mountFunction: mount,
+            noteableData: { ...notableDataMockCannotUpdateIssuable },
           });
+
+          expect(findConfidentialNoteCheckbox().exists()).toBe(false);
         });
       });
     });
diff --git a/spec/frontend/notes/components/note_signed_out_widget_spec.js b/spec/frontend/notes/components/note_signed_out_widget_spec.js
index e217a2caa73..84f20e4ad58 100644
--- a/spec/frontend/notes/components/note_signed_out_widget_spec.js
+++ b/spec/frontend/notes/components/note_signed_out_widget_spec.js
@@ -1,41 +1,30 @@
-import Vue from 'vue';
-import noteSignedOut from '~/notes/components/note_signed_out_widget.vue';
+import { shallowMount } from '@vue/test-utils';
+import NoteSignedOutWidget from '~/notes/components/note_signed_out_widget.vue';
 import createStore from '~/notes/stores';
 import { notesDataMock } from '../mock_data';
 
-describe('note_signed_out_widget component', () => {
-  let store;
-  let vm;
+describe('NoteSignedOutWidget component', () => {
+  let wrapper;
 
   beforeEach(() => {
-    const Component = Vue.extend(noteSignedOut);
-    store = createStore();
+    const store = createStore();
     store.dispatch('setNotesData', notesDataMock);
-
-    vm = new Component({
-      store,
-    }).$mount();
+    wrapper = shallowMount(NoteSignedOutWidget, { store });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  it('should render sign in link provided in the store', () => {
-    expect(vm.$el.querySelector(`a[href="${notesDataMock.newSessionPath}"]`).textContent).toEqual(
-      'sign in',
-    );
+  it('renders sign in link provided in the store', () => {
+    expect(wrapper.find(`a[href="${notesDataMock.newSessionPath}"]`).text()).toBe('sign in');
   });
 
-  it('should render register link provided in the store', () => {
-    expect(vm.$el.querySelector(`a[href="${notesDataMock.registerPath}"]`).textContent).toEqual(
-      'register',
-    );
+  it('renders register link provided in the store', () => {
+    expect(wrapper.find(`a[href="${notesDataMock.registerPath}"]`).text()).toBe('register');
   });
 
-  it('should render information text', () => {
-    expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual(
-      'Please register or sign in to reply',
-    );
+  it('renders information text', () => {
+    expect(wrapper.text()).toContain('Please register or sign in to reply');
   });
 });
diff --git a/spec/frontend/notes/components/noteable_discussion_spec.js b/spec/frontend/notes/components/noteable_discussion_spec.js
index ddfa77117ca..603db56a098 100644
--- a/spec/frontend/notes/components/noteable_discussion_spec.js
+++ b/spec/frontend/notes/components/noteable_discussion_spec.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import discussionWithTwoUnresolvedNotes from 'test_fixtures/merge_requests/resolved_diff_discussion.json';
 import { trimText } from 'helpers/text_helper';
-import mockDiffFile from 'jest/diffs/mock_data/diff_file';
+import { getDiffFileMock } from 'jest/diffs/mock_data/diff_file';
 import DiscussionNotes from '~/notes/components/discussion_notes.vue';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
@@ -45,7 +45,7 @@ describe('noteable_discussion component', () => {
 
   it('should render thread header', async () => {
     const discussion = { ...discussionMock };
-    discussion.diff_file = mockDiffFile;
+    discussion.diff_file = getDiffFileMock();
     discussion.diff_discussion = true;
     discussion.expanded = false;
 
@@ -57,7 +57,7 @@ describe('noteable_discussion component', () => {
 
   it('should hide actions when diff refs do not exists', async () => {
     const discussion = { ...discussionMock };
-    discussion.diff_file = { ...mockDiffFile, diff_refs: null };
+    discussion.diff_file = { ...getDiffFileMock(), diff_refs: null };
     discussion.diff_discussion = true;
     discussion.expanded = false;
 
diff --git a/spec/frontend/notes/components/noteable_note_spec.js b/spec/frontend/notes/components/noteable_note_spec.js
index 385edc59eb6..3350609bb90 100644
--- a/spec/frontend/notes/components/noteable_note_spec.js
+++ b/spec/frontend/notes/components/noteable_note_spec.js
@@ -1,20 +1,15 @@
 import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
-
+import { GlAvatar } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
-
 import DiffsModule from '~/diffs/store/modules';
-
 import NoteActions from '~/notes/components/note_actions.vue';
 import NoteBody from '~/notes/components/note_body.vue';
 import NoteHeader from '~/notes/components/note_header.vue';
 import issueNote from '~/notes/components/noteable_note.vue';
 import NotesModule from '~/notes/stores/modules';
 import { NOTEABLE_TYPE_MAPPING } from '~/notes/constants';
-
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-
 import { noteableDataMock, notesDataMock, note } from '../mock_data';
 
 Vue.use(Vuex);
@@ -205,19 +200,21 @@ describe('issue_note', () => {
 
         await nextTick();
 
-        expect(wrapper.findComponent(UserAvatarLink).props('imgSize')).toBe(24);
+        const avatar = wrapper.findComponent(GlAvatar);
+        const avatarProps = avatar.props();
+        expect(avatarProps.size).toBe(24);
       });
     });
 
-    it('should render user information', () => {
+    it('should render user avatar', () => {
       const { author } = note;
-      const avatar = wrapper.findComponent(UserAvatarLink);
+      const avatar = wrapper.findComponent(GlAvatar);
       const avatarProps = avatar.props();
 
-      expect(avatarProps.linkHref).toBe(author.path);
-      expect(avatarProps.imgSrc).toBe(author.avatar_url);
-      expect(avatarProps.imgAlt).toBe(author.name);
-      expect(avatarProps.imgSize).toBe(40);
+      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 });
     });
 
     it('should render note header content', () => {
diff --git a/spec/frontend/notes/components/notes_app_spec.js b/spec/frontend/notes/components/notes_app_spec.js
index f4eb69e0d49..36a68118fa7 100644
--- a/spec/frontend/notes/components/notes_app_spec.js
+++ b/spec/frontend/notes/components/notes_app_spec.js
@@ -44,22 +44,6 @@ describe('note_app', () => {
       .wrappers.map((node) => (node.is(CommentForm) ? TYPE_COMMENT_FORM : TYPE_NOTES_LIST));
   };
 
-  /**
-   * waits for fetchNotes() to complete
-   */
-  const waitForDiscussionsRequest = () =>
-    new Promise((resolve) => {
-      const { vm } = wrapper.find(NotesApp);
-      const unwatch = vm.$watch('isFetching', (isFetching) => {
-        if (isFetching) {
-          return;
-        }
-
-        unwatch();
-        resolve();
-      });
-    });
-
   beforeEach(() => {
     $('body').attr('data-page', 'projects:merge_requests:show');
 
@@ -95,7 +79,7 @@ describe('note_app', () => {
 
       axiosMock.onAny().reply(200, []);
       wrapper = mountComponent();
-      return waitForDiscussionsRequest();
+      return waitForPromises();
     });
 
     afterEach(() => {
@@ -129,7 +113,7 @@ describe('note_app', () => {
 
       axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
       wrapper = mountComponent();
-      return waitForDiscussionsRequest();
+      return waitForPromises();
     });
 
     afterEach(() => {
@@ -172,7 +156,7 @@ describe('note_app', () => {
       axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
       store.state.commentsDisabled = true;
       wrapper = mountComponent();
-      return waitForDiscussionsRequest();
+      return waitForPromises();
     });
 
     afterEach(() => {
@@ -197,7 +181,7 @@ describe('note_app', () => {
       store.state.isTimelineEnabled = true;
 
       wrapper = mountComponent();
-      return waitForDiscussionsRequest();
+      return waitForPromises();
     });
 
     afterEach(() => {
@@ -210,15 +194,13 @@ describe('note_app', () => {
   });
 
   describe('while fetching data', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       setHTMLFixture('<div class="js-discussions-count"></div>');
-      axiosMock.onAny().reply(200, []);
       wrapper = mountComponent();
     });
 
     afterEach(() => {
-      waitForDiscussionsRequest();
-      resetHTMLFixture();
+      return waitForPromises().then(() => resetHTMLFixture());
     });
 
     it('renders skeleton notes', () => {
@@ -242,7 +224,7 @@ describe('note_app', () => {
       beforeEach(() => {
         axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
         wrapper = mountComponent();
-        return waitForDiscussionsRequest().then(() => {
+        return waitForPromises().then(() => {
           wrapper.find('.js-note-edit').trigger('click');
         });
       });
@@ -264,7 +246,7 @@ describe('note_app', () => {
       beforeEach(() => {
         axiosMock.onAny().reply(mockData.getDiscussionNoteResponse);
         wrapper = mountComponent();
-        return waitForDiscussionsRequest().then(() => {
+        return waitForPromises().then(() => {
           wrapper.find('.js-note-edit').trigger('click');
         });
       });
@@ -287,7 +269,7 @@ describe('note_app', () => {
     beforeEach(() => {
       axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
       wrapper = mountComponent();
-      return waitForDiscussionsRequest();
+      return waitForPromises();
     });
 
     it('should render markdown docs url', () => {
@@ -309,7 +291,7 @@ describe('note_app', () => {
     beforeEach(() => {
       axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
       wrapper = mountComponent();
-      return waitForDiscussionsRequest();
+      return waitForPromises();
     });
 
     it('should render markdown docs url', async () => {
@@ -337,7 +319,7 @@ describe('note_app', () => {
     beforeEach(() => {
       axiosMock.onAny().reply(200, []);
       wrapper = mountComponent();
-      return waitForDiscussionsRequest();
+      return waitForPromises();
     });
 
     it('dispatches toggleAward after toggleAward event', () => {
@@ -373,7 +355,7 @@ describe('note_app', () => {
     beforeEach(() => {
       axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
       wrapper = mountComponent();
-      return waitForDiscussionsRequest();
+      return waitForPromises();
     });
 
     it('should listen hashchange event', () => {
@@ -471,7 +453,7 @@ describe('note_app', () => {
         wrapper = shallowMount(NotesApp, { propsData, store: createStore() });
         await waitForPromises();
 
-        expect(axiosMock.history.get[0].params).toBeUndefined();
+        expect(axiosMock.history.get[0].params).toEqual({ per_page: 20 });
       });
     });
 
@@ -496,14 +478,14 @@ describe('note_app', () => {
         wrapper = mountWithNotesFilter(undefined);
         await waitForPromises();
 
-        expect(axiosMock.history.get[0].params).toBeUndefined();
+        expect(axiosMock.history.get[0].params).toEqual({ per_page: 20 });
       });
 
       it('does not include extra query params when filter is already set to default', async () => {
         wrapper = mountWithNotesFilter(constants.DISCUSSION_FILTERS_DEFAULT_VALUE);
         await waitForPromises();
 
-        expect(axiosMock.history.get[0].params).toBeUndefined();
+        expect(axiosMock.history.get[0].params).toEqual({ per_page: 20 });
       });
 
       it('includes extra query params when filter is not set to default', async () => {
@@ -512,6 +494,7 @@ describe('note_app', () => {
 
         expect(axiosMock.history.get[0].params).toEqual({
           notes_filter: constants.DISCUSSION_FILTERS_DEFAULT_VALUE,
+          per_page: 20,
           persist_filter: false,
         });
       });
diff --git a/spec/frontend/notes/components/toggle_replies_widget_spec.js b/spec/frontend/notes/components/toggle_replies_widget_spec.js
index 409e1bc3951..8c3696e88b7 100644
--- a/spec/frontend/notes/components/toggle_replies_widget_spec.js
+++ b/spec/frontend/notes/components/toggle_replies_widget_spec.js
@@ -1,13 +1,14 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import toggleRepliesWidget from '~/notes/components/toggle_replies_widget.vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import ToggleRepliesWidget from '~/notes/components/toggle_replies_widget.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { note } from '../mock_data';
 
-const deepCloneObject = (obj) => JSON.parse(JSON.stringify(obj));
-
 describe('toggle replies widget for notes', () => {
-  let vm;
-  let ToggleRepliesWidget;
+  let wrapper;
+
+  const deepCloneObject = (obj) => JSON.parse(JSON.stringify(obj));
+
   const noteFromOtherUser = deepCloneObject(note);
   noteFromOtherUser.author.username = 'fatihacet';
 
@@ -17,62 +18,62 @@ describe('toggle replies widget for notes', () => {
 
   const replies = [note, note, note, noteFromOtherUser, noteFromAnotherUser];
 
-  beforeEach(() => {
-    ToggleRepliesWidget = Vue.extend(toggleRepliesWidget);
-  });
+  const findCollapseToggleButton = () =>
+    wrapper.findByRole('button', { text: ToggleRepliesWidget.i18n.collapseReplies });
+  const findExpandToggleButton = () =>
+    wrapper.findByRole('button', { text: ToggleRepliesWidget.i18n.expandReplies });
+  const findRepliesButton = () => wrapper.findByRole('button', { text: '5 replies' });
+  const findTimeAgoTooltip = () => wrapper.findComponent(TimeAgoTooltip);
+  const findUserAvatarLink = () => wrapper.findAllComponents(UserAvatarLink);
+  const findUserLink = () => wrapper.findByRole('link', { text: noteFromAnotherUser.author.name });
+
+  const mountComponent = ({ collapsed = false }) =>
+    mountExtended(ToggleRepliesWidget, { propsData: { replies, collapsed } });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('collapsed state', () => {
     beforeEach(() => {
-      vm = mountComponent(ToggleRepliesWidget, {
-        replies,
-        collapsed: true,
-      });
+      wrapper = mountComponent({ collapsed: true });
     });
 
-    it('should render the collapsed', () => {
-      const vmTextContent = vm.$el.textContent.replace(/\s\s+/g, ' ');
-
-      expect(vm.$el.classList.contains('collapsed')).toEqual(true);
-      expect(vm.$el.querySelectorAll('.user-avatar-link').length).toEqual(3);
-      expect(vm.$el.querySelector('time')).not.toBeNull();
-      expect(vmTextContent).toContain('5 replies');
-      expect(vmTextContent).toContain(`Last reply by ${noteFromAnotherUser.author.name}`);
+    it('renders collapsed state elements', () => {
+      expect(findExpandToggleButton().exists()).toBe(true);
+      expect(findUserAvatarLink()).toHaveLength(3);
+      expect(findRepliesButton().exists()).toBe(true);
+      expect(wrapper.text()).toContain('Last reply by');
+      expect(findUserLink().exists()).toBe(true);
+      expect(findTimeAgoTooltip().exists()).toBe(true);
     });
 
-    it('should emit toggle event when the replies text clicked', () => {
-      const spy = jest.spyOn(vm, '$emit');
+    it('emits "toggle" event when expand toggle button is clicked', () => {
+      findExpandToggleButton().trigger('click');
+
+      expect(wrapper.emitted('toggle')).toEqual([[]]);
+    });
 
-      vm.$el.querySelector('.js-replies-text').click();
+    it('emits "toggle" event when replies button is clicked', () => {
+      findRepliesButton().trigger('click');
 
-      expect(spy).toHaveBeenCalledWith('toggle');
+      expect(wrapper.emitted('toggle')).toEqual([[]]);
     });
   });
 
   describe('expanded state', () => {
     beforeEach(() => {
-      vm = mountComponent(ToggleRepliesWidget, {
-        replies,
-        collapsed: false,
-      });
+      wrapper = mountComponent({ collapsed: false });
     });
 
-    it('should render expanded state', () => {
-      const vmTextContent = vm.$el.textContent.replace(/\s\s+/g, ' ');
-
-      expect(vm.$el.querySelector('.collapse-replies-btn')).not.toBeNull();
-      expect(vmTextContent).toContain('Collapse replies');
+    it('renders expanded state elements', () => {
+      expect(findCollapseToggleButton().exists()).toBe(true);
     });
 
-    it('should emit toggle event when the collapse replies text called', () => {
-      const spy = jest.spyOn(vm, '$emit');
-
-      vm.$el.querySelector('.js-collapse-replies').click();
+    it('emits "toggle" event when collapse toggle button is clicked', () => {
+      findCollapseToggleButton().trigger('click');
 
-      expect(spy).toHaveBeenCalledWith('toggle');
+      expect(wrapper.emitted('toggle')).toEqual([[]]);
     });
   });
 });
diff --git a/spec/frontend/notes/stores/actions_spec.js b/spec/frontend/notes/stores/actions_spec.js
index 38f29ac2559..02b27eca196 100644
--- a/spec/frontend/notes/stores/actions_spec.js
+++ b/spec/frontend/notes/stores/actions_spec.js
@@ -15,6 +15,7 @@ import * as utils from '~/notes/stores/utils';
 import updateIssueLockMutation from '~/sidebar/components/lock/mutations/update_issue_lock.mutation.graphql';
 import updateMergeRequestLockMutation from '~/sidebar/components/lock/mutations/update_merge_request_lock.mutation.graphql';
 import mrWidgetEventHub from '~/vue_merge_request_widget/event_hub';
+import waitForPromises from 'helpers/wait_for_promises';
 import { resetStore } from '../helpers';
 import {
   discussionMock,
@@ -254,9 +255,7 @@ describe('Actions Notes Store', () => {
         jest.advanceTimersByTime(time);
       }
 
-      return new Promise((resolve) => {
-        requestAnimationFrame(resolve);
-      });
+      return waitForPromises();
     };
     const advanceXMoreIntervals = async (number) => {
       const timeoutLength = pollInterval * number;
@@ -365,7 +364,6 @@ describe('Actions Notes Store', () => {
       });
 
       it('hides the error display if it exists on success', async () => {
-        jest.mock();
         failureMock();
 
         await startPolling();
@@ -668,7 +666,6 @@ describe('Actions Notes Store', () => {
 
   describe('updateOrCreateNotes', () => {
     it('Prevents `fetchDiscussions` being called multiple times within time limit', () => {
-      jest.useFakeTimers();
       const note = { id: 1234, type: notesConstants.DIFF_NOTE };
       const getters = { notesById: {} };
       state = { discussions: [note], notesData: { discussionsPath: '' } };
@@ -1351,7 +1348,7 @@ describe('Actions Notes Store', () => {
       return testAction(
         actions.fetchDiscussions,
         {},
-        null,
+        { noteableType: notesConstants.MERGE_REQUEST_NOTEABLE_TYPE },
         [
           { type: mutationTypes.ADD_OR_UPDATE_DISCUSSIONS, payload: { discussion } },
           { type: mutationTypes.SET_FETCHING_DISCUSSIONS, payload: false },
@@ -1360,13 +1357,11 @@ describe('Actions Notes Store', () => {
       );
     });
 
-    it('dispatches `fetchDiscussionsBatch` action if `paginatedIssueDiscussions` feature flag is enabled', () => {
-      window.gon = { features: { paginatedIssueDiscussions: true } };
-
+    it('dispatches `fetchDiscussionsBatch` action if noteable is an Issue', () => {
       return testAction(
         actions.fetchDiscussions,
         { path: 'test-path', filter: 'test-filter', persistFilter: 'test-persist-filter' },
-        null,
+        { noteableType: notesConstants.ISSUE_NOTEABLE_TYPE },
         [],
         [
           {
@@ -1389,7 +1384,7 @@ describe('Actions Notes Store', () => {
       return testAction(
         actions.fetchDiscussions,
         { path: 'test-path', filter: 'test-filter', persistFilter: 'test-persist-filter' },
-        null,
+        { noteableType: notesConstants.MERGE_REQUEST_NOTEABLE_TYPE },
         [],
         [
           {
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js
index ca666e38291..9982286c625 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js
@@ -18,7 +18,6 @@ import {
   CLEANUP_SCHEDULED_TOOLTIP,
   CLEANUP_ONGOING_TOOLTIP,
   CLEANUP_UNFINISHED_TOOLTIP,
-  ROOT_IMAGE_TEXT,
   ROOT_IMAGE_TOOLTIP,
 } from '~/packages_and_registries/container_registry/explorer/constants';
 import getContainerRepositoryMetadata from '~/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_metadata.query.graphql';
@@ -35,6 +34,7 @@ describe('Details Header', () => {
     canDelete: true,
     project: {
       visibility: 'public',
+      path: 'path',
       containerExpirationPolicy: {
         enabled: false,
       },
@@ -98,8 +98,8 @@ describe('Details Header', () => {
         return waitForPromises();
       });
 
-      it('root image ', () => {
-        expect(findTitle().text()).toBe(ROOT_IMAGE_TEXT);
+      it('root image shows project path name', () => {
+        expect(findTitle().text()).toBe('path');
       });
 
       it('has an icon', () => {
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js
index 0581a40b6a2..a5b2b1d7cf8 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js
@@ -109,5 +109,17 @@ describe('cleanup_status', () => {
       expect(findPopover().findComponent(GlLink).exists()).toBe(true);
       expect(findPopover().findComponent(GlLink).attributes('href')).toBe(cleanupPolicyHelpPage);
     });
+
+    it('id matches popover target attribute', () => {
+      mountComponent({
+        status: UNFINISHED_STATUS,
+        next_run_at: '2063-04-08T01:44:03Z',
+      });
+
+      const id = findExtraInfoIcon().attributes('id');
+
+      expect(id).toMatch(/status-info-[0-9]+/);
+      expect(findPopover().props('target')).toEqual(id);
+    });
   });
 });
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js
index 979e1500d7d..d12933526bc 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js
@@ -1,6 +1,7 @@
-import { GlIcon, GlSprintf, GlSkeletonLoader } from '@gitlab/ui';
+import { GlIcon, GlSprintf, GlSkeletonLoader, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { mockTracking } from 'helpers/tracking_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import DeleteButton from '~/packages_and_registries/container_registry/explorer/components/delete_button.vue';
 import CleanupStatus from '~/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue';
@@ -12,7 +13,6 @@ import {
   IMAGE_DELETE_SCHEDULED_STATUS,
   IMAGE_MIGRATING_STATE,
   SCHEDULED_STATUS,
-  ROOT_IMAGE_TEXT,
   COPY_IMAGE_PATH_TITLE,
 } from '~/packages_and_registries/container_registry/explorer/constants';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -31,13 +31,15 @@ describe('Image List Row', () => {
   const findCleanupStatus = () => wrapper.findComponent(CleanupStatus);
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findListItemComponent = () => wrapper.findComponent(ListItem);
+  const findShowFullPathButton = () => wrapper.findComponent(GlButton);
 
-  const mountComponent = (props) => {
+  const mountComponent = (props, features = {}) => {
     wrapper = shallowMount(Component, {
       stubs: {
         RouterLink,
         GlSprintf,
         ListItem,
+        GlButton,
       },
       propsData: {
         item,
@@ -45,6 +47,9 @@ describe('Image List Row', () => {
       },
       provide: {
         config: {},
+        glFeatures: {
+          ...features,
+        },
       },
       directives: {
         GlTooltip: createMockDirective(),
@@ -96,10 +101,10 @@ describe('Image List Row', () => {
       });
     });
 
-    it(`when the image has no name appends ${ROOT_IMAGE_TEXT} to the path`, () => {
+    it('when the image has no name lists the path', () => {
       mountComponent({ item: { ...item, name: '' } });
 
-      expect(findDetailsLink().text()).toBe(`${item.path}/ ${ROOT_IMAGE_TEXT}`);
+      expect(findDetailsLink().text()).toBe(item.path);
     });
 
     it('contains a clipboard button', () => {
@@ -144,6 +149,35 @@ describe('Image List Row', () => {
         expect(findClipboardButton().attributes('disabled')).toBe('true');
       });
     });
+
+    describe('when containerRegistryShowShortenedPath feature enabled', () => {
+      let trackingSpy;
+
+      beforeEach(() => {
+        mountComponent({}, { containerRegistryShowShortenedPath: true });
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      });
+
+      it('renders shortened name of image', () => {
+        expect(findShowFullPathButton().exists()).toBe(true);
+        expect(findDetailsLink().text()).toBe('gitlab-test/rails-12009');
+      });
+
+      it('clicking on shortened name of image hides the button & shows full path', async () => {
+        const btn = findShowFullPathButton();
+        const mockFocusFn = jest.fn();
+        wrapper.vm.$refs.imageName.$el.focus = mockFocusFn;
+
+        await btn.trigger('click');
+
+        expect(findShowFullPathButton().exists()).toBe(false);
+        expect(findDetailsLink().text()).toBe(item.path);
+        expect(mockFocusFn).toHaveBeenCalled();
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_show_full_path', {
+          label: 'registry_image_list',
+        });
+      });
+    });
   });
 
   describe('delete button', () => {
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/mock_data.js b/spec/frontend/packages_and_registries/container_registry/explorer/mock_data.js
index 7e6f88fe5bc..f9739509ef9 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/mock_data.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/mock_data.js
@@ -11,6 +11,10 @@ export const imagesListResponse = [
     createdAt: '2020-11-03T13:29:21Z',
     expirationPolicyStartedAt: null,
     expirationPolicyCleanupStatus: 'UNSCHEDULED',
+    project: {
+      id: 'gid://gitlab/Project/22',
+      path: 'gitlab-test',
+    },
   },
   {
     __typename: 'ContainerRepository',
@@ -24,6 +28,10 @@ export const imagesListResponse = [
     createdAt: '2020-09-21T06:57:43Z',
     expirationPolicyStartedAt: null,
     expirationPolicyCleanupStatus: 'UNSCHEDULED',
+    project: {
+      id: 'gid://gitlab/Project/22',
+      path: 'gitlab-test',
+    },
   },
 ];
 
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js
index 59ca47bee50..1d161888a4d 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js
@@ -20,7 +20,6 @@ import {
   ALERT_DANGER_IMAGE,
   ALERT_DANGER_IMPORTING,
   MISSING_OR_DELETED_IMAGE_BREADCRUMB,
-  ROOT_IMAGE_TEXT,
   MISSING_OR_DELETED_IMAGE_TITLE,
   MISSING_OR_DELETED_IMAGE_MESSAGE,
 } from '~/packages_and_registries/container_registry/explorer/constants';
@@ -482,7 +481,7 @@ describe('Details Page', () => {
       expect(breadCrumbState.updateName).toHaveBeenCalledWith(MISSING_OR_DELETED_IMAGE_BREADCRUMB);
     });
 
-    it(`when the image has no name set the breadcrumb to ${ROOT_IMAGE_TEXT}`, async () => {
+    it(`when the image has no name set the breadcrumb to project name`, async () => {
       mountComponent({
         resolver: jest
           .fn()
@@ -491,7 +490,7 @@ describe('Details Page', () => {
 
       await waitForApolloRequestRender();
 
-      expect(breadCrumbState.updateName).toHaveBeenCalledWith(ROOT_IMAGE_TEXT);
+      expect(breadCrumbState.updateName).toHaveBeenCalledWith('gitlab-test');
     });
   });
 
diff --git a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
index fe4a2c06f1c..f2901148e17 100644
--- a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
+++ b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
@@ -38,6 +38,8 @@ const dummyGon = {
 let originalGon;
 const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/groups/${dummyGrouptId}/dependency_proxy/cache`;
 
+Vue.use(VueApollo);
+
 describe('DependencyProxyApp', () => {
   let wrapper;
   let apolloProvider;
@@ -51,8 +53,6 @@ describe('DependencyProxyApp', () => {
   };
 
   function createComponent({ provide = provideDefaults } = {}) {
-    Vue.use(VueApollo);
-
     const requestHandlers = [[getDependencyProxyDetailsQuery, resolver]];
 
     apolloProvider = createMockApollo(requestHandlers);
@@ -103,19 +103,21 @@ describe('DependencyProxyApp', () => {
 
   describe('when the dependency proxy is available', () => {
     describe('when is loading', () => {
-      beforeEach(() => {
+      it('renders the skeleton loader', () => {
         createComponent();
-      });
 
-      it('renders the skeleton loader', () => {
         expect(findSkeletonLoader().exists()).toBe(true);
       });
 
       it('does not render a form group with label', () => {
+        createComponent();
+
         expect(findFormGroup().exists()).toBe(false);
       });
 
       it('does not show the main section', () => {
+        createComponent();
+
         expect(findMainArea().exists()).toBe(false);
       });
     });
@@ -215,23 +217,26 @@ describe('DependencyProxyApp', () => {
             });
 
             describe('triggering page event on list', () => {
-              beforeEach(async () => {
+              it('re-renders the skeleton loader', async () => {
                 findManifestList().vm.$emit('next-page');
-
                 await nextTick();
-              });
 
-              it('re-renders the skeleton loader', () => {
                 expect(findSkeletonLoader().exists()).toBe(true);
               });
 
-              it('renders form group with label', () => {
+              it('renders form group with label', async () => {
+                findManifestList().vm.$emit('next-page');
+                await nextTick();
+
                 expect(findFormGroup().attributes('label')).toEqual(
                   expect.stringMatching(DependencyProxyApp.i18n.proxyImagePrefix),
                 );
               });
 
-              it('does not show the main section', () => {
+              it('does not show the main section', async () => {
+                findManifestList().vm.$emit('next-page');
+                await nextTick();
+
                 expect(findMainArea().exists()).toBe(false);
               });
             });
diff --git a/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js
index e60989b0949..9d4c7f4737b 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js
@@ -6,13 +6,15 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
 import component from '~/packages_and_registries/settings/group/components/dependency_proxy_settings.vue';
-import { DEPENDENCY_PROXY_HEADER } from '~/packages_and_registries/settings/group/constants';
+import {
+  DEPENDENCY_PROXY_HEADER,
+  DEPENDENCY_PROXY_DESCRIPTION,
+} from '~/packages_and_registries/settings/group/constants';
 
 import updateDependencyProxySettings from '~/packages_and_registries/settings/group/graphql/mutations/update_dependency_proxy_settings.mutation.graphql';
 import updateDependencyProxyImageTtlGroupPolicy from '~/packages_and_registries/settings/group/graphql/mutations/update_dependency_proxy_image_ttl_group_policy.mutation.graphql';
 import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/group/graphql/queries/get_group_packages_settings.query.graphql';
 import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
-import SettingsTitles from '~/packages_and_registries/settings/group/components/settings_titles.vue';
 import {
   updateGroupDependencyProxySettingsOptimisticResponse,
   updateDependencyProxyImageTtlGroupPolicyOptimisticResponse,
@@ -36,7 +38,6 @@ describe('DependencyProxySettings', () => {
   let updateTtlPoliciesMutationResolver;
 
   const defaultProvide = {
-    defaultExpanded: false,
     groupPath: 'foo_group_path',
     groupDependencyProxyPath: 'group_dependency_proxy_path',
   };
@@ -86,7 +87,6 @@ describe('DependencyProxySettings', () => {
   });
 
   const findSettingsBlock = () => wrapper.findComponent(SettingsBlock);
-  const findSettingsTitles = () => wrapper.findComponent(SettingsTitles);
   const findEnableProxyToggle = () => wrapper.findByTestId('dependency-proxy-setting-toggle');
   const findEnableTtlPoliciesToggle = () =>
     wrapper.findByTestId('dependency-proxy-ttl-policies-toggle');
@@ -108,16 +108,11 @@ describe('DependencyProxySettings', () => {
     expect(findSettingsBlock().exists()).toBe(true);
   });
 
-  it('passes the correct props to settings block', () => {
-    mountComponent();
-
-    expect(findSettingsBlock().props('defaultExpanded')).toBe(false);
-  });
-
-  it('has the correct header text', () => {
+  it('has the correct header text and description', () => {
     mountComponent();
 
     expect(wrapper.text()).toContain(DEPENDENCY_PROXY_HEADER);
+    expect(wrapper.text()).toContain(DEPENDENCY_PROXY_DESCRIPTION);
   });
 
   describe('enable toggle', () => {
@@ -158,14 +153,6 @@ describe('DependencyProxySettings', () => {
   });
 
   describe('storage settings', () => {
-    it('the component has the settings title', () => {
-      mountComponent();
-
-      expect(findSettingsTitles().props()).toMatchObject({
-        title: component.i18n.storageSettingsTitle,
-      });
-    });
-
     describe('enable proxy ttl policies', () => {
       it('exists', () => {
         mountComponent();
diff --git a/spec/frontend/packages_and_registries/settings/group/components/duplicates_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/duplicates_settings_spec.js
index 79c2f811c08..3eecdeb5b1f 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/duplicates_settings_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/duplicates_settings_spec.js
@@ -4,8 +4,6 @@ import component from '~/packages_and_registries/settings/group/components/dupli
 
 import {
   DUPLICATES_TOGGLE_LABEL,
-  DUPLICATES_ALLOWED_ENABLED,
-  DUPLICATES_ALLOWED_DISABLED,
   DUPLICATES_SETTING_EXCEPTION_TITLE,
   DUPLICATES_SETTINGS_EXCEPTION_LEGEND,
 } from '~/packages_and_registries/settings/group/constants';
@@ -36,7 +34,6 @@ describe('Duplicates Settings', () => {
   });
 
   const findToggle = () => wrapper.findComponent(GlToggle);
-  const findToggleLabel = () => wrapper.find('[data-testid="toggle-label"');
 
   const findInputGroup = () => wrapper.findComponent(GlFormGroup);
   const findInput = () => wrapper.findComponent(GlFormInput);
@@ -47,7 +44,7 @@ describe('Duplicates Settings', () => {
     expect(findToggle().exists()).toBe(true);
     expect(findToggle().props()).toMatchObject({
       label: DUPLICATES_TOGGLE_LABEL,
-      value: defaultProps.duplicatesAllowed,
+      value: !defaultProps.duplicatesAllowed,
     });
   });
 
@@ -57,18 +54,11 @@ describe('Duplicates Settings', () => {
     findToggle().vm.$emit('change', false);
 
     expect(wrapper.emitted('update')).toStrictEqual([
-      [{ [defaultProps.modelNames.allowed]: false }],
+      [{ [defaultProps.modelNames.allowed]: true }],
     ]);
   });
 
   describe('when the duplicates are disabled', () => {
-    it('the toggle has the disabled message', () => {
-      mountComponent();
-
-      expect(findToggleLabel().exists()).toBe(true);
-      expect(findToggleLabel().text()).toMatchInterpolatedText(DUPLICATES_ALLOWED_DISABLED);
-    });
-
     it('shows a form group with an input field', () => {
       mountComponent();
 
@@ -130,13 +120,6 @@ describe('Duplicates Settings', () => {
   });
 
   describe('when the duplicates are enabled', () => {
-    it('has the correct toggle label', () => {
-      mountComponent({ ...defaultProps, duplicatesAllowed: true });
-
-      expect(findToggleLabel().exists()).toBe(true);
-      expect(findToggleLabel().text()).toMatchInterpolatedText(DUPLICATES_ALLOWED_ENABLED);
-    });
-
     it('hides the form input group', () => {
       mountComponent({ ...defaultProps, duplicatesAllowed: true });
 
diff --git a/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
index 635195ff0a4..31fc3ad419c 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
@@ -26,7 +26,6 @@ describe('Group Settings App', () => {
   let show;
 
   const defaultProvide = {
-    defaultExpanded: false,
     groupPath: 'foo_group_path',
   };
 
diff --git a/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js
index d92d42e7834..274930ce668 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js
@@ -1,4 +1,3 @@
-import { GlSprintf, GlLink } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -11,7 +10,6 @@ import MavenSettings from '~/packages_and_registries/settings/group/components/m
 import {
   PACKAGE_SETTINGS_HEADER,
   PACKAGE_SETTINGS_DESCRIPTION,
-  PACKAGES_DOCS_PATH,
 } from '~/packages_and_registries/settings/group/constants';
 
 import updateNamespacePackageSettings from '~/packages_and_registries/settings/group/graphql/mutations/update_group_packages_settings.mutation.graphql';
@@ -33,7 +31,6 @@ describe('Packages Settings', () => {
   let apolloProvider;
 
   const defaultProvide = {
-    defaultExpanded: false,
     groupPath: 'foo_group_path',
   };
 
@@ -53,7 +50,6 @@ describe('Packages Settings', () => {
         packageSettings: packageSettings(),
       },
       stubs: {
-        GlSprintf,
         SettingsBlock,
         MavenSettings,
         GenericSettings,
@@ -67,7 +63,6 @@ describe('Packages Settings', () => {
 
   const findSettingsBlock = () => wrapper.findComponent(SettingsBlock);
   const findDescription = () => wrapper.findByTestId('description');
-  const findLink = () => wrapper.findComponent(GlLink);
   const findMavenSettings = () => wrapper.findComponent(MavenSettings);
   const findMavenDuplicatedSettings = () => findMavenSettings().findComponent(DuplicatesSettings);
   const findGenericSettings = () => wrapper.findComponent(GenericSettings);
@@ -97,12 +92,6 @@ describe('Packages Settings', () => {
     expect(findSettingsBlock().exists()).toBe(true);
   });
 
-  it('passes the correct props to settings block', () => {
-    mountComponent();
-
-    expect(findSettingsBlock().props('defaultExpanded')).toBe(false);
-  });
-
   it('has the correct header text', () => {
     mountComponent();
 
@@ -115,16 +104,6 @@ describe('Packages Settings', () => {
     expect(findDescription().text()).toMatchInterpolatedText(PACKAGE_SETTINGS_DESCRIPTION);
   });
 
-  it('has the correct link', () => {
-    mountComponent();
-
-    expect(findLink().attributes()).toMatchObject({
-      href: PACKAGES_DOCS_PATH,
-      target: '_blank',
-    });
-    expect(findLink().text()).toBe('Learn more.');
-  });
-
   describe('maven settings', () => {
     it('exists', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/container_expiration_policy_form_spec.js.snap b/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/container_expiration_policy_form_spec.js.snap
index faa313118f3..108d9478788 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/container_expiration_policy_form_spec.js.snap
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/__snapshots__/container_expiration_policy_form_spec.js.snap
@@ -4,6 +4,7 @@ exports[`Container Expiration Policy Settings Form Cadence matches snapshot 1`]
 <expiration-dropdown-stub
   class="gl-mr-7 gl-mb-0!"
   data-testid="cadence-dropdown"
+  description=""
   formoptions="[object Object],[object Object],[object Object],[object Object],[object Object]"
   label="Run cleanup:"
   name="cadence"
@@ -22,6 +23,7 @@ exports[`Container Expiration Policy Settings Form Enable matches snapshot 1`] =
 exports[`Container Expiration Policy Settings Form Keep N matches snapshot 1`] = `
 <expiration-dropdown-stub
   data-testid="keep-n-dropdown"
+  description=""
   formoptions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
   label="Keep the most recent:"
   name="keep-n"
@@ -44,6 +46,7 @@ exports[`Container Expiration Policy Settings Form Keep Regex matches snapshot 1
 exports[`Container Expiration Policy Settings Form OlderThan matches snapshot 1`] = `
 <expiration-dropdown-stub
   data-testid="older-than-dropdown"
+  description=""
   formoptions="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
   label="Remove tags older than:"
   name="older-than"
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 aa3506771fa..d83c717da6a 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
@@ -43,11 +43,6 @@ describe('Container expiration policy project settings', () => {
         GlSprintf,
         SettingsBlock,
       },
-      mocks: {
-        $toast: {
-          show: jest.fn(),
-        },
-      },
       provide,
       ...config,
     });
@@ -98,7 +93,7 @@ describe('Container expiration policy project settings', () => {
     await waitForPromises();
 
     expect(findFormComponent().exists()).toBe(true);
-    expect(findSettingsBlock().props('collapsible')).toBe(false);
+    expect(findSettingsBlock().exists()).toBe(true);
   });
 
   describe('the form is disabled', () => {
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js
index 5c9ade7f785..8b99ac6b06c 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js
@@ -16,6 +16,7 @@ describe('ExpirationDropdown', () => {
 
   const findFormSelect = () => wrapper.find(GlFormSelect);
   const findFormGroup = () => wrapper.find(GlFormGroup);
+  const findDescription = () => wrapper.find('[data-testid="description"]');
   const findOptions = () => wrapper.findAll('[data-testid="option"]');
 
   const mountComponent = (props) => {
@@ -47,6 +48,14 @@ describe('ExpirationDropdown', () => {
 
       expect(findOptions()).toHaveLength(defaultProps.formOptions.length);
     });
+
+    it('renders the description if passed', () => {
+      mountComponent({
+        description: 'test description',
+      });
+
+      expect(findDescription().html()).toContain('test description');
+    });
   });
 
   describe('model', () => {
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
new file mode 100644
index 00000000000..86f45d78bae
--- /dev/null
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
@@ -0,0 +1,267 @@
+import VueApollo from 'vue-apollo';
+import Vue from 'vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { GlLoadingIcon } from 'jest/packages_and_registries/shared/stubs';
+import component from '~/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue';
+import {
+  UPDATE_SETTINGS_ERROR_MESSAGE,
+  UPDATE_SETTINGS_SUCCESS_MESSAGE,
+  KEEP_N_DUPLICATED_PACKAGE_FILES_LABEL,
+  KEEP_N_DUPLICATED_PACKAGE_FILES_DESCRIPTION,
+} from '~/packages_and_registries/settings/project/constants';
+import updatePackagesCleanupPolicyMutation from '~/packages_and_registries/settings/project/graphql/mutations/update_packages_cleanup_policy.mutation.graphql';
+import Tracking from '~/tracking';
+import { packagesCleanupPolicyPayload, packagesCleanupPolicyMutationPayload } from '../mock_data';
+
+Vue.use(VueApollo);
+
+describe('Packages Cleanup Policy Settings Form', () => {
+  let wrapper;
+  let fakeApollo;
+
+  const defaultProvidedValues = {
+    projectPath: 'path',
+  };
+
+  const {
+    data: {
+      project: { packagesCleanupPolicy },
+    },
+  } = packagesCleanupPolicyPayload();
+
+  const defaultProps = {
+    value: { ...packagesCleanupPolicy },
+  };
+
+  const trackingPayload = {
+    label: 'packages_cleanup_policies',
+  };
+
+  const findForm = () => wrapper.find({ ref: 'form-element' });
+  const findSaveButton = () => wrapper.findByTestId('save-button');
+  const findKeepNDuplicatedPackageFilesDropdown = () =>
+    wrapper.findByTestId('keep-n-duplicated-package-files-dropdown');
+
+  const submitForm = async () => {
+    findForm().trigger('submit');
+    return waitForPromises();
+  };
+
+  const mountComponent = ({
+    props = defaultProps,
+    data,
+    config,
+    provide = defaultProvidedValues,
+  } = {}) => {
+    wrapper = shallowMountExtended(component, {
+      stubs: {
+        GlLoadingIcon,
+      },
+      propsData: { ...props },
+      provide,
+      data() {
+        return {
+          ...data,
+        };
+      },
+      mocks: {
+        $toast: {
+          show: jest.fn(),
+        },
+      },
+      ...config,
+    });
+  };
+
+  const mountComponentWithApollo = ({
+    provide = defaultProvidedValues,
+    mutationResolver,
+    queryPayload = packagesCleanupPolicyPayload(),
+  } = {}) => {
+    const requestHandlers = [[updatePackagesCleanupPolicyMutation, mutationResolver]];
+
+    fakeApollo = createMockApollo(requestHandlers);
+
+    const {
+      data: {
+        project: { packagesCleanupPolicy: value },
+      },
+    } = queryPayload;
+
+    mountComponent({
+      provide,
+      props: {
+        ...defaultProps,
+        value,
+      },
+      config: {
+        apolloProvider: fakeApollo,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    jest.spyOn(Tracking, 'event');
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    fakeApollo = null;
+  });
+
+  describe('keepNDuplicatedPackageFiles', () => {
+    it('renders dropdown', () => {
+      mountComponent();
+
+      const element = findKeepNDuplicatedPackageFilesDropdown();
+
+      expect(element.exists()).toBe(true);
+      expect(element.props('label')).toMatchInterpolatedText(KEEP_N_DUPLICATED_PACKAGE_FILES_LABEL);
+      expect(element.props('description')).toEqual(KEEP_N_DUPLICATED_PACKAGE_FILES_DESCRIPTION);
+    });
+
+    it('input event triggers a model update', () => {
+      mountComponent();
+
+      findKeepNDuplicatedPackageFilesDropdown().vm.$emit('input', 'foo');
+      expect(wrapper.emitted('input')[0][0]).toMatchObject({
+        keepNDuplicatedPackageFiles: 'foo',
+      });
+    });
+
+    it('shows the default option when none are selected', () => {
+      mountComponent({ props: { value: {} } });
+      expect(findKeepNDuplicatedPackageFilesDropdown().props('value')).toEqual('ALL_PACKAGE_FILES');
+    });
+
+    it.each`
+      isLoading | mutationLoading
+      ${true}   | ${false}
+      ${true}   | ${true}
+      ${false}  | ${true}
+    `(
+      'is disabled when is loading is $isLoading and mutationLoading is $mutationLoading',
+      ({ isLoading, mutationLoading }) => {
+        mountComponent({
+          props: { isLoading, value: {} },
+          data: { mutationLoading },
+        });
+        expect(findKeepNDuplicatedPackageFilesDropdown().props('disabled')).toEqual(true);
+      },
+    );
+
+    it('has the correct formOptions', () => {
+      mountComponent();
+      expect(findKeepNDuplicatedPackageFilesDropdown().props('formOptions')).toEqual(
+        wrapper.vm.$options.formOptions.keepNDuplicatedPackageFiles,
+      );
+    });
+  });
+
+  describe('form', () => {
+    describe('actions', () => {
+      describe('submit button', () => {
+        it('has type submit', () => {
+          mountComponent();
+
+          expect(findSaveButton().attributes('type')).toBe('submit');
+        });
+
+        it.each`
+          isLoading | mutationLoading | disabled
+          ${true}   | ${true}         | ${true}
+          ${true}   | ${false}        | ${true}
+          ${false}  | ${true}         | ${true}
+          ${false}  | ${false}        | ${false}
+        `(
+          'when isLoading is $isLoading and mutationLoading is $mutationLoading is disabled',
+          ({ isLoading, mutationLoading, disabled }) => {
+            mountComponent({
+              props: { ...defaultProps, isLoading },
+              data: { mutationLoading },
+            });
+
+            expect(findSaveButton().props('disabled')).toBe(disabled);
+            expect(findKeepNDuplicatedPackageFilesDropdown().props('disabled')).toBe(disabled);
+          },
+        );
+
+        it.each`
+          isLoading | mutationLoading | showLoading
+          ${true}   | ${true}         | ${true}
+          ${true}   | ${false}        | ${true}
+          ${false}  | ${true}         | ${true}
+          ${false}  | ${false}        | ${false}
+        `(
+          'when isLoading is $isLoading and mutationLoading is $mutationLoading is $showLoading that the loading icon is shown',
+          ({ isLoading, mutationLoading, showLoading }) => {
+            mountComponent({
+              props: { ...defaultProps, isLoading },
+              data: { mutationLoading },
+            });
+
+            expect(findSaveButton().props('loading')).toBe(showLoading);
+          },
+        );
+      });
+    });
+
+    describe('form submit event', () => {
+      it('dispatches the correct apollo mutation', () => {
+        const mutationResolver = jest
+          .fn()
+          .mockResolvedValue(packagesCleanupPolicyMutationPayload());
+        mountComponentWithApollo({
+          mutationResolver,
+        });
+
+        findForm().trigger('submit');
+
+        expect(mutationResolver).toHaveBeenCalledWith({
+          input: {
+            keepNDuplicatedPackageFiles: 'ALL_PACKAGE_FILES',
+            projectPath: 'path',
+          },
+        });
+      });
+
+      it('tracks the submit event', () => {
+        mountComponentWithApollo({
+          mutationResolver: jest.fn().mockResolvedValue(packagesCleanupPolicyMutationPayload()),
+        });
+
+        findForm().trigger('submit');
+
+        expect(Tracking.event).toHaveBeenCalledWith(
+          undefined,
+          'submit_packages_cleanup_form',
+          trackingPayload,
+        );
+      });
+
+      it('show a success toast when submit succeed', async () => {
+        mountComponentWithApollo({
+          mutationResolver: jest.fn().mockResolvedValue(packagesCleanupPolicyMutationPayload()),
+        });
+
+        await submitForm();
+
+        expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_SUCCESS_MESSAGE);
+      });
+
+      describe('when submit fails', () => {
+        it('shows an error', async () => {
+          mountComponentWithApollo({
+            mutationResolver: jest.fn().mockRejectedValue(packagesCleanupPolicyMutationPayload()),
+          });
+
+          await submitForm();
+
+          expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_ERROR_MESSAGE);
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js
new file mode 100644
index 00000000000..6dfeeca6862
--- /dev/null
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js
@@ -0,0 +1,81 @@
+import { GlAlert, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import component from '~/packages_and_registries/settings/project/components/packages_cleanup_policy.vue';
+import PackagesCleanupPolicyForm from '~/packages_and_registries/settings/project/components/packages_cleanup_policy_form.vue';
+import { FETCH_SETTINGS_ERROR_MESSAGE } from '~/packages_and_registries/settings/project/constants';
+import packagesCleanupPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_packages_cleanup_policy.query.graphql';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
+
+import { packagesCleanupPolicyPayload, packagesCleanupPolicyData } from '../mock_data';
+
+Vue.use(VueApollo);
+
+describe('Packages cleanup policy project settings', () => {
+  let wrapper;
+  let fakeApollo;
+
+  const defaultProvidedValues = {
+    projectPath: 'path',
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findFormComponent = () => wrapper.findComponent(PackagesCleanupPolicyForm);
+  const findSettingsBlock = () => wrapper.findComponent(SettingsBlock);
+
+  const mountComponent = (provide = defaultProvidedValues, config) => {
+    wrapper = shallowMount(component, {
+      stubs: {
+        GlSprintf,
+        SettingsBlock,
+      },
+      provide,
+      ...config,
+    });
+  };
+
+  const mountComponentWithApollo = ({ provide = defaultProvidedValues, resolver } = {}) => {
+    const requestHandlers = [[packagesCleanupPolicyQuery, resolver]];
+
+    fakeApollo = createMockApollo(requestHandlers);
+    mountComponent(provide, {
+      apolloProvider: fakeApollo,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    fakeApollo = null;
+  });
+
+  it('renders the setting form', async () => {
+    mountComponentWithApollo({
+      resolver: jest.fn().mockResolvedValue(packagesCleanupPolicyPayload()),
+    });
+    await waitForPromises();
+
+    expect(findFormComponent().exists()).toBe(true);
+    expect(findFormComponent().props('value')).toEqual(packagesCleanupPolicyData);
+    expect(findSettingsBlock().exists()).toBe(true);
+  });
+
+  describe('fetchSettingsError', () => {
+    beforeEach(async () => {
+      mountComponentWithApollo({
+        resolver: jest.fn().mockRejectedValue(new Error('GraphQL error')),
+      });
+      await waitForPromises();
+    });
+
+    it('the form is hidden', () => {
+      expect(findFormComponent().exists()).toBe(false);
+    });
+
+    it('shows an alert', () => {
+      expect(findAlert().html()).toContain(FETCH_SETTINGS_ERROR_MESSAGE);
+    });
+  });
+});
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
index 337991dfae0..f576bc79eae 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
@@ -1,19 +1,41 @@
 import { shallowMount } from '@vue/test-utils';
 import component from '~/packages_and_registries/settings/project/components/registry_settings_app.vue';
 import ContainerExpirationPolicy from '~/packages_and_registries/settings/project/components/container_expiration_policy.vue';
+import PackagesCleanupPolicy from '~/packages_and_registries/settings/project/components/packages_cleanup_policy.vue';
 
 describe('Registry Settings app', () => {
   let wrapper;
+
   const findContainerExpirationPolicy = () => wrapper.find(ContainerExpirationPolicy);
+  const findPackagesCleanupPolicy = () => wrapper.find(PackagesCleanupPolicy);
 
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  it('renders container expiration policy component', () => {
-    wrapper = shallowMount(component);
+  const mountComponent = (provide) => {
+    wrapper = shallowMount(component, {
+      provide,
+    });
+  };
 
-    expect(findContainerExpirationPolicy().exists()).toBe(true);
-  });
+  it.each`
+    showContainerRegistrySettings | showPackageRegistrySettings
+    ${true}                       | ${false}
+    ${true}                       | ${true}
+    ${false}                      | ${true}
+    ${false}                      | ${false}
+  `(
+    'container expiration policy $showContainerRegistrySettings and package cleanup policy is $showPackageRegistrySettings',
+    ({ showContainerRegistrySettings, showPackageRegistrySettings }) => {
+      mountComponent({
+        showContainerRegistrySettings,
+        showPackageRegistrySettings,
+      });
+
+      expect(findContainerExpirationPolicy().exists()).toBe(showContainerRegistrySettings);
+      expect(findPackagesCleanupPolicy().exists()).toBe(showPackageRegistrySettings);
+    },
+  );
 });
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 33406c98f4b..d4b6c66ddeb 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
@@ -40,3 +40,33 @@ export const expirationPolicyMutationPayload = ({ override, errors = [] } = {})
     },
   },
 });
+
+export const packagesCleanupPolicyData = {
+  keepNDuplicatedPackageFiles: 'ALL_PACKAGE_FILES',
+  nextRunAt: '2020-11-19T07:37:03.941Z',
+};
+
+export const packagesCleanupPolicyPayload = (override) => ({
+  data: {
+    project: {
+      id: '1',
+      packagesCleanupPolicy: {
+        __typename: 'PackagesCleanupPolicy',
+        ...packagesCleanupPolicyData,
+        ...override,
+      },
+    },
+  },
+});
+
+export const packagesCleanupPolicyMutationPayload = ({ override, errors = [] } = {}) => ({
+  data: {
+    updatePackagesCleanupPolicy: {
+      packagesCleanupPolicy: {
+        ...packagesCleanupPolicyData,
+        ...override,
+      },
+      errors,
+    },
+  },
+});
diff --git a/spec/frontend/packages_and_registries/shared/components/settings_block_spec.js b/spec/frontend/packages_and_registries/shared/components/settings_block_spec.js
new file mode 100644
index 00000000000..a4c1b989dac
--- /dev/null
+++ b/spec/frontend/packages_and_registries/shared/components/settings_block_spec.js
@@ -0,0 +1,43 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue';
+
+describe('SettingsBlock', () => {
+  let wrapper;
+
+  const mountComponent = (propsData) => {
+    wrapper = shallowMountExtended(SettingsBlock, {
+      propsData,
+      slots: {
+        title: '<div data-testid="title-slot"></div>',
+        description: '<div data-testid="description-slot"></div>',
+        default: '<div data-testid="default-slot"></div>',
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findDefaultSlot = () => wrapper.findByTestId('default-slot');
+  const findTitleSlot = () => wrapper.findByTestId('title-slot');
+  const findDescriptionSlot = () => wrapper.findByTestId('description-slot');
+
+  it('has a default slot', () => {
+    mountComponent();
+
+    expect(findDefaultSlot().exists()).toBe(true);
+  });
+
+  it('has a title slot', () => {
+    mountComponent();
+
+    expect(findTitleSlot().exists()).toBe(true);
+  });
+
+  it('has a description slot', () => {
+    mountComponent();
+
+    expect(findDescriptionSlot().exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/pages/dashboard/todos/index/todos_spec.js b/spec/frontend/pages/dashboard/todos/index/todos_spec.js
index 3a9b59f291c..03aed7454e3 100644
--- a/spec/frontend/pages/dashboard/todos/index/todos_spec.js
+++ b/spec/frontend/pages/dashboard/todos/index/todos_spec.js
@@ -1,5 +1,4 @@
 import MockAdapter from 'axios-mock-adapter';
-import $ from 'jquery';
 import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import waitForPromises from 'helpers/wait_for_promises';
 import '~/lib/utils/common_utils';
@@ -54,22 +53,28 @@ describe('Todos', () => {
       let metakeyEvent;
 
       beforeEach(() => {
-        metakeyEvent = $.Event('click', { keyCode: 91, ctrlKey: true });
+        metakeyEvent = new MouseEvent('click', { ctrlKey: true });
         windowOpenSpy = jest.spyOn(window, 'open').mockImplementation(() => {});
       });
 
       it('opens the todo url in another tab', () => {
         const todoLink = todoItem.dataset.url;
 
-        $('.todos-list .todo').trigger(metakeyEvent);
+        document.querySelectorAll('.todos-list .todo').forEach((el) => {
+          el.dispatchEvent(metakeyEvent);
+        });
 
         expect(visitUrl).not.toHaveBeenCalled();
         expect(windowOpenSpy).toHaveBeenCalledWith(todoLink, '_blank');
       });
 
       it('run native funcionality when avatar is clicked', () => {
-        $('.todos-list a').on('click', (e) => e.preventDefault());
-        $('.todos-list img').trigger(metakeyEvent);
+        document.querySelectorAll('.todos-list a').forEach((el) => {
+          el.addEventListener('click', (e) => e.preventDefault());
+        });
+        document.querySelectorAll('.todos-list img').forEach((el) => {
+          el.dispatchEvent(metakeyEvent);
+        });
 
         expect(visitUrl).not.toHaveBeenCalled();
         expect(windowOpenSpy).not.toHaveBeenCalled();
@@ -88,7 +93,7 @@ describe('Todos', () => {
           .onDelete(path)
           .replyOnce(200, { count: TEST_COUNT_BIG, done_count: TEST_DONE_COUNT_BIG });
         onToggleSpy = jest.fn();
-        $(document).on('todo:toggle', onToggleSpy);
+        document.addEventListener('todo:toggle', onToggleSpy);
 
         // Act
         el.click();
@@ -98,7 +103,13 @@ describe('Todos', () => {
       });
 
       it('dispatches todo:toggle', () => {
-        expect(onToggleSpy).toHaveBeenCalledWith(expect.anything(), TEST_COUNT_BIG);
+        expect(onToggleSpy).toHaveBeenCalledWith(
+          expect.objectContaining({
+            detail: {
+              count: TEST_COUNT_BIG,
+            },
+          }),
+        );
       });
 
       it('updates pending text', () => {
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 efbfd83a071..2a0fde45384 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
@@ -400,10 +400,6 @@ describe('ForkForm component', () => {
       );
     };
 
-    beforeEach(() => {
-      setupComponent();
-    });
-
     const selectedMockNamespaceIndex = 1;
     const namespaceId = MOCK_NAMESPACES_RESPONSE[selectedMockNamespaceIndex].id;
 
@@ -425,10 +421,14 @@ describe('ForkForm component', () => {
       it('does not make POST request', async () => {
         jest.spyOn(axios, 'post');
 
+        setupComponent();
+
         expect(axios.post).not.toHaveBeenCalled();
       });
 
       it('does not redirect the current page', async () => {
+        setupComponent();
+
         await submitForm();
 
         expect(urlUtility.redirectTo).not.toHaveBeenCalled();
@@ -452,13 +452,10 @@ describe('ForkForm component', () => {
     });
 
     describe('with valid form', () => {
-      beforeEach(() => {
-        fillForm();
-      });
-
       it('make POST request with project param', async () => {
         jest.spyOn(axios, 'post');
 
+        setupComponent();
         await submitForm();
 
         const {
@@ -486,6 +483,7 @@ describe('ForkForm component', () => {
         const webUrl = `new/fork-project`;
         jest.spyOn(axios, 'post').mockResolvedValue({ data: { web_url: webUrl } });
 
+        setupComponent();
         await submitForm();
 
         expect(urlUtility.redirectTo).toHaveBeenCalledWith(webUrl);
@@ -496,6 +494,7 @@ describe('ForkForm component', () => {
 
         jest.spyOn(axios, 'post').mockRejectedValue(dummyError);
 
+        setupComponent();
         await submitForm();
 
         expect(urlUtility.redirectTo).not.toHaveBeenCalled();
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
index 005b8968383..aab78c99190 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
+++ b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
@@ -85,8 +85,6 @@ exports[`Learn GitLab renders correctly 1`] = `
           <div
             class="gl-mb-4"
           >
-            <!---->
-             
             <div
               class="flex align-items-center"
             >
@@ -105,7 +103,8 @@ exports[`Learn GitLab renders correctly 1`] = `
                 </svg>
                 
       Invite your colleagues
-    
+      
+                <!---->
               </span>
                
               <!---->
@@ -114,8 +113,6 @@ exports[`Learn GitLab renders correctly 1`] = `
           <div
             class="gl-mb-4"
           >
-            <!---->
-             
             <div
               class="flex align-items-center"
             >
@@ -133,8 +130,9 @@ exports[`Learn GitLab renders correctly 1`] = `
                   />
                 </svg>
                 
-      Create or import a repository
-    
+      Create a repository
+      
+                <!---->
               </span>
                
               <!---->
@@ -143,23 +141,23 @@ exports[`Learn GitLab renders correctly 1`] = `
           <div
             class="gl-mb-4"
           >
-            <!---->
-             
             <div
               class="flex align-items-center"
             >
-              <a
-                class="gl-link"
-                data-testid="uncompleted-learn-gitlab-link"
-                data-track-action="click_link"
-                data-track-label="Set up CI/CD"
-                href="http://example.com/"
-                target="_self"
-              >
-                
-      Set up CI/CD
-    
-              </a>
+              <div>
+                <a
+                  class="gl-link"
+                  data-testid="uncompleted-learn-gitlab-link"
+                  data-track-action="click_link"
+                  data-track-label="set_up_your_first_project_s_ci_cd"
+                  href="http://example.com/"
+                  target="_self"
+                >
+                  Set up your first project's CI/CD
+                </a>
+                 
+                <!---->
+              </div>
                
               <!---->
             </div>
@@ -167,24 +165,24 @@ exports[`Learn GitLab renders correctly 1`] = `
           <div
             class="gl-mb-4"
           >
-            <!---->
-             
             <div
               class="flex align-items-center"
             >
-              <a
-                class="gl-link"
-                data-testid="uncompleted-learn-gitlab-link"
-                data-track-action="click_link"
-                data-track-label="Start a free Ultimate trial"
-                href="http://example.com/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                
-      Start a free Ultimate trial
-    
-              </a>
+              <div>
+                <a
+                  class="gl-link"
+                  data-testid="uncompleted-learn-gitlab-link"
+                  data-track-action="click_link"
+                  data-track-label="start_a_free_trial_of_gitlab_ultimate"
+                  href="http://example.com/"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  Start a free trial of GitLab Ultimate
+                </a>
+                 
+                <!---->
+              </div>
                
               <!---->
             </div>
@@ -193,30 +191,30 @@ exports[`Learn GitLab renders correctly 1`] = `
             class="gl-mb-4"
           >
             <div
-              class="gl-font-style-italic gl-text-gray-500"
-              data-testid="trial-only"
-            >
-              
-    Trial only
-  
-            </div>
-             
-            <div
               class="flex align-items-center"
             >
-              <a
-                class="gl-link"
-                data-testid="uncompleted-learn-gitlab-link"
-                data-track-action="click_link"
-                data-track-label="Add code owners"
-                href="http://example.com/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                
-      Add code owners
-    
-              </a>
+              <div>
+                <a
+                  class="gl-link"
+                  data-testid="uncompleted-learn-gitlab-link"
+                  data-track-action="click_link"
+                  data-track-label="add_code_owners"
+                  href="http://example.com/"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  Add code owners
+                </a>
+                 
+                <span
+                  class="gl-font-style-italic gl-text-gray-500"
+                  data-testid="trial-only"
+                >
+                  
+  - Included in trial
+
+                </span>
+              </div>
                
               <!---->
             </div>
@@ -225,30 +223,30 @@ exports[`Learn GitLab renders correctly 1`] = `
             class="gl-mb-4"
           >
             <div
-              class="gl-font-style-italic gl-text-gray-500"
-              data-testid="trial-only"
-            >
-              
-    Trial only
-  
-            </div>
-             
-            <div
               class="flex align-items-center"
             >
-              <a
-                class="gl-link"
-                data-testid="uncompleted-learn-gitlab-link"
-                data-track-action="click_link"
-                data-track-label="Add merge request approval"
-                href="http://example.com/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                
-      Add merge request approval
-    
-              </a>
+              <div>
+                <a
+                  class="gl-link"
+                  data-testid="uncompleted-learn-gitlab-link"
+                  data-track-action="click_link"
+                  data-track-label="enable_require_merge_approvals"
+                  href="http://example.com/"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  Enable require merge approvals
+                </a>
+                 
+                <span
+                  class="gl-font-style-italic gl-text-gray-500"
+                  data-testid="trial-only"
+                >
+                  
+  - Included in trial
+
+                </span>
+              </div>
                
               <!---->
             </div>
@@ -290,23 +288,23 @@ exports[`Learn GitLab renders correctly 1`] = `
           <div
             class="gl-mb-4"
           >
-            <!---->
-             
             <div
               class="flex align-items-center"
             >
-              <a
-                class="gl-link"
-                data-testid="uncompleted-learn-gitlab-link"
-                data-track-action="click_link"
-                data-track-label="Create an issue"
-                href="http://example.com/"
-                target="_self"
-              >
-                
-      Create an issue
-    
-              </a>
+              <div>
+                <a
+                  class="gl-link"
+                  data-testid="uncompleted-learn-gitlab-link"
+                  data-track-action="click_link"
+                  data-track-label="create_an_issue"
+                  href="http://example.com/"
+                  target="_self"
+                >
+                  Create an issue
+                </a>
+                 
+                <!---->
+              </div>
                
               <!---->
             </div>
@@ -314,23 +312,23 @@ exports[`Learn GitLab renders correctly 1`] = `
           <div
             class="gl-mb-4"
           >
-            <!---->
-             
             <div
               class="flex align-items-center"
             >
-              <a
-                class="gl-link"
-                data-testid="uncompleted-learn-gitlab-link"
-                data-track-action="click_link"
-                data-track-label="Submit a merge request"
-                href="http://example.com/"
-                target="_self"
-              >
-                
-      Submit a merge request
-    
-              </a>
+              <div>
+                <a
+                  class="gl-link"
+                  data-testid="uncompleted-learn-gitlab-link"
+                  data-track-action="click_link"
+                  data-track-label="submit_a_merge_request_mr"
+                  href="http://example.com/"
+                  target="_self"
+                >
+                  Submit a merge request (MR)
+                </a>
+                 
+                <!---->
+              </div>
                
               <!---->
             </div>
@@ -372,24 +370,24 @@ exports[`Learn GitLab renders correctly 1`] = `
           <div
             class="gl-mb-4"
           >
-            <!---->
-             
             <div
               class="flex align-items-center"
             >
-              <a
-                class="gl-link"
-                data-testid="uncompleted-learn-gitlab-link"
-                data-track-action="click_link"
-                data-track-label="Run a Security scan using CI/CD"
-                href="https://docs.gitlab.com/ee/foobar/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                
-      Run a Security scan using CI/CD
-    
-              </a>
+              <div>
+                <a
+                  class="gl-link"
+                  data-testid="uncompleted-learn-gitlab-link"
+                  data-track-action="click_link"
+                  data-track-label="run_a_security_scan_using_ci_cd"
+                  href="https://docs.gitlab.com/ee/foobar/"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  Run a Security scan using CI/CD
+                </a>
+                 
+                <!---->
+              </div>
                
               <!---->
             </div>
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_info_card_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_info_card_spec.js
deleted file mode 100644
index ad4bc826a9d..00000000000
--- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_info_card_spec.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import LearnGitlabInfoCard from '~/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue';
-
-const defaultProps = {
-  title: 'Create Repository',
-  description: 'Some description',
-  actionLabel: 'Create Repository now',
-  url: 'https://example.com',
-  completed: false,
-  svg: 'https://example.com/illustration.svg',
-};
-
-describe('Learn GitLab Info Card', () => {
-  let wrapper;
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  const createWrapper = (props = {}) => {
-    wrapper = shallowMount(LearnGitlabInfoCard, {
-      propsData: { ...defaultProps, ...props },
-    });
-  };
-
-  it('renders no icon when not completed', () => {
-    createWrapper({ completed: false });
-
-    expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(false);
-  });
-
-  it('renders the completion icon when completed', () => {
-    createWrapper({ completed: true });
-
-    expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(true);
-  });
-
-  it('renders no trial only when it is not required', () => {
-    createWrapper();
-
-    expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(false);
-  });
-
-  it('renders trial only when trial is required', () => {
-    createWrapper({ trialRequired: true });
-
-    expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(true);
-  });
-
-  it('renders completion icon when completed a trial-only feature', () => {
-    createWrapper({ trialRequired: true, completed: true });
-
-    expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(false);
-    expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(true);
-  });
-});
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js
index d9aff37f703..897cbf5eaa4 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js
+++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js
@@ -119,7 +119,7 @@ describe('Learn GitLab Section Link', () => {
       findUncompletedLink().trigger('click');
 
       expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_link', {
-        label: 'Run a Security scan using CI/CD',
+        label: 'run_a_security_scan_using_ci_cd',
       });
 
       unmockTracking();
@@ -164,7 +164,7 @@ describe('Learn GitLab Section Link', () => {
       triggerEvent(openInviteMembesrModalLink().element);
 
       expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_link', {
-        label: 'Invite your colleagues',
+        label: 'invite_your_colleagues',
         property: 'Growth::Activation::Experiment::InviteForHelpContinuousOnboarding',
       });
 
@@ -203,7 +203,7 @@ describe('Learn GitLab Section Link', () => {
         videoTutorialLink().trigger('click');
 
         expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_video_link', {
-          label: 'Add code owners',
+          label: 'add_code_owners',
           property: 'Growth::Conversion::Experiment::LearnGitLab',
           context: {
             data: {
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_trial_card_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_trial_card_spec.js
new file mode 100644
index 00000000000..6ab57e31fed
--- /dev/null
+++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_trial_card_spec.js
@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils';
+import IncludedInTrialIndicator from '~/pages/projects/learn_gitlab/components/included_in_trial_indicator.vue';
+
+describe('Learn GitLab Trial Card', () => {
+  it('renders correctly', () => {
+    const wrapper = shallowMount(IncludedInTrialIndicator);
+
+    expect(wrapper.text()).toEqual('- Included in trial');
+
+    wrapper.destroy();
+  });
+});
diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
index d5b4b3c22d8..99df5b58d90 100644
--- a/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
+++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
@@ -31,10 +31,10 @@ describe('Interval Pattern Input Component', () => {
     wrapper.findAll('input[type="radio"]').wrappers.find((x) => x.element.checked);
   const findIcon = () => wrapper.findComponent(GlIcon);
   const findSelectedRadioKey = () => findSelectedRadio()?.attributes('data-testid');
-  const selectEveryDayRadio = () => findEveryDayRadio().trigger('click');
-  const selectEveryWeekRadio = () => findEveryWeekRadio().trigger('click');
-  const selectEveryMonthRadio = () => findEveryMonthRadio().trigger('click');
-  const selectCustomRadio = () => findCustomRadio().trigger('click');
+  const selectEveryDayRadio = () => findEveryDayRadio().setChecked(true);
+  const selectEveryWeekRadio = () => findEveryWeekRadio().setChecked(true);
+  const selectEveryMonthRadio = () => findEveryMonthRadio().setChecked(true);
+  const selectCustomRadio = () => findCustomRadio().setChecked(true);
 
   const createWrapper = (props = {}, data = {}) => {
     if (wrapper) {
diff --git a/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js b/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
index 46f83ac89e5..85660d09baa 100644
--- a/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
+++ b/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
@@ -51,6 +51,7 @@ const defaultProps = {
   requestCveAvailable: true,
   confirmationPhrase: 'my-fake-project',
   showVisibilityConfirmModal: false,
+  membersPagePath: '/my-fake-project/-/project_members',
 };
 
 const FEATURE_ACCESS_LEVEL_ANONYMOUS = 30;
@@ -59,7 +60,7 @@ describe('Settings Panel', () => {
   let wrapper;
 
   const mountComponent = (
-    { currentSettings = {}, glFeatures = {}, ...customProps } = {},
+    { currentSettings = {}, glFeatures = {}, stubs = {}, ...customProps } = {},
     mountFn = shallowMount,
   ) => {
     const propsData = {
@@ -76,6 +77,7 @@ describe('Settings Panel', () => {
           ...glFeatures,
         },
       },
+      stubs,
     });
   };
 
@@ -176,7 +178,7 @@ describe('Settings Panel', () => {
     );
 
     it('should set the visibility level description based upon the selected visibility level', () => {
-      wrapper = mountComponent();
+      wrapper = mountComponent({ stubs: { GlSprintf } });
 
       findProjectVisibilityLevelInput().setValue(visibilityOptions.INTERNAL);
 
diff --git a/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js
index 365bb878485..108f816fe01 100644
--- a/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js
+++ b/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js
@@ -7,8 +7,10 @@ import { renderGFM } from '~/pages/shared/wikis/render_gfm_facade';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
 import waitForPromises from 'helpers/wait_for_promises';
+import { handleLocationHash } from '~/lib/utils/common_utils';
 
 jest.mock('~/pages/shared/wikis/render_gfm_facade');
+jest.mock('~/lib/utils/common_utils');
 
 describe('pages/shared/wikis/components/wiki_content', () => {
   const PATH = '/test';
@@ -76,6 +78,12 @@ describe('pages/shared/wikis/components/wiki_content', () => {
 
       expect(renderGFM).toHaveBeenCalledWith(wrapper.element);
     });
+
+    it('handles hash after render', async () => {
+      await nextTick();
+
+      expect(handleLocationHash).toHaveBeenCalled();
+    });
   });
 
   describe('when loading content fails', () => {
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 d7f8dc3c98e..a5db10d106d 100644
--- a/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
+++ b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
@@ -1,12 +1,14 @@
 import { nextTick } from 'vue';
-import { GlAlert, GlButton } 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 {
   CONTENT_EDITOR_LOADED_ACTION,
@@ -37,6 +39,7 @@ describe('WikiForm', () => {
   const findMarkdownHelpLink = () => wrapper.findByTestId('wiki-markdown-help-link');
   const findContentEditor = () => wrapper.findComponent(ContentEditor);
   const findClassicEditor = () => wrapper.findComponent(MarkdownField);
+  const findLocalStorageSync = () => wrapper.find(LocalStorageSync);
 
   const setFormat = (value) => {
     const format = findFormat();
@@ -103,6 +106,9 @@ describe('WikiForm', () => {
           MarkdownField,
           GlAlert,
           GlButton,
+          LocalStorageSync: stubComponent(LocalStorageSync),
+          GlFormInput,
+          GlFormGroup,
         },
       }),
     );
@@ -128,7 +134,7 @@ describe('WikiForm', () => {
   `(
     'updates the commit message to $message when title is $title and persisted=$persisted',
     async ({ title, message, persisted }) => {
-      createWrapper({ persisted });
+      createWrapper({ persisted, mountFn: mount });
 
       await findTitle().setValue(title);
 
@@ -137,7 +143,7 @@ describe('WikiForm', () => {
   );
 
   it('sets the commit message to "Update My page" when the page first loads when persisted', async () => {
-    createWrapper({ persisted: true });
+    createWrapper({ persisted: true, mountFn: mount });
 
     await nextTick();
 
@@ -157,7 +163,7 @@ describe('WikiForm', () => {
     ${'asciidoc'} | ${false} | ${'hides'}
     ${'org'}      | ${false} | ${'hides'}
   `('$action preview in the markdown field when format is $format', async ({ format, enabled }) => {
-    createWrapper();
+    createWrapper({ mountFn: mount });
 
     await setFormat(format);
 
@@ -254,7 +260,7 @@ describe('WikiForm', () => {
     `(
       "when title='$title', content='$content', then the button is $buttonState'",
       async ({ title, content, disabledAttr }) => {
-        createWrapper();
+        createWrapper({ mountFn: mount });
 
         await findTitle().setValue(title);
         await findContent().setValue(content);
@@ -291,7 +297,7 @@ describe('WikiForm', () => {
 
   describe('toggle editing mode control', () => {
     beforeEach(() => {
-      createWrapper();
+      createWrapper({ mountFn: mount });
     });
 
     it.each`
@@ -330,6 +336,19 @@ describe('WikiForm', () => {
       });
     });
 
+    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', true);
+
+        expect(findContentEditor().exists()).toBe(true);
+        expect(findClassicEditor().exists()).toBe(false);
+      });
+    });
+
     describe('when content editor is active', () => {
       let mockContentEditor;
 
@@ -374,7 +393,7 @@ describe('WikiForm', () => {
   });
 
   describe('wiki content editor', () => {
-    describe('clicking "use new editor": editor fails to load', () => {
+    describe('clicking "Edit rich text": editor fails to load', () => {
       beforeEach(async () => {
         createWrapper({ mountFn: mount });
         mock.onPost(/preview-markdown/).reply(400);
@@ -401,7 +420,7 @@ describe('WikiForm', () => {
       });
     });
 
-    describe('clicking "use new editor": editor loads successfully', () => {
+    describe('clicking "Edit rich text": editor loads successfully', () => {
       beforeEach(async () => {
         createWrapper({ persisted: true, mountFn: mount });
 
diff --git a/spec/frontend/pdf/index_spec.js b/spec/frontend/pdf/index_spec.js
index 2b0932493bb..98946412264 100644
--- a/spec/frontend/pdf/index_spec.js
+++ b/spec/frontend/pdf/index_spec.js
@@ -1,48 +1,33 @@
-import Vue from 'vue';
-
+import { shallowMount } from '@vue/test-utils';
 import { FIXTURES_PATH } from 'spec/test_constants';
 import PDFLab from '~/pdf/index.vue';
 
-jest.mock('pdfjs-dist/webpack', () => {
-  return { default: jest.requireActual('pdfjs-dist/build/pdf') };
-});
-
-const pdf = `${FIXTURES_PATH}/blob/pdf/test.pdf`;
+describe('PDFLab component', () => {
+  let wrapper;
 
-const Component = Vue.extend(PDFLab);
+  const mountComponent = ({ pdf }) => shallowMount(PDFLab, { propsData: { pdf } });
 
-describe('PDF component', () => {
-  let vm;
+  afterEach(() => {
+    wrapper.destroy();
+  });
 
   describe('without PDF data', () => {
     beforeEach(() => {
-      vm = new Component({
-        propsData: {
-          pdf: '',
-        },
-      });
-
-      vm.$mount();
+      wrapper = mountComponent({ pdf: '' });
     });
 
     it('does not render', () => {
-      expect(vm.$el.tagName).toBeUndefined();
+      expect(wrapper.isVisible()).toBe(false);
     });
   });
 
   describe('with PDF data', () => {
     beforeEach(() => {
-      vm = new Component({
-        propsData: {
-          pdf,
-        },
-      });
-
-      vm.$mount();
+      wrapper = mountComponent({ pdf: `${FIXTURES_PATH}/blob/pdf/test.pdf` });
     });
 
-    it('renders pdf component', () => {
-      expect(vm.$el.tagName).toBeDefined();
+    it('renders', () => {
+      expect(wrapper.isVisible()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js b/spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js
index ae19ed9ab02..82ac390971d 100644
--- a/spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js
+++ b/spec/frontend/pipeline_editor/components/lint/ci_lint_results_spec.js
@@ -152,4 +152,26 @@ describe('CI Lint Results', () => {
       expect(findAfterScripts()).toHaveLength(filterEmptyScripts('afterScript').length);
     });
   });
+
+  describe('Hide Alert', () => {
+    it('hides alert on success if hide-alert prop is true', async () => {
+      await createComponent({ dryRun: true, hideAlert: true }, mount);
+
+      expect(findStatus().exists()).toBe(false);
+    });
+
+    it('hides alert on error if hide-alert prop is true', async () => {
+      await createComponent(
+        {
+          hideAlert: true,
+          isValid: false,
+          errors: mockErrors,
+          warnings: mockWarnings,
+        },
+        mount,
+      );
+
+      expect(findStatus().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js b/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js
index 3ecf6472544..87a7f07f7d4 100644
--- a/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js
+++ b/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js
@@ -1,6 +1,8 @@
-import { GlAlert, GlLoadingIcon, GlTabs } from '@gitlab/ui';
-import { shallowMount, mount } from '@vue/test-utils';
+import { GlAlert, GlBadge, GlLoadingIcon, GlTabs } from '@gitlab/ui';
+import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
 import Vue, { nextTick } from 'vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import CiConfigMergedPreview from '~/pipeline_editor/components/editor/ci_config_merged_preview.vue';
 import CiLint from '~/pipeline_editor/components/lint/ci_lint.vue';
@@ -15,9 +17,21 @@ import {
   EDITOR_APP_STATUS_INVALID,
   EDITOR_APP_STATUS_VALID,
   TAB_QUERY_PARAM,
+  VALIDATE_TAB,
+  VALIDATE_TAB_BADGE_DISMISSED_KEY,
 } from '~/pipeline_editor/constants';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
-import { mockLintResponse, mockLintResponseWithoutMerged, mockCiYml } from '../mock_data';
+import getBlobContent from '~/pipeline_editor/graphql/queries/blob_content.query.graphql';
+import {
+  mockBlobContentQueryResponse,
+  mockCiLintPath,
+  mockCiYml,
+  mockLintResponse,
+  mockLintResponseWithoutMerged,
+} from '../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
 
 Vue.config.ignoredElements = ['gl-emoji'];
 
@@ -33,11 +47,13 @@ describe('Pipeline editor tabs component', () => {
     provide = {},
     appStatus = EDITOR_APP_STATUS_VALID,
     mountFn = shallowMount,
+    options = {},
   } = {}) => {
     wrapper = mountFn(PipelineEditorTabs, {
       propsData: {
         ciConfigData: mockLintResponse,
         ciFileContent: mockCiYml,
+        currentTab: CREATE_TAB,
         isNewCiConfigFile: true,
         showDrawer: false,
         ...props,
@@ -47,12 +63,34 @@ describe('Pipeline editor tabs component', () => {
           appStatus,
         };
       },
-      provide: { ...provide },
+      provide: {
+        ciLintPath: mockCiLintPath,
+        ...provide,
+      },
       stubs: {
         TextEditor: MockTextEditor,
         EditorTab,
       },
       listeners,
+      ...options,
+    });
+  };
+
+  let mockBlobContentData;
+  let mockApollo;
+
+  const createComponentWithApollo = ({ props, provide = {}, mountFn = shallowMount } = {}) => {
+    const handlers = [[getBlobContent, mockBlobContentData]];
+    mockApollo = createMockApollo(handlers);
+
+    createComponent({
+      props,
+      provide,
+      mountFn,
+      options: {
+        localVue,
+        apolloProvider: mockApollo,
+      },
     });
   };
 
@@ -63,6 +101,7 @@ describe('Pipeline editor tabs component', () => {
   const findVisualizationTab = () => wrapper.find('[data-testid="visualization-tab"]');
 
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findBadge = () => wrapper.findComponent(GlBadge);
   const findCiLint = () => wrapper.findComponent(CiLint);
   const findCiValidate = () => wrapper.findComponent(CiValidate);
   const findGlTabs = () => wrapper.findComponent(GlTabs);
@@ -72,6 +111,10 @@ describe('Pipeline editor tabs component', () => {
   const findMergedPreview = () => wrapper.findComponent(CiConfigMergedPreview);
   const findWalkthroughPopover = () => wrapper.findComponent(WalkthroughPopover);
 
+  beforeEach(() => {
+    mockBlobContentData = jest.fn();
+  });
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -114,37 +157,73 @@ describe('Pipeline editor tabs component', () => {
 
   describe('validate tab', () => {
     describe('with simulatePipeline feature flag ON', () => {
-      describe('while loading', () => {
+      describe('after loading', () => {
         beforeEach(() => {
           createComponent({
-            appStatus: EDITOR_APP_STATUS_LOADING,
-            provide: {
-              glFeatures: {
-                simulatePipeline: true,
-              },
-            },
+            provide: { glFeatures: { simulatePipeline: true } },
           });
         });
 
-        it('displays a loading icon if the lint query is loading', () => {
-          expect(findLoadingIcon().exists()).toBe(true);
-        });
-
-        it('does not display the validate component', () => {
-          expect(findCiValidate().exists()).toBe(false);
+        it('displays the tab and the validate component', () => {
+          expect(findValidateTab().exists()).toBe(true);
+          expect(findCiValidate().exists()).toBe(true);
         });
       });
 
-      describe('after loading', () => {
-        beforeEach(() => {
-          createComponent({
-            provide: { glFeatures: { simulatePipeline: true } },
+      describe('NEW badge', () => {
+        describe('default', () => {
+          beforeEach(() => {
+            mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse);
+            createComponentWithApollo({
+              mountFn: mount,
+              props: {
+                currentTab: VALIDATE_TAB,
+              },
+              provide: {
+                glFeatures: { simulatePipeline: true },
+                ciConfigPath: '/path/to/ci-config',
+                currentBranch: 'main',
+                projectFullPath: '/path/to/project',
+                simulatePipelineHelpPagePath: 'path/to/help/page',
+                validateTabIllustrationPath: 'path/to/svg',
+              },
+            });
+          });
+
+          it('renders badge by default', () => {
+            expect(findBadge().exists()).toBe(true);
+            expect(findBadge().text()).toBe(wrapper.vm.$options.i18n.new);
+          });
+
+          it('hides badge when moving away from the validate tab', async () => {
+            expect(findBadge().exists()).toBe(true);
+
+            await findEditorTab().vm.$emit('click');
+
+            expect(findBadge().exists()).toBe(false);
           });
         });
 
-        it('displays the tab and the validate component', () => {
-          expect(findValidateTab().exists()).toBe(true);
-          expect(findCiValidate().exists()).toBe(true);
+        describe('if badge has been dismissed before', () => {
+          beforeEach(() => {
+            localStorage.setItem(VALIDATE_TAB_BADGE_DISMISSED_KEY, 'true');
+            mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse);
+            createComponentWithApollo({
+              mountFn: mount,
+              provide: {
+                glFeatures: { simulatePipeline: true },
+                ciConfigPath: '/path/to/ci-config',
+                currentBranch: 'main',
+                projectFullPath: '/path/to/project',
+                simulatePipelineHelpPagePath: 'path/to/help/page',
+                validateTabIllustrationPath: 'path/to/svg',
+              },
+            });
+          });
+
+          it('does not render badge if it has been dismissed before', () => {
+            expect(findBadge().exists()).toBe(false);
+          });
         });
       });
     });
@@ -181,7 +260,6 @@ describe('Pipeline editor tabs component', () => {
         expect(findCiLint().exists()).toBe(false);
       });
     });
-
     describe('after loading', () => {
       beforeEach(() => {
         createComponent();
diff --git a/spec/frontend/pipeline_editor/components/popovers/validate_pipeline_popover_spec.js b/spec/frontend/pipeline_editor/components/popovers/validate_pipeline_popover_spec.js
new file mode 100644
index 00000000000..97f785a71bc
--- /dev/null
+++ b/spec/frontend/pipeline_editor/components/popovers/validate_pipeline_popover_spec.js
@@ -0,0 +1,43 @@
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ValidatePopover from '~/pipeline_editor/components/popovers/validate_pipeline_popover.vue';
+import { VALIDATE_TAB_FEEDBACK_URL } from '~/pipeline_editor/constants';
+import { mockSimulatePipelineHelpPagePath } from '../../mock_data';
+
+describe('ValidatePopover component', () => {
+  let wrapper;
+
+  const createComponent = ({ stubs } = {}) => {
+    wrapper = shallowMountExtended(ValidatePopover, {
+      provide: {
+        simulatePipelineHelpPagePath: mockSimulatePipelineHelpPagePath,
+      },
+      stubs,
+    });
+  };
+
+  const findHelpLink = () => wrapper.findByTestId('help-link');
+  const findFeedbackLink = () => wrapper.findByTestId('feedback-link');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('template', () => {
+    beforeEach(async () => {
+      createComponent({
+        stubs: { GlLink, GlSprintf },
+      });
+    });
+
+    it('renders help link', () => {
+      expect(findHelpLink().exists()).toBe(true);
+      expect(findHelpLink().attributes('href')).toBe(mockSimulatePipelineHelpPagePath);
+    });
+
+    it('renders feedback link', () => {
+      expect(findFeedbackLink().exists()).toBe(true);
+      expect(findFeedbackLink().attributes('href')).toBe(VALIDATE_TAB_FEEDBACK_URL);
+    });
+  });
+});
diff --git a/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js b/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js
index 6206a0f6aed..3a40ce32a24 100644
--- a/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js
+++ b/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js
@@ -1,4 +1,4 @@
-import { GlAlert, GlTabs } from '@gitlab/ui';
+import { GlAlert, GlBadge, GlTabs } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
@@ -30,10 +30,10 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
     },
     template: `
         <gl-tabs>
-          <editor-tab :title-link-attributes="{ 'data-testid': 'tab1-btn' }" :lazy="true">
+          <editor-tab title="Tab 1" :title-link-attributes="{ 'data-testid': 'tab1-btn' }" :lazy="true">
             <mock-child content="${mockContent1}"/>
           </editor-tab>
-          <editor-tab :title-link-attributes="{ 'data-testid': 'tab2-btn' }" :lazy="true">
+          <editor-tab title="Tab 2" :title-link-attributes="{ 'data-testid': 'tab2-btn' }" :lazy="true" badge-title="NEW">
             <mock-child content="${mockContent2}"/>
           </editor-tab>
         </gl-tabs>
@@ -46,7 +46,10 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
 
   const createWrapper = ({ props } = {}) => {
     wrapper = mount(EditorTab, {
-      propsData: props,
+      propsData: {
+        title: 'Tab 1',
+        ...props,
+      },
       slots: {
         default: MockSourceEditor,
       },
@@ -55,6 +58,7 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
 
   const findSlotComponent = () => wrapper.findComponent(MockSourceEditor);
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findBadges = () => wrapper.findAll(GlBadge);
 
   beforeEach(() => {
     mockChildMounted = jest.fn();
@@ -182,4 +186,15 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
       expect(mockChildMounted).toHaveBeenNthCalledWith(2, mockContent2);
     });
   });
+
+  describe('valid state', () => {
+    beforeEach(() => {
+      createMockedWrapper();
+    });
+
+    it('renders correct number of badges', async () => {
+      expect(findBadges()).toHaveLength(1);
+      expect(findBadges().at(0).text()).toBe('NEW');
+    });
+  });
 });
diff --git a/spec/frontend/pipeline_editor/components/validate/ci_validate_spec.js b/spec/frontend/pipeline_editor/components/validate/ci_validate_spec.js
index 25972317593..f5f01b675b2 100644
--- a/spec/frontend/pipeline_editor/components/validate/ci_validate_spec.js
+++ b/spec/frontend/pipeline_editor/components/validate/ci_validate_spec.js
@@ -1,40 +1,279 @@
-import { GlButton, GlDropdown } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlDropdown, GlIcon, GlLoadingIcon, GlPopover } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import { createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import CiLintResults from '~/pipeline_editor/components/lint/ci_lint_results.vue';
 import CiValidate, { i18n } from '~/pipeline_editor/components/validate/ci_validate.vue';
+import ValidatePipelinePopover from '~/pipeline_editor/components/popovers/validate_pipeline_popover.vue';
+import getBlobContent from '~/pipeline_editor/graphql/queries/blob_content.query.graphql';
+import lintCIMutation from '~/pipeline_editor/graphql/mutations/client/lint_ci.mutation.graphql';
+import {
+  mockBlobContentQueryResponse,
+  mockCiLintPath,
+  mockCiYml,
+  mockSimulatePipelineHelpPagePath,
+} from '../../mock_data';
+import { mockLintDataError, mockLintDataValid } from '../../../ci_lint/mock_data';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
 
 describe('Pipeline Editor Validate Tab', () => {
   let wrapper;
+  let mockApollo;
+  let mockBlobContentData;
 
-  const createComponent = ({ stubs } = {}) => {
-    wrapper = shallowMount(CiValidate, {
+  const createComponent = ({
+    props,
+    stubs,
+    options,
+    isBlobLoading = false,
+    isSimulationLoading = false,
+  } = {}) => {
+    wrapper = shallowMountExtended(CiValidate, {
+      propsData: {
+        ciFileContent: mockCiYml,
+        ...props,
+      },
       provide: {
+        ciConfigPath: '/path/to/ci-config',
+        ciLintPath: mockCiLintPath,
+        currentBranch: 'main',
+        projectFullPath: '/path/to/project',
         validateTabIllustrationPath: '/path/to/img',
+        simulatePipelineHelpPagePath: mockSimulatePipelineHelpPagePath,
+      },
+      stubs,
+      mocks: {
+        $apollo: {
+          queries: {
+            initialBlobContent: {
+              loading: isBlobLoading,
+            },
+          },
+          mutations: {
+            lintCiMutation: {
+              loading: isSimulationLoading,
+            },
+          },
+        },
       },
+      ...options,
+    });
+  };
+
+  const createComponentWithApollo = ({ props, stubs } = {}) => {
+    const handlers = [[getBlobContent, mockBlobContentData]];
+    mockApollo = createMockApollo(handlers);
+
+    createComponent({
+      props,
       stubs,
+      options: {
+        localVue,
+        apolloProvider: mockApollo,
+        mocks: {},
+      },
     });
   };
 
-  const findCta = () => wrapper.findComponent(GlButton);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findCancelBtn = () => wrapper.findByTestId('cancel-simulation');
+  const findContentChangeStatus = () => wrapper.findByTestId('content-status');
+  const findCta = () => wrapper.findByTestId('simulate-pipeline-button');
+  const findDisabledCtaTooltip = () => wrapper.findByTestId('cta-tooltip');
+  const findHelpIcon = () => wrapper.findComponent(GlIcon);
+  const findIllustration = () => wrapper.findByRole('img');
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findPipelineSource = () => wrapper.findComponent(GlDropdown);
+  const findPopover = () => wrapper.findComponent(GlPopover);
+  const findCiLintResults = () => wrapper.findComponent(CiLintResults);
+  const findResultsCta = () => wrapper.findByTestId('resimulate-pipeline-button');
+
+  beforeEach(() => {
+    mockBlobContentData = jest.fn();
+  });
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  describe('template', () => {
+  describe('while initial CI content is loading', () => {
     beforeEach(() => {
-      createComponent();
+      createComponent({ isBlobLoading: true });
+    });
+
+    it('renders disabled CTA with tooltip', () => {
+      expect(findCta().props('disabled')).toBe(true);
+      expect(findDisabledCtaTooltip().exists()).toBe(true);
+    });
+  });
+
+  describe('after initial CI content is loaded', () => {
+    beforeEach(async () => {
+      mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse);
+      await createComponentWithApollo({ stubs: { GlPopover, ValidatePipelinePopover } });
     });
 
     it('renders disabled pipeline source dropdown', () => {
       expect(findPipelineSource().exists()).toBe(true);
       expect(findPipelineSource().attributes('text')).toBe(i18n.pipelineSourceDefault);
-      expect(findPipelineSource().attributes('disabled')).toBe('true');
+      expect(findPipelineSource().props('disabled')).toBe(true);
     });
 
-    it('renders CTA', () => {
+    it('renders enabled CTA without tooltip', () => {
       expect(findCta().exists()).toBe(true);
-      expect(findCta().text()).toBe(i18n.cta);
+      expect(findCta().props('disabled')).toBe(false);
+      expect(findDisabledCtaTooltip().exists()).toBe(false);
+    });
+
+    it('popover is set to render when hovering over help icon', () => {
+      expect(findPopover().props('target')).toBe(findHelpIcon().attributes('id'));
+      expect(findPopover().props('triggers')).toBe('hover focus');
+    });
+  });
+
+  describe('simulating the pipeline', () => {
+    beforeEach(async () => {
+      mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse);
+      await createComponentWithApollo();
+
+      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockLintDataValid);
+    });
+
+    it('renders loading state while simulation is ongoing', async () => {
+      findCta().vm.$emit('click');
+      await nextTick();
+
+      expect(findLoadingIcon().exists()).toBe(true);
+      expect(findCancelBtn().exists()).toBe(true);
+      expect(findCta().props('loading')).toBe(true);
+    });
+
+    it('calls mutation with the correct input', async () => {
+      await findCta().vm.$emit('click');
+
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledTimes(1);
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+        mutation: lintCIMutation,
+        variables: {
+          dry_run: true,
+          content: mockCiYml,
+          endpoint: mockCiLintPath,
+        },
+      });
+    });
+
+    describe('when results are successful', () => {
+      beforeEach(async () => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockLintDataValid);
+        await findCta().vm.$emit('click');
+      });
+
+      it('renders success alert', () => {
+        expect(findAlert().exists()).toBe(true);
+        expect(findAlert().attributes('variant')).toBe('success');
+        expect(findAlert().attributes('title')).toBe(i18n.successAlertTitle);
+      });
+
+      it('does not render content change status or CTA for results page', () => {
+        expect(findContentChangeStatus().exists()).toBe(false);
+        expect(findResultsCta().exists()).toBe(false);
+      });
+
+      it('renders CI lint results with correct props', () => {
+        expect(findCiLintResults().exists()).toBe(true);
+        expect(findCiLintResults().props()).toMatchObject({
+          dryRun: true,
+          hideAlert: true,
+          isValid: true,
+          jobs: mockLintDataValid.data.lintCI.jobs,
+        });
+      });
+    });
+
+    describe('when results have errors', () => {
+      beforeEach(async () => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockLintDataError);
+        await findCta().vm.$emit('click');
+      });
+
+      it('renders error alert', () => {
+        expect(findAlert().exists()).toBe(true);
+        expect(findAlert().attributes('variant')).toBe('danger');
+        expect(findAlert().attributes('title')).toBe(i18n.errorAlertTitle);
+      });
+
+      it('renders CI lint results with correct props', () => {
+        expect(findCiLintResults().exists()).toBe(true);
+        expect(findCiLintResults().props()).toMatchObject({
+          dryRun: true,
+          hideAlert: true,
+          isValid: false,
+          errors: mockLintDataError.data.lintCI.errors,
+          warnings: mockLintDataError.data.lintCI.warnings,
+        });
+      });
+    });
+  });
+
+  describe('when CI content has changed after a simulation', () => {
+    beforeEach(async () => {
+      mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse);
+      await createComponentWithApollo();
+
+      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockLintDataValid);
+      await findCta().vm.$emit('click');
+    });
+
+    it('renders content change status', async () => {
+      await wrapper.setProps({ ciFileContent: 'new yaml content' });
+
+      expect(findContentChangeStatus().exists()).toBe(true);
+      expect(findResultsCta().exists()).toBe(true);
+    });
+
+    it('calls mutation with new content', async () => {
+      await wrapper.setProps({ ciFileContent: 'new yaml content' });
+      await findResultsCta().vm.$emit('click');
+
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledTimes(2);
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+        mutation: lintCIMutation,
+        variables: {
+          dry_run: true,
+          content: 'new yaml content',
+          endpoint: mockCiLintPath,
+        },
+      });
+    });
+  });
+
+  describe('canceling a simulation', () => {
+    beforeEach(async () => {
+      mockBlobContentData.mockResolvedValue(mockBlobContentQueryResponse);
+      await createComponentWithApollo();
+    });
+
+    it('returns to init state', async () => {
+      // init state
+      expect(findIllustration().exists()).toBe(true);
+      expect(findCiLintResults().exists()).toBe(false);
+
+      // mutations should have successful results
+      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockLintDataValid);
+      findCta().vm.$emit('click');
+      await nextTick();
+
+      // cancel before simulation succeeds
+      expect(findCancelBtn().exists()).toBe(true);
+      await findCancelBtn().vm.$emit('click');
+
+      // should still render init state
+      expect(findIllustration().exists()).toBe(true);
+      expect(findCiLintResults().exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/pipeline_editor/mock_data.js b/spec/frontend/pipeline_editor/mock_data.js
index 560b2820fae..2ea580b7b53 100644
--- a/spec/frontend/pipeline_editor/mock_data.js
+++ b/spec/frontend/pipeline_editor/mock_data.js
@@ -7,11 +7,13 @@ export const mockProjectFullPath = `${mockProjectNamespace}/${mockProjectPath}`;
 export const mockDefaultBranch = 'main';
 export const mockNewBranch = 'new-branch';
 export const mockNewMergeRequestPath = '/-/merge_requests/new';
+export const mockCiLintPath = '/-/ci/lint';
 export const mockCommitSha = 'aabbccdd';
 export const mockCommitNextSha = 'eeffgghh';
 export const mockIncludesHelpPagePath = '/-/includes/help';
 export const mockLintHelpPagePath = '/-/lint-help';
 export const mockLintUnavailableHelpPagePath = '/-/pipeline-editor/troubleshoot';
+export const mockSimulatePipelineHelpPagePath = '/-/simulate-pipeline-help';
 export const mockYmlHelpPagePath = '/-/yml-help';
 export const mockCommitMessage = 'My commit message';
 
diff --git a/spec/frontend/pipeline_wizard/components/widgets/checklist_spec.js b/spec/frontend/pipeline_wizard/components/widgets/checklist_spec.js
new file mode 100644
index 00000000000..43719595c5c
--- /dev/null
+++ b/spec/frontend/pipeline_wizard/components/widgets/checklist_spec.js
@@ -0,0 +1,110 @@
+import { GlFormCheckbox, GlFormCheckboxGroup } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ChecklistWidget from '~/pipeline_wizard/components/widgets/checklist.vue';
+
+describe('Pipeline Wizard - Checklist Widget', () => {
+  let wrapper;
+  const props = {
+    title: 'Foobar',
+    items: [
+      'foo bar baz', // simple, text-only content
+      {
+        text: 'abc',
+        help: 'def',
+      },
+    ],
+  };
+
+  const getLastUpdateValidEvent = () => {
+    const eventArray = wrapper.emitted('update:valid');
+    return eventArray[eventArray.length - 1];
+  };
+  const findItem = (atIndex = 0) => wrapper.findAllComponents(GlFormCheckbox).at(atIndex);
+  const getGlFormCheckboxGroup = () => wrapper.getComponent(GlFormCheckboxGroup);
+
+  // The item.ids *can* be passed inside props.items, but are usually
+  // autogenerated by lodash.uniqueId() inside the component. So to
+  // get the actual value that the component expects to be emitted in
+  // GlFormCheckboxGroup's `v-model`, we need to obtain the value that is
+  // actually passed to GlFormCheckbox.
+  const getAllItemIds = () => props.items.map((_, i) => findItem(i).attributes().value);
+
+  const createComponent = (mountFn = shallowMountExtended) => {
+    wrapper = mountFn(ChecklistWidget, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('creates the component', () => {
+    createComponent();
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('displays the item', () => {
+    createComponent();
+    expect(findItem().exists()).toBe(true);
+  });
+
+  it("displays the item's text", () => {
+    createComponent();
+    expect(findItem().text()).toBe(props.items[0]);
+  });
+
+  it('displays an item with a help text', () => {
+    createComponent();
+    const { text, help } = props.items[1];
+
+    const itemWrapper = findItem(1);
+    const itemText = itemWrapper.text();
+    // Unfortunately there is no wrapper.slots() accessor in vue_test_utils.
+    // To make sure the help text is being passed to the correct slot, we need to
+    // access the slot internally.
+    // This selector accesses the text of the first slot named "help" in itemWrapper
+    const helpText = itemWrapper.vm.$slots?.help[0]?.text?.trim();
+
+    expect(itemText).toBe(text);
+    expect(helpText).toBe(help);
+  });
+
+  it("emits a 'update:valid' event after all boxes have been checked", async () => {
+    createComponent();
+    // initially, `valid` should be false
+    expect(wrapper.emitted('update:valid')).toEqual([[false]]);
+    const values = getAllItemIds();
+    // this mocks checking all the boxes
+    getGlFormCheckboxGroup().vm.$emit('input', values);
+
+    await nextTick();
+
+    expect(wrapper.emitted('update:valid')).toEqual([[false], [true]]);
+  });
+
+  it('emits a invalid event after a box has been unchecked', async () => {
+    createComponent();
+    // initially, `valid` should be false
+    expect(wrapper.emitted('update:valid')).toEqual([[false]]);
+
+    // checking all the boxes first
+    const values = getAllItemIds();
+    getGlFormCheckboxGroup().vm.$emit('input', values);
+    await nextTick();
+
+    // ensure the test later doesn't just pass because it doesn't emit
+    // `true` to begin with
+    expect(getLastUpdateValidEvent()).toEqual([true]);
+
+    // Now we're unchecking the last box.
+    values.pop();
+    getGlFormCheckboxGroup().vm.$emit('input', values);
+    await nextTick();
+
+    expect(getLastUpdateValidEvent()).toEqual([false]);
+  });
+});
diff --git a/spec/frontend/pipeline_wizard/pipeline_wizard_spec.js b/spec/frontend/pipeline_wizard/pipeline_wizard_spec.js
index dd0304518a3..3f689ffdbc8 100644
--- a/spec/frontend/pipeline_wizard/pipeline_wizard_spec.js
+++ b/spec/frontend/pipeline_wizard/pipeline_wizard_spec.js
@@ -99,4 +99,12 @@ describe('PipelineWizard', () => {
       parseDocument(template).get('description').toString(),
     );
   });
+
+  it('bubbles the done event upwards', () => {
+    createComponent();
+
+    wrapper.findComponent(PipelineWizardWrapper).vm.$emit('done');
+
+    expect(wrapper.emitted().done.length).toBe(1);
+  });
 });
diff --git a/spec/frontend/pipeline_wizard/templates/pages_spec.js b/spec/frontend/pipeline_wizard/templates/pages_spec.js
new file mode 100644
index 00000000000..f89e8f05475
--- /dev/null
+++ b/spec/frontend/pipeline_wizard/templates/pages_spec.js
@@ -0,0 +1,89 @@
+import { Document, parseDocument } from 'yaml';
+import PagesWizardTemplate from '~/pipeline_wizard/templates/pages.yml';
+import { merge } from '~/lib/utils/yaml';
+
+const VAR_BUILD_IMAGE = '$BUILD_IMAGE';
+const VAR_INSTALLATION_STEPS = '$INSTALLATION_STEPS';
+const VAR_BUILD_STEPS = '$BUILD_STEPS';
+
+const getYaml = () => parseDocument(PagesWizardTemplate);
+const getFinalTemplate = () => {
+  const merged = new Document();
+  const yaml = getYaml();
+  yaml.toJS().steps.forEach((_, i) => {
+    merge(merged, yaml.getIn(['steps', i, 'template']));
+  });
+  return merged;
+};
+
+describe('Pages Template', () => {
+  it('is valid yaml', () => {
+    // Testing equality to an empty array (as opposed to just comparing
+    // errors.length) will cause jest to print the underlying error
+    expect(getYaml().errors).toEqual([]);
+  });
+
+  it('includes all `target`s in the respective `template`', () => {
+    const yaml = getYaml();
+    const actual = yaml.toJS().steps.map((x, i) => ({
+      inputs: x.inputs,
+      template: yaml.getIn(['steps', i, 'template']).toString(),
+    }));
+
+    expect(actual).toEqual([
+      {
+        inputs: [
+          expect.objectContaining({
+            label: 'Select your build image',
+            target: VAR_BUILD_IMAGE,
+          }),
+          expect.objectContaining({
+            widget: 'checklist',
+            title: 'Before we begin, please check:',
+          }),
+        ],
+        template: expect.stringContaining(VAR_BUILD_IMAGE),
+      },
+      {
+        inputs: [
+          expect.objectContaining({
+            label: 'Installation Steps',
+            target: VAR_INSTALLATION_STEPS,
+          }),
+        ],
+        template: expect.stringContaining(VAR_INSTALLATION_STEPS),
+      },
+      {
+        inputs: [
+          expect.objectContaining({
+            label: 'Build Steps',
+            target: VAR_BUILD_STEPS,
+          }),
+        ],
+        template: expect.stringContaining(VAR_BUILD_STEPS),
+      },
+    ]);
+  });
+
+  it('addresses all relevant instructions for a pages pipeline', () => {
+    const fullTemplate = getFinalTemplate();
+
+    expect(fullTemplate.toString()).toEqual(
+      `# The Docker image that will be used to build your app
+image: ${VAR_BUILD_IMAGE}
+# Functions that should be executed before the build script is run
+before_script: ${VAR_INSTALLATION_STEPS}
+pages:
+  script: ${VAR_BUILD_STEPS}
+  artifacts:
+    paths:
+      # The folder that contains the files to be exposed at the Page URL
+      - public
+  rules:
+    # This ensures that only pushes to the default branch will trigger
+    # a pages deploy
+    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
+`,
+    );
+  });
+});
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 3b5632a8a4e..bfbb5f934b9 100644
--- a/spec/frontend/pipelines/components/jobs/failed_jobs_app_spec.js
+++ b/spec/frontend/pipelines/components/jobs/failed_jobs_app_spec.js
@@ -49,15 +49,15 @@ describe('Failed Jobs App', () => {
   });
 
   describe('loading spinner', () => {
-    beforeEach(() => {
+    it('displays loading spinner when fetching failed jobs', () => {
       createComponent(resolverSpy);
-    });
 
-    it('displays loading spinner when fetching failed jobs', () => {
       expect(findLoadingSpinner().exists()).toBe(true);
     });
 
     it('hides loading spinner after the failed jobs have been fetched', async () => {
+      createComponent(resolverSpy);
+
       await waitForPromises();
 
       expect(findLoadingSpinner().exists()).toBe(false);
diff --git a/spec/frontend/pipelines/components/jobs/jobs_app_spec.js b/spec/frontend/pipelines/components/jobs/jobs_app_spec.js
index 81e19a6c221..89b6f764b2f 100644
--- a/spec/frontend/pipelines/components/jobs/jobs_app_spec.js
+++ b/spec/frontend/pipelines/components/jobs/jobs_app_spec.js
@@ -50,20 +50,23 @@ describe('Jobs app', () => {
   });
 
   describe('loading spinner', () => {
-    beforeEach(async () => {
+    const setup = async () => {
       createComponent(resolverSpy);
 
       await waitForPromises();
 
       triggerInfiniteScroll();
-    });
+    };
+
+    it('displays loading spinner when fetching more jobs', async () => {
+      await setup();
 
-    it('displays loading spinner when fetching more jobs', () => {
       expect(findLoadingSpinner().exists()).toBe(true);
       expect(findSkeletonLoader().exists()).toBe(false);
     });
 
     it('hides loading spinner after jobs have been fetched', async () => {
+      await setup();
       await waitForPromises();
 
       expect(findLoadingSpinner().exists()).toBe(false);
diff --git a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
index 49d64c6eac0..3eaf06e0656 100644
--- a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
@@ -5,6 +5,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { stubPerformanceWebAPI } from 'helpers/performance';
 import waitForPromises from 'helpers/wait_for_promises';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import getUserCallouts from '~/graphql_shared/queries/get_user_callouts.query.graphql';
@@ -29,10 +30,16 @@ import * as Api from '~/pipelines/components/graph_shared/api';
 import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue';
 import * as parsingUtils from '~/pipelines/components/parsing_utils';
 import getPipelineHeaderData from '~/pipelines/graphql/queries/get_pipeline_header_data.query.graphql';
+import getPerformanceInsights from '~/pipelines/graphql/queries/get_performance_insights.query.graphql';
 import * as sentryUtils from '~/pipelines/utils';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { mockRunningPipelineHeaderData } from '../mock_data';
-import { mapCallouts, mockCalloutsResponse, mockPipelineResponse } from './mock_data';
+import {
+  mapCallouts,
+  mockCalloutsResponse,
+  mockPipelineResponse,
+  mockPerformanceInsightsResponse,
+} from './mock_data';
 
 const defaultProvide = {
   graphqlResourceEtag: 'frog/amphibirama/etag/',
@@ -88,11 +95,15 @@ describe('Pipeline graph wrapper', () => {
     const callouts = mapCallouts(calloutsList);
     const getUserCalloutsHandler = jest.fn().mockResolvedValue(mockCalloutsResponse(callouts));
     const getPipelineHeaderDataHandler = jest.fn().mockResolvedValue(mockRunningPipelineHeaderData);
+    const getPerformanceInsightsHandler = jest
+      .fn()
+      .mockResolvedValue(mockPerformanceInsightsResponse);
 
     const requestHandlers = [
       [getPipelineHeaderData, getPipelineHeaderDataHandler],
       [getPipelineDetails, getPipelineDetailsHandler],
       [getUserCallouts, getUserCalloutsHandler],
+      [getPerformanceInsights, getPerformanceInsightsHandler],
     ];
 
     const apolloProvider = createMockApollo(requestHandlers);
@@ -502,9 +513,7 @@ describe('Pipeline graph wrapper', () => {
 
       describe('when no duration is obtained', () => {
         beforeEach(async () => {
-          jest.spyOn(window.performance, 'getEntriesByName').mockImplementation(() => {
-            return [];
-          });
+          stubPerformanceWebAPI();
 
           createComponentWithApollo({
             provide: {
diff --git a/spec/frontend/pipelines/graph/graph_view_selector_spec.js b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
index f574f4dccc5..1397500bdc7 100644
--- a/spec/frontend/pipelines/graph/graph_view_selector_spec.js
+++ b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
@@ -1,10 +1,19 @@
 import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { LAYER_VIEW, STAGE_VIEW } from '~/pipelines/components/graph/constants';
 import GraphViewSelector from '~/pipelines/components/graph/graph_view_selector.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import getPerformanceInsights from '~/pipelines/graphql/queries/get_performance_insights.query.graphql';
+import { mockPerformanceInsightsResponse } from './mock_data';
+
+Vue.use(VueApollo);
 
 describe('the graph view selector component', () => {
   let wrapper;
+  let trackingSpy;
 
   const findDependenciesToggle = () => wrapper.find('[data-testid="show-links-toggle"]');
   const findViewTypeSelector = () => wrapper.findComponent(GlButtonGroup);
@@ -13,11 +22,13 @@ describe('the graph view selector component', () => {
   const findSwitcherLoader = () => wrapper.find('[data-testid="switcher-loading-state"]');
   const findToggleLoader = () => findDependenciesToggle().find(GlLoadingIcon);
   const findHoverTip = () => wrapper.findComponent(GlAlert);
+  const findPipelineInsightsBtn = () => wrapper.find('[data-testid="pipeline-insights-btn"]');
 
   const defaultProps = {
     showLinks: false,
     tipPreviouslyDismissed: false,
     type: STAGE_VIEW,
+    isPipelineComplete: true,
   };
 
   const defaultData = {
@@ -27,6 +38,14 @@ describe('the graph view selector component', () => {
     showLinksActive: false,
   };
 
+  const getPerformanceInsightsHandler = jest
+    .fn()
+    .mockResolvedValue(mockPerformanceInsightsResponse);
+
+  const requestHandlers = [[getPerformanceInsights, getPerformanceInsightsHandler]];
+
+  const apolloProvider = createMockApollo(requestHandlers);
+
   const createComponent = ({ data = {}, mountFn = shallowMount, props = {} } = {}) => {
     wrapper = mountFn(GraphViewSelector, {
       propsData: {
@@ -39,6 +58,7 @@ describe('the graph view selector component', () => {
           ...data,
         };
       },
+      apolloProvider,
     });
   };
 
@@ -91,7 +111,6 @@ describe('the graph view selector component', () => {
 
   describe('events', () => {
     beforeEach(() => {
-      jest.useFakeTimers();
       createComponent({
         mountFn: mount,
         props: {
@@ -203,5 +222,44 @@ describe('the graph view selector component', () => {
         expect(findHoverTip().exists()).toBe(false);
       });
     });
+
+    describe('pipeline insights', () => {
+      it.each`
+        isPipelineComplete | shouldShow
+        ${true}            | ${true}
+        ${false}           | ${false}
+      `(
+        'button should display $shouldShow if isPipelineComplete is $isPipelineComplete ',
+        ({ isPipelineComplete, shouldShow }) => {
+          createComponent({
+            props: {
+              isPipelineComplete,
+            },
+          });
+
+          expect(findPipelineInsightsBtn().exists()).toBe(shouldShow);
+        },
+      );
+    });
+
+    describe('tracking', () => {
+      beforeEach(() => {
+        createComponent();
+
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      });
+
+      afterEach(() => {
+        unmockTracking();
+      });
+
+      it('tracks performance insights button click', () => {
+        findPipelineInsightsBtn().vm.$emit('click');
+
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_insights_button', {
+          label: 'performance_insights',
+        });
+      });
+    });
   });
 });
diff --git a/spec/frontend/pipelines/graph/job_group_dropdown_spec.js b/spec/frontend/pipelines/graph/job_group_dropdown_spec.js
index 5d8e70bac31..d8afb33e148 100644
--- a/spec/frontend/pipelines/graph/job_group_dropdown_spec.js
+++ b/spec/frontend/pipelines/graph/job_group_dropdown_spec.js
@@ -79,7 +79,7 @@ describe('job group dropdown component', () => {
 
   it('renders button with group name and size', () => {
     expect(findButton().text()).toContain(group.name);
-    expect(findButton().text()).toContain(group.size);
+    expect(findButton().text()).toContain(group.size.toString());
   });
 
   it('renders dropdown with jobs', () => {
diff --git a/spec/frontend/pipelines/graph/linked_pipeline_spec.js b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
index fd97c2dbe77..cdeaa0db61d 100644
--- a/spec/frontend/pipelines/graph/linked_pipeline_spec.js
+++ b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
@@ -103,7 +103,7 @@ describe('Linked pipeline', () => {
       expect(findCardTooltip().text()).toContain(mockPipeline.project.name);
       expect(findCardTooltip().text()).toContain(mockPipeline.status.label);
       expect(findCardTooltip().text()).toContain(mockPipeline.sourceJob.name);
-      expect(findCardTooltip().text()).toContain(mockPipeline.id);
+      expect(findCardTooltip().text()).toContain(mockPipeline.id.toString());
     });
 
     it('should display multi-project label when pipeline project id is not the same as triggered pipeline project id', () => {
diff --git a/spec/frontend/pipelines/graph/mock_data.js b/spec/frontend/pipelines/graph/mock_data.js
index 6124d67af09..959bbcefc98 100644
--- a/spec/frontend/pipelines/graph/mock_data.js
+++ b/spec/frontend/pipelines/graph/mock_data.js
@@ -1038,3 +1038,245 @@ export const triggerJob = {
     action: null,
   },
 };
+
+export const mockPerformanceInsightsResponse = {
+  data: {
+    project: {
+      __typename: 'Project',
+      id: 'gid://gitlab/Project/20',
+      pipeline: {
+        __typename: 'Pipeline',
+        id: 'gid://gitlab/Ci::Pipeline/97',
+        jobs: {
+          __typename: 'CiJobConnection',
+          pageInfo: {
+            __typename: 'PageInfo',
+            hasNextPage: false,
+          },
+          nodes: [
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Bridge/2502',
+              duration: null,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2502-2502',
+                detailsPath: '/root/lots-of-jobs-project/-/pipelines/98',
+              },
+              name: 'trigger_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/303',
+                name: 'deploy',
+              },
+              startedAt: null,
+              queuedDuration: 424850.376278,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2501',
+              duration: 10,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2501-2501',
+                detailsPath: '/root/ci-project/-/jobs/2501',
+              },
+              name: 'artifact_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/303',
+                name: 'deploy',
+              },
+              startedAt: '2022-07-01T16:31:41Z',
+              queuedDuration: 2.621553,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2500',
+              duration: 4,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2500-2500',
+                detailsPath: '/root/ci-project/-/jobs/2500',
+              },
+              name: 'coverage_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/302',
+                name: 'test',
+              },
+              startedAt: '2022-07-01T16:31:33Z',
+              queuedDuration: 14.388869,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2499',
+              duration: 4,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2499-2499',
+                detailsPath: '/root/ci-project/-/jobs/2499',
+              },
+              name: 'test_job_two',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/302',
+                name: 'test',
+              },
+              startedAt: '2022-07-01T16:31:28Z',
+              queuedDuration: 15.792664,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2498',
+              duration: 4,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2498-2498',
+                detailsPath: '/root/ci-project/-/jobs/2498',
+              },
+              name: 'test_job_one',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/302',
+                name: 'test',
+              },
+              startedAt: '2022-07-01T16:31:17Z',
+              queuedDuration: 8.317072,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2497',
+              duration: 5,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'failed-2497-2497',
+                detailsPath: '/root/ci-project/-/jobs/2497',
+              },
+              name: 'allow_failure_test_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/302',
+                name: 'test',
+              },
+              startedAt: '2022-07-01T16:31:22Z',
+              queuedDuration: 3.547553,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2496',
+              duration: null,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'manual-2496-2496',
+                detailsPath: '/root/ci-project/-/jobs/2496',
+              },
+              name: 'test_manual_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/302',
+                name: 'test',
+              },
+              startedAt: null,
+              queuedDuration: null,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2495',
+              duration: 5,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2495-2495',
+                detailsPath: '/root/ci-project/-/jobs/2495',
+              },
+              name: 'large_log_output',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/301',
+                name: 'build',
+              },
+              startedAt: '2022-07-01T16:31:11Z',
+              queuedDuration: 79.128625,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2494',
+              duration: 5,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2494-2494',
+                detailsPath: '/root/ci-project/-/jobs/2494',
+              },
+              name: 'build_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/301',
+                name: 'build',
+              },
+              startedAt: '2022-07-01T16:31:05Z',
+              queuedDuration: 73.286895,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2493',
+              duration: 16,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2493-2493',
+                detailsPath: '/root/ci-project/-/jobs/2493',
+              },
+              name: 'wait_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/301',
+                name: 'build',
+              },
+              startedAt: '2022-07-01T16:30:48Z',
+              queuedDuration: 56.258856,
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export const mockPerformanceInsightsNextPageResponse = {
+  data: {
+    project: {
+      __typename: 'Project',
+      id: 'gid://gitlab/Project/20',
+      pipeline: {
+        __typename: 'Pipeline',
+        id: 'gid://gitlab/Ci::Pipeline/97',
+        jobs: {
+          __typename: 'CiJobConnection',
+          pageInfo: {
+            __typename: 'PageInfo',
+            hasNextPage: true,
+          },
+          nodes: [
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Bridge/2502',
+              duration: null,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2502-2502',
+                detailsPath: '/root/lots-of-jobs-project/-/pipelines/98',
+              },
+              name: 'trigger_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/303',
+                name: 'deploy',
+              },
+              startedAt: null,
+              queuedDuration: 424850.376278,
+            },
+          ],
+        },
+      },
+    },
+  },
+};
diff --git a/spec/frontend/pipelines/header_component_spec.js b/spec/frontend/pipelines/header_component_spec.js
index 5cc11adf696..859be8d342c 100644
--- a/spec/frontend/pipelines/header_component_spec.js
+++ b/spec/frontend/pipelines/header_component_spec.js
@@ -205,7 +205,7 @@ describe('Pipeline details header', () => {
       });
 
       it('should call deletePipeline Mutation with pipeline id when modal is submitted', () => {
-        findDeleteModal().vm.$emit('ok');
+        findDeleteModal().vm.$emit('primary');
 
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
           mutation: deletePipelineMutation,
@@ -223,7 +223,7 @@ describe('Pipeline details header', () => {
           },
         });
 
-        findDeleteModal().vm.$emit('ok');
+        findDeleteModal().vm.$emit('primary');
         await waitForPromises();
 
         expect(findAlert().text()).toBe(failureMessage);
diff --git a/spec/frontend/pipelines/performance_insights_modal_spec.js b/spec/frontend/pipelines/performance_insights_modal_spec.js
new file mode 100644
index 00000000000..b745eb1d78e
--- /dev/null
+++ b/spec/frontend/pipelines/performance_insights_modal_spec.js
@@ -0,0 +1,122 @@
+import { GlAlert, GlLink, GlModal } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import waitForPromises from 'helpers/wait_for_promises';
+import PerformanceInsightsModal from '~/pipelines/components/performance_insights_modal.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { trimText } from 'helpers/text_helper';
+import getPerformanceInsights from '~/pipelines/graphql/queries/get_performance_insights.query.graphql';
+import {
+  mockPerformanceInsightsResponse,
+  mockPerformanceInsightsNextPageResponse,
+} from './graph/mock_data';
+
+Vue.use(VueApollo);
+
+describe('Performance insights modal', () => {
+  let wrapper;
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findQueuedCardData = () => wrapper.findByTestId('insights-queued-card-data');
+  const findQueuedCardLink = () => wrapper.findByTestId('insights-queued-card-link');
+  const findExecutedCardData = () => wrapper.findByTestId('insights-executed-card-data');
+  const findExecutedCardLink = () => wrapper.findByTestId('insights-executed-card-link');
+  const findSlowJobsStage = (index) => wrapper.findAllByTestId('insights-slow-job-stage').at(index);
+  const findSlowJobsLink = (index) => wrapper.findAllByTestId('insights-slow-job-link').at(index);
+
+  const getPerformanceInsightsHandler = jest
+    .fn()
+    .mockResolvedValue(mockPerformanceInsightsResponse);
+
+  const getPerformanceInsightsNextPageHandler = jest
+    .fn()
+    .mockResolvedValue(mockPerformanceInsightsNextPageResponse);
+
+  const requestHandlers = [[getPerformanceInsights, getPerformanceInsightsHandler]];
+
+  const createComponent = (handlers = requestHandlers) => {
+    wrapper = shallowMountExtended(PerformanceInsightsModal, {
+      provide: {
+        pipelineIid: '1',
+        pipelineProjectPath: 'root/ci-project',
+      },
+      apolloProvider: createMockApollo(handlers),
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('without next page', () => {
+    beforeEach(async () => {
+      createComponent();
+
+      await waitForPromises();
+    });
+
+    it('displays modal', () => {
+      expect(findModal().exists()).toBe(true);
+    });
+
+    it('does not dispaly alert', () => {
+      expect(findAlert().exists()).toBe(false);
+    });
+
+    describe('queued duration card', () => {
+      it('displays card data', () => {
+        expect(trimText(findQueuedCardData().text())).toBe('4.9 days');
+      });
+      it('displays card link', () => {
+        expect(findQueuedCardLink().attributes('href')).toBe(
+          '/root/lots-of-jobs-project/-/pipelines/98',
+        );
+      });
+    });
+
+    describe('executed duration card', () => {
+      it('displays card data', () => {
+        expect(trimText(findExecutedCardData().text())).toBe('trigger_job');
+      });
+      it('displays card link', () => {
+        expect(findExecutedCardLink().attributes('href')).toBe(
+          '/root/lots-of-jobs-project/-/pipelines/98',
+        );
+      });
+    });
+
+    describe('slow jobs', () => {
+      it.each`
+        index | expectedStage | expectedName                | expectedLink
+        ${0}  | ${'build'}    | ${'wait_job'}               | ${'/root/ci-project/-/jobs/2493'}
+        ${1}  | ${'deploy'}   | ${'artifact_job'}           | ${'/root/ci-project/-/jobs/2501'}
+        ${2}  | ${'test'}     | ${'allow_failure_test_job'} | ${'/root/ci-project/-/jobs/2497'}
+        ${3}  | ${'build'}    | ${'large_log_output'}       | ${'/root/ci-project/-/jobs/2495'}
+        ${4}  | ${'build'}    | ${'build_job'}              | ${'/root/ci-project/-/jobs/2494'}
+      `(
+        'should display slow job correctly',
+        ({ index, expectedStage, expectedName, expectedLink }) => {
+          expect(findSlowJobsStage(index).text()).toBe(expectedStage);
+          expect(findSlowJobsLink(index).text()).toBe(expectedName);
+          expect(findSlowJobsLink(index).attributes('href')).toBe(expectedLink);
+        },
+      );
+    });
+  });
+
+  describe('limit alert', () => {
+    it('displays limit alert when there is a next page', async () => {
+      createComponent([[getPerformanceInsights, getPerformanceInsightsNextPageHandler]]);
+
+      await waitForPromises();
+
+      expect(findAlert().exists()).toBe(true);
+      expect(findLink().attributes('href')).toBe(
+        'https://gitlab.com/gitlab-org/gitlab/-/issues/365902',
+      );
+    });
+  });
+});
diff --git a/spec/frontend/pipelines/pipelines_spec.js b/spec/frontend/pipelines/pipelines_spec.js
index de9f394db43..ad6d650670a 100644
--- a/spec/frontend/pipelines/pipelines_spec.js
+++ b/spec/frontend/pipelines/pipelines_spec.js
@@ -665,7 +665,6 @@ describe('Pipelines', () => {
 
         it('stops polling & restarts polling', async () => {
           findStagesDropdownToggle().trigger('click');
-
           await waitForPromises();
 
           expect(cancelMock).not.toHaveBeenCalled();
diff --git a/spec/frontend/pipelines/test_reports/stores/mutations_spec.js b/spec/frontend/pipelines/test_reports/stores/mutations_spec.js
index 6ab479a257c..f9b9da01a2b 100644
--- a/spec/frontend/pipelines/test_reports/stores/mutations_spec.js
+++ b/spec/frontend/pipelines/test_reports/stores/mutations_spec.js
@@ -49,7 +49,7 @@ describe('Mutations TestReports Store', () => {
 
   describe('set suite error', () => {
     it('should set the error message in state if provided', () => {
-      const message = 'Test report artifacts have expired';
+      const message = 'Test report artifacts not found';
 
       mutations[types.SET_SUITE_ERROR](mockState, {
         response: { data: { errors: message } },
diff --git a/spec/frontend/pipelines/test_reports/test_case_details_spec.js b/spec/frontend/pipelines/test_reports/test_case_details_spec.js
index 29c07e5e9f8..f194864447c 100644
--- a/spec/frontend/pipelines/test_reports/test_case_details_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_case_details_spec.js
@@ -3,6 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import TestCaseDetails from '~/pipelines/components/test_reports/test_case_details.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
 describe('Test case details', () => {
   let wrapper;
@@ -19,6 +20,7 @@ describe('Test case details', () => {
     system_output: 'Line 42 is broken',
   };
 
+  const findCopyFileBtn = () => wrapper.findComponent(ModalCopyButton);
   const findModal = () => wrapper.findComponent(GlModal);
   const findName = () => wrapper.findByTestId('test-case-name');
   const findFile = () => wrapper.findByTestId('test-case-file');
@@ -66,6 +68,10 @@ describe('Test case details', () => {
       expect(findFileLink().attributes('href')).toBe(defaultTestCase.filePath);
     });
 
+    it('renders copy button for test case file', () => {
+      expect(findCopyFileBtn().attributes('text')).toBe(defaultTestCase.file);
+    });
+
     it('renders the test case duration', () => {
       expect(findDuration().text()).toBe(defaultTestCase.formattedTime);
     });
diff --git a/spec/frontend/pipelines/test_reports/test_reports_spec.js b/spec/frontend/pipelines/test_reports/test_reports_spec.js
index e0daf8cb4b5..3c3143b1865 100644
--- a/spec/frontend/pipelines/test_reports/test_reports_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_reports_spec.js
@@ -31,18 +31,30 @@ describe('Test reports app', () => {
 
   const createComponent = ({ state = {} } = {}) => {
     store = new Vuex.Store({
-      state: {
-        isLoading: false,
-        selectedSuiteIndex: null,
-        testReports,
-        ...state,
+      modules: {
+        testReports: {
+          namespaced: true,
+          state: {
+            isLoading: false,
+            selectedSuiteIndex: null,
+            testReports,
+            ...state,
+          },
+          actions: actionSpies,
+          getters,
+        },
       },
-      actions: actionSpies,
-      getters,
     });
 
+    jest.spyOn(store, 'registerModule').mockReturnValue(null);
+
     wrapper = extendedWrapper(
       shallowMount(TestReports, {
+        provide: {
+          blobPath: '/blob/path',
+          summaryEndpoint: '/summary.json',
+          suiteEndpoint: '/suite.json',
+        },
         store,
       }),
     );
diff --git a/spec/frontend/pipelines/test_reports/test_suite_table_spec.js b/spec/frontend/pipelines/test_reports/test_suite_table_spec.js
index 25650b24705..c372ac06c35 100644
--- a/spec/frontend/pipelines/test_reports/test_suite_table_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_suite_table_spec.js
@@ -34,22 +34,32 @@ describe('Test reports suite table', () => {
 
   const createComponent = ({ suite = testSuite, perPage = 20, errorMessage } = {}) => {
     store = new Vuex.Store({
-      state: {
-        blobPath,
+      modules: {
         testReports: {
-          test_suites: [suite],
+          namespaced: true,
+          state: {
+            blobPath,
+            testReports: {
+              test_suites: [suite],
+            },
+            selectedSuiteIndex: 0,
+            pageInfo: {
+              page: 1,
+              perPage,
+            },
+            errorMessage,
+          },
+          getters,
         },
-        selectedSuiteIndex: 0,
-        pageInfo: {
-          page: 1,
-          perPage,
-        },
-        errorMessage,
       },
-      getters,
     });
 
     wrapper = shallowMountExtended(SuiteTable, {
+      provide: {
+        blobPath: '/blob/path',
+        summaryEndpoint: '/summary.json',
+        suiteEndpoint: '/suite.json',
+      },
       store,
       stubs: { GlFriendlyWrap },
     });
diff --git a/spec/frontend/pipelines/test_reports/test_summary_table_spec.js b/spec/frontend/pipelines/test_reports/test_summary_table_spec.js
index 1598d5c337f..0e1229f7067 100644
--- a/spec/frontend/pipelines/test_reports/test_summary_table_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_summary_table_spec.js
@@ -20,13 +20,23 @@ describe('Test reports summary table', () => {
 
   const createComponent = (reports = null) => {
     store = new Vuex.Store({
-      state: {
-        testReports: reports || testReports,
+      modules: {
+        testReports: {
+          namespaced: true,
+          state: {
+            testReports: reports || testReports,
+          },
+          getters,
+        },
       },
-      getters,
     });
 
     wrapper = mount(SummaryTable, {
+      provide: {
+        blobPath: '/blob/path',
+        summaryEndpoint: '/summary.json',
+        suiteEndpoint: '/suite.json',
+      },
       propsData: defaultProps,
       store,
     });
diff --git a/spec/frontend/pipelines/utils_spec.js b/spec/frontend/pipelines/utils_spec.js
index 1c23a7e4fcf..a82390fae22 100644
--- a/spec/frontend/pipelines/utils_spec.js
+++ b/spec/frontend/pipelines/utils_spec.js
@@ -8,10 +8,14 @@ import {
   removeOrphanNodes,
   getMaxNodes,
 } from '~/pipelines/components/parsing_utils';
-import { createNodeDict } from '~/pipelines/utils';
+import { createNodeDict, calculateJobStats, calculateSlowestFiveJobs } from '~/pipelines/utils';
 
 import { mockParsedGraphQLNodes, missingJob } from './components/dag/mock_data';
-import { generateResponse, mockPipelineResponse } from './graph/mock_data';
+import {
+  generateResponse,
+  mockPipelineResponse,
+  mockPerformanceInsightsResponse,
+} from './graph/mock_data';
 
 describe('DAG visualization parsing utilities', () => {
   const nodeDict = createNodeDict(mockParsedGraphQLNodes);
@@ -158,4 +162,40 @@ describe('DAG visualization parsing utilities', () => {
       expect(columns).toMatchSnapshot();
     });
   });
+
+  describe('performance insights', () => {
+    const {
+      data: {
+        project: {
+          pipeline: { jobs },
+        },
+      },
+    } = mockPerformanceInsightsResponse;
+
+    describe('calculateJobStats', () => {
+      const expectedJob = jobs.nodes[0];
+
+      it('returns the job that spent this longest time queued', () => {
+        expect(calculateJobStats(jobs, 'queuedDuration')).toEqual(expectedJob);
+      });
+
+      it('returns the job that was executed last', () => {
+        expect(calculateJobStats(jobs, 'startedAt')).toEqual(expectedJob);
+      });
+    });
+
+    describe('calculateSlowestFiveJobs', () => {
+      it('returns the slowest five jobs of the pipeline', () => {
+        const expectedJobs = [
+          jobs.nodes[9],
+          jobs.nodes[1],
+          jobs.nodes[5],
+          jobs.nodes[7],
+          jobs.nodes[8],
+        ];
+
+        expect(calculateSlowestFiveJobs(jobs)).toEqual(expectedJobs);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/projects/new/components/new_project_url_select_spec.js b/spec/frontend/projects/new/components/new_project_url_select_spec.js
index ba22622e1f7..b6d4ee32cf5 100644
--- a/spec/frontend/projects/new/components/new_project_url_select_spec.js
+++ b/spec/frontend/projects/new/components/new_project_url_select_spec.js
@@ -4,6 +4,7 @@ import {
   GlDropdownItem,
   GlDropdownSectionHeader,
   GlSearchBoxByType,
+  GlTruncate,
 } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
@@ -15,7 +16,6 @@ import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import eventHub from '~/projects/new/event_hub';
 import NewProjectUrlSelect from '~/projects/new/components/new_project_url_select.vue';
 import searchQuery from '~/projects/new/queries/search_namespaces_where_user_can_create_projects.query.graphql';
-import { s__ } from '~/locale';
 
 describe('NewProjectUrlSelect component', () => {
   let wrapper;
@@ -90,6 +90,7 @@ describe('NewProjectUrlSelect component', () => {
 
   const findButtonLabel = () => wrapper.findComponent(GlButton);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findSelectedPath = () => wrapper.findComponent(GlTruncate);
   const findInput = () => wrapper.findComponent(GlSearchBoxByType);
   const findHiddenNamespaceInput = () => wrapper.find('[name="project[namespace_id]"]');
 
@@ -121,14 +122,15 @@ describe('NewProjectUrlSelect component', () => {
 
   describe('when namespaceId is provided', () => {
     beforeEach(() => {
-      wrapper = mountComponent();
+      wrapper = mountComponent({ mountFn: mount });
     });
 
     it('renders a dropdown with the given namespace full path as the text', () => {
-      const dropdownProps = findDropdown().props();
+      expect(findSelectedPath().props('text')).toBe(defaultProvide.namespaceFullPath);
+    });
 
-      expect(dropdownProps.text).toBe(defaultProvide.namespaceFullPath);
-      expect(dropdownProps.toggleClass).not.toContain('gl-text-gray-500!');
+    it('renders a dropdown without the class', () => {
+      expect(findDropdown().props('toggleClass')).not.toContain('gl-text-gray-500!');
     });
 
     it('renders a hidden input with the given namespace id', () => {
@@ -150,14 +152,15 @@ describe('NewProjectUrlSelect component', () => {
     };
 
     beforeEach(() => {
-      wrapper = mountComponent({ provide });
+      wrapper = mountComponent({ provide, mountFn: mount });
     });
 
     it("renders a dropdown with the user's namespace full path as the text", () => {
-      const dropdownProps = findDropdown().props();
+      expect(findSelectedPath().props('text')).toBe('Pick a group or namespace');
+    });
 
-      expect(dropdownProps.text).toBe(s__('ProjectsNew|Pick a group or namespace'));
-      expect(dropdownProps.toggleClass).toContain('gl-text-gray-500!');
+    it('renders a dropdown with the class', () => {
+      expect(findDropdown().props('toggleClass')).toContain('gl-text-gray-500!');
     });
 
     it("renders a hidden input with the user's namespace id", () => {
@@ -236,8 +239,8 @@ describe('NewProjectUrlSelect component', () => {
       expect(listItems.at(2).text()).toBe(data.currentUser.groups.nodes[2].fullPath);
     });
 
-    it('sets the selection to the group', async () => {
-      expect(findDropdown().props('text')).toBe(fullPath);
+    it('sets the selection to the group', () => {
+      expect(findSelectedPath().props('text')).toBe(fullPath);
     });
   });
 
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index 98c7856a61a..7b9011fa3d9 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -14,6 +14,7 @@ jest.mock('~/lib/utils/url_utility');
 const DeploymentFrequencyChartsStub = { name: 'DeploymentFrequencyCharts', render: () => {} };
 const LeadTimeChartsStub = { name: 'LeadTimeCharts', render: () => {} };
 const TimeToRestoreServiceChartsStub = { name: 'TimeToRestoreServiceCharts', render: () => {} };
+const ChangeFailureRateChartsStub = { name: 'ChangeFailureRateCharts', render: () => {} };
 const ProjectQualitySummaryStub = { name: 'ProjectQualitySummary', render: () => {} };
 
 describe('ProjectsPipelinesChartsApp', () => {
@@ -33,6 +34,7 @@ describe('ProjectsPipelinesChartsApp', () => {
             DeploymentFrequencyCharts: DeploymentFrequencyChartsStub,
             LeadTimeCharts: LeadTimeChartsStub,
             TimeToRestoreServiceCharts: TimeToRestoreServiceChartsStub,
+            ChangeFailureRateCharts: ChangeFailureRateChartsStub,
             ProjectQualitySummary: ProjectQualitySummaryStub,
           },
         },
@@ -50,6 +52,7 @@ describe('ProjectsPipelinesChartsApp', () => {
   const findGlTabAtIndex = (index) => findAllGlTabs().at(index);
   const findLeadTimeCharts = () => wrapper.find(LeadTimeChartsStub);
   const findTimeToRestoreServiceCharts = () => wrapper.find(TimeToRestoreServiceChartsStub);
+  const findChangeFailureRateCharts = () => wrapper.find(ChangeFailureRateChartsStub);
   const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub);
   const findPipelineCharts = () => wrapper.find(PipelineCharts);
   const findProjectQualitySummary = () => wrapper.find(ProjectQualitySummaryStub);
@@ -59,58 +62,49 @@ describe('ProjectsPipelinesChartsApp', () => {
       createComponent();
     });
 
-    it('renders tabs', () => {
-      expect(findGlTabs().exists()).toBe(true);
+    describe.each`
+      title                        | finderFn                          | index
+      ${'Pipelines'}               | ${findPipelineCharts}             | ${0}
+      ${'Deployment frequency'}    | ${findDeploymentFrequencyCharts}  | ${1}
+      ${'Lead time'}               | ${findLeadTimeCharts}             | ${2}
+      ${'Time to restore service'} | ${findTimeToRestoreServiceCharts} | ${3}
+      ${'Change failure rate'}     | ${findChangeFailureRateCharts}    | ${4}
+      ${'Project quality'}         | ${findProjectQualitySummary}      | ${5}
+    `('Tabs', ({ title, finderFn, index }) => {
+      it(`renders tab with a title ${title} at index ${index}`, () => {
+        expect(findGlTabAtIndex(index).attributes('title')).toBe(title);
+      });
 
-      expect(findGlTabAtIndex(0).attributes('title')).toBe('Pipelines');
-      expect(findGlTabAtIndex(1).attributes('title')).toBe('Deployment frequency');
-      expect(findGlTabAtIndex(2).attributes('title')).toBe('Lead time');
-      expect(findGlTabAtIndex(3).attributes('title')).toBe('Time to restore service');
-    });
+      it(`renders the ${title} chart`, () => {
+        expect(finderFn().exists()).toBe(true);
+      });
 
-    it('renders the pipeline charts', () => {
-      expect(findPipelineCharts().exists()).toBe(true);
-    });
+      it(`updates the current tab and url when the ${title} tab is clicked`, async () => {
+        let chartsPath;
+        const tabName = title.toLowerCase().replace(/\s/g, '-');
 
-    it('renders the deployment frequency charts', () => {
-      expect(findDeploymentFrequencyCharts().exists()).toBe(true);
-    });
+        setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`);
 
-    it('renders the lead time charts', () => {
-      expect(findLeadTimeCharts().exists()).toBe(true);
-    });
+        mergeUrlParams.mockImplementation(({ chart }, path) => {
+          expect(chart).toBe(tabName);
+          expect(path).toBe(window.location.pathname);
+          chartsPath = `${path}?chart=${chart}`;
+          return chartsPath;
+        });
 
-    it('renders the time to restore service charts', () => {
-      expect(findTimeToRestoreServiceCharts().exists()).toBe(true);
-    });
+        updateHistory.mockImplementation(({ url }) => {
+          expect(url).toBe(chartsPath);
+        });
+        const tabs = findGlTabs();
 
-    it('renders the project quality summary', () => {
-      expect(findProjectQualitySummary().exists()).toBe(true);
-    });
+        expect(tabs.attributes('value')).toBe('0');
 
-    it('sets the tab and url when a tab is clicked', async () => {
-      let chartsPath;
-      setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`);
+        tabs.vm.$emit('input', index);
 
-      mergeUrlParams.mockImplementation(({ chart }, path) => {
-        expect(chart).toBe('deployment-frequency');
-        expect(path).toBe(window.location.pathname);
-        chartsPath = `${path}?chart=${chart}`;
-        return chartsPath;
-      });
+        await nextTick();
 
-      updateHistory.mockImplementation(({ url }) => {
-        expect(url).toBe(chartsPath);
+        expect(tabs.attributes('value')).toBe(index.toString());
       });
-      const tabs = findGlTabs();
-
-      expect(tabs.attributes('value')).toBe('0');
-
-      tabs.vm.$emit('input', 1);
-
-      await nextTick();
-
-      expect(tabs.attributes('value')).toBe('1');
     });
 
     it('should not try to push history if the tab does not change', async () => {
@@ -136,6 +130,7 @@ describe('ProjectsPipelinesChartsApp', () => {
         ${'deployment-frequency-tab'}    | ${'p_analytics_ci_cd_deployment_frequency'}
         ${'lead-time-tab'}               | ${'p_analytics_ci_cd_lead_time'}
         ${'time-to-restore-service-tab'} | ${'p_analytics_ci_cd_time_to_restore_service'}
+        ${'change-failure-rate-tab'}     | ${'p_analytics_ci_cd_change_failure_rate'}
       `('tracks the $event event when clicked', ({ testId, event }) => {
         jest.spyOn(API, 'trackRedisHllUserEvent');
 
@@ -151,6 +146,7 @@ describe('ProjectsPipelinesChartsApp', () => {
   describe('when provided with a query param', () => {
     it.each`
       chart                        | tab
+      ${'change-failure-rate'}     | ${'4'}
       ${'time-to-restore-service'} | ${'3'}
       ${'lead-time'}               | ${'2'}
       ${'deployment-frequency'}    | ${'1'}
diff --git a/spec/frontend/projects/settings/components/new_access_dropdown_spec.js b/spec/frontend/projects/settings/components/new_access_dropdown_spec.js
index a42891423cd..1db48ce05d7 100644
--- a/spec/frontend/projects/settings/components/new_access_dropdown_spec.js
+++ b/spec/frontend/projects/settings/components/new_access_dropdown_spec.js
@@ -29,9 +29,20 @@ jest.mock('~/projects/settings/api/access_dropdown_api', () => ({
   }),
   getDeployKeys: jest.fn().mockResolvedValue({
     data: [
-      { id: 10, title: 'key10', fingerprint: 'abcdefghijklmnop', owner: { name: 'user1' } },
-      { id: 11, title: 'key11', fingerprint: 'abcdefghijklmnop', owner: { name: 'user2' } },
-      { id: 12, title: 'key12', fingerprint: 'abcdefghijklmnop', owner: { name: 'user3' } },
+      {
+        id: 10,
+        title: 'key10',
+        fingerprint: 'md5-abcdefghijklmnop',
+        fingerprint_sha256: 'sha256-abcdefghijklmnop',
+        owner: { name: 'user1' },
+      },
+      {
+        id: 11,
+        title: 'key11',
+        fingerprint_sha256: 'sha256-abcdefghijklmnop',
+        owner: { name: 'user2' },
+      },
+      { id: 12, title: 'key12', fingerprint: 'md5-abcdefghijklmnop', owner: { name: 'user3' } },
     ],
   }),
 }));
@@ -279,6 +290,7 @@ describe('Access Level Dropdown', () => {
       { id: 115, type: 'group', group_id: 5 },
       { id: 118, type: 'user', user_id: 8, name: 'user2' },
       { id: 121, type: 'deploy_key', deploy_key_id: 11 },
+      { id: 122, type: 'deploy_key', deploy_key_id: 12 },
     ];
 
     const findSelected = (type) =>
@@ -309,8 +321,9 @@ describe('Access Level Dropdown', () => {
 
     it('should set selected deploy keys as intersection between the server response and preselected mapping some keys', () => {
       const selectedDeployKeys = findSelected(LEVEL_TYPES.DEPLOY_KEY);
-      expect(selectedDeployKeys).toHaveLength(1);
-      expect(selectedDeployKeys.at(0).text()).toContain('key11 (abcdefghijklmn...)');
+      expect(selectedDeployKeys).toHaveLength(2);
+      expect(selectedDeployKeys.at(0).text()).toContain('key11 (sha256-abcdefg...)');
+      expect(selectedDeployKeys.at(1).text()).toContain('key12 (md5-abcdefghij...)');
     });
   });
 
diff --git a/spec/frontend/protected_branches/protected_branch_edit_spec.js b/spec/frontend/protected_branches/protected_branch_edit_spec.js
index d842e00d850..6ef1b58a956 100644
--- a/spec/frontend/protected_branches/protected_branch_edit_spec.js
+++ b/spec/frontend/protected_branches/protected_branch_edit_spec.js
@@ -114,27 +114,30 @@ describe('ProtectedBranchEdit', () => {
     });
 
     describe('when clicked', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mock.onPatch(TEST_URL, { protected_branch: { [patchParam]: true } }).replyOnce(200, {});
-
-        toggle.click();
       });
 
-      it('checks and disables button', () => {
+      it('checks and disables button', async () => {
+        await toggle.click();
+
         expect(toggle).toHaveClass(IS_CHECKED_CLASS);
         expect(toggle.querySelector(IS_LOADING_SELECTOR)).not.toBe(null);
         expect(toggle).toHaveClass(IS_DISABLED_CLASS);
       });
 
-      it('sends update to BE', () =>
-        axios.waitForAll().then(() => {
-          // Args are asserted in the `.onPatch` call
-          expect(mock.history.patch).toHaveLength(1);
+      it('sends update to BE', async () => {
+        await toggle.click();
+
+        await axios.waitForAll();
 
-          expect(toggle).not.toHaveClass(IS_DISABLED_CLASS);
-          expect(toggle.querySelector(IS_LOADING_SELECTOR)).toBe(null);
-          expect(createFlash).not.toHaveBeenCalled();
-        }));
+        // Args are asserted in the `.onPatch` call
+        expect(mock.history.patch).toHaveLength(1);
+
+        expect(toggle).not.toHaveClass(IS_DISABLED_CLASS);
+        expect(toggle.querySelector(IS_LOADING_SELECTOR)).toBe(null);
+        expect(createFlash).not.toHaveBeenCalled();
+      });
     });
 
     describe('when clicked and BE error', () => {
@@ -143,10 +146,11 @@ describe('ProtectedBranchEdit', () => {
         toggle.click();
       });
 
-      it('flashes error', () =>
-        axios.waitForAll().then(() => {
-          expect(createFlash).toHaveBeenCalled();
-        }));
+      it('flashes error', async () => {
+        await axios.waitForAll();
+
+        expect(createFlash).toHaveBeenCalled();
+      });
     });
   });
 });
diff --git a/spec/frontend/ref/components/ref_selector_spec.js b/spec/frontend/ref/components/ref_selector_spec.js
index e1fc60f0d92..882cb2c1199 100644
--- a/spec/frontend/ref/components/ref_selector_spec.js
+++ b/spec/frontend/ref/components/ref_selector_spec.js
@@ -162,9 +162,9 @@ describe('Ref selector component', () => {
     });
 
   describe('initialization behavior', () => {
-    beforeEach(createComponent);
-
     it('initializes the dropdown with branches and tags when mounted', () => {
+      createComponent();
+
       return waitForRequests().then(() => {
         expect(branchesApiCallSpy).toHaveBeenCalledTimes(1);
         expect(tagsApiCallSpy).toHaveBeenCalledTimes(1);
@@ -173,6 +173,8 @@ describe('Ref selector component', () => {
     });
 
     it('shows a spinner while network requests are in progress', () => {
+      createComponent();
+
       expect(findLoadingIcon().exists()).toBe(true);
 
       return waitForRequests().then(() => {
diff --git a/spec/frontend/releases/__snapshots__/util_spec.js.snap b/spec/frontend/releases/__snapshots__/util_spec.js.snap
index fd2a8eec4d4..90a33152877 100644
--- a/spec/frontend/releases/__snapshots__/util_spec.js.snap
+++ b/spec/frontend/releases/__snapshots__/util_spec.js.snap
@@ -57,7 +57,7 @@ Object {
       "evidences": Array [],
       "milestones": Array [],
       "name": "The second release",
-      "releasedAt": "2019-01-10T00:00:00Z",
+      "releasedAt": 2019-01-10T00:00:00.000Z,
       "tagName": "v1.2",
       "tagPath": "/releases-namespace/releases-project/-/tags/v1.2",
       "upcomingRelease": true,
@@ -188,7 +188,7 @@ Object {
         },
       ],
       "name": "The first release",
-      "releasedAt": "2018-12-10T00:00:00Z",
+      "releasedAt": 2018-12-10T00:00:00.000Z,
       "tagName": "v1.1",
       "tagPath": "/releases-namespace/releases-project/-/tags/v1.1",
       "upcomingRelease": true,
@@ -196,10 +196,10 @@ Object {
   ],
   "paginationInfo": Object {
     "__typename": "PageInfo",
-    "endCursor": "eyJyZWxlYXNlZF9hdCI6IjIwMTgtMTItMTAgMDA6MDA6MDAuMDAwMDAwMDAwIFVUQyIsImlkIjoiMSJ9",
+    "endCursor": "eyJyZWxlYXNlZF9hdCI6IjIwMTgtMTItMTAgMDA6MDA6MDAuMDAwMDAwMDAwICswMDAwIiwiaWQiOiIxIn0",
     "hasNextPage": false,
     "hasPreviousPage": false,
-    "startCursor": "eyJyZWxlYXNlZF9hdCI6IjIwMTktMDEtMTAgMDA6MDA6MDAuMDAwMDAwMDAwIFVUQyIsImlkIjoiMiJ9",
+    "startCursor": "eyJyZWxlYXNlZF9hdCI6IjIwMTktMDEtMTAgMDA6MDA6MDAuMDAwMDAwMDAwICswMDAwIiwiaWQiOiIyIn0",
   },
 }
 `;
@@ -267,7 +267,9 @@ Object {
       },
     ],
     "name": "The first release",
+    "releasedAt": 2018-12-10T00:00:00.000Z,
     "tagName": "v1.1",
+    "tagPath": "/releases-namespace/releases-project/-/tags/v1.1",
   },
 }
 `;
@@ -400,7 +402,7 @@ Object {
       },
     ],
     "name": "The first release",
-    "releasedAt": "2018-12-10T00:00:00Z",
+    "releasedAt": 2018-12-10T00:00:00.000Z,
     "tagName": "v1.1",
     "tagPath": "/releases-namespace/releases-project/-/tags/v1.1",
     "upcomingRelease": true,
diff --git a/spec/frontend/releases/components/app_edit_new_spec.js b/spec/frontend/releases/components/app_edit_new_spec.js
index 80be27c92ff..cb044b9e891 100644
--- a/spec/frontend/releases/components/app_edit_new_spec.js
+++ b/spec/frontend/releases/components/app_edit_new_spec.js
@@ -1,21 +1,24 @@
-import { mount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { merge } from 'lodash';
 import Vuex from 'vuex';
 import { nextTick } from 'vue';
-import { GlFormCheckbox } from '@gitlab/ui';
-import originalRelease from 'test_fixtures/api/releases/release.json';
+import { GlDatepicker, GlFormCheckbox } from '@gitlab/ui';
+import originalOneReleaseForEditingQueryResponse from 'test_fixtures/graphql/releases/graphql/queries/one_release_for_editing.query.graphql.json';
+import { convertOneReleaseGraphQLResponse } from '~/releases/util';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
-import * as commonUtils from '~/lib/utils/common_utils';
 import ReleaseEditNewApp from '~/releases/components/app_edit_new.vue';
 import AssetLinksForm from '~/releases/components/asset_links_form.vue';
+import ConfirmDeleteModal from '~/releases/components/confirm_delete_modal.vue';
 import { BACK_URL_PARAM } from '~/releases/constants';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 
+const originalRelease = originalOneReleaseForEditingQueryResponse.data.project.release;
 const originalMilestones = originalRelease.milestones;
 const releasesPagePath = 'path/to/releases/page';
+const upcomingReleaseDocsPath = 'path/to/upcoming/release/docs';
 
 describe('Release edit/new component', () => {
   let wrapper;
@@ -28,22 +31,24 @@ describe('Release edit/new component', () => {
   const factory = async ({ featureFlags = {}, store: storeUpdates = {} } = {}) => {
     state = {
       release,
+      isExistingRelease: true,
       markdownDocsPath: 'path/to/markdown/docs',
       releasesPagePath,
       projectId: '8',
       groupId: '42',
       groupMilestonesAvailable: true,
+      upcomingReleaseDocsPath,
     };
 
     actions = {
       initializeRelease: jest.fn(),
       saveRelease: jest.fn(),
       addEmptyAssetLink: jest.fn(),
+      deleteRelease: jest.fn(),
     };
 
     getters = {
       isValid: () => true,
-      isExistingRelease: () => true,
       validationErrors: () => ({
         assets: {
           links: [],
@@ -68,7 +73,7 @@ describe('Release edit/new component', () => {
       ),
     );
 
-    wrapper = mount(ReleaseEditNewApp, {
+    wrapper = mountExtended(ReleaseEditNewApp, {
       store,
       provide: {
         glFeatures: featureFlags,
@@ -88,7 +93,7 @@ describe('Release edit/new component', () => {
 
     mock.onGet('/api/v4/projects/8/milestones').reply(200, originalMilestones);
 
-    release = commonUtils.convertObjectPropsToCamelCase(originalRelease, { deep: true });
+    release = convertOneReleaseGraphQLResponse(originalOneReleaseForEditingQueryResponse).data;
   });
 
   afterEach(() => {
@@ -128,6 +133,18 @@ describe('Release edit/new component', () => {
       expect(wrapper.find('#release-title').element.value).toBe(release.name);
     });
 
+    it('renders the released at date in the "Released at" datepicker', () => {
+      expect(wrapper.findComponent(GlDatepicker).props('value')).toBe(release.releasedAt);
+    });
+
+    it('links to the documentation on upcoming releases in the "Released at" description', () => {
+      const link = wrapper.findByRole('link', { name: 'Upcoming Release' });
+
+      expect(link.exists()).toBe(true);
+
+      expect(link.attributes('href')).toBe(upcomingReleaseDocsPath);
+    });
+
     it('renders the release notes in the "Release notes" textarea', () => {
       expect(wrapper.find('#release-notes').element.value).toBe(release.description);
     });
@@ -191,9 +208,7 @@ describe('Release edit/new component', () => {
         store: {
           modules: {
             editNew: {
-              getters: {
-                isExistingRelease: () => false,
-              },
+              state: { isExistingRelease: false },
             },
           },
         },
@@ -274,4 +289,31 @@ describe('Release edit/new component', () => {
       });
     });
   });
+
+  describe('delete', () => {
+    const findConfirmDeleteModal = () => wrapper.findComponent(ConfirmDeleteModal);
+
+    it('calls the deleteRelease action on confirmation', async () => {
+      await factory();
+      findConfirmDeleteModal().vm.$emit('delete');
+
+      expect(actions.deleteRelease).toHaveBeenCalled();
+    });
+
+    it('is hidden if this is a new release', async () => {
+      await factory({
+        store: {
+          modules: {
+            editNew: {
+              state: {
+                isExistingRelease: false,
+              },
+            },
+          },
+        },
+      });
+
+      expect(findConfirmDeleteModal().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/releases/components/app_index_spec.js b/spec/frontend/releases/components/app_index_spec.js
index 63ce4c8bb17..f64f07de90e 100644
--- a/spec/frontend/releases/components/app_index_spec.js
+++ b/spec/frontend/releases/components/app_index_spec.js
@@ -8,6 +8,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import allReleasesQuery from '~/releases/graphql/queries/all_releases.query.graphql';
 import createFlash from '~/flash';
 import { historyPushState } from '~/lib/utils/common_utils';
+import { sprintf, __ } from '~/locale';
 import ReleasesIndexApp from '~/releases/components/app_index.vue';
 import ReleaseBlock from '~/releases/components/release_block.vue';
 import ReleaseSkeletonLoader from '~/releases/components/release_skeleton_loader.vue';
@@ -15,6 +16,7 @@ import ReleasesEmptyState from '~/releases/components/releases_empty_state.vue';
 import ReleasesPagination from '~/releases/components/releases_pagination.vue';
 import ReleasesSort from '~/releases/components/releases_sort.vue';
 import { PAGE_SIZE, CREATED_ASC, DEFAULT_SORT } from '~/releases/constants';
+import { deleteReleaseSessionKey } from '~/releases/util';
 
 Vue.use(VueApollo);
 
@@ -44,6 +46,7 @@ describe('app_index.vue', () => {
   let singleRelease;
   let noReleases;
   let queryMock;
+  let toast;
 
   const createComponent = ({
     singleResponse = Promise.resolve(singleRelease),
@@ -58,12 +61,17 @@ describe('app_index.vue', () => {
       ],
     ]);
 
+    toast = jest.fn();
+
     wrapper = shallowMountExtended(ReleasesIndexApp, {
       apolloProvider,
       provide: {
         newReleasePath,
         projectPath,
       },
+      mocks: {
+        $toast: { show: toast },
+      },
     });
   };
 
@@ -395,4 +403,27 @@ describe('app_index.vue', () => {
       },
     );
   });
+
+  describe('after deleting', () => {
+    const release = 'fake release';
+    const key = deleteReleaseSessionKey(projectPath);
+
+    beforeEach(async () => {
+      window.sessionStorage.setItem(key, release);
+
+      await createComponent();
+    });
+
+    it('shows a toast', async () => {
+      expect(toast).toHaveBeenCalledWith(
+        sprintf(__('Release %{release} has been successfully deleted.'), {
+          release,
+        }),
+      );
+    });
+
+    it('clears session storage', async () => {
+      expect(window.sessionStorage.getItem(key)).toBe(null);
+    });
+  });
 });
diff --git a/spec/frontend/releases/components/confirm_delete_modal_spec.js b/spec/frontend/releases/components/confirm_delete_modal_spec.js
new file mode 100644
index 00000000000..f7c526c1ced
--- /dev/null
+++ b/spec/frontend/releases/components/confirm_delete_modal_spec.js
@@ -0,0 +1,89 @@
+import Vue, { nextTick } from 'vue';
+import Vuex from 'vuex';
+import { GlModal } from '@gitlab/ui';
+import originalOneReleaseForEditingQueryResponse from 'test_fixtures/graphql/releases/graphql/queries/one_release_for_editing.query.graphql.json';
+import { convertOneReleaseGraphQLResponse } from '~/releases/util';
+import ConfirmDeleteModal from '~/releases/components/confirm_delete_modal.vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { __, sprintf } from '~/locale';
+
+Vue.use(Vuex);
+
+const release = convertOneReleaseGraphQLResponse(originalOneReleaseForEditingQueryResponse).data;
+const deleteReleaseDocsPath = 'path/to/delete/release/docs';
+
+describe('~/releases/components/confirm_delete_modal.vue', () => {
+  let wrapper;
+  let state;
+
+  const factory = async () => {
+    state = {
+      release,
+      deleteReleaseDocsPath,
+    };
+
+    const store = new Vuex.Store({
+      modules: {
+        editNew: {
+          namespaced: true,
+          state,
+        },
+      },
+    });
+
+    wrapper = mountExtended(ConfirmDeleteModal, {
+      store,
+    });
+
+    await nextTick();
+  };
+
+  beforeEach(() => {
+    factory();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('button', () => {
+    it('should open the modal on click', async () => {
+      await wrapper.findByRole('button', { name: 'Delete' }).trigger('click');
+
+      const title = wrapper.findByText(
+        sprintf(__('Delete release %{release}?'), { release: release.name }),
+      );
+
+      expect(title.exists()).toBe(true);
+    });
+  });
+
+  describe('modal', () => {
+    beforeEach(async () => {
+      await wrapper.findByRole('button', { name: 'Delete' }).trigger('click');
+    });
+
+    it('confirms the user wants to delete the release', () => {
+      const text = wrapper.findByText(__('Are you sure you want to delete this release?'));
+
+      expect(text.exists()).toBe(true);
+    });
+
+    it('links to the tag', () => {
+      const tagPath = wrapper.findByRole('link', { name: release.tagName });
+      expect(tagPath.attributes('href')).toBe(release.tagPath);
+    });
+
+    it('links to the docs on deleting releases', () => {
+      const docsPath = wrapper.findByRole('link', { name: 'Deleting a release' });
+
+      expect(docsPath.attributes('href')).toBe(deleteReleaseDocsPath);
+    });
+
+    it('emits a delete event on action primary', () => {
+      wrapper.findComponent(GlModal).vm.$emit('primary');
+
+      expect(wrapper.emitted('delete')).toEqual([[]]);
+    });
+  });
+});
diff --git a/spec/frontend/releases/components/release_block_footer_spec.js b/spec/frontend/releases/components/release_block_footer_spec.js
index b095e9e1d78..848e802df4b 100644
--- a/spec/frontend/releases/components/release_block_footer_spec.js
+++ b/spec/frontend/releases/components/release_block_footer_spec.js
@@ -2,14 +2,16 @@ import { GlLink, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { cloneDeep } from 'lodash';
 import { nextTick } from 'vue';
-import originalRelease from 'test_fixtures/api/releases/release.json';
+import originalOneReleaseQueryResponse from 'test_fixtures/graphql/releases/graphql/queries/one_release.query.graphql.json';
+import { convertOneReleaseGraphQLResponse } from '~/releases/util';
 import { trimText } from 'helpers/text_helper';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import ReleaseBlockFooter from '~/releases/components/release_block_footer.vue';
 
 // TODO: Encapsulate date helpers https://gitlab.com/gitlab-org/gitlab/-/issues/320883
 const MONTHS_IN_MS = 1000 * 60 * 60 * 24 * 31;
-const mockFutureDate = new Date(new Date().getTime() + MONTHS_IN_MS).toISOString();
+const mockFutureDate = new Date(new Date().getTime() + MONTHS_IN_MS);
+
+const originalRelease = convertOneReleaseGraphQLResponse(originalOneReleaseQueryResponse).data;
 
 describe('Release block footer', () => {
   let wrapper;
@@ -18,7 +20,7 @@ describe('Release block footer', () => {
   const factory = async (props = {}) => {
     wrapper = mount(ReleaseBlockFooter, {
       propsData: {
-        ...convertObjectPropsToCamelCase(release, { deep: true }),
+        ...originalRelease,
         ...props,
       },
     });
@@ -55,8 +57,8 @@ describe('Release block footer', () => {
       const commitLink = commitInfoSectionLink();
 
       expect(commitLink.exists()).toBe(true);
-      expect(commitLink.text()).toBe(release.commit.short_id);
-      expect(commitLink.attributes('href')).toBe(release.commit_path);
+      expect(commitLink.text()).toBe(release.commit.shortId);
+      expect(commitLink.attributes('href')).toBe(release.commitPath);
     });
 
     it('renders the tag icon', () => {
@@ -70,8 +72,8 @@ describe('Release block footer', () => {
       const commitLink = tagInfoSection().find(GlLink);
 
       expect(commitLink.exists()).toBe(true);
-      expect(commitLink.text()).toBe(release.tag_name);
-      expect(commitLink.attributes('href')).toBe(release.tag_path);
+      expect(commitLink.text()).toBe(release.tagName);
+      expect(commitLink.attributes('href')).toBe(release.tagPath);
     });
 
     it('renders the author and creation time info', () => {
@@ -114,14 +116,14 @@ describe('Release block footer', () => {
       const avatarImg = authorDateInfoSection().find('img');
 
       expect(avatarImg.exists()).toBe(true);
-      expect(avatarImg.attributes('src')).toBe(release.author.avatar_url);
+      expect(avatarImg.attributes('src')).toBe(release.author.avatarUrl);
     });
 
     it("renders a link to the author's profile", () => {
       const authorLink = authorDateInfoSection().find(GlLink);
 
       expect(authorLink.exists()).toBe(true);
-      expect(authorLink.attributes('href')).toBe(release.author.web_url);
+      expect(authorLink.attributes('href')).toBe(release.author.webUrl);
     });
   });
 
@@ -138,7 +140,7 @@ describe('Release block footer', () => {
 
     it('renders the commit SHA as plain text (instead of a link)', () => {
       expect(commitInfoSectionLink().exists()).toBe(false);
-      expect(commitInfoSection().text()).toBe(release.commit.short_id);
+      expect(commitInfoSection().text()).toBe(release.commit.shortId);
     });
   });
 
@@ -155,7 +157,7 @@ describe('Release block footer', () => {
 
     it('renders the tag name as plain text (instead of a link)', () => {
       expect(tagInfoSectionLink().exists()).toBe(false);
-      expect(tagInfoSection().text()).toBe(release.tag_name);
+      expect(tagInfoSection().text()).toBe(release.tagName);
     });
   });
 
diff --git a/spec/frontend/releases/components/release_block_spec.js b/spec/frontend/releases/components/release_block_spec.js
index c4910ae9b2f..17e2af687a6 100644
--- a/spec/frontend/releases/components/release_block_spec.js
+++ b/spec/frontend/releases/components/release_block_spec.js
@@ -1,7 +1,8 @@
 import { mount } from '@vue/test-utils';
 import $ from 'jquery';
 import { nextTick } from 'vue';
-import originalRelease from 'test_fixtures/api/releases/release.json';
+import originalOneReleaseQueryResponse from 'test_fixtures/graphql/releases/graphql/queries/one_release.query.graphql.json';
+import { convertOneReleaseGraphQLResponse } from '~/releases/util';
 import * as commonUtils from '~/lib/utils/common_utils';
 import * as urlUtility from '~/lib/utils/url_utility';
 import EvidenceBlock from '~/releases/components/evidence_block.vue';
@@ -34,7 +35,7 @@ describe('Release block', () => {
 
   beforeEach(() => {
     jest.spyOn($.fn, 'renderGFM');
-    release = commonUtils.convertObjectPropsToCamelCase(originalRelease, { deep: true });
+    release = convertOneReleaseGraphQLResponse(originalOneReleaseQueryResponse).data;
   });
 
   afterEach(() => {
diff --git a/spec/frontend/releases/components/tag_field_spec.js b/spec/frontend/releases/components/tag_field_spec.js
index db08f874959..e7b9aa4abbb 100644
--- a/spec/frontend/releases/components/tag_field_spec.js
+++ b/spec/frontend/releases/components/tag_field_spec.js
@@ -9,14 +9,14 @@ describe('releases/components/tag_field', () => {
   let store;
   let wrapper;
 
-  const createComponent = ({ tagName }) => {
+  const createComponent = ({ isExistingRelease }) => {
     store = createStore({
       modules: {
         editNew: createEditNewModule({}),
       },
     });
 
-    store.state.editNew.tagName = tagName;
+    store.state.editNew.isExistingRelease = isExistingRelease;
 
     wrapper = shallowMount(TagField, { store });
   };
@@ -31,7 +31,7 @@ describe('releases/components/tag_field', () => {
 
   describe('when an existing release is being edited', () => {
     beforeEach(() => {
-      createComponent({ tagName: 'v1.0' });
+      createComponent({ isExistingRelease: true });
     });
 
     it('renders the TagFieldExisting component', () => {
@@ -45,7 +45,7 @@ describe('releases/components/tag_field', () => {
 
   describe('when a new release is being created', () => {
     beforeEach(() => {
-      createComponent({ tagName: null });
+      createComponent({ isExistingRelease: false });
     });
 
     it('renders the TagFieldNew component', () => {
diff --git a/spec/frontend/releases/stores/modules/detail/actions_spec.js b/spec/frontend/releases/stores/modules/detail/actions_spec.js
index 41653f62ebf..ce3b690213c 100644
--- a/spec/frontend/releases/stores/modules/detail/actions_spec.js
+++ b/spec/frontend/releases/stores/modules/detail/actions_spec.js
@@ -9,10 +9,15 @@ import { ASSET_LINK_TYPE } from '~/releases/constants';
 import createReleaseAssetLinkMutation from '~/releases/graphql/mutations/create_release_link.mutation.graphql';
 import deleteReleaseAssetLinkMutation from '~/releases/graphql/mutations/delete_release_link.mutation.graphql';
 import updateReleaseMutation from '~/releases/graphql/mutations/update_release.mutation.graphql';
+import deleteReleaseMutation from '~/releases/graphql/mutations/delete_release.mutation.graphql';
 import * as actions from '~/releases/stores/modules/edit_new/actions';
 import * as types from '~/releases/stores/modules/edit_new/mutation_types';
 import createState from '~/releases/stores/modules/edit_new/state';
-import { gqClient, convertOneReleaseGraphQLResponse } from '~/releases/util';
+import {
+  gqClient,
+  convertOneReleaseGraphQLResponse,
+  deleteReleaseSessionKey,
+} from '~/releases/util';
 
 jest.mock('~/api/tags_api');
 
@@ -37,19 +42,15 @@ describe('Release edit/new actions', () => {
   let error;
 
   const setupState = (updates = {}) => {
-    const getters = {
-      isExistingRelease: true,
-    };
-
     state = {
       ...createState({
         projectId: '18',
+        isExistingRelease: true,
         tagName: releaseResponse.tag_name,
         releasesPagePath: 'path/to/releases/page',
         markdownDocsPath: 'path/to/markdown/docs',
         markdownPreviewPath: 'path/to/markdown/preview',
       }),
-      ...getters,
       ...updates,
     };
   };
@@ -168,6 +169,15 @@ describe('Release edit/new actions', () => {
       });
     });
 
+    describe('updateReleasedAt', () => {
+      it(`commits ${types.UPDATE_RELEASED_AT} with the updated date`, () => {
+        const newDate = new Date();
+        return testAction(actions.updateReleasedAt, newDate, state, [
+          { type: types.UPDATE_RELEASED_AT, payload: newDate },
+        ]);
+      });
+    });
+
     describe('updateCreateFrom', () => {
       it(`commits ${types.UPDATE_CREATE_FROM} with the updated ref`, () => {
         const newRef = 'my-feature-branch';
@@ -177,6 +187,15 @@ describe('Release edit/new actions', () => {
       });
     });
 
+    describe('updateShowCreateFrom', () => {
+      it(`commits ${types.UPDATE_SHOW_CREATE_FROM} with the updated ref`, () => {
+        const newRef = 'my-feature-branch';
+        return testAction(actions.updateShowCreateFrom, newRef, state, [
+          { type: types.UPDATE_SHOW_CREATE_FROM, payload: newRef },
+        ]);
+      });
+    });
+
     describe('updateReleaseTitle', () => {
       it(`commits ${types.UPDATE_RELEASE_TITLE} with the updated release title`, () => {
         const newTitle = 'The new release title';
@@ -572,6 +591,133 @@ describe('Release edit/new actions', () => {
     });
   });
 
+  describe('deleteRelease', () => {
+    let getters;
+    let dispatch;
+    let commit;
+    let release;
+
+    beforeEach(() => {
+      getters = {
+        releaseDeleteMutationVariables: {
+          input: {
+            projectPath: 'test-org/test',
+            tagName: 'v1.0',
+          },
+        },
+      };
+
+      release = convertOneReleaseGraphQLResponse(releaseResponse).data;
+
+      setupState({
+        release,
+        originalRelease: release,
+        ...getters,
+      });
+
+      dispatch = jest.fn();
+      commit = jest.fn();
+
+      gqClient.mutate.mockResolvedValue({
+        data: {
+          releaseDelete: {
+            errors: [],
+          },
+          releaseAssetLinkDelete: {
+            errors: [],
+          },
+        },
+      });
+    });
+
+    describe('when the delete is successful', () => {
+      beforeEach(() => {
+        window.sessionStorage.clear();
+      });
+
+      it('dispatches receiveSaveReleaseSuccess', async () => {
+        await actions.deleteRelease({ commit, dispatch, state, getters });
+        expect(dispatch.mock.calls).toEqual([
+          ['receiveSaveReleaseSuccess', state.releasesPagePath],
+        ]);
+      });
+
+      it('deletes the release', async () => {
+        await actions.deleteRelease({ commit, dispatch, state, getters });
+        expect(gqClient.mutate.mock.calls[0]).toEqual([
+          {
+            mutation: deleteReleaseMutation,
+            variables: getters.releaseDeleteMutationVariables,
+          },
+        ]);
+      });
+
+      it('stores the name for toasting', async () => {
+        await actions.deleteRelease({ commit, dispatch, state, getters });
+        expect(window.sessionStorage.getItem(deleteReleaseSessionKey(state.projectPath))).toBe(
+          state.release.name,
+        );
+      });
+    });
+
+    describe('when the delete request fails', () => {
+      beforeEach(() => {
+        gqClient.mutate.mockRejectedValue(error);
+      });
+
+      it('dispatches requestDeleteRelease and receiveSaveReleaseError with an error object', async () => {
+        await actions.deleteRelease({ commit, dispatch, state, getters });
+
+        expect(commit.mock.calls).toContainEqual([types.RECEIVE_SAVE_RELEASE_ERROR, error]);
+      });
+
+      it('shows a flash message', async () => {
+        await actions.deleteRelease({ commit, dispatch, state, getters });
+
+        expect(createFlash).toHaveBeenCalledTimes(1);
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Something went wrong while deleting the release.',
+        });
+      });
+    });
+
+    describe('when the delete returns errors', () => {
+      beforeEach(() => {
+        gqClient.mutate.mockResolvedValue({
+          data: {
+            releaseUpdate: {
+              errors: ['Something went wrong!'],
+            },
+            releaseAssetLinkDelete: {
+              errors: [],
+            },
+            releaseAssetLinkCreate: {
+              errors: [],
+            },
+          },
+        });
+      });
+
+      it('dispatches requestDeleteRelease and receiveSaveReleaseError with an error object', async () => {
+        await actions.deleteRelease({ commit, dispatch, state, getters });
+
+        expect(commit.mock.calls).toContainEqual([
+          types.RECEIVE_SAVE_RELEASE_ERROR,
+          expect.any(Error),
+        ]);
+      });
+
+      it('shows a flash message', async () => {
+        await actions.deleteRelease({ commit, dispatch, state, getters });
+
+        expect(createFlash).toHaveBeenCalledTimes(1);
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Something went wrong while deleting the release.',
+        });
+      });
+    });
+  });
+
   describe('fetchTagNotes', () => {
     const tagName = 'v8.0.0';
 
diff --git a/spec/frontend/releases/stores/modules/detail/getters_spec.js b/spec/frontend/releases/stores/modules/detail/getters_spec.js
index c42c6c00f56..4ac6eaebaa2 100644
--- a/spec/frontend/releases/stores/modules/detail/getters_spec.js
+++ b/spec/frontend/releases/stores/modules/detail/getters_spec.js
@@ -2,20 +2,6 @@ import { s__ } from '~/locale';
 import * as getters from '~/releases/stores/modules/edit_new/getters';
 
 describe('Release edit/new getters', () => {
-  describe('isExistingRelease', () => {
-    it('returns true if the release is an existing release that already exists in the database', () => {
-      const state = { tagName: 'test-tag-name' };
-
-      expect(getters.isExistingRelease(state)).toBe(true);
-    });
-
-    it('returns false if the release is a new release that has not yet been saved to the database', () => {
-      const state = { tagName: null };
-
-      expect(getters.isExistingRelease(state)).toBe(false);
-    });
-  });
-
   describe('releaseLinksToCreate', () => {
     it("returns an empty array if state.release doesn't exist", () => {
       const state = {};
@@ -302,6 +288,7 @@ describe('Release edit/new getters', () => {
           name: 'release.name',
           description: 'release.description',
           milestones: ['release.milestone[0].title'],
+          releasedAt: new Date(2022, 5, 30),
         },
       },
       {
@@ -310,6 +297,7 @@ describe('Release edit/new getters', () => {
         name: 'release.name',
         description: 'release.description',
         milestones: ['release.milestone[0].title'],
+        releasedAt: new Date(2022, 5, 30),
       },
     ],
     [
@@ -381,6 +369,26 @@ describe('Release edit/new getters', () => {
     });
   });
 
+  describe('releaseDeleteMutationVariables', () => {
+    it('returns all the data needed for the releaseDelete GraphQL mutation', () => {
+      const state = {
+        projectPath: 'test-org/test',
+        release: { tagName: 'v1.0' },
+      };
+
+      const expectedVariables = {
+        input: {
+          projectPath: 'test-org/test',
+          tagName: 'v1.0',
+        },
+      };
+
+      const actualVariables = getters.releaseDeleteMutationVariables(state);
+
+      expect(actualVariables).toEqual(expectedVariables);
+    });
+  });
+
   describe('formattedReleaseNotes', () => {
     it.each`
       description        | includeTagNotes | tagNotes       | included
diff --git a/spec/frontend/releases/stores/modules/detail/mutations_spec.js b/spec/frontend/releases/stores/modules/detail/mutations_spec.js
index 85844831e0b..60b57c7a7ff 100644
--- a/spec/frontend/releases/stores/modules/detail/mutations_spec.js
+++ b/spec/frontend/releases/stores/modules/detail/mutations_spec.js
@@ -25,11 +25,12 @@ describe('Release edit/new mutations', () => {
       mutations[types.INITIALIZE_EMPTY_RELEASE](state);
 
       expect(state.release).toEqual({
-        tagName: null,
+        tagName: 'v1.3',
         name: '',
         description: '',
         milestones: [],
         groupMilestones: [],
+        releasedAt: new Date(),
         assets: {
           links: [],
         },
@@ -82,6 +83,16 @@ describe('Release edit/new mutations', () => {
     });
   });
 
+  describe(`${types.UPDATE_RELEASED_AT}`, () => {
+    it("updates the release's released at date", () => {
+      state.release = release;
+      const newDate = new Date();
+      mutations[types.UPDATE_RELEASED_AT](state, newDate);
+
+      expect(state.release.releasedAt).toBe(newDate);
+    });
+  });
+
   describe(`${types.UPDATE_CREATE_FROM}`, () => {
     it('updates the ref that the ref will be created from', () => {
       state.createFrom = 'main';
@@ -92,6 +103,16 @@ describe('Release edit/new mutations', () => {
     });
   });
 
+  describe(`${types.UPDATE_SHOW_CREATE_FROM}`, () => {
+    it('updates the ref that the ref will be created from', () => {
+      state.showCreateFrom = true;
+      const newValue = false;
+      mutations[types.UPDATE_SHOW_CREATE_FROM](state, newValue);
+
+      expect(state.showCreateFrom).toBe(newValue);
+    });
+  });
+
   describe(`${types.UPDATE_RELEASE_TITLE}`, () => {
     it("updates the release's title", () => {
       state.release = release;
diff --git a/spec/frontend/reports/components/grouped_issues_list_spec.js b/spec/frontend/reports/components/grouped_issues_list_spec.js
index c6eebf05dd7..95ef0bcbcc7 100644
--- a/spec/frontend/reports/components/grouped_issues_list_spec.js
+++ b/spec/frontend/reports/components/grouped_issues_list_spec.js
@@ -17,7 +17,6 @@ describe('Grouped Issues List', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   it('renders a smart virtual list with the correct props', () => {
@@ -35,13 +34,15 @@ describe('Grouped Issues List', () => {
   });
 
   describe('without data', () => {
-    beforeEach(createComponent);
+    beforeEach(() => {
+      createComponent();
+    });
 
     it.each(['unresolved', 'resolved'])('does not a render a header for %s issues', (issueName) => {
       expect(findHeading(issueName).exists()).toBe(false);
     });
 
-    it.each('resolved', 'unresolved')('does not render report items for %s issues', () => {
+    it.each(['resolved', 'unresolved'])('does not render report items for %s issues', () => {
       expect(wrapper.find(ReportItem).exists()).toBe(false);
     });
   });
diff --git a/spec/frontend/reports/mock_data/new_failures_report.json b/spec/frontend/reports/mock_data/new_failures_report.json
index 8b9c12c6271..438f7c82788 100644
--- a/spec/frontend/reports/mock_data/new_failures_report.json
+++ b/spec/frontend/reports/mock_data/new_failures_report.json
@@ -8,12 +8,14 @@
         {
           "result": "failure",
           "name": "Test#sum when a is 1 and b is 2 returns summary",
+          "file": "spec/file_1.rb",
           "execution_time": 0.009411,
           "system_output": "Failure/Error: is_expected.to eq(3)\n\n  expected: 3\n       got: -1\n\n  (compared using ==)\n./spec/test_spec.rb:12:in `block (4 levels) in <top (required)>'"
         },
         {
           "result": "failure",
           "name": "Test#sum when a is 100 and b is 200 returns summary",
+          "file": "spec/file_2.rb",
           "execution_time": 0.000162,
           "system_output": "Failure/Error: is_expected.to eq(300)\n\n  expected: 300\n       got: -100\n\n  (compared using ==)\n./spec/test_spec.rb:21:in `block (4 levels) in <top (required)>'"
         }
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 4732d68c8c6..cb56f392ec9 100644
--- a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
@@ -17,7 +17,7 @@ exports[`Repository last commit component renders commit widget 1`] = `
   />
    
   <div
-    class="commit-detail flex-list"
+    class="commit-detail flex-list gl-display-flex gl-justify-content-space-between gl-align-items-flex-start gl-flex-grow-1 gl-min-w-0"
   >
     <div
       class="commit-content qa-commit-content"
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index d498b6f0c4f..2b70cb84c67 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -136,6 +136,7 @@ describe('Blob content viewer component', () => {
   const findBlobButtonGroup = () => wrapper.findComponent(BlobButtonGroup);
   const findForkSuggestion = () => wrapper.findComponent(ForkSuggestion);
   const findCodeIntelligence = () => wrapper.findComponent(CodeIntelligence);
+  const findSourceViewer = () => wrapper.findComponent(SourceViewer);
 
   beforeEach(() => {
     jest.spyOn(window, 'requestIdleCallback').mockImplementation(execImmediately);
@@ -197,6 +198,16 @@ describe('Blob content viewer component', () => {
         expect(mockAxios.history.get[0].url).toBe(legacyViewerUrl);
       });
 
+      it('loads a legacy viewer when the source viewer emits an error', async () => {
+        loadViewer.mockReturnValueOnce(SourceViewer);
+        await createComponent();
+        findSourceViewer().vm.$emit('error');
+        await waitForPromises();
+
+        expect(mockAxios.history.get).toHaveLength(1);
+        expect(mockAxios.history.get[0].url).toBe(legacyViewerUrl);
+      });
+
       it('loads a legacy viewer when a viewer component is not available', async () => {
         await createComponent({ blob: { ...simpleViewerMock, fileType: 'unknown' } });
 
diff --git a/spec/frontend/repository/components/last_commit_spec.js b/spec/frontend/repository/components/last_commit_spec.js
index cfbf74e34aa..3783b34e33a 100644
--- a/spec/frontend/repository/components/last_commit_spec.js
+++ b/spec/frontend/repository/components/last_commit_spec.js
@@ -1,179 +1,227 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
 import { GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
 import LastCommit from '~/repository/components/last_commit.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-
-let vm;
-
-function createCommitData(data = {}) {
-  const defaultData = {
-    sha: '123456789',
-    title: 'Commit title',
-    titleHtml: 'Commit title',
-    message: 'Commit message',
-    webPath: '/commit/123',
-    authoredDate: '2019-01-01',
-    author: {
-      name: 'Test',
-      avatarUrl: 'https://test.com',
-      webPath: '/test',
-    },
-    pipeline: {
+import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
+import { refMock } from '../mock_data';
+
+let wrapper;
+let mockResolver;
+
+const findPipeline = () => wrapper.find('.js-commit-pipeline');
+const findTextExpander = () => wrapper.find('.text-expander');
+const findUserLink = () => wrapper.find('.js-user-link');
+const findUserAvatarLink = () => wrapper.findComponent(UserAvatarLink);
+const findLastCommitLabel = () => wrapper.findByTestId('last-commit-id-label');
+const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+const findCommitRowDescription = () => wrapper.find('.commit-row-description');
+const findStatusBox = () => wrapper.find('.gpg-status-box');
+const findItemTitle = () => wrapper.find('.item-title');
+
+const defaultPipelineEdges = [
+  {
+    __typename: 'PipelineEdge',
+    node: {
+      __typename: 'Pipeline',
+      id: 'gid://gitlab/Ci::Pipeline/167',
       detailedStatus: {
+        __typename: 'DetailedStatus',
+        id: 'id',
         detailsPath: 'https://test.com/pipeline',
-        icon: 'failed',
+        icon: 'status_running',
         tooltip: 'failed',
         text: 'failed',
-        group: {},
+        group: 'failed',
       },
     },
-  };
-  return Object.assign(defaultData, data);
-}
-
-function factory(commit = createCommitData(), loading = false) {
-  vm = shallowMount(LastCommit, {
-    mocks: {
-      $apollo: {
-        queries: {
-          commit: {
-            loading: true,
+  },
+];
+
+const defaultAuthor = {
+  __typename: 'UserCore',
+  id: 'gid://gitlab/User/1',
+  name: 'Test',
+  avatarUrl: 'https://test.com',
+  webPath: '/test',
+};
+
+const defaultMessage = 'Commit title';
+
+const createCommitData = ({
+  pipelineEdges = defaultPipelineEdges,
+  author = defaultAuthor,
+  descriptionHtml = '',
+  signatureHtml = null,
+  message = defaultMessage,
+}) => {
+  return {
+    data: {
+      project: {
+        __typename: 'Project',
+        id: 'gid://gitlab/Project/6',
+        repository: {
+          __typename: 'Repository',
+          paginatedTree: {
+            __typename: 'TreeConnection',
+            nodes: [
+              {
+                __typename: 'Tree',
+                lastCommit: {
+                  __typename: 'Commit',
+                  id: 'gid://gitlab/CommitPresenter/123456789',
+                  sha: '123456789',
+                  title: 'Commit title',
+                  titleHtml: 'Commit title',
+                  descriptionHtml,
+                  message,
+                  webPath: '/commit/123',
+                  authoredDate: '2019-01-01',
+                  authorName: 'Test',
+                  authorGravatar: 'https://test.com',
+                  author,
+                  signatureHtml,
+                  pipelines: {
+                    __typename: 'PipelineConnection',
+                    edges: pipelineEdges,
+                  },
+                },
+              },
+            ],
           },
         },
       },
     },
-  });
-  // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-  // eslint-disable-next-line no-restricted-syntax
-  vm.setData({ commit });
-  vm.vm.$apollo.queries.commit.loading = loading;
-}
+  };
+};
 
-const emptyMessageClass = 'font-italic';
+const createComponent = async (data = {}) => {
+  Vue.use(VueApollo);
 
-describe('Repository last commit component', () => {
-  afterEach(() => {
-    vm.destroy();
+  const currentPath = 'path';
+
+  mockResolver = jest.fn().mockResolvedValue(createCommitData(data));
+
+  wrapper = shallowMountExtended(LastCommit, {
+    apolloProvider: createMockApollo([[pathLastCommitQuery, mockResolver]]),
+    propsData: { currentPath },
+    mixins: [{ data: () => ({ ref: refMock }) }],
   });
+};
+
+afterEach(() => {
+  wrapper.destroy();
+  mockResolver = null;
+});
 
+describe('Repository last commit component', () => {
   it.each`
     loading  | label
     ${true}  | ${'shows'}
     ${false} | ${'hides'}
-  `('$label when loading icon $loading is true', async ({ loading }) => {
-    factory(createCommitData(), loading);
+  `('$label when loading icon is $loading', async ({ loading }) => {
+    createComponent();
 
-    await nextTick();
+    if (!loading) {
+      await waitForPromises();
+    }
 
-    expect(vm.find(GlLoadingIcon).exists()).toBe(loading);
+    expect(findLoadingIcon().exists()).toBe(loading);
   });
 
   it('renders commit widget', async () => {
-    factory();
+    createComponent();
+    await waitForPromises();
 
-    await nextTick();
-
-    expect(vm.element).toMatchSnapshot();
+    expect(wrapper.element).toMatchSnapshot();
   });
 
   it('renders short commit ID', async () => {
-    factory();
-
-    await nextTick();
+    createComponent();
+    await waitForPromises();
 
-    expect(vm.find('[data-testid="last-commit-id-label"]').text()).toEqual('12345678');
+    expect(findLastCommitLabel().text()).toBe('12345678');
   });
 
   it('hides pipeline components when pipeline does not exist', async () => {
-    factory(createCommitData({ pipeline: null }));
+    createComponent({ pipelineEdges: [] });
+    await waitForPromises();
 
-    await nextTick();
-
-    expect(vm.find('.js-commit-pipeline').exists()).toBe(false);
+    expect(findPipeline().exists()).toBe(false);
   });
 
-  it('renders pipeline components', async () => {
-    factory();
-
-    await nextTick();
+  it('renders pipeline components when pipeline exists', async () => {
+    createComponent();
+    await waitForPromises();
 
-    expect(vm.find('.js-commit-pipeline').exists()).toBe(true);
+    expect(findPipeline().exists()).toBe(true);
   });
 
   it('hides author component when author does not exist', async () => {
-    factory(createCommitData({ author: null }));
+    createComponent({ author: null });
+    await waitForPromises();
 
-    await nextTick();
-
-    expect(vm.find('.js-user-link').exists()).toBe(false);
-    expect(vm.find(UserAvatarLink).exists()).toBe(false);
+    expect(findUserLink().exists()).toBe(false);
+    expect(findUserAvatarLink().exists()).toBe(false);
   });
 
   it('does not render description expander when description is null', async () => {
-    factory(createCommitData({ descriptionHtml: null }));
-
-    await nextTick();
+    createComponent();
+    await waitForPromises();
 
-    expect(vm.find('.text-expander').exists()).toBe(false);
-    expect(vm.find('.commit-row-description').exists()).toBe(false);
+    expect(findTextExpander().exists()).toBe(false);
+    expect(findCommitRowDescription().exists()).toBe(false);
   });
 
-  it('expands commit description when clicking expander', async () => {
-    factory(createCommitData({ descriptionHtml: 'Test description' }));
-
-    await nextTick();
-
-    vm.find('.text-expander').vm.$emit('click');
-
-    await nextTick();
-
-    expect(vm.find('.commit-row-description').isVisible()).toBe(true);
-    expect(vm.find('.text-expander').classes('open')).toBe(true);
-  });
-
-  it('strips the first newline of the description', async () => {
-    factory(createCommitData({ descriptionHtml: '&#x000A;Update ADOPTERS.md' }));
-
-    await nextTick();
-
-    expect(vm.find('.commit-row-description').html()).toBe(
-      '<pre class="commit-row-description gl-mb-3">Update ADOPTERS.md</pre>',
-    );
+  describe('when the description is present', () => {
+    beforeEach(async () => {
+      createComponent({ descriptionHtml: '&#x000A;Update ADOPTERS.md' });
+      await waitForPromises();
+    });
+
+    it('strips the first newline of the description', () => {
+      expect(findCommitRowDescription().html()).toBe(
+        '<pre class="commit-row-description gl-mb-3">Update ADOPTERS.md</pre>',
+      );
+    });
+
+    it('expands commit description when clicking expander', async () => {
+      findTextExpander().vm.$emit('click');
+      await nextTick();
+
+      expect(findCommitRowDescription().isVisible()).toBe(true);
+      expect(findTextExpander().classes()).toContain('open');
+    });
   });
 
   it('renders the signature HTML as returned by the backend', async () => {
-    factory(
-      createCommitData({
-        signatureHtml: `<a
-        class="btn gpg-status-box valid"
-        data-content="signature-content"
-        data-html="true"
-        data-placement="top"
-        data-title="signature-title"
-        data-toggle="popover"
-        role="button"
-        tabindex="0"
-        >
-          Verified
-        </a>`,
-      }),
-    );
-
-    await nextTick();
-
-    expect(vm.find('.gpg-status-box').html()).toBe(
-      `<a class="btn gpg-status-box valid" data-content="signature-content" data-html="true" data-placement="top" data-title="signature-title" data-toggle="popover" role="button" tabindex="0">
-  Verified
-</a>`,
+    createComponent({
+      signatureHtml: `<a
+      class="btn gpg-status-box valid"
+      data-content="signature-content"
+      data-html="true"
+      data-placement="top"
+      data-title="signature-title"
+      data-toggle="popover"
+      role="button"
+      tabindex="0"
+      >Verified</a>`,
+    });
+    await waitForPromises();
+
+    expect(findStatusBox().html()).toBe(
+      `<a class="btn gpg-status-box valid" data-content="signature-content" data-html="true" data-placement="top" data-title="signature-title" data-toggle="popover" role="button" tabindex="0">Verified</a>`,
     );
   });
 
   it('sets correct CSS class if the commit message is empty', async () => {
-    factory(createCommitData({ message: '' }));
-
-    await nextTick();
+    createComponent({ message: '' });
+    await waitForPromises();
 
-    expect(vm.find('.item-title').classes()).toContain(emptyMessageClass);
+    expect(findItemTitle().classes()).toContain('font-italic');
   });
 });
diff --git a/spec/frontend/repository/components/table/row_spec.js b/spec/frontend/repository/components/table/row_spec.js
index 22570b2d6ed..13b09e57473 100644
--- a/spec/frontend/repository/components/table/row_spec.js
+++ b/spec/frontend/repository/components/table/row_spec.js
@@ -31,7 +31,7 @@ function factory(propsData = {}) {
       GlHoverLoad: createMockDirective(),
     },
     provide: {
-      glFeatures: { refactorBlobViewer: true, lazyLoadCommits: true },
+      glFeatures: { lazyLoadCommits: true },
     },
     mocks: {
       $router,
@@ -244,8 +244,6 @@ describe('Repository table row component', () => {
   });
 
   describe('row visibility', () => {
-    beforeAll(() => jest.useFakeTimers());
-
     beforeEach(() => {
       factory({
         id: '1',
@@ -260,12 +258,13 @@ describe('Repository table row component', () => {
     afterAll(() => jest.useRealTimers());
 
     it('emits a `row-appear` event', async () => {
+      const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
       findIntersectionObserver().vm.$emit('appear');
 
       jest.runAllTimers();
 
-      expect(setTimeout).toHaveBeenCalledTimes(1);
-      expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), ROW_APPEAR_DELAY);
+      expect(setTimeoutSpy).toHaveBeenCalledTimes(1);
+      expect(setTimeoutSpy).toHaveBeenLastCalledWith(expect.any(Function), ROW_APPEAR_DELAY);
       expect(vm.emitted('row-appear')).toEqual([[123]]);
     });
   });
diff --git a/spec/frontend/repository/log_tree_spec.js b/spec/frontend/repository/log_tree_spec.js
index 5186c9a8992..e3b4dcb8acc 100644
--- a/spec/frontend/repository/log_tree_spec.js
+++ b/spec/frontend/repository/log_tree_spec.js
@@ -16,19 +16,18 @@ const mockData = [
     commit_path: `https://test.com`,
     commit_title_html: 'commit title',
     file_name: 'index.js',
-    type: 'blob',
   },
 ];
 
 describe('resolveCommit', () => {
   it('calls resolve when commit found', () => {
     const resolver = {
-      entry: { name: 'index.js', type: 'blob' },
+      entry: { name: 'index.js' },
       resolve: jest.fn(),
     };
     const commits = [
-      { fileName: 'index.js', filePath: '/index.js', type: 'blob' },
-      { fileName: 'index.js', filePath: '/app/assets/index.js', type: 'blob' },
+      { fileName: 'index.js', filePath: '/index.js' },
+      { fileName: 'index.js', filePath: '/app/assets/index.js' },
     ];
 
     resolveCommit(commits, '', resolver);
@@ -36,7 +35,6 @@ describe('resolveCommit', () => {
     expect(resolver.resolve).toHaveBeenCalledWith({
       fileName: 'index.js',
       filePath: '/index.js',
-      type: 'blob',
     });
   });
 });
@@ -56,7 +54,7 @@ describe('fetchLogsTree', () => {
     global.gon = { relative_url_root: '' };
 
     resolver = {
-      entry: { name: 'index.js', type: 'blob' },
+      entry: { name: 'index.js' },
       resolve: jest.fn(),
     };
 
@@ -119,7 +117,6 @@ describe('fetchLogsTree', () => {
           filePath: '/index.js',
           message: 'testing message',
           sha: '123',
-          type: 'blob',
         }),
       );
     }));
@@ -136,7 +133,6 @@ describe('fetchLogsTree', () => {
           message: 'testing message',
           sha: '123',
           titleHtml: 'commit title',
-          type: 'blob',
         }),
       ],
     });
diff --git a/spec/frontend/repository/utils/commit_spec.js b/spec/frontend/repository/utils/commit_spec.js
index aaaa39f739f..b3dd5118308 100644
--- a/spec/frontend/repository/utils/commit_spec.js
+++ b/spec/frontend/repository/utils/commit_spec.js
@@ -10,7 +10,6 @@ const mockData = [
     commit_path: `https://test.com`,
     commit_title_html: 'testing message',
     file_name: 'index.js',
-    type: 'blob',
   },
 ];
 
@@ -24,7 +23,6 @@ describe('normalizeData', () => {
         commitPath: 'https://test.com',
         fileName: 'index.js',
         filePath: '/index.js',
-        type: 'blob',
         titleHtml: 'testing message',
         __typename: 'LogTreeCommit',
       },
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 28e7d192938..433be5d5027 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
@@ -9,6 +9,7 @@ import { redirectTo } from '~/lib/utils/url_utility';
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import RunnerHeader from '~/runner/components/runner_header.vue';
+import RunnerDetails from '~/runner/components/runner_details.vue';
 import RunnerPauseButton from '~/runner/components/runner_pause_button.vue';
 import RunnerDeleteButton from '~/runner/components/runner_delete_button.vue';
 import RunnerEditButton from '~/runner/components/runner_edit_button.vue';
@@ -37,6 +38,7 @@ describe('AdminRunnerShowApp', () => {
   let mockRunnerQuery;
 
   const findRunnerHeader = () => wrapper.findComponent(RunnerHeader);
+  const findRunnerDetails = () => wrapper.findComponent(RunnerDetails);
   const findRunnerDeleteButton = () => wrapper.findComponent(RunnerDeleteButton);
   const findRunnerEditButton = () => wrapper.findComponent(RunnerEditButton);
   const findRunnerPauseButton = () => wrapper.findComponent(RunnerPauseButton);
@@ -179,12 +181,32 @@ describe('AdminRunnerShowApp', () => {
     });
   });
 
+  describe('When loading', () => {
+    beforeEach(() => {
+      mockRunnerQueryResult();
+
+      createComponent();
+    });
+
+    it('does not show runner details', () => {
+      expect(findRunnerDetails().exists()).toBe(false);
+    });
+
+    it('does not show runner jobs', () => {
+      expect(findRunnersJobs().exists()).toBe(false);
+    });
+  });
+
   describe('When there is an error', () => {
     beforeEach(async () => {
       mockRunnerQuery = jest.fn().mockRejectedValueOnce(new Error('Error!'));
       await createComponent();
     });
 
+    it('does not show runner details', () => {
+      expect(findRunnerDetails().exists()).toBe(false);
+    });
+
     it('error is reported to sentry', () => {
       expect(captureException).toHaveBeenCalledWith({
         error: new Error('Error!'),
@@ -201,13 +223,6 @@ describe('AdminRunnerShowApp', () => {
     const stubs = {
       GlTab,
       GlTabs,
-      RunnerDetails: {
-        template: `
-          <div>
-            <slot name="jobs-tab"></slot>
-          </div>
-        `,
-      },
     };
 
     it('without a runner, shows no jobs', () => {
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 3d25ad075de..aa1aa723491 100644
--- a/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
+++ b/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
@@ -10,9 +10,11 @@ import {
 } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/flash';
+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 AdminRunnersApp from '~/runner/admin_runners/admin_runners_app.vue';
 import RunnerTypeTabs from '~/runner/components/runner_type_tabs.vue';
@@ -20,6 +22,7 @@ import RunnerFilteredSearchBar from '~/runner/components/runner_filtered_search_
 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';
+import RunnerCount from '~/runner/components/stat/runner_count.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';
@@ -30,8 +33,6 @@ import {
   CREATED_DESC,
   DEFAULT_SORT,
   INSTANCE_TYPE,
-  GROUP_TYPE,
-  PROJECT_TYPE,
   PARAM_KEY_PAUSED,
   PARAM_KEY_STATUS,
   PARAM_KEY_TAG,
@@ -40,15 +41,14 @@ import {
   STATUS_STALE,
   RUNNER_PAGE_SIZE,
 } from '~/runner/constants';
-import adminRunnersQuery from '~/runner/graphql/list/admin_runners.query.graphql';
-import adminRunnersCountQuery from '~/runner/graphql/list/admin_runners_count.query.graphql';
+import allRunnersQuery from 'ee_else_ce/runner/graphql/list/all_runners.query.graphql';
+import allRunnersCountQuery from '~/runner/graphql/list/all_runners_count.query.graphql';
 import { captureException } from '~/runner/sentry_utils';
-import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 
 import {
-  runnersData,
+  allRunnersData,
   runnersCountData,
-  runnersDataPaginated,
+  allRunnersDataPaginated,
   onlineContactTimeoutSecs,
   staleTimeoutSecs,
   emptyStateSvgPath,
@@ -56,9 +56,12 @@ import {
 } from '../mock_data';
 
 const mockRegistrationToken = 'MOCK_REGISTRATION_TOKEN';
-const mockRunners = runnersData.data.runners.nodes;
+const mockRunners = allRunnersData.data.runners.nodes;
 const mockRunnersCount = runnersCountData.data.runners.count;
 
+const mockRunnersHandler = jest.fn();
+const mockRunnersCountHandler = jest.fn();
+
 jest.mock('~/flash');
 jest.mock('~/runner/sentry_utils');
 jest.mock('~/lib/utils/url_utility', () => ({
@@ -71,8 +74,6 @@ Vue.use(GlToast);
 
 describe('AdminRunnersApp', () => {
   let wrapper;
-  let mockRunnersQuery;
-  let mockRunnersCountQuery;
   let cacheConfig;
   let localMutations;
 
@@ -85,7 +86,6 @@ describe('AdminRunnersApp', () => {
   const findRunnerPagination = () => extendedWrapper(wrapper.findComponent(RunnerPagination));
   const findRunnerPaginationNext = () => findRunnerPagination().findByLabelText('Go to next page');
   const findRunnerFilteredSearchBar = () => wrapper.findComponent(RunnerFilteredSearchBar);
-  const findFilteredSearch = () => wrapper.findComponent(FilteredSearch);
 
   const createComponent = ({
     props = {},
@@ -96,8 +96,8 @@ describe('AdminRunnersApp', () => {
     ({ cacheConfig, localMutations } = createLocalState());
 
     const handlers = [
-      [adminRunnersQuery, mockRunnersQuery],
-      [adminRunnersCountQuery, mockRunnersCountQuery],
+      [allRunnersQuery, mockRunnersHandler],
+      [allRunnersCountQuery, mockRunnersCountHandler],
     ];
 
     wrapper = mountFn(AdminRunnersApp, {
@@ -116,110 +116,62 @@ describe('AdminRunnersApp', () => {
       },
       ...options,
     });
-  };
 
-  beforeEach(async () => {
-    setWindowLocation('/admin/runners');
+    return waitForPromises();
+  };
 
-    mockRunnersQuery = jest.fn().mockResolvedValue(runnersData);
-    mockRunnersCountQuery = jest.fn().mockResolvedValue(runnersCountData);
-    createComponent();
-    await waitForPromises();
+  beforeEach(() => {
+    mockRunnersHandler.mockResolvedValue(allRunnersData);
+    mockRunnersCountHandler.mockResolvedValue(runnersCountData);
   });
 
   afterEach(() => {
-    mockRunnersQuery.mockReset();
-    mockRunnersCountQuery.mockReset();
+    mockRunnersHandler.mockReset();
+    mockRunnersCountHandler.mockReset();
     wrapper.destroy();
   });
 
   it('shows the runner tabs with a runner count for each type', async () => {
-    mockRunnersCountQuery.mockImplementation(({ type }) => {
-      let count;
-      switch (type) {
-        case INSTANCE_TYPE:
-          count = 3;
-          break;
-        case GROUP_TYPE:
-          count = 2;
-          break;
-        case PROJECT_TYPE:
-          count = 1;
-          break;
-        default:
-          count = 6;
-          break;
-      }
-      return Promise.resolve({ data: { runners: { count } } });
-    });
-
-    createComponent({ mountFn: mountExtended });
-    await waitForPromises();
-
-    expect(findRunnerTypeTabs().text()).toMatchInterpolatedText(
-      `All 6 Instance 3 Group 2 Project 1`,
-    );
-  });
-
-  it('shows the runner tabs with a formatted runner count', async () => {
-    mockRunnersCountQuery.mockImplementation(({ type }) => {
-      let count;
-      switch (type) {
-        case INSTANCE_TYPE:
-          count = 3000;
-          break;
-        case GROUP_TYPE:
-          count = 2000;
-          break;
-        case PROJECT_TYPE:
-          count = 1000;
-          break;
-        default:
-          count = 6000;
-          break;
-      }
-      return Promise.resolve({ data: { runners: { count } } });
-    });
-
-    createComponent({ mountFn: mountExtended });
-    await waitForPromises();
+    await createComponent({ mountFn: mountExtended });
 
     expect(findRunnerTypeTabs().text()).toMatchInterpolatedText(
-      `All 6,000 Instance 3,000 Group 2,000 Project 1,000`,
+      `All ${mockRunnersCount} Instance ${mockRunnersCount} Group ${mockRunnersCount} Project ${mockRunnersCount}`,
     );
   });
 
   it('shows the runner setup instructions', () => {
+    createComponent();
+
     expect(findRegistrationDropdown().props('registrationToken')).toBe(mockRegistrationToken);
     expect(findRegistrationDropdown().props('type')).toBe(INSTANCE_TYPE);
   });
 
   it('shows total runner counts', async () => {
-    expect(mockRunnersCountQuery).toHaveBeenCalledWith({
-      status: STATUS_ONLINE,
-    });
-    expect(mockRunnersCountQuery).toHaveBeenCalledWith({
-      status: STATUS_OFFLINE,
-    });
-    expect(mockRunnersCountQuery).toHaveBeenCalledWith({
-      status: STATUS_STALE,
-    });
+    await createComponent({ mountFn: mountExtended });
 
-    expect(findRunnerStats().props()).toMatchObject({
-      onlineRunnersCount: mockRunnersCount,
-      offlineRunnersCount: mockRunnersCount,
-      staleRunnersCount: mockRunnersCount,
-    });
+    expect(mockRunnersCountHandler).toHaveBeenCalledWith({ status: STATUS_ONLINE });
+    expect(mockRunnersCountHandler).toHaveBeenCalledWith({ status: STATUS_OFFLINE });
+    expect(mockRunnersCountHandler).toHaveBeenCalledWith({ status: STATUS_STALE });
+
+    expect(findRunnerStats().text()).toContain(
+      `${s__('Runners|Online runners')} ${mockRunnersCount}`,
+    );
+    expect(findRunnerStats().text()).toContain(
+      `${s__('Runners|Offline runners')} ${mockRunnersCount}`,
+    );
+    expect(findRunnerStats().text()).toContain(
+      `${s__('Runners|Stale runners')} ${mockRunnersCount}`,
+    );
   });
 
-  it('shows the runners list', () => {
+  it('shows the runners list', async () => {
+    await createComponent();
+
     expect(findRunnerList().props('runners')).toEqual(mockRunners);
   });
 
   it('runner item links to the runner admin page', async () => {
-    createComponent({ mountFn: mountExtended });
-
-    await waitForPromises();
+    await createComponent({ mountFn: mountExtended });
 
     const { id, shortSha } = mockRunners[0];
     const numericId = getIdFromGraphQLId(id);
@@ -231,12 +183,9 @@ describe('AdminRunnersApp', () => {
   });
 
   it('renders runner actions for each runner', async () => {
-    createComponent({ mountFn: mountExtended });
-
-    await waitForPromises();
+    await createComponent({ mountFn: mountExtended });
 
     const runnerActions = wrapper.find('tr [data-testid="td-actions"]').find(RunnerActionsCell);
-
     const runner = mockRunners[0];
 
     expect(runnerActions.props()).toEqual({
@@ -245,8 +194,10 @@ describe('AdminRunnersApp', () => {
     });
   });
 
-  it('requests the runners with no filters', () => {
-    expect(mockRunnersQuery).toHaveBeenLastCalledWith({
+  it('requests the runners with no filters', async () => {
+    await createComponent();
+
+    expect(mockRunnersHandler).toHaveBeenLastCalledWith({
       status: undefined,
       type: undefined,
       sort: DEFAULT_SORT,
@@ -255,9 +206,9 @@ describe('AdminRunnersApp', () => {
   });
 
   it('sets tokens in the filtered search', () => {
-    createComponent({ mountFn: mountExtended });
+    createComponent();
 
-    expect(findFilteredSearch().props('tokens')).toEqual([
+    expect(findRunnerFilteredSearchBar().props('tokens')).toEqual([
       expect.objectContaining({
         type: PARAM_KEY_PAUSED,
         options: expect.any(Array),
@@ -270,6 +221,7 @@ describe('AdminRunnersApp', () => {
         type: PARAM_KEY_TAG,
         recentSuggestionsStorageKey: `${ADMIN_FILTERED_SEARCH_NAMESPACE}-recent-tags`,
       }),
+      upgradeStatusTokenConfig,
     ]);
   });
 
@@ -282,12 +234,10 @@ describe('AdminRunnersApp', () => {
     const FILTERED_COUNT_QUERIES = 4; // Smart queries that display a count of runners in tabs
 
     beforeEach(async () => {
-      mockRunnersCountQuery.mockClear();
+      mockRunnersCountHandler.mockClear();
 
-      createComponent({ mountFn: mountExtended });
+      await createComponent({ mountFn: mountExtended });
       showToast = jest.spyOn(wrapper.vm.$root.$toast, 'show');
-
-      await waitForPromises();
     });
 
     it('Links to the runner page', async () => {
@@ -298,12 +248,11 @@ describe('AdminRunnersApp', () => {
     });
 
     it('When runner is paused or unpaused, some data is refetched', async () => {
-      expect(mockRunnersCountQuery).toHaveBeenCalledTimes(COUNT_QUERIES);
+      expect(mockRunnersCountHandler).toHaveBeenCalledTimes(COUNT_QUERIES);
 
       findRunnerActionsCell().vm.$emit('toggledPaused');
 
-      expect(mockRunnersCountQuery).toHaveBeenCalledTimes(COUNT_QUERIES + FILTERED_COUNT_QUERIES);
-
+      expect(mockRunnersCountHandler).toHaveBeenCalledTimes(COUNT_QUERIES + FILTERED_COUNT_QUERIES);
       expect(showToast).toHaveBeenCalledTimes(0);
     });
 
@@ -319,8 +268,12 @@ describe('AdminRunnersApp', () => {
     beforeEach(async () => {
       setWindowLocation(`?status[]=${STATUS_ONLINE}&runner_type[]=${INSTANCE_TYPE}&tag[]=tag1`);
 
-      createComponent();
-      await waitForPromises();
+      await createComponent({
+        stubs: {
+          RunnerStats,
+          RunnerCount,
+        },
+      });
     });
 
     it('sets the filters in the search bar', () => {
@@ -336,7 +289,7 @@ describe('AdminRunnersApp', () => {
     });
 
     it('requests the runners with filter parameters', () => {
-      expect(mockRunnersQuery).toHaveBeenLastCalledWith({
+      expect(mockRunnersHandler).toHaveBeenLastCalledWith({
         status: STATUS_ONLINE,
         type: INSTANCE_TYPE,
         tagList: ['tag1'],
@@ -346,21 +299,22 @@ describe('AdminRunnersApp', () => {
     });
 
     it('fetches count results for requested status', () => {
-      expect(mockRunnersCountQuery).toHaveBeenCalledWith({
+      expect(mockRunnersCountHandler).toHaveBeenCalledWith({
         type: INSTANCE_TYPE,
         status: STATUS_ONLINE,
         tagList: ['tag1'],
       });
-
-      expect(findRunnerStats().props()).toMatchObject({
-        onlineRunnersCount: mockRunnersCount,
-      });
     });
   });
 
   describe('when a filter is selected by the user', () => {
     beforeEach(() => {
-      mockRunnersCountQuery.mockClear();
+      createComponent({
+        stubs: {
+          RunnerStats,
+          RunnerCount,
+        },
+      });
 
       findRunnerFilteredSearchBar().vm.$emit('input', {
         runnerType: null,
@@ -375,12 +329,12 @@ describe('AdminRunnersApp', () => {
     it('updates the browser url', () => {
       expect(updateHistory).toHaveBeenLastCalledWith({
         title: expect.any(String),
-        url: 'http://test.host/admin/runners?status[]=ONLINE&tag[]=tag1&sort=CREATED_ASC',
+        url: expect.stringContaining('?status[]=ONLINE&tag[]=tag1&sort=CREATED_ASC'),
       });
     });
 
     it('requests the runners with filters', () => {
-      expect(mockRunnersQuery).toHaveBeenLastCalledWith({
+      expect(mockRunnersHandler).toHaveBeenLastCalledWith({
         status: STATUS_ONLINE,
         tagList: ['tag1'],
         sort: CREATED_ASC,
@@ -389,30 +343,10 @@ describe('AdminRunnersApp', () => {
     });
 
     it('fetches count results for requested status', () => {
-      expect(mockRunnersCountQuery).toHaveBeenCalledWith({
+      expect(mockRunnersCountHandler).toHaveBeenCalledWith({
         tagList: ['tag1'],
         status: STATUS_ONLINE,
       });
-
-      expect(findRunnerStats().props()).toMatchObject({
-        onlineRunnersCount: mockRunnersCount,
-      });
-    });
-
-    it('skips fetching count results for status that were not in filter', () => {
-      expect(mockRunnersCountQuery).not.toHaveBeenCalledWith({
-        tagList: ['tag1'],
-        status: STATUS_OFFLINE,
-      });
-      expect(mockRunnersCountQuery).not.toHaveBeenCalledWith({
-        tagList: ['tag1'],
-        status: STATUS_STALE,
-      });
-
-      expect(findRunnerStats().props()).toMatchObject({
-        offlineRunnersCount: null,
-        staleRunnersCount: null,
-      });
     });
   });
 
@@ -458,14 +392,13 @@ describe('AdminRunnersApp', () => {
 
   describe('when no runners are found', () => {
     beforeEach(async () => {
-      mockRunnersQuery = jest.fn().mockResolvedValue({
+      mockRunnersHandler.mockResolvedValue({
         data: {
           runners: { nodes: [] },
         },
       });
 
-      createComponent();
-      await waitForPromises();
+      await createComponent();
     });
 
     it('shows an empty state', () => {
@@ -490,9 +423,8 @@ describe('AdminRunnersApp', () => {
 
   describe('when runners query fails', () => {
     beforeEach(async () => {
-      mockRunnersQuery = jest.fn().mockRejectedValue(new Error('Error!'));
-      createComponent();
-      await waitForPromises();
+      mockRunnersHandler.mockRejectedValue(new Error('Error!'));
+      await createComponent();
     });
 
     it('error is shown to the user', async () => {
@@ -509,19 +441,18 @@ describe('AdminRunnersApp', () => {
 
   describe('Pagination', () => {
     beforeEach(async () => {
-      mockRunnersQuery = jest.fn().mockResolvedValue(runnersDataPaginated);
+      mockRunnersHandler.mockResolvedValue(allRunnersDataPaginated);
 
-      createComponent({ mountFn: mountExtended });
-      await waitForPromises();
+      await createComponent({ mountFn: mountExtended });
     });
 
     it('navigates to the next page', async () => {
       await findRunnerPaginationNext().trigger('click');
 
-      expect(mockRunnersQuery).toHaveBeenLastCalledWith({
+      expect(mockRunnersHandler).toHaveBeenLastCalledWith({
         sort: CREATED_DESC,
         first: RUNNER_PAGE_SIZE,
-        after: runnersDataPaginated.data.runners.pageInfo.endCursor,
+        after: allRunnersDataPaginated.data.runners.pageInfo.endCursor,
       });
     });
   });
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 7a949cb6505..ffd6f126627 100644
--- a/spec/frontend/runner/components/cells/runner_actions_cell_spec.js
+++ b/spec/frontend/runner/components/cells/runner_actions_cell_spec.js
@@ -4,9 +4,9 @@ import RunnerActionsCell from '~/runner/components/cells/runner_actions_cell.vue
 import RunnerPauseButton from '~/runner/components/runner_pause_button.vue';
 import RunnerEditButton from '~/runner/components/runner_edit_button.vue';
 import RunnerDeleteButton from '~/runner/components/runner_delete_button.vue';
-import { runnersData } from '../../mock_data';
+import { allRunnersData } from '../../mock_data';
 
-const mockRunner = runnersData.data.runners.nodes[0];
+const mockRunner = allRunnersData.data.runners.nodes[0];
 
 describe('RunnerActionsCell', () => {
   let wrapper;
diff --git a/spec/frontend/runner/components/runner_delete_button_spec.js b/spec/frontend/runner/components/runner_delete_button_spec.js
index b11c749d0a7..52fe803c536 100644
--- a/spec/frontend/runner/components/runner_delete_button_spec.js
+++ b/spec/frontend/runner/components/runner_delete_button_spec.js
@@ -17,9 +17,9 @@ import {
 
 import RunnerDeleteButton from '~/runner/components/runner_delete_button.vue';
 import RunnerDeleteModal from '~/runner/components/runner_delete_modal.vue';
-import { runnersData } from '../mock_data';
+import { allRunnersData } from '../mock_data';
 
-const mockRunner = runnersData.data.runners.nodes[0];
+const mockRunner = allRunnersData.data.runners.nodes[0];
 const mockRunnerId = getIdFromGraphQLId(mockRunner.id);
 
 Vue.use(VueApollo);
diff --git a/spec/frontend/runner/components/runner_details_spec.js b/spec/frontend/runner/components/runner_details_spec.js
index 9e0f7014750..552ee29b6f9 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,
-    ...options
-  } = {}) => {
+  const createComponent = ({ props = {}, stubs, mountFn = shallowMountExtended } = {}) => {
     wrapper = mountFn(RunnerDetails, {
       propsData: {
         ...props,
@@ -39,7 +34,6 @@ describe('RunnerDetails', () => {
         RunnerDetail,
         ...stubs,
       },
-      ...options,
     });
   };
 
@@ -47,16 +41,6 @@ describe('RunnerDetails', () => {
     wrapper.destroy();
   });
 
-  it('when no runner is present, no contents are shown', () => {
-    createComponent({
-      props: {
-        runner: null,
-      },
-    });
-
-    expect(wrapper.text()).toBe('');
-  });
-
   describe('Details tab', () => {
     describe.each`
       field                    | runner                                                             | expectedValue
@@ -141,18 +125,4 @@ describe('RunnerDetails', () => {
       });
     });
   });
-
-  describe('Jobs tab slot', () => {
-    it('shows job tab slot', () => {
-      const JOBS_TAB = '<div>Jobs Tab</div>';
-
-      createComponent({
-        slots: {
-          'jobs-tab': JOBS_TAB,
-        },
-      });
-
-      expect(wrapper.html()).toContain(JOBS_TAB);
-    });
-  });
 });
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 b1b436e5443..83fb1764c6d 100644
--- a/spec/frontend/runner/components/runner_filtered_search_bar_spec.js
+++ b/spec/frontend/runner/components/runner_filtered_search_bar_spec.js
@@ -89,6 +89,16 @@ describe('RunnerList', () => {
     ]);
   });
 
+  it('can be configured with null or undefined tokens, which are ignored', () => {
+    createComponent({
+      props: {
+        tokens: [statusTokenConfig, null, undefined],
+      },
+    });
+
+    expect(findFilteredSearch().props('tokens')).toEqual([statusTokenConfig]);
+  });
+
   it('fails validation for v-model with the wrong shape', () => {
     expect(() => {
       createComponent({ props: { value: { filters: 'wrong_filters', sort: 'sort' } } });
diff --git a/spec/frontend/runner/components/runner_list_spec.js b/spec/frontend/runner/components/runner_list_spec.js
index 872394430ae..eca4bbc3490 100644
--- a/spec/frontend/runner/components/runner_list_spec.js
+++ b/spec/frontend/runner/components/runner_list_spec.js
@@ -7,9 +7,9 @@ import {
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import RunnerList from '~/runner/components/runner_list.vue';
 import RunnerStatusPopover from '~/runner/components/runner_status_popover.vue';
-import { runnersData, onlineContactTimeoutSecs, staleTimeoutSecs } from '../mock_data';
+import { allRunnersData, onlineContactTimeoutSecs, staleTimeoutSecs } from '../mock_data';
 
-const mockRunners = runnersData.data.runners.nodes;
+const mockRunners = allRunnersData.data.runners.nodes;
 const mockActiveRunnersCount = mockRunners.length;
 
 describe('RunnerList', () => {
diff --git a/spec/frontend/runner/components/runner_pause_button_spec.js b/spec/frontend/runner/components/runner_pause_button_spec.js
index 9ebb30b6ed7..61476007571 100644
--- a/spec/frontend/runner/components/runner_pause_button_spec.js
+++ b/spec/frontend/runner/components/runner_pause_button_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { GlButton } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -16,9 +16,9 @@ import {
 } from '~/runner/constants';
 
 import RunnerPauseButton from '~/runner/components/runner_pause_button.vue';
-import { runnersData } from '../mock_data';
+import { allRunnersData } from '../mock_data';
 
-const mockRunner = runnersData.data.runners.nodes[0];
+const mockRunner = allRunnersData.data.runners.nodes[0];
 
 Vue.use(VueApollo);
 
@@ -115,15 +115,20 @@ describe('RunnerPauseButton', () => {
       });
 
       describe(`Immediately after the ${icon} button is clicked`, () => {
-        beforeEach(async () => {
+        const setup = async () => {
           findBtn().vm.$emit('click');
-        });
+          await nextTick();
+        };
 
         it('The button has a loading state', async () => {
+          await setup();
+
           expect(findBtn().props('loading')).toBe(true);
         });
 
         it('The stale tooltip is removed', async () => {
+          await setup();
+
           expect(getTooltip()).toBe('');
         });
       });
@@ -237,15 +242,20 @@ describe('RunnerPauseButton', () => {
     });
 
     describe('Immediately after the button is clicked', () => {
-      beforeEach(async () => {
+      const setup = async () => {
         findBtn().vm.$emit('click');
-      });
+        await nextTick();
+      };
 
       it('The button has a loading state', async () => {
+        await setup();
+
         expect(findBtn().props('loading')).toBe(true);
       });
 
       it('The stale tooltip is removed', async () => {
+        await setup();
+
         expect(getTooltip()).toBe('');
       });
     });
diff --git a/spec/frontend/runner/components/runner_type_tabs_spec.js b/spec/frontend/runner/components/runner_type_tabs_spec.js
index 9da5d842d8f..22d2a9e60f7 100644
--- a/spec/frontend/runner/components/runner_type_tabs_spec.js
+++ b/spec/frontend/runner/components/runner_type_tabs_spec.js
@@ -1,10 +1,30 @@
 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' };
 
+const mockCount = (type, multiplier = 1) => {
+  let count;
+  switch (type) {
+    case INSTANCE_TYPE:
+      count = 3;
+      break;
+    case GROUP_TYPE:
+      count = 2;
+      break;
+    case PROJECT_TYPE:
+      count = 1;
+      break;
+    default:
+      count = 6;
+      break;
+  }
+  return count * multiplier;
+};
+
 describe('RunnerTypeTabs', () => {
   let wrapper;
 
@@ -13,33 +33,94 @@ describe('RunnerTypeTabs', () => {
     findTabs()
       .filter((tab) => tab.attributes('active') === 'true')
       .at(0);
-  const getTabsTitles = () => findTabs().wrappers.map((tab) => tab.text());
+  const getTabsTitles = () => findTabs().wrappers.map((tab) => tab.text().replace(/\s+/g, ' '));
 
-  const createComponent = ({ props, ...options } = {}) => {
+  const createComponent = ({ props, stubs, ...options } = {}) => {
     wrapper = shallowMount(RunnerTypeTabs, {
       propsData: {
         value: mockSearch,
+        countScope: INSTANCE_TYPE,
+        countVariables: {},
         ...props,
       },
       stubs: {
         GlTab,
+        ...stubs,
       },
       ...options,
     });
   };
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });
 
   it('Renders all options to filter runners by default', () => {
+    createComponent();
+
     expect(getTabsTitles()).toEqual(['All', 'Instance', 'Group', 'Project']);
   });
 
+  it('Shows count when receiving a number', () => {
+    createComponent({
+      stubs: {
+        RunnerCount: {
+          props: ['variables'],
+          render() {
+            return this.$scopedSlots.default({
+              count: mockCount(this.variables.type),
+            });
+          },
+        },
+      },
+    });
+
+    expect(getTabsTitles()).toEqual([`All 6`, `Instance 3`, `Group 2`, `Project 1`]);
+  });
+
+  it('Shows formatted count when receiving a large number', () => {
+    createComponent({
+      stubs: {
+        RunnerCount: {
+          props: ['variables'],
+          render() {
+            return this.$scopedSlots.default({
+              count: mockCount(this.variables.type, 1000),
+            });
+          },
+        },
+      },
+    });
+
+    expect(getTabsTitles()).toEqual([
+      `All 6,000`,
+      `Instance 3,000`,
+      `Group 2,000`,
+      `Project 1,000`,
+    ]);
+  });
+
+  it('Renders a count next to each tab', () => {
+    const mockVariables = {
+      paused: true,
+      status: 'ONLINE',
+    };
+
+    createComponent({
+      props: {
+        countVariables: mockVariables,
+      },
+    });
+
+    findTabs().wrappers.forEach((tab) => {
+      expect(tab.find(RunnerCount).props()).toEqual({
+        scope: INSTANCE_TYPE,
+        skip: false,
+        variables: expect.objectContaining(mockVariables),
+      });
+    });
+  });
+
   it('Renders fewer options to filter runners', () => {
     createComponent({
       props: {
@@ -51,6 +132,8 @@ describe('RunnerTypeTabs', () => {
   });
 
   it('"All" is selected by default', () => {
+    createComponent();
+
     expect(findActiveTab().text()).toBe('All');
   });
 
@@ -71,6 +154,7 @@ describe('RunnerTypeTabs', () => {
     const emittedValue = () => wrapper.emitted('input')[0][0];
 
     beforeEach(() => {
+      createComponent();
       findTabs().at(2).vm.$emit('click');
     });
 
@@ -89,27 +173,30 @@ describe('RunnerTypeTabs', () => {
     });
   });
 
-  describe('When using a custom slot', () => {
-    const mockContent = 'content';
-
-    beforeEach(() => {
-      createComponent({
-        scopedSlots: {
-          title: `
-          <span>
-            {{props.tab.title}} ${mockContent}
-          </span>`,
-        },
+  describe('Component API', () => {
+    describe('When .refetch() is called', () => {
+      let mockRefetch;
+
+      beforeEach(() => {
+        mockRefetch = jest.fn();
+
+        createComponent({
+          stubs: {
+            RunnerCount: {
+              methods: {
+                refetch: mockRefetch,
+              },
+              render() {},
+            },
+          },
+        });
+
+        wrapper.vm.refetch();
       });
-    });
 
-    it('Renders tabs with additional information', () => {
-      expect(findTabs().wrappers.map((tab) => tab.text())).toEqual([
-        `All ${mockContent}`,
-        `Instance ${mockContent}`,
-        `Group ${mockContent}`,
-        `Project ${mockContent}`,
-      ]);
+      it('refetch is called for each count', () => {
+        expect(mockRefetch).toHaveBeenCalledTimes(4);
+      });
     });
   });
 });
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 52557ff716d..22f0561ca5f 100644
--- a/spec/frontend/runner/components/search_tokens/tag_token_spec.js
+++ b/spec/frontend/runner/components/search_tokens/tag_token_spec.js
@@ -134,8 +134,6 @@ describe('TagToken', () => {
   describe('when the users filters suggestions', () => {
     beforeEach(async () => {
       findGlFilteredSearchToken().vm.$emit('input', { data: mockSearchTerm });
-
-      jest.runAllTimers();
     });
 
     it('requests filtered tags suggestions', async () => {
@@ -145,6 +143,7 @@ describe('TagToken', () => {
     });
 
     it('shows the loading icon', async () => {
+      findGlFilteredSearchToken().vm.$emit('input', { data: mockSearchTerm });
       await nextTick();
 
       expect(findGlLoadingIcon().exists()).toBe(true);
diff --git a/spec/frontend/runner/components/stat/runner_count_spec.js b/spec/frontend/runner/components/stat/runner_count_spec.js
new file mode 100644
index 00000000000..89b51b1b4a7
--- /dev/null
+++ b/spec/frontend/runner/components/stat/runner_count_spec.js
@@ -0,0 +1,148 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { shallowMount } from '@vue/test-utils';
+import RunnerCount from '~/runner/components/stat/runner_count.vue';
+import { INSTANCE_TYPE, GROUP_TYPE } from '~/runner/constants';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { captureException } from '~/runner/sentry_utils';
+
+import allRunnersCountQuery from '~/runner/graphql/list/all_runners_count.query.graphql';
+import groupRunnersCountQuery from '~/runner/graphql/list/group_runners_count.query.graphql';
+
+import { runnersCountData, groupRunnersCountData } from '../../mock_data';
+
+jest.mock('~/runner/sentry_utils');
+
+Vue.use(VueApollo);
+
+describe('RunnerCount', () => {
+  let wrapper;
+  let mockRunnersCountHandler;
+  let mockGroupRunnersCountHandler;
+
+  const createComponent = ({ props = {}, ...options } = {}) => {
+    const handlers = [
+      [allRunnersCountQuery, mockRunnersCountHandler],
+      [groupRunnersCountQuery, mockGroupRunnersCountHandler],
+    ];
+
+    wrapper = shallowMount(RunnerCount, {
+      apolloProvider: createMockApollo(handlers),
+      propsData: {
+        ...props,
+      },
+      scopedSlots: {
+        default: '<strong>{{props.count}}</strong>',
+      },
+      ...options,
+    });
+
+    return waitForPromises();
+  };
+
+  beforeEach(() => {
+    mockRunnersCountHandler = jest.fn().mockResolvedValue(runnersCountData);
+    mockGroupRunnersCountHandler = jest.fn().mockResolvedValue(groupRunnersCountData);
+  });
+
+  describe('in admin scope', () => {
+    const mockVariables = { status: 'ONLINE' };
+
+    beforeEach(async () => {
+      await createComponent({ props: { scope: INSTANCE_TYPE } });
+    });
+
+    it('fetches data from admin query', () => {
+      expect(mockRunnersCountHandler).toHaveBeenCalledTimes(1);
+      expect(mockRunnersCountHandler).toHaveBeenCalledWith({});
+    });
+
+    it('fetches data with filters', async () => {
+      await createComponent({ props: { scope: INSTANCE_TYPE, variables: mockVariables } });
+
+      expect(mockRunnersCountHandler).toHaveBeenCalledTimes(2);
+      expect(mockRunnersCountHandler).toHaveBeenCalledWith(mockVariables);
+
+      expect(wrapper.html()).toBe(`<strong>${runnersCountData.data.runners.count}</strong>`);
+    });
+
+    it('does not fetch from the group query', async () => {
+      expect(mockGroupRunnersCountHandler).not.toHaveBeenCalled();
+    });
+
+    describe('when this query is skipped after data was loaded', () => {
+      beforeEach(async () => {
+        wrapper.setProps({ skip: true });
+
+        await nextTick();
+      });
+
+      it('clears current data', () => {
+        expect(wrapper.html()).toBe('<strong></strong>');
+      });
+    });
+  });
+
+  describe('when skipping query', () => {
+    beforeEach(async () => {
+      await createComponent({ props: { scope: INSTANCE_TYPE, skip: true } });
+    });
+
+    it('does not fetch data', async () => {
+      expect(mockRunnersCountHandler).not.toHaveBeenCalled();
+      expect(mockGroupRunnersCountHandler).not.toHaveBeenCalled();
+
+      expect(wrapper.html()).toBe('<strong></strong>');
+    });
+  });
+
+  describe('when runners query fails', () => {
+    const mockError = new Error('error!');
+
+    beforeEach(async () => {
+      mockRunnersCountHandler.mockRejectedValue(mockError);
+
+      await createComponent({ props: { scope: INSTANCE_TYPE } });
+    });
+
+    it('data is not shown and error is reported', async () => {
+      expect(wrapper.html()).toBe('<strong></strong>');
+
+      expect(captureException).toHaveBeenCalledWith({
+        component: 'RunnerCount',
+        error: mockError,
+      });
+    });
+  });
+
+  describe('in group scope', () => {
+    beforeEach(async () => {
+      await createComponent({ props: { scope: GROUP_TYPE } });
+    });
+
+    it('fetches data from the group query', async () => {
+      expect(mockGroupRunnersCountHandler).toHaveBeenCalledTimes(1);
+      expect(mockGroupRunnersCountHandler).toHaveBeenCalledWith({});
+
+      expect(wrapper.html()).toBe(
+        `<strong>${groupRunnersCountData.data.group.runners.count}</strong>`,
+      );
+    });
+
+    it('does not fetch from the group query', () => {
+      expect(mockRunnersCountHandler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when .refetch() is called', () => {
+    beforeEach(async () => {
+      await createComponent({ props: { scope: INSTANCE_TYPE } });
+      wrapper.vm.refetch();
+    });
+
+    it('data is not shown and error is reported', async () => {
+      expect(mockRunnersCountHandler).toHaveBeenCalledTimes(2);
+    });
+  });
+});
diff --git a/spec/frontend/runner/components/stat/runner_stats_spec.js b/spec/frontend/runner/components/stat/runner_stats_spec.js
index 68db8621ef0..f1ba6403dfb 100644
--- a/spec/frontend/runner/components/stat/runner_stats_spec.js
+++ b/spec/frontend/runner/components/stat/runner_stats_spec.js
@@ -1,21 +1,24 @@
 import { shallowMount, mount } from '@vue/test-utils';
+import { s__ } from '~/locale';
 import RunnerStats from '~/runner/components/stat/runner_stats.vue';
+import RunnerCount from '~/runner/components/stat/runner_count.vue';
 import RunnerStatusStat from '~/runner/components/stat/runner_status_stat.vue';
-import { STATUS_ONLINE, STATUS_OFFLINE, STATUS_STALE } from '~/runner/constants';
+import { INSTANCE_TYPE, STATUS_ONLINE, STATUS_OFFLINE, STATUS_STALE } from '~/runner/constants';
 
 describe('RunnerStats', () => {
   let wrapper;
 
+  const findRunnerCountAt = (i) => wrapper.findAllComponents(RunnerCount).at(i);
   const findRunnerStatusStatAt = (i) => wrapper.findAllComponents(RunnerStatusStat).at(i);
 
-  const createComponent = ({ props = {}, mountFn = shallowMount } = {}) => {
+  const createComponent = ({ props = {}, mountFn = shallowMount, ...options } = {}) => {
     wrapper = mountFn(RunnerStats, {
       propsData: {
-        onlineRunnersCount: 3,
-        offlineRunnersCount: 2,
-        staleRunnersCount: 1,
+        scope: INSTANCE_TYPE,
+        variables: {},
         ...props,
       },
+      ...options,
     });
   };
 
@@ -24,13 +27,46 @@ describe('RunnerStats', () => {
   });
 
   it('Displays all the stats', () => {
-    createComponent({ mountFn: mount });
+    const mockCounts = {
+      [STATUS_ONLINE]: 3,
+      [STATUS_OFFLINE]: 2,
+      [STATUS_STALE]: 1,
+    };
+
+    createComponent({
+      mountFn: mount,
+      stubs: {
+        RunnerCount: {
+          props: ['variables'],
+          render() {
+            return this.$scopedSlots.default({
+              count: mockCounts[this.variables.status],
+            });
+          },
+        },
+      },
+    });
+
+    const text = wrapper.text();
+    expect(text).toMatch(`${s__('Runners|Online runners')} 3`);
+    expect(text).toMatch(`${s__('Runners|Offline runners')} 2`);
+    expect(text).toMatch(`${s__('Runners|Stale runners')} 1`);
+  });
 
-    const stats = wrapper.text();
+  it('Displays counts for filtered searches', () => {
+    createComponent({ props: { variables: { paused: true } } });
 
-    expect(stats).toMatch('Online runners 3');
-    expect(stats).toMatch('Offline runners 2');
-    expect(stats).toMatch('Stale runners 1');
+    expect(findRunnerCountAt(0).props('variables').paused).toBe(true);
+    expect(findRunnerCountAt(1).props('variables').paused).toBe(true);
+    expect(findRunnerCountAt(2).props('variables').paused).toBe(true);
+  });
+
+  it('Skips overlapping statuses', () => {
+    createComponent({ props: { variables: { status: STATUS_ONLINE } } });
+
+    expect(findRunnerCountAt(0).props('skip')).toBe(false);
+    expect(findRunnerCountAt(1).props('skip')).toBe(true);
+    expect(findRunnerCountAt(2).props('skip')).toBe(true);
   });
 
   it.each`
@@ -38,9 +74,10 @@ describe('RunnerStats', () => {
     ${0} | ${STATUS_ONLINE}
     ${1} | ${STATUS_OFFLINE}
     ${2} | ${STATUS_STALE}
-  `('Displays status types at index $i', ({ i, status }) => {
-    createComponent();
+  `('Displays status $status at index $i', ({ i, status }) => {
+    createComponent({ mountFn: mount });
 
+    expect(findRunnerCountAt(i).props('variables').status).toBe(status);
     expect(findRunnerStatusStatAt(i).props('status')).toBe(status);
   });
 });
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
new file mode 100644
index 00000000000..2065874c288
--- /dev/null
+++ b/spec/frontend/runner/group_runner_show/group_runner_show_app_spec.js
@@ -0,0 +1,213 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { createAlert, VARIANT_SUCCESS } from '~/flash';
+import { redirectTo } from '~/lib/utils/url_utility';
+
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import RunnerHeader from '~/runner/components/runner_header.vue';
+import RunnerDetails from '~/runner/components/runner_details.vue';
+import RunnerPauseButton from '~/runner/components/runner_pause_button.vue';
+import RunnerDeleteButton from '~/runner/components/runner_delete_button.vue';
+import RunnerEditButton from '~/runner/components/runner_edit_button.vue';
+import runnerQuery from '~/runner/graphql/show/runner.query.graphql';
+import GroupRunnerShowApp from '~/runner/group_runner_show/group_runner_show_app.vue';
+import { captureException } from '~/runner/sentry_utils';
+import { saveAlertToLocalStorage } from '~/runner/local_storage_alert/save_alert_to_local_storage';
+
+import { runnerData } from '../mock_data';
+
+jest.mock('~/runner/local_storage_alert/save_alert_to_local_storage');
+jest.mock('~/flash');
+jest.mock('~/runner/sentry_utils');
+jest.mock('~/lib/utils/url_utility');
+
+const mockRunner = runnerData.data.runner;
+const mockRunnerGraphqlId = mockRunner.id;
+const mockRunnerId = `${getIdFromGraphQLId(mockRunnerGraphqlId)}`;
+const mockRunnersPath = '/groups/group1/-/runners';
+const mockEditGroupRunnerPath = `/groups/group1/-/runners/${mockRunnerId}/edit`;
+
+Vue.use(VueApollo);
+
+describe('GroupRunnerShowApp', () => {
+  let wrapper;
+  let mockRunnerQuery;
+
+  const findRunnerHeader = () => wrapper.findComponent(RunnerHeader);
+  const findRunnerDetails = () => wrapper.findComponent(RunnerDetails);
+  const findRunnerDeleteButton = () => wrapper.findComponent(RunnerDeleteButton);
+  const findRunnerEditButton = () => wrapper.findComponent(RunnerEditButton);
+  const findRunnerPauseButton = () => wrapper.findComponent(RunnerPauseButton);
+
+  const mockRunnerQueryResult = (runner = {}) => {
+    mockRunnerQuery = jest.fn().mockResolvedValue({
+      data: {
+        runner: { ...mockRunner, ...runner },
+      },
+    });
+  };
+
+  const createComponent = ({ props = {}, mountFn = shallowMountExtended, ...options } = {}) => {
+    wrapper = mountFn(GroupRunnerShowApp, {
+      apolloProvider: createMockApollo([[runnerQuery, mockRunnerQuery]]),
+      propsData: {
+        runnerId: mockRunnerId,
+        runnersPath: mockRunnersPath,
+        editGroupRunnerPath: mockEditGroupRunnerPath,
+        ...props,
+      },
+      ...options,
+    });
+
+    return waitForPromises();
+  };
+
+  afterEach(() => {
+    mockRunnerQuery.mockReset();
+    wrapper.destroy();
+  });
+
+  describe('When showing runner details', () => {
+    beforeEach(async () => {
+      mockRunnerQueryResult();
+
+      await createComponent({ mountFn: mountExtended });
+    });
+
+    it('expect GraphQL ID to be requested', async () => {
+      expect(mockRunnerQuery).toHaveBeenCalledWith({ id: mockRunnerGraphqlId });
+    });
+
+    it('displays the header', async () => {
+      expect(findRunnerHeader().text()).toContain(`Runner #${mockRunnerId}`);
+    });
+
+    it('displays edit, pause, delete buttons', async () => {
+      expect(findRunnerEditButton().exists()).toBe(true);
+      expect(findRunnerPauseButton().exists()).toBe(true);
+      expect(findRunnerDeleteButton().exists()).toBe(true);
+    });
+
+    it('shows basic runner details', () => {
+      const expected = `Description Instance runner
+                        Last contact Never contacted
+                        Version 1.0.0
+                        IP Address 127.0.0.1
+                        Executor None
+                        Architecture None
+                        Platform darwin
+                        Configuration Runs untagged jobs
+                        Maximum job timeout None
+                        Tags None`.replace(/\s+/g, ' ');
+
+      expect(wrapper.text().replace(/\s+/g, ' ')).toContain(expected);
+    });
+
+    it('renders runner details component', () => {
+      expect(findRunnerDetails().props('runner')).toEqual(mockRunner);
+    });
+
+    describe('when runner cannot be updated', () => {
+      beforeEach(async () => {
+        mockRunnerQueryResult({
+          userPermissions: {
+            ...mockRunner.userPermissions,
+            updateRunner: false,
+          },
+        });
+
+        await createComponent({
+          mountFn: mountExtended,
+        });
+      });
+
+      it('does not display edit and pause buttons', () => {
+        expect(findRunnerEditButton().exists()).toBe(false);
+        expect(findRunnerPauseButton().exists()).toBe(false);
+      });
+
+      it('displays delete button', () => {
+        expect(findRunnerDeleteButton().exists()).toBe(true);
+      });
+    });
+
+    describe('when runner cannot be deleted', () => {
+      beforeEach(async () => {
+        mockRunnerQueryResult({
+          userPermissions: {
+            ...mockRunner.userPermissions,
+            deleteRunner: false,
+          },
+        });
+
+        await createComponent({
+          mountFn: mountExtended,
+        });
+      });
+
+      it('does not display delete button', () => {
+        expect(findRunnerDeleteButton().exists()).toBe(false);
+      });
+
+      it('displays edit and pause buttons', () => {
+        expect(findRunnerEditButton().exists()).toBe(true);
+        expect(findRunnerPauseButton().exists()).toBe(true);
+      });
+    });
+
+    describe('when runner is deleted', () => {
+      beforeEach(async () => {
+        await createComponent({
+          mountFn: mountExtended,
+        });
+      });
+
+      it('redirects to the runner list page', () => {
+        findRunnerDeleteButton().vm.$emit('deleted', { message: 'Runner deleted' });
+
+        expect(saveAlertToLocalStorage).toHaveBeenCalledWith({
+          message: 'Runner deleted',
+          variant: VARIANT_SUCCESS,
+        });
+        expect(redirectTo).toHaveBeenCalledWith(mockRunnersPath);
+      });
+    });
+  });
+
+  describe('When loading', () => {
+    beforeEach(() => {
+      mockRunnerQueryResult();
+
+      createComponent();
+    });
+
+    it('does not show runner details', () => {
+      expect(findRunnerDetails().exists()).toBe(false);
+    });
+  });
+
+  describe('When there is an error', () => {
+    beforeEach(async () => {
+      mockRunnerQuery = jest.fn().mockRejectedValueOnce(new Error('Error!'));
+      await createComponent();
+    });
+
+    it('does not show runner details', () => {
+      expect(findRunnerDetails().exists()).toBe(false);
+    });
+
+    it('error is reported to sentry', () => {
+      expect(captureException).toHaveBeenCalledWith({
+        error: new Error('Error!'),
+        component: 'GroupRunnerShowApp',
+      });
+    });
+
+    it('error is shown to the user', () => {
+      expect(createAlert).toHaveBeenCalled();
+    });
+  });
+});
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 eb9f85a7d0f..9c42b0d6865 100644
--- a/spec/frontend/runner/group_runners/group_runners_app_spec.js
+++ b/spec/frontend/runner/group_runners/group_runners_app_spec.js
@@ -10,6 +10,7 @@ import {
 } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/flash';
+import { s__ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { updateHistory } from '~/lib/utils/url_utility';
 
@@ -18,6 +19,7 @@ import RunnerFilteredSearchBar from '~/runner/components/runner_filtered_search_
 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';
+import RunnerCount from '~/runner/components/stat/runner_count.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';
@@ -28,7 +30,6 @@ import {
   DEFAULT_SORT,
   INSTANCE_TYPE,
   GROUP_TYPE,
-  PROJECT_TYPE,
   PARAM_KEY_PAUSED,
   PARAM_KEY_STATUS,
   PARAM_KEY_TAG,
@@ -38,11 +39,10 @@ import {
   RUNNER_PAGE_SIZE,
   I18N_EDIT,
 } from '~/runner/constants';
-import getGroupRunnersQuery from '~/runner/graphql/list/group_runners.query.graphql';
-import getGroupRunnersCountQuery from '~/runner/graphql/list/group_runners_count.query.graphql';
+import groupRunnersQuery from '~/runner/graphql/list/group_runners.query.graphql';
+import groupRunnersCountQuery from '~/runner/graphql/list/group_runners_count.query.graphql';
 import GroupRunnersApp from '~/runner/group_runners/group_runners_app.vue';
 import { captureException } from '~/runner/sentry_utils';
-import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import {
   groupRunnersData,
   groupRunnersDataPaginated,
@@ -61,6 +61,9 @@ const mockRegistrationToken = 'AABBCC';
 const mockGroupRunnersEdges = groupRunnersData.data.group.runners.edges;
 const mockGroupRunnersCount = mockGroupRunnersEdges.length;
 
+const mockGroupRunnersHandler = jest.fn();
+const mockGroupRunnersCountHandler = jest.fn();
+
 jest.mock('~/flash');
 jest.mock('~/runner/sentry_utils');
 jest.mock('~/lib/utils/url_utility', () => ({
@@ -70,8 +73,6 @@ jest.mock('~/lib/utils/url_utility', () => ({
 
 describe('GroupRunnersApp', () => {
   let wrapper;
-  let mockGroupRunnersQuery;
-  let mockGroupRunnersCountQuery;
 
   const findRunnerStats = () => wrapper.findComponent(RunnerStats);
   const findRunnerActionsCell = () => wrapper.findComponent(RunnerActionsCell);
@@ -83,17 +84,11 @@ describe('GroupRunnersApp', () => {
   const findRunnerPagination = () => extendedWrapper(wrapper.findComponent(RunnerPagination));
   const findRunnerPaginationNext = () => findRunnerPagination().findByLabelText('Go to next page');
   const findRunnerFilteredSearchBar = () => wrapper.findComponent(RunnerFilteredSearchBar);
-  const findFilteredSearch = () => wrapper.findComponent(FilteredSearch);
-
-  const mockCountQueryResult = (count) =>
-    Promise.resolve({
-      data: { group: { id: groupRunnersCountData.data.group.id, runners: { count } } },
-    });
 
-  const createComponent = ({ props = {}, mountFn = shallowMountExtended } = {}) => {
+  const createComponent = ({ props = {}, mountFn = shallowMountExtended, ...options } = {}) => {
     const handlers = [
-      [getGroupRunnersQuery, mockGroupRunnersQuery],
-      [getGroupRunnersCountQuery, mockGroupRunnersCountQuery],
+      [groupRunnersQuery, mockGroupRunnersHandler],
+      [groupRunnersCountQuery, mockGroupRunnersCountHandler],
     ];
 
     wrapper = mountFn(GroupRunnersApp, {
@@ -110,90 +105,76 @@ describe('GroupRunnersApp', () => {
         emptyStateSvgPath,
         emptyStateFilteredSvgPath,
       },
+      ...options,
     });
+
+    return waitForPromises();
   };
 
   beforeEach(async () => {
-    setWindowLocation(`/groups/${mockGroupFullPath}/-/runners`);
+    mockGroupRunnersHandler.mockResolvedValue(groupRunnersData);
+    mockGroupRunnersCountHandler.mockResolvedValue(groupRunnersCountData);
+  });
 
-    mockGroupRunnersQuery = jest.fn().mockResolvedValue(groupRunnersData);
-    mockGroupRunnersCountQuery = jest.fn().mockResolvedValue(groupRunnersCountData);
+  afterEach(() => {
+    mockGroupRunnersHandler.mockReset();
+    mockGroupRunnersCountHandler.mockReset();
+    wrapper.destroy();
+  });
+
+  it('shows the runner tabs with a runner count for each type', async () => {
+    await createComponent({ mountFn: mountExtended });
 
+    expect(findRunnerTypeTabs().text()).toMatchInterpolatedText(
+      `All ${mockGroupRunnersCount} Group ${mockGroupRunnersCount} Project ${mockGroupRunnersCount}`,
+    );
+  });
+
+  it('shows the runner setup instructions', () => {
     createComponent();
-    await waitForPromises();
+
+    expect(findRegistrationDropdown().props('registrationToken')).toBe(mockRegistrationToken);
+    expect(findRegistrationDropdown().props('type')).toBe(GROUP_TYPE);
   });
 
   it('shows total runner counts', async () => {
-    expect(mockGroupRunnersCountQuery).toHaveBeenCalledWith({
-      groupFullPath: mockGroupFullPath,
+    await createComponent({ mountFn: mountExtended });
+
+    expect(mockGroupRunnersCountHandler).toHaveBeenCalledWith({
       status: STATUS_ONLINE,
-    });
-    expect(mockGroupRunnersCountQuery).toHaveBeenCalledWith({
       groupFullPath: mockGroupFullPath,
-      status: STATUS_OFFLINE,
     });
-    expect(mockGroupRunnersCountQuery).toHaveBeenCalledWith({
+    expect(mockGroupRunnersCountHandler).toHaveBeenCalledWith({
+      status: STATUS_OFFLINE,
       groupFullPath: mockGroupFullPath,
-      status: STATUS_STALE,
-    });
-
-    expect(findRunnerStats().props()).toMatchObject({
-      onlineRunnersCount: mockGroupRunnersCount,
-      offlineRunnersCount: mockGroupRunnersCount,
-      staleRunnersCount: mockGroupRunnersCount,
-    });
-  });
-
-  it('shows the runner tabs with a runner count for each type', async () => {
-    mockGroupRunnersCountQuery.mockImplementation(({ type }) => {
-      switch (type) {
-        case GROUP_TYPE:
-          return mockCountQueryResult(2);
-        case PROJECT_TYPE:
-          return mockCountQueryResult(1);
-        default:
-          return mockCountQueryResult(4);
-      }
     });
-
-    createComponent({ mountFn: mountExtended });
-    await waitForPromises();
-
-    expect(findRunnerTypeTabs().text()).toMatchInterpolatedText('All 4 Group 2 Project 1');
-  });
-
-  it('shows the runner tabs with a formatted runner count', async () => {
-    mockGroupRunnersCountQuery.mockImplementation(({ type }) => {
-      switch (type) {
-        case GROUP_TYPE:
-          return mockCountQueryResult(2000);
-        case PROJECT_TYPE:
-          return mockCountQueryResult(1000);
-        default:
-          return mockCountQueryResult(3000);
-      }
+    expect(mockGroupRunnersCountHandler).toHaveBeenCalledWith({
+      status: STATUS_STALE,
+      groupFullPath: mockGroupFullPath,
     });
 
-    createComponent({ mountFn: mountExtended });
-    await waitForPromises();
-
-    expect(findRunnerTypeTabs().text()).toMatchInterpolatedText(
-      'All 3,000 Group 2,000 Project 1,000',
+    expect(findRunnerStats().text()).toContain(
+      `${s__('Runners|Online runners')} ${mockGroupRunnersCount}`,
+    );
+    expect(findRunnerStats().text()).toContain(
+      `${s__('Runners|Offline runners')} ${mockGroupRunnersCount}`,
+    );
+    expect(findRunnerStats().text()).toContain(
+      `${s__('Runners|Stale runners')} ${mockGroupRunnersCount}`,
     );
   });
 
-  it('shows the runner setup instructions', () => {
-    expect(findRegistrationDropdown().props('registrationToken')).toBe(mockRegistrationToken);
-    expect(findRegistrationDropdown().props('type')).toBe(GROUP_TYPE);
-  });
+  it('shows the runners list', async () => {
+    await createComponent();
 
-  it('shows the runners list', () => {
     const runners = findRunnerList().props('runners');
     expect(runners).toEqual(mockGroupRunnersEdges.map(({ node }) => node));
   });
 
-  it('requests the runners with group path and no other filters', () => {
-    expect(mockGroupRunnersQuery).toHaveBeenLastCalledWith({
+  it('requests the runners with group path and no other filters', async () => {
+    await createComponent();
+
+    expect(mockGroupRunnersHandler).toHaveBeenLastCalledWith({
       groupFullPath: mockGroupFullPath,
       status: undefined,
       type: undefined,
@@ -203,9 +184,9 @@ describe('GroupRunnersApp', () => {
   });
 
   it('sets tokens in the filtered search', () => {
-    createComponent({ mountFn: mountExtended });
+    createComponent();
 
-    const tokens = findFilteredSearch().props('tokens');
+    const tokens = findRunnerFilteredSearchBar().props('tokens');
 
     expect(tokens).toEqual([
       expect.objectContaining({
@@ -229,12 +210,8 @@ describe('GroupRunnersApp', () => {
     const FILTERED_COUNT_QUERIES = 3; // Smart queries that display a count of runners in tabs
 
     beforeEach(async () => {
-      mockGroupRunnersCountQuery.mockClear();
-
-      createComponent({ mountFn: mountExtended });
+      await createComponent({ mountFn: mountExtended });
       showToast = jest.spyOn(wrapper.vm.$root.$toast, 'show');
-
-      await waitForPromises();
     });
 
     it('view link is displayed correctly', () => {
@@ -254,11 +231,11 @@ describe('GroupRunnersApp', () => {
     });
 
     it('When runner is paused or unpaused, some data is refetched', async () => {
-      expect(mockGroupRunnersCountQuery).toHaveBeenCalledTimes(COUNT_QUERIES);
+      expect(mockGroupRunnersCountHandler).toHaveBeenCalledTimes(COUNT_QUERIES);
 
       findRunnerActionsCell().vm.$emit('toggledPaused');
 
-      expect(mockGroupRunnersCountQuery).toHaveBeenCalledTimes(
+      expect(mockGroupRunnersCountHandler).toHaveBeenCalledTimes(
         COUNT_QUERIES + FILTERED_COUNT_QUERIES,
       );
 
@@ -277,8 +254,12 @@ describe('GroupRunnersApp', () => {
     beforeEach(async () => {
       setWindowLocation(`?status[]=${STATUS_ONLINE}&runner_type[]=${INSTANCE_TYPE}`);
 
-      createComponent();
-      await waitForPromises();
+      await createComponent({
+        stubs: {
+          RunnerStats,
+          RunnerCount,
+        },
+      });
     });
 
     it('sets the filters in the search bar', () => {
@@ -291,7 +272,7 @@ describe('GroupRunnersApp', () => {
     });
 
     it('requests the runners with filter parameters', () => {
-      expect(mockGroupRunnersQuery).toHaveBeenLastCalledWith({
+      expect(mockGroupRunnersHandler).toHaveBeenLastCalledWith({
         groupFullPath: mockGroupFullPath,
         status: STATUS_ONLINE,
         type: INSTANCE_TYPE,
@@ -301,20 +282,23 @@ describe('GroupRunnersApp', () => {
     });
 
     it('fetches count results for requested status', () => {
-      expect(mockGroupRunnersCountQuery).toHaveBeenCalledWith({
+      expect(mockGroupRunnersCountHandler).toHaveBeenCalledWith({
         groupFullPath: mockGroupFullPath,
         type: INSTANCE_TYPE,
         status: STATUS_ONLINE,
       });
-
-      expect(findRunnerStats().props()).toMatchObject({
-        onlineRunnersCount: mockGroupRunnersCount,
-      });
     });
   });
 
   describe('when a filter is selected by the user', () => {
     beforeEach(async () => {
+      createComponent({
+        stubs: {
+          RunnerStats,
+          RunnerCount,
+        },
+      });
+
       findRunnerFilteredSearchBar().vm.$emit('input', {
         runnerType: null,
         filters: [
@@ -330,12 +314,12 @@ describe('GroupRunnersApp', () => {
     it('updates the browser url', () => {
       expect(updateHistory).toHaveBeenLastCalledWith({
         title: expect.any(String),
-        url: 'http://test.host/groups/group1/-/runners?status[]=ONLINE&tag[]=tag1&sort=CREATED_ASC',
+        url: expect.stringContaining('?status[]=ONLINE&tag[]=tag1&sort=CREATED_ASC'),
       });
     });
 
     it('requests the runners with filters', () => {
-      expect(mockGroupRunnersQuery).toHaveBeenLastCalledWith({
+      expect(mockGroupRunnersHandler).toHaveBeenLastCalledWith({
         groupFullPath: mockGroupFullPath,
         status: STATUS_ONLINE,
         tagList: ['tag1'],
@@ -345,33 +329,11 @@ describe('GroupRunnersApp', () => {
     });
 
     it('fetches count results for requested status', () => {
-      expect(mockGroupRunnersCountQuery).toHaveBeenCalledWith({
+      expect(mockGroupRunnersCountHandler).toHaveBeenCalledWith({
         groupFullPath: mockGroupFullPath,
         tagList: ['tag1'],
         status: STATUS_ONLINE,
       });
-
-      expect(findRunnerStats().props()).toMatchObject({
-        onlineRunnersCount: mockGroupRunnersCount,
-      });
-    });
-
-    it('skips fetching count results for status that were not in filter', () => {
-      expect(mockGroupRunnersCountQuery).not.toHaveBeenCalledWith({
-        groupFullPath: mockGroupFullPath,
-        tagList: ['tag1'],
-        status: STATUS_OFFLINE,
-      });
-      expect(mockGroupRunnersCountQuery).not.toHaveBeenCalledWith({
-        groupFullPath: mockGroupFullPath,
-        tagList: ['tag1'],
-        status: STATUS_STALE,
-      });
-
-      expect(findRunnerStats().props()).toMatchObject({
-        offlineRunnersCount: null,
-        staleRunnersCount: null,
-      });
     });
   });
 
@@ -382,7 +344,7 @@ describe('GroupRunnersApp', () => {
 
   describe('when no runners are found', () => {
     beforeEach(async () => {
-      mockGroupRunnersQuery = jest.fn().mockResolvedValue({
+      mockGroupRunnersHandler.mockResolvedValue({
         data: {
           group: {
             id: '1',
@@ -390,8 +352,7 @@ describe('GroupRunnersApp', () => {
           },
         },
       });
-      createComponent();
-      await waitForPromises();
+      await createComponent();
     });
 
     it('shows an empty state', async () => {
@@ -401,9 +362,8 @@ describe('GroupRunnersApp', () => {
 
   describe('when runners query fails', () => {
     beforeEach(async () => {
-      mockGroupRunnersQuery = jest.fn().mockRejectedValue(new Error('Error!'));
-      createComponent();
-      await waitForPromises();
+      mockGroupRunnersHandler.mockRejectedValue(new Error('Error!'));
+      await createComponent();
     });
 
     it('error is shown to the user', async () => {
@@ -420,16 +380,15 @@ describe('GroupRunnersApp', () => {
 
   describe('Pagination', () => {
     beforeEach(async () => {
-      mockGroupRunnersQuery = jest.fn().mockResolvedValue(groupRunnersDataPaginated);
+      mockGroupRunnersHandler.mockResolvedValue(groupRunnersDataPaginated);
 
-      createComponent({ mountFn: mountExtended });
-      await waitForPromises();
+      await createComponent({ mountFn: mountExtended });
     });
 
     it('navigates to the next page', async () => {
       await findRunnerPaginationNext().trigger('click');
 
-      expect(mockGroupRunnersQuery).toHaveBeenLastCalledWith({
+      expect(mockGroupRunnersHandler).toHaveBeenLastCalledWith({
         groupFullPath: mockGroupFullPath,
         sort: CREATED_DESC,
         first: RUNNER_PAGE_SIZE,
diff --git a/spec/frontend/runner/mock_data.js b/spec/frontend/runner/mock_data.js
index 3368fc21544..e5472ace817 100644
--- a/spec/frontend/runner/mock_data.js
+++ b/spec/frontend/runner/mock_data.js
@@ -10,14 +10,216 @@ import runnerJobsData from 'test_fixtures/graphql/runner/show/runner_jobs.query.
 import runnerFormData from 'test_fixtures/graphql/runner/edit/runner_form.query.graphql.json';
 
 // List queries
-import runnersData from 'test_fixtures/graphql/runner/list/admin_runners.query.graphql.json';
-import runnersDataPaginated from 'test_fixtures/graphql/runner/list/admin_runners.query.graphql.paginated.json';
-import runnersCountData from 'test_fixtures/graphql/runner/list/admin_runners_count.query.graphql.json';
+import allRunnersData from 'test_fixtures/graphql/runner/list/all_runners.query.graphql.json';
+import allRunnersDataPaginated from 'test_fixtures/graphql/runner/list/all_runners.query.graphql.paginated.json';
+import runnersCountData from 'test_fixtures/graphql/runner/list/all_runners_count.query.graphql.json';
 import groupRunnersData from 'test_fixtures/graphql/runner/list/group_runners.query.graphql.json';
 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';
+
 // Other mock data
+
+// Mock searches and their corresponding urls
+export const mockSearchExamples = [
+  {
+    name: 'a default query',
+    urlQuery: '',
+    search: { runnerType: null, filters: [], pagination: { page: 1 }, sort: 'CREATED_DESC' },
+    graphqlVariables: { sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+    isDefault: true,
+  },
+  {
+    name: 'a single status',
+    urlQuery: '?status[]=ACTIVE',
+    search: {
+      runnerType: null,
+      filters: [{ type: 'status', value: { data: 'ACTIVE', operator: '=' } }],
+      pagination: { page: 1 },
+      sort: 'CREATED_DESC',
+    },
+    graphqlVariables: { status: 'ACTIVE', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+  },
+  {
+    name: 'a single term text search',
+    urlQuery: '?search=something',
+    search: {
+      runnerType: null,
+      filters: [
+        {
+          type: 'filtered-search-term',
+          value: { data: 'something' },
+        },
+      ],
+      pagination: { page: 1 },
+      sort: 'CREATED_DESC',
+    },
+    graphqlVariables: { search: 'something', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+  },
+  {
+    name: 'a two terms text search',
+    urlQuery: '?search=something+else',
+    search: {
+      runnerType: null,
+      filters: [
+        {
+          type: 'filtered-search-term',
+          value: { data: 'something' },
+        },
+        {
+          type: 'filtered-search-term',
+          value: { data: 'else' },
+        },
+      ],
+      pagination: { page: 1 },
+      sort: 'CREATED_DESC',
+    },
+    graphqlVariables: { search: 'something else', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+  },
+  {
+    name: 'single instance type',
+    urlQuery: '?runner_type[]=INSTANCE_TYPE',
+    search: {
+      runnerType: 'INSTANCE_TYPE',
+      filters: [],
+      pagination: { page: 1 },
+      sort: 'CREATED_DESC',
+    },
+    graphqlVariables: { type: 'INSTANCE_TYPE', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+  },
+  {
+    name: 'multiple runner status',
+    urlQuery: '?status[]=ACTIVE&status[]=PAUSED',
+    search: {
+      runnerType: null,
+      filters: [
+        { type: 'status', value: { data: 'ACTIVE', operator: '=' } },
+        { type: 'status', value: { data: 'PAUSED', operator: '=' } },
+      ],
+      pagination: { page: 1 },
+      sort: 'CREATED_DESC',
+    },
+    graphqlVariables: { status: 'ACTIVE', 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',
+      filters: [{ type: 'status', value: { data: 'ACTIVE', operator: '=' } }],
+      pagination: { page: 1 },
+      sort: 'CREATED_ASC',
+    },
+    graphqlVariables: {
+      status: 'ACTIVE',
+      type: 'INSTANCE_TYPE',
+      sort: 'CREATED_ASC',
+      first: RUNNER_PAGE_SIZE,
+    },
+  },
+  {
+    name: 'a tag',
+    urlQuery: '?tag[]=tag-1',
+    search: {
+      runnerType: null,
+      filters: [{ type: 'tag', value: { data: 'tag-1', operator: '=' } }],
+      pagination: { page: 1 },
+      sort: 'CREATED_DESC',
+    },
+    graphqlVariables: {
+      tagList: ['tag-1'],
+      first: 20,
+      sort: 'CREATED_DESC',
+    },
+  },
+  {
+    name: 'two tags',
+    urlQuery: '?tag[]=tag-1&tag[]=tag-2',
+    search: {
+      runnerType: null,
+      filters: [
+        { type: 'tag', value: { data: 'tag-1', operator: '=' } },
+        { type: 'tag', value: { data: 'tag-2', operator: '=' } },
+      ],
+      pagination: { page: 1 },
+      sort: 'CREATED_DESC',
+    },
+    graphqlVariables: {
+      tagList: ['tag-1', 'tag-2'],
+      first: 20,
+      sort: 'CREATED_DESC',
+    },
+  },
+  {
+    name: 'the next page',
+    urlQuery: '?page=2&after=AFTER_CURSOR',
+    search: {
+      runnerType: null,
+      filters: [],
+      pagination: { page: 2, after: 'AFTER_CURSOR' },
+      sort: 'CREATED_DESC',
+    },
+    graphqlVariables: { sort: 'CREATED_DESC', after: 'AFTER_CURSOR', first: RUNNER_PAGE_SIZE },
+  },
+  {
+    name: 'the previous page',
+    urlQuery: '?page=2&before=BEFORE_CURSOR',
+    search: {
+      runnerType: null,
+      filters: [],
+      pagination: { page: 2, before: 'BEFORE_CURSOR' },
+      sort: 'CREATED_DESC',
+    },
+    graphqlVariables: { 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',
+    urlQuery:
+      '?status[]=ACTIVE&runner_type[]=INSTANCE_TYPE&tag[]=tag-1&tag[]=tag-2&sort=CREATED_ASC&page=2&after=AFTER_CURSOR',
+    search: {
+      runnerType: 'INSTANCE_TYPE',
+      filters: [
+        { type: 'status', value: { data: 'ACTIVE', operator: '=' } },
+        { type: 'tag', value: { data: 'tag-1', operator: '=' } },
+        { type: 'tag', value: { data: 'tag-2', operator: '=' } },
+      ],
+      pagination: { page: 2, after: 'AFTER_CURSOR' },
+      sort: 'CREATED_ASC',
+    },
+    graphqlVariables: {
+      status: 'ACTIVE',
+      type: 'INSTANCE_TYPE',
+      tagList: ['tag-1', 'tag-2'],
+      sort: 'CREATED_ASC',
+      after: 'AFTER_CURSOR',
+      first: RUNNER_PAGE_SIZE,
+    },
+  },
+  {
+    name: 'paused runners',
+    urlQuery: '?paused[]=true',
+    search: {
+      runnerType: null,
+      filters: [{ type: 'paused', value: { data: 'true', operator: '=' } }],
+      pagination: { page: 1 },
+      sort: 'CREATED_DESC',
+    },
+    graphqlVariables: { paused: true, sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+  },
+  {
+    name: 'active runners',
+    urlQuery: '?paused[]=false',
+    search: {
+      runnerType: null,
+      filters: [{ type: 'paused', value: { data: 'false', operator: '=' } }],
+      pagination: { page: 1 },
+      sort: 'CREATED_DESC',
+    },
+    graphqlVariables: { paused: false, sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+  },
+];
+
 export const onlineContactTimeoutSecs = 2 * 60 * 60;
 export const staleTimeoutSecs = 7889238; // Ruby's `3.months`
 
@@ -25,8 +227,8 @@ export const emptyStateSvgPath = 'emptyStateSvgPath.svg';
 export const emptyStateFilteredSvgPath = 'emptyStateFilteredSvgPath.svg';
 
 export {
-  runnersData,
-  runnersDataPaginated,
+  allRunnersData,
+  allRunnersDataPaginated,
   runnersCountData,
   groupRunnersData,
   groupRunnersDataPaginated,
diff --git a/spec/frontend/runner/runner_search_utils_spec.js b/spec/frontend/runner/runner_search_utils_spec.js
index 1f102f86b2a..6f954143ab1 100644
--- a/spec/frontend/runner/runner_search_utils_spec.js
+++ b/spec/frontend/runner/runner_search_utils_spec.js
@@ -1,4 +1,3 @@
-import { RUNNER_PAGE_SIZE } from '~/runner/constants';
 import {
   searchValidator,
   updateOutdatedUrl,
@@ -6,209 +5,12 @@ import {
   fromSearchToUrl,
   fromSearchToVariables,
   isSearchFiltered,
-} from '~/runner/runner_search_utils';
+} from 'ee_else_ce/runner/runner_search_utils';
+import { mockSearchExamples } from './mock_data';
 
 describe('search_params.js', () => {
-  const examples = [
-    {
-      name: 'a default query',
-      urlQuery: '',
-      search: { runnerType: null, filters: [], pagination: { page: 1 }, sort: 'CREATED_DESC' },
-      graphqlVariables: { sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
-      isDefault: true,
-    },
-    {
-      name: 'a single status',
-      urlQuery: '?status[]=ACTIVE',
-      search: {
-        runnerType: null,
-        filters: [{ type: 'status', value: { data: 'ACTIVE', operator: '=' } }],
-        pagination: { page: 1 },
-        sort: 'CREATED_DESC',
-      },
-      graphqlVariables: { status: 'ACTIVE', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
-    },
-    {
-      name: 'a single term text search',
-      urlQuery: '?search=something',
-      search: {
-        runnerType: null,
-        filters: [
-          {
-            type: 'filtered-search-term',
-            value: { data: 'something' },
-          },
-        ],
-        pagination: { page: 1 },
-        sort: 'CREATED_DESC',
-      },
-      graphqlVariables: { search: 'something', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
-    },
-    {
-      name: 'a two terms text search',
-      urlQuery: '?search=something+else',
-      search: {
-        runnerType: null,
-        filters: [
-          {
-            type: 'filtered-search-term',
-            value: { data: 'something' },
-          },
-          {
-            type: 'filtered-search-term',
-            value: { data: 'else' },
-          },
-        ],
-        pagination: { page: 1 },
-        sort: 'CREATED_DESC',
-      },
-      graphqlVariables: { search: 'something else', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
-    },
-    {
-      name: 'single instance type',
-      urlQuery: '?runner_type[]=INSTANCE_TYPE',
-      search: {
-        runnerType: 'INSTANCE_TYPE',
-        filters: [],
-        pagination: { page: 1 },
-        sort: 'CREATED_DESC',
-      },
-      graphqlVariables: { type: 'INSTANCE_TYPE', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
-    },
-    {
-      name: 'multiple runner status',
-      urlQuery: '?status[]=ACTIVE&status[]=PAUSED',
-      search: {
-        runnerType: null,
-        filters: [
-          { type: 'status', value: { data: 'ACTIVE', operator: '=' } },
-          { type: 'status', value: { data: 'PAUSED', operator: '=' } },
-        ],
-        pagination: { page: 1 },
-        sort: 'CREATED_DESC',
-      },
-      graphqlVariables: { status: 'ACTIVE', 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',
-        filters: [{ type: 'status', value: { data: 'ACTIVE', operator: '=' } }],
-        pagination: { page: 1 },
-        sort: 'CREATED_ASC',
-      },
-      graphqlVariables: {
-        status: 'ACTIVE',
-        type: 'INSTANCE_TYPE',
-        sort: 'CREATED_ASC',
-        first: RUNNER_PAGE_SIZE,
-      },
-    },
-    {
-      name: 'a tag',
-      urlQuery: '?tag[]=tag-1',
-      search: {
-        runnerType: null,
-        filters: [{ type: 'tag', value: { data: 'tag-1', operator: '=' } }],
-        pagination: { page: 1 },
-        sort: 'CREATED_DESC',
-      },
-      graphqlVariables: {
-        tagList: ['tag-1'],
-        first: 20,
-        sort: 'CREATED_DESC',
-      },
-    },
-    {
-      name: 'two tags',
-      urlQuery: '?tag[]=tag-1&tag[]=tag-2',
-      search: {
-        runnerType: null,
-        filters: [
-          { type: 'tag', value: { data: 'tag-1', operator: '=' } },
-          { type: 'tag', value: { data: 'tag-2', operator: '=' } },
-        ],
-        pagination: { page: 1 },
-        sort: 'CREATED_DESC',
-      },
-      graphqlVariables: {
-        tagList: ['tag-1', 'tag-2'],
-        first: 20,
-        sort: 'CREATED_DESC',
-      },
-    },
-    {
-      name: 'the next page',
-      urlQuery: '?page=2&after=AFTER_CURSOR',
-      search: {
-        runnerType: null,
-        filters: [],
-        pagination: { page: 2, after: 'AFTER_CURSOR' },
-        sort: 'CREATED_DESC',
-      },
-      graphqlVariables: { sort: 'CREATED_DESC', after: 'AFTER_CURSOR', first: RUNNER_PAGE_SIZE },
-    },
-    {
-      name: 'the previous page',
-      urlQuery: '?page=2&before=BEFORE_CURSOR',
-      search: {
-        runnerType: null,
-        filters: [],
-        pagination: { page: 2, before: 'BEFORE_CURSOR' },
-        sort: 'CREATED_DESC',
-      },
-      graphqlVariables: { 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',
-      urlQuery:
-        '?status[]=ACTIVE&runner_type[]=INSTANCE_TYPE&tag[]=tag-1&tag[]=tag-2&sort=CREATED_ASC&page=2&after=AFTER_CURSOR',
-      search: {
-        runnerType: 'INSTANCE_TYPE',
-        filters: [
-          { type: 'status', value: { data: 'ACTIVE', operator: '=' } },
-          { type: 'tag', value: { data: 'tag-1', operator: '=' } },
-          { type: 'tag', value: { data: 'tag-2', operator: '=' } },
-        ],
-        pagination: { page: 2, after: 'AFTER_CURSOR' },
-        sort: 'CREATED_ASC',
-      },
-      graphqlVariables: {
-        status: 'ACTIVE',
-        type: 'INSTANCE_TYPE',
-        tagList: ['tag-1', 'tag-2'],
-        sort: 'CREATED_ASC',
-        after: 'AFTER_CURSOR',
-        first: RUNNER_PAGE_SIZE,
-      },
-    },
-    {
-      name: 'paused runners',
-      urlQuery: '?paused[]=true',
-      search: {
-        runnerType: null,
-        filters: [{ type: 'paused', value: { data: 'true', operator: '=' } }],
-        pagination: { page: 1 },
-        sort: 'CREATED_DESC',
-      },
-      graphqlVariables: { paused: true, sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
-    },
-    {
-      name: 'active runners',
-      urlQuery: '?paused[]=false',
-      search: {
-        runnerType: null,
-        filters: [{ type: 'paused', value: { data: 'false', operator: '=' } }],
-        pagination: { page: 1 },
-        sort: 'CREATED_DESC',
-      },
-      graphqlVariables: { paused: false, sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
-    },
-  ];
-
   describe('searchValidator', () => {
-    examples.forEach(({ name, search }) => {
+    mockSearchExamples.forEach(({ name, search }) => {
       it(`Validates ${name} as a search object`, () => {
         expect(searchValidator(search)).toBe(true);
       });
@@ -235,7 +37,7 @@ describe('search_params.js', () => {
   });
 
   describe('fromUrlQueryToSearch', () => {
-    examples.forEach(({ name, urlQuery, search }) => {
+    mockSearchExamples.forEach(({ name, urlQuery, search }) => {
       it(`Converts ${name} to a search object`, () => {
         expect(fromUrlQueryToSearch(urlQuery)).toEqual(search);
       });
@@ -268,7 +70,7 @@ describe('search_params.js', () => {
   });
 
   describe('fromSearchToUrl', () => {
-    examples.forEach(({ name, urlQuery, search }) => {
+    mockSearchExamples.forEach(({ name, urlQuery, search }) => {
       it(`Converts ${name} to a url`, () => {
         expect(fromSearchToUrl(search)).toBe(`http://test.host/${urlQuery}`);
       });
@@ -295,7 +97,7 @@ describe('search_params.js', () => {
   });
 
   describe('fromSearchToVariables', () => {
-    examples.forEach(({ name, graphqlVariables, search }) => {
+    mockSearchExamples.forEach(({ name, graphqlVariables, search }) => {
       it(`Converts ${name} to a GraphQL query variables object`, () => {
         expect(fromSearchToVariables(search)).toEqual(graphqlVariables);
       });
@@ -335,7 +137,7 @@ describe('search_params.js', () => {
   });
 
   describe('isSearchFiltered', () => {
-    examples.forEach(({ name, search, isDefault }) => {
+    mockSearchExamples.forEach(({ name, search, isDefault }) => {
       it(`Given ${name}, evaluates to ${isDefault ? 'not ' : ''}filtered`, () => {
         expect(isSearchFiltered(search)).toBe(!isDefault);
       });
diff --git a/spec/frontend/security_configuration/components/app_spec.js b/spec/frontend/security_configuration/components/app_spec.js
index de91e51924d..222cabc6a63 100644
--- a/spec/frontend/security_configuration/components/app_spec.js
+++ b/spec/frontend/security_configuration/components/app_spec.js
@@ -1,11 +1,10 @@
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { GlTab, GlTabs, GlLink } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
 import stubChildren from 'helpers/stub_children';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import SecurityConfigurationApp, { i18n } from '~/security_configuration/components/app.vue';
 import AutoDevopsAlert from '~/security_configuration/components/auto_dev_ops_alert.vue';
 import AutoDevopsEnabledAlert from '~/security_configuration/components/auto_dev_ops_enabled_alert.vue';
@@ -42,35 +41,57 @@ describe('App component', () => {
   let wrapper;
   let userCalloutDismissSpy;
 
-  const createComponent = ({ shouldShowCallout = true, ...propsData }) => {
+  const securityFeaturesMock = [
+    {
+      name: SAST_NAME,
+      shortName: SAST_SHORT_NAME,
+      description: SAST_DESCRIPTION,
+      helpPath: SAST_HELP_PATH,
+      configurationHelpPath: SAST_CONFIG_HELP_PATH,
+      type: REPORT_TYPE_SAST,
+      available: true,
+    },
+  ];
+
+  const complianceFeaturesMock = [
+    {
+      name: LICENSE_COMPLIANCE_NAME,
+      description: LICENSE_COMPLIANCE_DESCRIPTION,
+      helpPath: LICENSE_COMPLIANCE_HELP_PATH,
+      type: REPORT_TYPE_LICENSE_COMPLIANCE,
+      configurationHelpPath: LICENSE_COMPLIANCE_HELP_PATH,
+    },
+  ];
+
+  const createComponent = ({ shouldShowCallout = true, ...propsData } = {}) => {
     userCalloutDismissSpy = jest.fn();
 
-    wrapper = extendedWrapper(
-      mount(SecurityConfigurationApp, {
-        propsData: {
-          securityTrainingEnabled: true,
-          ...propsData,
-        },
-        provide: {
-          upgradePath,
-          autoDevopsHelpPagePath,
-          autoDevopsPath,
-          projectFullPath,
-          vulnerabilityTrainingDocsPath,
-        },
-        stubs: {
-          ...stubChildren(SecurityConfigurationApp),
-          GlLink: false,
-          GlSprintf: false,
-          LocalStorageSync: false,
-          SectionLayout: false,
-          UserCalloutDismisser: makeMockUserCalloutDismisser({
-            dismiss: userCalloutDismissSpy,
-            shouldShowCallout,
-          }),
-        },
-      }),
-    );
+    wrapper = mountExtended(SecurityConfigurationApp, {
+      propsData: {
+        augmentedSecurityFeatures: securityFeaturesMock,
+        augmentedComplianceFeatures: complianceFeaturesMock,
+        securityTrainingEnabled: true,
+        ...propsData,
+      },
+      provide: {
+        upgradePath,
+        autoDevopsHelpPagePath,
+        autoDevopsPath,
+        projectFullPath,
+        vulnerabilityTrainingDocsPath,
+      },
+      stubs: {
+        ...stubChildren(SecurityConfigurationApp),
+        GlLink: false,
+        GlSprintf: false,
+        LocalStorageSync: false,
+        SectionLayout: false,
+        UserCalloutDismisser: makeMockUserCalloutDismisser({
+          dismiss: userCalloutDismissSpy,
+          shouldShowCallout,
+        }),
+      },
+    });
   };
 
   const findMainHeading = () => wrapper.find('h1');
@@ -108,38 +129,13 @@ describe('App component', () => {
   const findAutoDevopsEnabledAlert = () => wrapper.findComponent(AutoDevopsEnabledAlert);
   const findVulnerabilityManagementTab = () => wrapper.findByTestId('vulnerability-management-tab');
 
-  const securityFeaturesMock = [
-    {
-      name: SAST_NAME,
-      shortName: SAST_SHORT_NAME,
-      description: SAST_DESCRIPTION,
-      helpPath: SAST_HELP_PATH,
-      configurationHelpPath: SAST_CONFIG_HELP_PATH,
-      type: REPORT_TYPE_SAST,
-      available: true,
-    },
-  ];
-
-  const complianceFeaturesMock = [
-    {
-      name: LICENSE_COMPLIANCE_NAME,
-      description: LICENSE_COMPLIANCE_DESCRIPTION,
-      helpPath: LICENSE_COMPLIANCE_HELP_PATH,
-      type: REPORT_TYPE_LICENSE_COMPLIANCE,
-      configurationHelpPath: LICENSE_COMPLIANCE_HELP_PATH,
-    },
-  ];
-
   afterEach(() => {
     wrapper.destroy();
   });
 
   describe('basic structure', () => {
-    beforeEach(async () => {
-      createComponent({
-        augmentedSecurityFeatures: securityFeaturesMock,
-        augmentedComplianceFeatures: complianceFeaturesMock,
-      });
+    beforeEach(() => {
+      createComponent();
     });
 
     it('renders main-heading with correct text', () => {
@@ -199,10 +195,7 @@ describe('App component', () => {
 
   describe('Manage via MR Error Alert', () => {
     beforeEach(() => {
-      createComponent({
-        augmentedSecurityFeatures: securityFeaturesMock,
-        augmentedComplianceFeatures: complianceFeaturesMock,
-      });
+      createComponent();
     });
 
     describe('on initial load', () => {
@@ -238,8 +231,6 @@ describe('App component', () => {
     describe('given the right props', () => {
       beforeEach(() => {
         createComponent({
-          augmentedSecurityFeatures: securityFeaturesMock,
-          augmentedComplianceFeatures: complianceFeaturesMock,
           autoDevopsEnabled: false,
           gitlabCiPresent: false,
           canEnableAutoDevops: true,
@@ -261,10 +252,7 @@ describe('App component', () => {
 
     describe('given the wrong props', () => {
       beforeEach(() => {
-        createComponent({
-          augmentedSecurityFeatures: securityFeaturesMock,
-          augmentedComplianceFeatures: complianceFeaturesMock,
-        });
+        createComponent();
       });
       it('should not show AutoDevopsAlert', () => {
         expect(findAutoDevopsAlert().exists()).toBe(false);
@@ -289,8 +277,6 @@ describe('App component', () => {
         }
 
         createComponent({
-          augmentedSecurityFeatures: securityFeaturesMock,
-          augmentedComplianceFeatures: complianceFeaturesMock,
           autoDevopsEnabled,
         });
       });
@@ -348,7 +334,6 @@ describe('App component', () => {
     describe('given at least one unavailable feature', () => {
       beforeEach(() => {
         createComponent({
-          augmentedSecurityFeatures: securityFeaturesMock,
           augmentedComplianceFeatures: complianceFeaturesMock.map(makeAvailable(false)),
         });
       });
@@ -369,7 +354,6 @@ describe('App component', () => {
     describe('given at least one unavailable feature, but banner is already dismissed', () => {
       beforeEach(() => {
         createComponent({
-          augmentedSecurityFeatures: securityFeaturesMock,
           augmentedComplianceFeatures: complianceFeaturesMock.map(makeAvailable(false)),
           shouldShowCallout: false,
         });
@@ -397,8 +381,6 @@ describe('App component', () => {
   describe('when given latestPipelinePath props', () => {
     beforeEach(() => {
       createComponent({
-        augmentedSecurityFeatures: securityFeaturesMock,
-        augmentedComplianceFeatures: complianceFeaturesMock,
         latestPipelinePath: 'test/path',
       });
     });
@@ -425,8 +407,6 @@ describe('App component', () => {
   describe('given gitlabCiPresent & gitlabCiHistoryPath props', () => {
     beforeEach(() => {
       createComponent({
-        augmentedSecurityFeatures: securityFeaturesMock,
-        augmentedComplianceFeatures: complianceFeaturesMock,
         gitlabCiPresent: true,
         gitlabCiHistoryPath,
       });
@@ -442,42 +422,31 @@ describe('App component', () => {
   });
 
   describe('Vulnerability management', () => {
-    it('does not show tab if security training is disabled', () => {
+    const props = { securityTrainingEnabled: true };
+
+    beforeEach(async () => {
       createComponent({
-        augmentedSecurityFeatures: securityFeaturesMock,
-        augmentedComplianceFeatures: complianceFeaturesMock,
-        securityTrainingEnabled: false,
+        ...props,
       });
-
-      expect(findVulnerabilityManagementTab().exists()).toBe(false);
     });
 
-    describe('security training enabled', () => {
-      beforeEach(async () => {
-        createComponent({
-          augmentedSecurityFeatures: securityFeaturesMock,
-          augmentedComplianceFeatures: complianceFeaturesMock,
-        });
-      });
-
-      it('shows the tab if security training is enabled', () => {
-        expect(findVulnerabilityManagementTab().exists()).toBe(true);
-      });
+    it('shows the tab', () => {
+      expect(findVulnerabilityManagementTab().exists()).toBe(true);
+    });
 
-      it('renders TrainingProviderList component', () => {
-        expect(findTrainingProviderList().exists()).toBe(true);
-      });
+    it('renders TrainingProviderList component', () => {
+      expect(findTrainingProviderList().props()).toMatchObject(props);
+    });
 
-      it('renders security training description', () => {
-        expect(findVulnerabilityManagementTab().text()).toContain(i18n.securityTrainingDescription);
-      });
+    it('renders security training description', () => {
+      expect(findVulnerabilityManagementTab().text()).toContain(i18n.securityTrainingDescription);
+    });
 
-      it('renders link to help docs', () => {
-        const trainingLink = findVulnerabilityManagementTab().findComponent(GlLink);
+    it('renders link to help docs', () => {
+      const trainingLink = findVulnerabilityManagementTab().findComponent(GlLink);
 
-        expect(trainingLink.text()).toBe('Learn more about vulnerability training');
-        expect(trainingLink.attributes('href')).toBe(vulnerabilityTrainingDocsPath);
-      });
+      expect(trainingLink.text()).toBe('Learn more about vulnerability training');
+      expect(trainingLink.attributes('href')).toBe(vulnerabilityTrainingDocsPath);
     });
   });
 });
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 309a9cd4cd6..184c16fda6e 100644
--- a/spec/frontend/security_configuration/components/training_provider_list_spec.js
+++ b/spec/frontend/security_configuration/components/training_provider_list_spec.js
@@ -36,7 +36,6 @@ import {
   testProjectPath,
   testProviderIds,
   testProviderName,
-  tempProviderLogos,
 } from '../mock_data';
 
 Vue.use(VueApollo);
@@ -54,6 +53,31 @@ const TEST_TRAINING_PROVIDERS_ALL_ENABLED = getSecurityTrainingProvidersData({
 });
 const TEST_TRAINING_PROVIDERS_DEFAULT = TEST_TRAINING_PROVIDERS_ALL_DISABLED;
 
+const TEMP_PROVIDER_LOGOS = {
+  Kontra: {
+    svg: '<svg>Kontra</svg>',
+  },
+  'Secure Code Warrior': {
+    svg: '<svg>Secure Code Warrior</svg>',
+  },
+};
+jest.mock('~/security_configuration/components/constants', () => {
+  return {
+    TEMP_PROVIDER_URLS: jest.requireActual('~/security_configuration/components/constants')
+      .TEMP_PROVIDER_URLS,
+    // NOTE: Jest hoists all mocks to the top so we can't use TEMP_PROVIDER_LOGOS
+    // here directly.
+    TEMP_PROVIDER_LOGOS: {
+      Kontra: {
+        svg: '<svg>Kontra</svg>',
+      },
+      'Secure Code Warrior': {
+        svg: '<svg>Secure Code Warrior</svg>',
+      },
+    },
+  };
+});
+
 describe('TrainingProviderList component', () => {
   let wrapper;
   let apolloProvider;
@@ -76,7 +100,7 @@ describe('TrainingProviderList component', () => {
     apolloProvider = createMockApollo(mergedHandlers);
   };
 
-  const createComponent = () => {
+  const createComponent = (props = {}) => {
     wrapper = shallowMountExtended(TrainingProviderList, {
       provide: {
         projectFullPath: testProjectPath,
@@ -84,6 +108,10 @@ describe('TrainingProviderList component', () => {
       directives: {
         GlTooltip: createMockDirective(),
       },
+      propsData: {
+        securityTrainingEnabled: true,
+        ...props,
+      },
       apolloProvider,
     });
   };
@@ -99,6 +127,7 @@ describe('TrainingProviderList component', () => {
   const findLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findErrorAlert = () => wrapper.findComponent(GlAlert);
   const findLogos = () => wrapper.findAllByTestId('provider-logo');
+  const findUnavailableTexts = () => wrapper.findAllByTestId('unavailable-text');
 
   const toggleFirstProvider = () => findFirstToggle().vm.$emit('change', testProviderIds[0]);
 
@@ -212,7 +241,6 @@ describe('TrainingProviderList component', () => {
 
     describe('provider logo', () => {
       beforeEach(async () => {
-        wrapper.vm.$options.TEMP_PROVIDER_LOGOS = tempProviderLogos;
         await waitForQueryToBeLoaded();
       });
 
@@ -226,9 +254,9 @@ describe('TrainingProviderList component', () => {
         expect(findLogos().at(provider).attributes('role')).toBe('presentation');
       });
 
-      it.each(providerIndexArray)('renders the svg content for provider %s', (provider) => {
+      it.each(providerIndexArray)('renders the svg content for provider %s', async (provider) => {
         expect(findLogos().at(provider).html()).toContain(
-          tempProviderLogos[testProviderName[provider]].svg,
+          TEMP_PROVIDER_LOGOS[testProviderName[provider]].svg,
         );
       });
     });
@@ -351,6 +379,41 @@ describe('TrainingProviderList component', () => {
         );
       });
     });
+
+    describe('non ultimate users', () => {
+      beforeEach(async () => {
+        createComponent({
+          securityTrainingEnabled: false,
+        });
+        await waitForQueryToBeLoaded();
+      });
+
+      it('displays unavailable text', () => {
+        findUnavailableTexts().wrappers.forEach((unavailableText) => {
+          expect(unavailableText.text()).toBe(TrainingProviderList.i18n.unavailableText);
+        });
+      });
+
+      it('has disabled state for toggle', () => {
+        findToggles().wrappers.forEach((toggle) => {
+          expect(toggle.props('disabled')).toBe(true);
+        });
+      });
+
+      it('has disabled state for radio', () => {
+        findPrimaryProviderRadios().wrappers.forEach((radio) => {
+          expect(radio.attributes('disabled')).toBeTruthy();
+        });
+      });
+
+      it('adds backgrounds color', () => {
+        findCards().wrappers.forEach((card) => {
+          expect(card.props('bodyClass')).toMatchObject({
+            'gl-bg-gray-10': true,
+          });
+        });
+      });
+    });
   });
 
   describe('primary provider settings', () => {
@@ -442,7 +505,7 @@ describe('TrainingProviderList component', () => {
       ${'backend error'} | ${jest.fn().mockReturnValue(dismissUserCalloutErrorResponse)}
       ${'network error'} | ${jest.fn().mockRejectedValue()}
     `('when dismissing the callout and a "$errorType" happens', ({ mutationHandler }) => {
-      beforeEach(async () => {
+      it('logs the error to sentry', async () => {
         jest.spyOn(Sentry, 'captureException').mockImplementation();
 
         createApolloProvider({
@@ -460,9 +523,7 @@ describe('TrainingProviderList component', () => {
 
         await waitForQueryToBeLoaded();
         toggleFirstProvider();
-      });
 
-      it('logs the error to sentry', async () => {
         expect(Sentry.captureException).not.toHaveBeenCalled();
 
         await waitForMutationToBeLoaded();
diff --git a/spec/frontend/security_configuration/mock_data.js b/spec/frontend/security_configuration/mock_data.js
index 18a480bf082..2fe3b59cea3 100644
--- a/spec/frontend/security_configuration/mock_data.js
+++ b/spec/frontend/security_configuration/mock_data.js
@@ -100,14 +100,3 @@ export const updateSecurityTrainingProvidersErrorResponse = {
     },
   },
 };
-
-// Will remove once this issue is resolved where the svg path will be available in the GraphQL query
-// https://gitlab.com/gitlab-org/gitlab/-/issues/346899
-export const tempProviderLogos = {
-  [testProviderName[0]]: {
-    svg: `<svg>${[testProviderName[0]]}</svg>`,
-  },
-  [testProviderName[1]]: {
-    svg: `<svg>${[testProviderName[1]]}</svg>`,
-  },
-};
diff --git a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap
index 62a9ff98243..11841106ed0 100644
--- a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap
+++ b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap
@@ -8,7 +8,7 @@ exports[`self monitor component When the self monitor project has not been creat
     class="settings-header"
   >
     <h4
-      class="js-section-header"
+      class="js-section-header settings-title js-settings-toggle js-settings-toggle-trigger-only"
     >
       
       Self monitoring
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 0b672cbc93e..e3b5478290a 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
@@ -1,10 +1,11 @@
 import { GlModal, GlFormCheckbox } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 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 stubChildren from 'helpers/stub_children';
 import SetStatusModalWrapper, {
   AVAILABILITY_STATUS,
 } from '~/set_status_modal/set_status_modal_wrapper.vue';
@@ -26,12 +27,23 @@ describe('SetStatusModalWrapper', () => {
     defaultEmoji,
   };
 
+  const EmojiPickerStub = {
+    props: EmojiPicker.props,
+    template: '<div></div>',
+  };
+
   const createComponent = (props = {}) => {
-    return shallowMount(SetStatusModalWrapper, {
+    return mount(SetStatusModalWrapper, {
       propsData: {
         ...defaultProps,
         ...props,
       },
+      stubs: {
+        ...stubChildren(SetStatusModalWrapper),
+        GlFormInput: false,
+        GlFormInputGroup: false,
+        EmojiPicker: EmojiPickerStub,
+      },
       mocks: {
         $toast,
       },
@@ -43,7 +55,7 @@ describe('SetStatusModalWrapper', () => {
   const findClearStatusButton = () => wrapper.find('.js-clear-user-status-button');
   const findAvailabilityCheckbox = () => wrapper.find(GlFormCheckbox);
   const findClearStatusAtMessage = () => wrapper.find('[data-testid="clear-status-at-message"]');
-  const getEmojiPicker = () => wrapper.findComponent(EmojiPicker);
+  const getEmojiPicker = () => wrapper.findComponent(EmojiPickerStub);
 
   const initModal = async ({ mockOnUpdateSuccess = true, mockOnUpdateFailure = true } = {}) => {
     const modal = findModal();
@@ -88,7 +100,7 @@ describe('SetStatusModalWrapper', () => {
     });
 
     it('has a clear status button', () => {
-      expect(findClearStatusButton().isVisible()).toBe(true);
+      expect(findClearStatusButton().exists()).toBe(true);
     });
 
     it('displays the clear status at dropdown', () => {
@@ -125,7 +137,7 @@ describe('SetStatusModalWrapper', () => {
     });
 
     it('hides the clear status button', () => {
-      expect(findClearStatusButton().isVisible()).toBe(false);
+      expect(findClearStatusButton().exists()).toBe(false);
     });
   });
 
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 a286eeef14f..517b4f12559 100644
--- a/spec/frontend/sidebar/components/assignees/assignee_avatar_link_spec.js
+++ b/spec/frontend/sidebar/components/assignees/assignee_avatar_link_spec.js
@@ -120,6 +120,7 @@ describe('AssigneeAvatarLink component', () => {
   it('passes the correct user id for REST API', () => {
     createComponent({
       tooltipHasName: true,
+      issuableType: 'issue',
       user: userDataMock(),
     });
 
@@ -131,9 +132,22 @@ describe('AssigneeAvatarLink component', () => {
 
     createComponent({
       tooltipHasName: true,
+      issuableType: 'issue',
       user: { ...userDataMock(), id: convertToGraphQLId(TYPE_USER, userId) },
     });
 
     expect(findUserLink().attributes('data-user-id')).toBe(String(userId));
   });
+
+  it.each`
+    issuableType       | userId
+    ${'merge_request'} | ${undefined}
+    ${'issue'}         | ${'1'}
+  `('it sets data-user-id as $userId for $issuableType', ({ issuableType, userId }) => {
+    createComponent({
+      issuableType,
+    });
+
+    expect(findUserLink().attributes('data-user-id')).toBe(userId);
+  });
 });
diff --git a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
index 3ddd41c0bd4..8ebd2dabfc2 100644
--- a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
+++ b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
@@ -107,6 +107,7 @@ describe('SidebarDropdownWidget', () => {
     currentMilestoneSpy = jest.fn().mockResolvedValue(noCurrentMilestoneResponse),
   } = {}) => {
     Vue.use(VueApollo);
+
     mockApollo = createMockApollo([
       [projectMilestonesQuery, projectMilestonesSpy],
       [projectIssueMilestoneQuery, currentMilestoneSpy],
@@ -415,11 +416,9 @@ describe('SidebarDropdownWidget', () => {
 
         describe('when currentAttribute is not equal to attribute id', () => {
           describe('when update is successful', () => {
-            beforeEach(() => {
+            it('calls setIssueAttribute mutation', () => {
               findDropdownItemWithText(mockMilestone2.title).vm.$emit('click');
-            });
 
-            it('calls setIssueAttribute mutation', () => {
               expect(milestoneMutationSpy).toHaveBeenCalledWith({
                 iid: mockIssue.iid,
                 attributeId: getIdFromGraphQLId(mockMilestone2.id),
@@ -428,6 +427,8 @@ describe('SidebarDropdownWidget', () => {
             });
 
             it('sets the value returned from the mutation to currentAttribute', async () => {
+              findDropdownItemWithText(mockMilestone2.title).vm.$emit('click');
+              await nextTick();
               expect(findSelectedAttribute().text()).toBe(mockMilestone2.title);
             });
           });
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 549ab99c6af..9a68940590d 100644
--- a/spec/frontend/sidebar/components/subscriptions/sidebar_subscriptions_widget_spec.js
+++ b/spec/frontend/sidebar/components/subscriptions/sidebar_subscriptions_widget_spec.js
@@ -8,15 +8,22 @@ import createFlash 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';
-import { issueSubscriptionsResponse } from '../../mock_data';
+import updateMergeRequestSubscriptionMutation from '~/sidebar/queries/update_merge_request_subscription.mutation.graphql';
+import toast from '~/vue_shared/plugins/global_toast';
+import {
+  issueSubscriptionsResponse,
+  mergeRequestSubscriptionMutationResponse,
+} from '../../mock_data';
 
 jest.mock('~/flash');
+jest.mock('~/vue_shared/plugins/global_toast');
 
 Vue.use(VueApollo);
 
 describe('Sidebar Subscriptions Widget', () => {
   let wrapper;
   let fakeApollo;
+  let subscriptionMutationHandler;
 
   const findEditableItem = () => wrapper.findComponent(SidebarEditableItem);
   const findToggle = () => wrapper.findComponent(GlToggle);
@@ -24,18 +31,29 @@ describe('Sidebar Subscriptions Widget', () => {
 
   const createComponent = ({
     subscriptionsQueryHandler = jest.fn().mockResolvedValue(issueSubscriptionsResponse()),
+    issuableType = 'issue',
+    movedMrSidebar = false,
   } = {}) => {
-    fakeApollo = createMockApollo([[issueSubscribedQuery, subscriptionsQueryHandler]]);
+    subscriptionMutationHandler = jest
+      .fn()
+      .mockResolvedValue(mergeRequestSubscriptionMutationResponse);
+    fakeApollo = createMockApollo([
+      [issueSubscribedQuery, subscriptionsQueryHandler],
+      [updateMergeRequestSubscriptionMutation, subscriptionMutationHandler],
+    ]);
 
     wrapper = shallowMount(SidebarSubscriptionWidget, {
       apolloProvider: fakeApollo,
       provide: {
         canUpdate: true,
+        glFeatures: {
+          movedMrSidebar,
+        },
       },
       propsData: {
         fullPath: 'group/project',
         iid: '1',
-        issuableType: 'issue',
+        issuableType,
       },
       stubs: {
         SidebarEditableItem,
@@ -128,4 +146,21 @@ describe('Sidebar Subscriptions Widget', () => {
 
     expect(createFlash).toHaveBeenCalled();
   });
+
+  describe('merge request', () => {
+    it('displays toast when mutation is successful', async () => {
+      createComponent({
+        issuableType: 'merge_request',
+        movedMrSidebar: true,
+        subscriptionsQueryHandler: jest.fn().mockResolvedValue(issueSubscriptionsResponse(true)),
+      });
+      await waitForPromises();
+
+      await wrapper.find('.dropdown-item').trigger('click');
+
+      await waitForPromises();
+
+      expect(toast).toHaveBeenCalledWith('Notifications turned on.');
+    });
+  });
 });
diff --git a/spec/frontend/sidebar/lock/issuable_lock_form_spec.js b/spec/frontend/sidebar/lock/issuable_lock_form_spec.js
index 8478d3d674d..bb757fdf63b 100644
--- a/spec/frontend/sidebar/lock/issuable_lock_form_spec.js
+++ b/spec/frontend/sidebar/lock/issuable_lock_form_spec.js
@@ -1,17 +1,23 @@
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
+import Vuex from 'vuex';
 import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import { createStore as createMrStore } from '~/mr_notes/stores';
 import createStore from '~/notes/stores';
 import EditForm from '~/sidebar/components/lock/edit_form.vue';
 import IssuableLockForm from '~/sidebar/components/lock/issuable_lock_form.vue';
+import toast from '~/vue_shared/plugins/global_toast';
 import { ISSUABLE_TYPE_ISSUE, ISSUABLE_TYPE_MR } from './constants';
 
+jest.mock('~/vue_shared/plugins/global_toast');
+
+Vue.use(Vuex);
+
 describe('IssuableLockForm', () => {
   let wrapper;
   let store;
   let issuableType; // Either ISSUABLE_TYPE_ISSUE or ISSUABLE_TYPE_MR
+  let updateLockedAttribute;
 
   const setIssuableType = (pageType) => {
     issuableType = pageType;
@@ -29,16 +35,27 @@ describe('IssuableLockForm', () => {
       store = createStore();
       store.getters.getNoteableData.targetType = 'issue';
     } else {
-      store = createMrStore();
+      updateLockedAttribute = jest.fn().mockResolvedValue();
+      store = new Vuex.Store({
+        getters: {
+          getNoteableData: () => ({ targetType: issuableType }),
+        },
+        actions: {
+          updateLockedAttribute,
+        },
+      });
     }
     store.getters.getNoteableData.discussion_locked = isLocked;
   };
 
-  const createComponent = ({ props = {} }) => {
+  const createComponent = ({ props = {} }, movedMrSidebar = false) => {
     wrapper = shallowMount(IssuableLockForm, {
       store,
       provide: {
         fullPath: '',
+        glFeatures: {
+          movedMrSidebar,
+        },
       },
       propsData: {
         isEditable: true,
@@ -144,4 +161,24 @@ describe('IssuableLockForm', () => {
       });
     });
   });
+
+  describe('merge requests', () => {
+    beforeEach(() => {
+      setIssuableType('merge_request');
+    });
+
+    it.each`
+      locked   | message
+      ${true}  | ${'Merge request locked.'}
+      ${false} | ${'Merge request unlocked.'}
+    `('displays $message when merge request is $locked', async ({ locked, message }) => {
+      initStore(locked);
+
+      createComponent({}, true);
+
+      await wrapper.find('.dropdown-item').trigger('click');
+
+      expect(toast).toHaveBeenCalledWith(message);
+    });
+  });
 });
diff --git a/spec/frontend/sidebar/mock_data.js b/spec/frontend/sidebar/mock_data.js
index 2b421037339..229757ff40c 100644
--- a/spec/frontend/sidebar/mock_data.js
+++ b/spec/frontend/sidebar/mock_data.js
@@ -321,6 +321,19 @@ export const issueSubscriptionsResponse = (subscribed = false, emailsDisabled =
   },
 });
 
+export const mergeRequestSubscriptionMutationResponse = {
+  data: {
+    updateIssuableSubscription: {
+      issuable: {
+        __typename: 'MergeRequest',
+        id: 'gid://gitlab/MergeRequest/4',
+        subscribed: true,
+      },
+      errors: [],
+    },
+  },
+};
+
 export const issuableQueryResponse = {
   data: {
     workspace: {
diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index 8a767765149..f49ceb2fede 100644
--- a/spec/frontend/snippets/components/edit_spec.js
+++ b/spec/frontend/snippets/components/edit_spec.js
@@ -5,6 +5,7 @@ import { merge } from 'lodash';
 import VueApollo, { ApolloMutation } from 'vue-apollo';
 import { useFakeDate } from 'helpers/fake_date';
 import createMockApollo from 'helpers/mock_apollo_helper';
+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';
@@ -96,6 +97,8 @@ describe('Snippet Edit app', () => {
   const originalRelativeUrlRoot = gon.relative_url_root;
 
   beforeEach(() => {
+    stubPerformanceWebAPI();
+
     getSpy = jest.fn().mockResolvedValue(createQueryResponse());
 
     // See `mutateSpy` declaration comment for why we send a key
diff --git a/spec/frontend/snippets/components/show_spec.js b/spec/frontend/snippets/components/show_spec.js
index c73bf8f80a2..b29ed97099f 100644
--- a/spec/frontend/snippets/components/show_spec.js
+++ b/spec/frontend/snippets/components/show_spec.js
@@ -12,6 +12,7 @@ import {
   SNIPPET_VISIBILITY_PUBLIC,
 } from '~/snippets/constants';
 import CloneDropdownButton from '~/vue_shared/components/clone_dropdown.vue';
+import { stubPerformanceWebAPI } from 'helpers/performance';
 
 describe('Snippet view app', () => {
   let wrapper;
@@ -45,6 +46,10 @@ describe('Snippet view app', () => {
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findEmbedDropdown = () => wrapper.findComponent(EmbedDropdown);
 
+  beforeEach(() => {
+    stubPerformanceWebAPI();
+  });
+
   afterEach(() => {
     wrapper.destroy();
   });
diff --git a/spec/frontend/surveys/merge_request_performance/app_spec.js b/spec/frontend/surveys/merge_request_performance/app_spec.js
new file mode 100644
index 00000000000..6e8cc660b1d
--- /dev/null
+++ b/spec/frontend/surveys/merge_request_performance/app_spec.js
@@ -0,0 +1,143 @@
+import { nextTick } from 'vue';
+import { GlButton, GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mockTracking } from 'helpers/tracking_helper';
+import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
+import MergeRequestExperienceSurveyApp from '~/surveys/merge_request_experience/app.vue';
+import SatisfactionRate from '~/surveys/components/satisfaction_rate.vue';
+
+describe('MergeRequestExperienceSurveyApp', () => {
+  let trackingSpy;
+  let wrapper;
+  let dismiss;
+  let dismisserComponent;
+
+  const findCloseButton = () =>
+    wrapper
+      .findAllComponents(GlButton)
+      .filter((button) => button.attributes('aria-label') === 'Close')
+      .at(0);
+
+  const createWrapper = ({ shouldShowCallout = true } = {}) => {
+    dismiss = jest.fn();
+    dismisserComponent = makeMockUserCalloutDismisser({
+      dismiss,
+      shouldShowCallout,
+    });
+    wrapper = shallowMountExtended(MergeRequestExperienceSurveyApp, {
+      stubs: {
+        UserCalloutDismisser: dismisserComponent,
+        GlSprintf,
+      },
+    });
+  };
+
+  describe('when user callout is visible', () => {
+    beforeEach(() => {
+      createWrapper();
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+    });
+
+    it('shows survey', async () => {
+      expect(wrapper.html()).toContain('Overall, how satisfied are you with merge requests?');
+      expect(wrapper.findComponent(SatisfactionRate).exists()).toBe(true);
+      expect(wrapper.emitted().close).toBe(undefined);
+    });
+
+    it('triggers user callout on close', async () => {
+      findCloseButton().vm.$emit('click');
+      expect(dismiss).toHaveBeenCalledTimes(1);
+    });
+
+    it('emits close event on close button click', async () => {
+      findCloseButton().vm.$emit('click');
+      expect(wrapper.emitted()).toMatchObject({ close: [[]] });
+    });
+
+    it('applies correct feature name for user callout', () => {
+      expect(wrapper.findComponent(dismisserComponent).props('featureName')).toBe(
+        'mr_experience_survey',
+      );
+    });
+
+    it('dismisses user callout on survey rate', async () => {
+      const rate = wrapper.findComponent(SatisfactionRate);
+      expect(dismiss).not.toHaveBeenCalled();
+      rate.vm.$emit('rate', 5);
+      expect(dismiss).toHaveBeenCalledTimes(1);
+    });
+
+    it('steps through survey steps', async () => {
+      const rate = wrapper.findComponent(SatisfactionRate);
+      rate.vm.$emit('rate', 5);
+      await nextTick();
+      expect(wrapper.text()).toContain(
+        'How satisfied are you with speed/performance of merge requests?',
+      );
+    });
+
+    it('tracks survey rates', async () => {
+      const rate = wrapper.findComponent(SatisfactionRate);
+      rate.vm.$emit('rate', 5);
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'survey:mr_experience', {
+        value: 5,
+        label: 'overall',
+      });
+      rate.vm.$emit('rate', 4);
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'survey:mr_experience', {
+        value: 4,
+        label: 'performance',
+      });
+    });
+
+    it('shows legal note', async () => {
+      expect(wrapper.text()).toContain(
+        'By continuing, you acknowledge that responses will be used to improve GitLab and in accordance with the GitLab Privacy Policy.',
+      );
+    });
+
+    it('hides legal note after first step', async () => {
+      const rate = wrapper.findComponent(SatisfactionRate);
+      rate.vm.$emit('rate', 5);
+      await nextTick();
+      expect(wrapper.text()).not.toContain(
+        'By continuing, you acknowledge that responses will be used to improve GitLab and in accordance with the GitLab Privacy Policy.',
+      );
+    });
+
+    it('shows disappearing thanks message', async () => {
+      const rate = wrapper.findComponent(SatisfactionRate);
+      rate.vm.$emit('rate', 5);
+      await nextTick();
+      rate.vm.$emit('rate', 5);
+      await nextTick();
+      expect(wrapper.text()).toContain('Thank you for your feedback!');
+      expect(wrapper.emitted()).toMatchObject({});
+      jest.runOnlyPendingTimers();
+      expect(wrapper.emitted()).toMatchObject({ close: [[]] });
+    });
+  });
+
+  describe('when user callout is hidden', () => {
+    beforeEach(() => {
+      createWrapper({ shouldShowCallout: false });
+    });
+
+    it('emits close event', async () => {
+      expect(wrapper.emitted()).toMatchObject({ close: [[]] });
+    });
+  });
+
+  describe('when Escape key is pressed', () => {
+    beforeEach(() => {
+      createWrapper();
+      const event = new KeyboardEvent('keyup', { key: 'Escape' });
+      document.dispatchEvent(event);
+    });
+
+    it('emits close event', async () => {
+      expect(wrapper.emitted()).toMatchObject({ close: [[]] });
+      expect(dismiss).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/spec/frontend/tabs/index_spec.js b/spec/frontend/tabs/index_spec.js
index 67e3d707adb..1d61d38a488 100644
--- a/spec/frontend/tabs/index_spec.js
+++ b/spec/frontend/tabs/index_spec.js
@@ -1,9 +1,16 @@
-import { GlTabsBehavior, TAB_SHOWN_EVENT } from '~/tabs';
+import { GlTabsBehavior, TAB_SHOWN_EVENT, HISTORY_TYPE_HASH } from '~/tabs';
 import { ACTIVE_PANEL_CLASS, ACTIVE_TAB_CLASSES } from '~/tabs/constants';
+import { getLocationHash } from '~/lib/utils/url_utility';
+import { NO_SCROLL_TO_HASH_CLASS } from '~/lib/utils/common_utils';
 import { getFixture, setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import setWindowLocation from 'helpers/set_window_location_helper';
 
 const tabsFixture = getFixture('tabs/tabs.html');
 
+global.CSS = {
+  escape: (val) => val,
+};
+
 describe('GlTabsBehavior', () => {
   let glTabs;
   let tabShownEventSpy;
@@ -41,6 +48,7 @@ describe('GlTabsBehavior', () => {
     });
 
     expect(panel.classList.contains(ACTIVE_PANEL_CLASS)).toBe(true);
+    expect(panel.classList.contains(NO_SCROLL_TO_HASH_CLASS)).toBe(true);
   };
 
   const expectInactiveTabAndPanel = (name) => {
@@ -67,6 +75,7 @@ describe('GlTabsBehavior', () => {
     });
 
     expect(panel.classList.contains(ACTIVE_PANEL_CLASS)).toBe(false);
+    expect(panel.classList.contains(NO_SCROLL_TO_HASH_CLASS)).toBe(true);
   };
 
   const expectGlTabShownEvent = (name) => {
@@ -263,4 +272,98 @@ describe('GlTabsBehavior', () => {
       expectInactiveTabAndPanel('foo');
     });
   });
+
+  describe('using history=hash', () => {
+    const defaultTab = 'foo';
+    let tab;
+    let tabsEl;
+
+    beforeEach(() => {
+      setHTMLFixture(tabsFixture);
+      tabsEl = findByTestId('tabs');
+    });
+
+    afterEach(() => {
+      glTabs.destroy();
+      resetHTMLFixture();
+    });
+
+    describe('when a hash exists onInit', () => {
+      beforeEach(() => {
+        tab = 'bar';
+        setWindowLocation(`http://foo.com/index#${tab}`);
+        glTabs = new GlTabsBehavior(tabsEl, { history: HISTORY_TYPE_HASH });
+      });
+
+      it('sets the active tab to the hash and preserves hash', () => {
+        expectActiveTabAndPanel(tab);
+        expect(getLocationHash()).toBe(tab);
+      });
+    });
+
+    describe('when a hash does not exist onInit', () => {
+      beforeEach(() => {
+        setWindowLocation(`http://foo.com/index`);
+        glTabs = new GlTabsBehavior(tabsEl, { history: HISTORY_TYPE_HASH });
+      });
+
+      it('sets the active tab to the first tab and sets hash', () => {
+        expectActiveTabAndPanel(defaultTab);
+        expect(getLocationHash()).toBe(defaultTab);
+      });
+    });
+
+    describe('clicking on an inactive tab', () => {
+      beforeEach(() => {
+        tab = 'qux';
+        setWindowLocation(`http://foo.com/index`);
+        glTabs = new GlTabsBehavior(tabsEl, { history: HISTORY_TYPE_HASH });
+
+        findTab(tab).click();
+      });
+
+      it('changes the tabs and updates the hash', () => {
+        expectInactiveTabAndPanel(defaultTab);
+        expectActiveTabAndPanel(tab);
+        expect(getLocationHash()).toBe(tab);
+      });
+    });
+
+    describe('keyboard navigation', () => {
+      const secondTab = 'bar';
+
+      beforeEach(() => {
+        setWindowLocation(`http://foo.com/index`);
+        glTabs = new GlTabsBehavior(tabsEl, { history: HISTORY_TYPE_HASH });
+      });
+
+      it.each(['ArrowRight', 'ArrowDown'])(
+        'pressing %s moves to next tab and updates hash',
+        (code) => {
+          expectActiveTabAndPanel(defaultTab);
+
+          triggerKeyDown(code, glTabs.activeTab);
+
+          expectInactiveTabAndPanel(defaultTab);
+          expectActiveTabAndPanel(secondTab);
+          expect(getLocationHash()).toBe(secondTab);
+        },
+      );
+
+      it.each(['ArrowLeft', 'ArrowUp'])(
+        'pressing %s moves to previous tab and updates hash',
+        (code) => {
+          // First, make the 2nd tab active
+          findTab(secondTab).click();
+          expectActiveTabAndPanel(secondTab);
+
+          triggerKeyDown(code, glTabs.activeTab);
+
+          expectInactiveTabAndPanel(secondTab);
+          expectActiveTabAndPanel(defaultTab);
+          expect(getLocationHash()).toBe(defaultTab);
+        },
+      );
+    });
+  });
 });
diff --git a/spec/frontend/test_setup.js b/spec/frontend/test_setup.js
index 6c336152e9a..b4626625f31 100644
--- a/spec/frontend/test_setup.js
+++ b/spec/frontend/test_setup.js
@@ -2,8 +2,6 @@
 import 'helpers/shared_test_setup';
 import { initializeTestTimeout } from 'helpers/timeout';
 
-jest.mock('~/lib/utils/axios_utils', () => jest.requireActual('helpers/mocks/axios_utils'));
-
 initializeTestTimeout(process.env.CI ? 6000 : 500);
 
 afterEach(() =>
diff --git a/spec/frontend/tracking/tracking_spec.js b/spec/frontend/tracking/tracking_spec.js
index 08da3a9a465..4871644d99f 100644
--- a/spec/frontend/tracking/tracking_spec.js
+++ b/spec/frontend/tracking/tracking_spec.js
@@ -412,7 +412,7 @@ describe('Tracking', () => {
         Tracking.setAnonymousUrls();
 
         expect(snowplowSpy).not.toHaveBeenCalledWith('setReferrerUrl', testUrl);
-        expect(localStorage.getItem(URLS_CACHE_STORAGE_KEY)).not.toContain(oldTimestamp);
+        expect(localStorage.getItem(URLS_CACHE_STORAGE_KEY)).not.toContain(oldTimestamp.toString());
       });
     });
   });
diff --git a/spec/frontend/user_lists/store/edit/mutations_spec.js b/spec/frontend/user_lists/store/edit/mutations_spec.js
index 7971906429b..e07d9c0a1b5 100644
--- a/spec/frontend/user_lists/store/edit/mutations_spec.js
+++ b/spec/frontend/user_lists/store/edit/mutations_spec.js
@@ -35,7 +35,7 @@ describe('User List Edit Mutations', () => {
     });
   });
 
-  describe(types.RECIEVE_USER_LIST_ERROR, () => {
+  describe(types.RECEIVE_USER_LIST_ERROR, () => {
     beforeEach(() => {
       mutations[types.RECEIVE_USER_LIST_ERROR](state, ['network error']);
     });
@@ -44,7 +44,7 @@ describe('User List Edit Mutations', () => {
       expect(state.status).toBe(statuses.ERROR);
     });
 
-    it('sets the error message to the recieved one', () => {
+    it('sets the error message to the received one', () => {
       expect(state.errorMessage).toEqual(['network error']);
     });
   });
diff --git a/spec/frontend/user_lists/store/new/mutations_spec.js b/spec/frontend/user_lists/store/new/mutations_spec.js
index a928849e941..647ddd9c062 100644
--- a/spec/frontend/user_lists/store/new/mutations_spec.js
+++ b/spec/frontend/user_lists/store/new/mutations_spec.js
@@ -9,7 +9,7 @@ describe('User List Edit Mutations', () => {
     state = createState({ projectId: '1' });
   });
 
-  describe(types.RECIEVE_USER_LIST_ERROR, () => {
+  describe(types.RECEIVE_USER_LIST_ERROR, () => {
     beforeEach(() => {
       mutations[types.RECEIVE_CREATE_USER_LIST_ERROR](state, ['network error']);
     });
diff --git a/spec/frontend/user_popovers_spec.js b/spec/frontend/user_popovers_spec.js
index 1544fed5240..b171c8fc9ed 100644
--- a/spec/frontend/user_popovers_spec.js
+++ b/spec/frontend/user_popovers_spec.js
@@ -12,12 +12,8 @@ jest.mock('~/api/user_api', () => ({
 describe('User Popovers', () => {
   const fixtureTemplate = 'merge_requests/merge_request_with_mentions.html';
 
-  const selector = '.js-user-link, .gfm-project_member';
-  const findFixtureLinks = () => {
-    return Array.from(document.querySelectorAll(selector)).filter(
-      ({ dataset }) => dataset.user || dataset.userId,
-    );
-  };
+  const selector = '.js-user-link[data-user], .js-user-link[data-user-id]';
+  const findFixtureLinks = () => Array.from(document.querySelectorAll(selector));
   const createUserLink = () => {
     const link = document.createElement('a');
 
@@ -95,6 +91,24 @@ describe('User Popovers', () => {
     });
   });
 
+  it('does not initialize the popovers for group references', async () => {
+    const [groupLink] = Array.from(document.querySelectorAll('.js-user-link[data-group]'));
+
+    triggerEvent('mouseover', groupLink);
+    jest.runOnlyPendingTimers();
+
+    expect(findPopovers().length).toBe(0);
+  });
+
+  it('does not initialize the popovers for @all references', async () => {
+    const [projectLink] = Array.from(document.querySelectorAll('.js-user-link[data-project]'));
+
+    triggerEvent('mouseover', projectLink);
+    jest.runOnlyPendingTimers();
+
+    expect(findPopovers().length).toBe(0);
+  });
+
   it('does not initialize the user popovers twice for the same element', async () => {
     const [firstUserLink] = findFixtureLinks();
     triggerEvent('mouseover', firstUserLink);
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_rebase_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_rebase_spec.js
index 6386746aee4..6db82cedd80 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_rebase_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_rebase_spec.js
@@ -2,6 +2,9 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import WidgetRebase from '~/vue_merge_request_widget/components/states/mr_widget_rebase.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
+import toast from '~/vue_shared/plugins/global_toast';
+
+jest.mock('~/vue_shared/plugins/global_toast');
 
 let wrapper;
 
@@ -261,6 +264,7 @@ describe('Merge request widget rebase component', () => {
                   return Promise.resolve({
                     data: {
                       rebase_in_progress: false,
+                      should_be_rebased: false,
                       merge_error: null,
                     },
                   });
@@ -280,6 +284,7 @@ describe('Merge request widget rebase component', () => {
           await nextTick();
 
           expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetRebaseSuccess');
+          expect(toast).toHaveBeenCalledWith('Rebase completed');
         });
       });
     });
diff --git a/spec/frontend/vue_mr_widget/deployment/deployment_action_button_spec.js b/spec/frontend/vue_mr_widget/deployment/deployment_action_button_spec.js
index 8c5036e35f6..7e7438bcc0f 100644
--- a/spec/frontend/vue_mr_widget/deployment/deployment_action_button_spec.js
+++ b/spec/frontend/vue_mr_widget/deployment/deployment_action_button_spec.js
@@ -60,7 +60,7 @@ describe('Deployment action button', () => {
 
     it('renders slot and icon prop correctly', () => {
       expect(wrapper.find(GlIcon).exists()).toBe(true);
-      expect(wrapper.text()).toContain(actionButtonMocks[DEPLOYING]);
+      expect(wrapper.text()).toContain(actionButtonMocks[DEPLOYING].toString());
     });
   });
 
diff --git a/spec/frontend/vue_mr_widget/extensions/test_report/index_spec.js b/spec/frontend/vue_mr_widget/extensions/test_report/index_spec.js
index da4b990c078..5c1d3c8e8e8 100644
--- a/spec/frontend/vue_mr_widget/extensions/test_report/index_spec.js
+++ b/spec/frontend/vue_mr_widget/extensions/test_report/index_spec.js
@@ -1,4 +1,4 @@
-import { GlButton } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import testReportExtension from '~/vue_merge_request_widget/extensions/test_report';
 import { i18n } from '~/vue_merge_request_widget/extensions/test_report/constants';
@@ -38,7 +38,8 @@ describe('Test report extension', () => {
   };
 
   const findToggleCollapsedButton = () => wrapper.findByTestId('toggle-button');
-  const findTertiaryButton = () => wrapper.find(GlButton);
+  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);
 
@@ -72,14 +73,23 @@ describe('Test report extension', () => {
   });
 
   describe('summary', () => {
-    it('displays loading text', () => {
+    it('displays loading state initially', () => {
       mockApi(httpStatusCodes.OK);
       createComponent();
 
       expect(wrapper.text()).toContain(i18n.loading);
     });
 
-    it('displays failed loading text', async () => {
+    it('with a 204 response, continues to display loading state', async () => {
+      mockApi(httpStatusCodes.NO_CONTENT, '');
+      createComponent();
+
+      await waitForPromises();
+
+      expect(wrapper.text()).toContain(i18n.loading);
+    });
+
+    it('with an error response, displays failed to load text', async () => {
       mockApi(httpStatusCodes.INTERNAL_SERVER_ERROR);
       createComponent();
 
@@ -121,8 +131,57 @@ describe('Test report extension', () => {
 
       await waitForPromises();
 
-      expect(findTertiaryButton().text()).toBe('Full report');
-      expect(findTertiaryButton().attributes('href')).toBe('pipeline/path/test_report');
+      expect(findFullReportLink().text()).toBe('Full report');
+      expect(findFullReportLink().attributes('href')).toBe('pipeline/path/test_report');
+    });
+
+    it('hides copy failed tests button when there are no failing tests', async () => {
+      mockApi(httpStatusCodes.OK);
+      createComponent();
+
+      await waitForPromises();
+
+      expect(findCopyFailedSpecsBtn().exists()).toBe(false);
+    });
+
+    it('displays copy failed tests button when there are failing tests', async () => {
+      mockApi(httpStatusCodes.OK, newFailedTestReports);
+      createComponent();
+
+      await waitForPromises();
+
+      expect(findCopyFailedSpecsBtn().exists()).toBe(true);
+      expect(findCopyFailedSpecsBtn().text()).toBe(i18n.copyFailedSpecs);
+      expect(findCopyFailedSpecsBtn().attributes('data-clipboard-text')).toBe(
+        'spec/file_1.rb spec/file_2.rb',
+      );
+    });
+
+    it('copy failed tests button updates tooltip text when clicked', async () => {
+      mockApi(httpStatusCodes.OK, newFailedTestReports);
+      createComponent();
+
+      await waitForPromises();
+
+      // original tooltip shows up
+      expect(findCopyFailedSpecsBtn().attributes()).toMatchObject({
+        title: i18n.copyFailedSpecsTooltip,
+      });
+
+      await findCopyFailedSpecsBtn().trigger('click');
+
+      // tooltip text is replaced for 1 second
+      expect(findCopyFailedSpecsBtn().attributes()).toMatchObject({
+        title: 'Copied',
+      });
+
+      jest.runAllTimers();
+      await nextTick();
+
+      // tooltip reverts back to original string
+      expect(findCopyFailedSpecsBtn().attributes()).toMatchObject({
+        title: i18n.copyFailedSpecsTooltip,
+      });
     });
 
     it('shows an error when a suite has a parsing error', async () => {
diff --git a/spec/frontend/vue_mr_widget/extensions/test_report/utils_spec.js b/spec/frontend/vue_mr_widget/extensions/test_report/utils_spec.js
new file mode 100644
index 00000000000..69ea70549fe
--- /dev/null
+++ b/spec/frontend/vue_mr_widget/extensions/test_report/utils_spec.js
@@ -0,0 +1,242 @@
+import * as utils from '~/vue_merge_request_widget/extensions/test_report/utils';
+
+describe('test report widget extension utils', () => {
+  describe('summaryTextbuilder', () => {
+    it('should render text for no changed results in multiple tests', () => {
+      const name = 'Test summary';
+      const data = { total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Test summary: %{strong_start}no%{strong_end} changed test results, %{strong_start}10%{strong_end} total tests',
+      );
+    });
+
+    it('should render text for no changed results in one test', () => {
+      const name = 'Test summary';
+      const data = { total: 1 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Test summary: %{strong_start}no%{strong_end} changed test results, %{strong_start}1%{strong_end} total test',
+      );
+    });
+
+    it('should render text for multiple failed results', () => {
+      const name = 'Test summary';
+      const data = { failed: 3, total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Test summary: %{strong_start}3%{strong_end} failed, %{strong_start}10%{strong_end} total tests',
+      );
+    });
+
+    it('should render text for multiple errored results', () => {
+      const name = 'Test summary';
+      const data = { errored: 7, total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Test summary: %{strong_start}7%{strong_end} errors, %{strong_start}10%{strong_end} total tests',
+      );
+    });
+
+    it('should render text for multiple fixed results', () => {
+      const name = 'Test summary';
+      const data = { resolved: 4, total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Test summary: %{strong_start}4%{strong_end} fixed test results, %{strong_start}10%{strong_end} total tests',
+      );
+    });
+
+    it('should render text for multiple fixed, and multiple failed results', () => {
+      const name = 'Test summary';
+      const data = { failed: 3, resolved: 4, total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Test summary: %{strong_start}3%{strong_end} failed and %{strong_start}4%{strong_end} fixed test results, %{strong_start}10%{strong_end} total tests',
+      );
+    });
+
+    it('should render text for a singular fixed, and a singular failed result', () => {
+      const name = 'Test summary';
+      const data = { failed: 1, resolved: 1, total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Test summary: %{strong_start}1%{strong_end} failed and %{strong_start}1%{strong_end} fixed test result, %{strong_start}10%{strong_end} total tests',
+      );
+    });
+
+    it('should render text for singular failed, errored, and fixed results', () => {
+      const name = 'Test summary';
+      const data = { failed: 1, errored: 1, resolved: 1, total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Test summary: %{strong_start}1%{strong_end} failed, %{strong_start}1%{strong_end} error and %{strong_start}1%{strong_end} fixed test result, %{strong_start}10%{strong_end} total tests',
+      );
+    });
+
+    it('should render text for multiple failed, errored, and fixed results', () => {
+      const name = 'Test summary';
+      const data = { failed: 2, errored: 3, resolved: 4, total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Test summary: %{strong_start}2%{strong_end} failed, %{strong_start}3%{strong_end} errors and %{strong_start}4%{strong_end} fixed test results, %{strong_start}10%{strong_end} total tests',
+      );
+    });
+  });
+
+  describe('reportTextBuilder', () => {
+    const name = 'Rspec';
+
+    it('should render text for no changed results in multiple tests', () => {
+      const data = { name, summary: { total: 10 } };
+      const result = utils.reportTextBuilder(data);
+
+      expect(result).toBe('Rspec: no changed test results, 10 total tests');
+    });
+
+    it('should render text for no changed results in one test', () => {
+      const data = { name, summary: { total: 1 } };
+      const result = utils.reportTextBuilder(data);
+
+      expect(result).toBe('Rspec: no changed test results, 1 total test');
+    });
+
+    it('should render text for multiple failed results', () => {
+      const data = { name, summary: { failed: 3, total: 10 } };
+      const result = utils.reportTextBuilder(data);
+
+      expect(result).toBe('Rspec: 3 failed, 10 total tests');
+    });
+
+    it('should render text for multiple errored results', () => {
+      const data = { name, summary: { errored: 7, total: 10 } };
+      const result = utils.reportTextBuilder(data);
+
+      expect(result).toBe('Rspec: 7 errors, 10 total tests');
+    });
+
+    it('should render text for multiple fixed results', () => {
+      const data = { name, summary: { resolved: 4, total: 10 } };
+      const result = utils.reportTextBuilder(data);
+
+      expect(result).toBe('Rspec: 4 fixed test results, 10 total tests');
+    });
+
+    it('should render text for multiple fixed, and multiple failed results', () => {
+      const data = { name, summary: { failed: 3, resolved: 4, total: 10 } };
+      const result = utils.reportTextBuilder(data);
+
+      expect(result).toBe('Rspec: 3 failed and 4 fixed test results, 10 total tests');
+    });
+
+    it('should render text for a singular fixed, and a singular failed result', () => {
+      const data = { name, summary: { failed: 1, resolved: 1, total: 10 } };
+      const result = utils.reportTextBuilder(data);
+
+      expect(result).toBe('Rspec: 1 failed and 1 fixed test result, 10 total tests');
+    });
+
+    it('should render text for singular failed, errored, and fixed results', () => {
+      const data = { name, summary: { failed: 1, errored: 1, resolved: 1, total: 10 } };
+      const result = utils.reportTextBuilder(data);
+
+      expect(result).toBe('Rspec: 1 failed, 1 error and 1 fixed test result, 10 total tests');
+    });
+
+    it('should render text for multiple failed, errored, and fixed results', () => {
+      const data = { name, summary: { failed: 2, errored: 3, resolved: 4, total: 10 } };
+      const result = utils.reportTextBuilder(data);
+
+      expect(result).toBe('Rspec: 2 failed, 3 errors and 4 fixed test results, 10 total tests');
+    });
+  });
+
+  describe('recentFailuresTextBuilder', () => {
+    it.each`
+      recentlyFailed | failed | expected
+      ${0}           | ${1}   | ${''}
+      ${1}           | ${1}   | ${'1 out of 1 failed test has failed more than once in the last 14 days'}
+      ${1}           | ${2}   | ${'1 out of 2 failed tests has failed more than once in the last 14 days'}
+      ${2}           | ${3}   | ${'2 out of 3 failed tests have failed more than once in the last 14 days'}
+    `(
+      'should render summary for $recentlyFailed out of $failed failures',
+      ({ recentlyFailed, failed, expected }) => {
+        const result = utils.recentFailuresTextBuilder({ recentlyFailed, failed });
+
+        expect(result).toBe(expected);
+      },
+    );
+  });
+
+  describe('countRecentlyFailedTests', () => {
+    it('counts tests with more than one recent failure in a report', () => {
+      const report = {
+        new_failures: [{ recent_failures: { count: 2 } }],
+        existing_failures: [{ recent_failures: { count: 1 } }],
+        resolved_failures: [{ recent_failures: { count: 20 } }, { recent_failures: { count: 5 } }],
+      };
+      const result = utils.countRecentlyFailedTests(report);
+
+      expect(result).toBe(3);
+    });
+
+    it('counts tests  with more than one recent failure in an array of reports', () => {
+      const reports = [
+        {
+          new_failures: [{ recent_failures: { count: 2 } }],
+          existing_failures: [
+            { recent_failures: { count: 20 } },
+            { recent_failures: { count: 5 } },
+          ],
+          resolved_failures: [{ recent_failures: { count: 2 } }],
+        },
+        {
+          new_failures: [{ recent_failures: { count: 8 } }, { recent_failures: { count: 14 } }],
+          existing_failures: [{ recent_failures: { count: 1 } }],
+          resolved_failures: [{ recent_failures: { count: 7 } }, { recent_failures: { count: 5 } }],
+        },
+      ];
+      const result = utils.countRecentlyFailedTests(reports);
+
+      expect(result).toBe(8);
+    });
+
+    it.each([
+      [],
+      {},
+      null,
+      undefined,
+      { new_failures: undefined },
+      [{ existing_failures: null }],
+      { resolved_failures: [{}] },
+      [{ new_failures: [{ recent_failures: {} }] }],
+    ])('returns 0 when subject is %s', (subject) => {
+      const result = utils.countRecentlyFailedTests(subject);
+
+      expect(result).toBe(0);
+    });
+  });
+
+  describe('formatFilePath', () => {
+    it.each`
+      file                        | expected
+      ${'./test.js'}              | ${'test.js'}
+      ${'/test.js'}               | ${'test.js'}
+      ${'.//////////////test.js'} | ${'test.js'}
+      ${'test.js'}                | ${'test.js'}
+      ${'mock/path./test.js'}     | ${'mock/path./test.js'}
+      ${'./mock/path./test.js'}   | ${'mock/path./test.js'}
+    `('should format $file to be $expected', ({ file, expected }) => {
+      expect(utils.formatFilePath(file)).toBe(expected);
+    });
+  });
+});
diff --git a/spec/frontend/vue_mr_widget/extentions/accessibility/index_spec.js b/spec/frontend/vue_mr_widget/extentions/accessibility/index_spec.js
index 6d1b3bb34a5..a06ad930abe 100644
--- a/spec/frontend/vue_mr_widget/extentions/accessibility/index_spec.js
+++ b/spec/frontend/vue_mr_widget/extentions/accessibility/index_spec.js
@@ -62,7 +62,7 @@ describe('Accessibility extension', () => {
       expect(wrapper.text()).toBe('Accessibility scanning failed loading results');
     });
 
-    it('displays detected errors', async () => {
+    it('displays detected errors and is expandable', async () => {
       mockApi(httpStatusCodes.OK, accessibilityReportResponseErrors);
 
       createComponent();
@@ -72,9 +72,10 @@ describe('Accessibility extension', () => {
       expect(wrapper.text()).toBe(
         'Accessibility scanning detected 8 issues for the source branch only',
       );
+      expect(findToggleCollapsedButton().exists()).toBe(true);
     });
 
-    it('displays no detected errors', async () => {
+    it('displays no detected errors and is not expandable', async () => {
       mockApi(httpStatusCodes.OK, accessibilityReportResponseSuccess);
 
       createComponent();
@@ -84,6 +85,7 @@ describe('Accessibility extension', () => {
       expect(wrapper.text()).toBe(
         'Accessibility scanning detected no issues for the source branch only',
       );
+      expect(findToggleCollapsedButton().exists()).toBe(false);
     });
   });
 
diff --git a/spec/frontend/vue_mr_widget/extentions/terraform/index_spec.js b/spec/frontend/vue_mr_widget/extentions/terraform/index_spec.js
index 77b3576a3d3..d9faa7b2d25 100644
--- a/spec/frontend/vue_mr_widget/extentions/terraform/index_spec.js
+++ b/spec/frontend/vue_mr_widget/extentions/terraform/index_spec.js
@@ -142,11 +142,11 @@ describe('Terraform extension', () => {
 
       expect(api.trackRedisHllUserEvent).toHaveBeenCalledTimes(1);
       expect(api.trackRedisHllUserEvent).toHaveBeenCalledWith(
-        'i_merge_request_widget_terraform_click_full_report',
+        'i_code_review_merge_request_widget_terraform_click_full_report',
       );
       expect(api.trackRedisCounterEvent).toHaveBeenCalledTimes(1);
       expect(api.trackRedisCounterEvent).toHaveBeenCalledWith(
-        'i_merge_request_widget_terraform_count_click_full_report',
+        'i_code_review_merge_request_widget_terraform_count_click_full_report',
       );
     });
   });
diff --git a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
index 6abbb052aef..b3af5eba364 100644
--- a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
@@ -32,6 +32,7 @@ import {
   fullReportExtension,
   noTelemetryExtension,
   pollingExtension,
+  pollingFullDataExtension,
   pollingErrorExtension,
   multiPollingExtension,
 } from './test_extensions';
@@ -42,6 +43,13 @@ jest.mock('~/smart_interval');
 
 jest.mock('~/lib/utils/favicon');
 
+jest.mock('@sentry/browser', () => ({
+  setExtra: jest.fn(),
+  setExtras: jest.fn(),
+  captureMessage: jest.fn(),
+  captureException: jest.fn(),
+}));
+
 Vue.use(VueApollo);
 
 describe('MrWidgetOptions', () => {
@@ -66,24 +74,16 @@ describe('MrWidgetOptions', () => {
   afterEach(() => {
     mock.restore();
     wrapper.destroy();
-    wrapper = null;
 
     gl.mrWidgetData = {};
     gon.features = {};
   });
 
-  const createComponent = (mrData = mockData, options = {}, glFeatures = {}) => {
-    if (wrapper) {
-      wrapper.destroy();
-    }
-
+  const createComponent = (mrData = mockData, options = {}) => {
     wrapper = mount(MrWidgetOptions, {
       propsData: {
         mrData: { ...mrData },
       },
-      provide: {
-        glFeatures,
-      },
       ...options,
     });
 
@@ -521,7 +521,7 @@ describe('MrWidgetOptions', () => {
 
     describe('rendering relatedLinks', () => {
       beforeEach(() => {
-        createComponent({
+        return createComponent({
           ...mockData,
           issues_links: {
             closing: `
@@ -531,8 +531,10 @@ describe('MrWidgetOptions', () => {
             `,
           },
         });
+      });
 
-        return nextTick();
+      afterEach(() => {
+        wrapper.destroy();
       });
 
       it('renders if there are relatedLinks', () => {
@@ -875,8 +877,8 @@ describe('MrWidgetOptions', () => {
     });
 
     describe('given feature flag is enabled', () => {
-      beforeEach(() => {
-        createComponent();
+      beforeEach(async () => {
+        await createComponent();
 
         wrapper.vm.mr.hasCI = false;
       });
@@ -905,6 +907,19 @@ describe('MrWidgetOptions', () => {
     });
   });
 
+  describe('merge error', () => {
+    it.each`
+      state       | show     | showText
+      ${'closed'} | ${false} | ${'hides'}
+      ${'merged'} | ${true}  | ${'shows'}
+      ${'open'}   | ${true}  | ${'shows'}
+    `('it $showText merge error when state is $state', ({ state, show }) => {
+      createComponent({ ...mockData, state, merge_error: 'Error!' });
+
+      expect(wrapper.find('[data-testid="merge_error"]').exists()).toBe(show);
+    });
+  });
+
   describe('mock extension', () => {
     let pollRequest;
 
@@ -917,8 +932,6 @@ describe('MrWidgetOptions', () => {
     });
 
     afterEach(() => {
-      pollRequest.mockRestore();
-
       registeredExtensions.extensions = [];
     });
 
@@ -970,16 +983,14 @@ describe('MrWidgetOptions', () => {
   describe('expansion', () => {
     it('hides collapse button', async () => {
       registerExtension(workingExtension(false));
-      createComponent();
-      await waitForPromises();
+      await createComponent();
 
       expect(findExtensionToggleButton().exists()).toBe(false);
     });
 
     it('shows collapse button', async () => {
       registerExtension(workingExtension(true));
-      createComponent();
-      await waitForPromises();
+      await createComponent();
 
       expect(findExtensionToggleButton().exists()).toBe(true);
     });
@@ -997,17 +1008,7 @@ describe('MrWidgetOptions', () => {
     });
 
     afterEach(() => {
-      pollRequest.mockRestore();
-
       registeredExtensions.extensions = [];
-
-      // Clear all left-over timeouts that may be registered in the poll class
-      let id = window.setTimeout(() => {}, 0);
-
-      while (id > 0) {
-        window.clearTimeout(id);
-        id -= 1;
-      }
     });
 
     describe('success - multi polling', () => {
@@ -1058,87 +1059,81 @@ describe('MrWidgetOptions', () => {
     describe('success', () => {
       it('does not make additional requests after poll is successful', async () => {
         registerExtension(pollingExtension);
+
         await createComponent();
-        // called two times due to parent component polling (mount) and extension polling
-        expect(pollRequest).toHaveBeenCalledTimes(2);
+
+        expect(pollRequest).toHaveBeenCalledTimes(6);
       });
+    });
+
+    describe('success - full data polling', () => {
+      it('sets data when polling is complete', async () => {
+        registerExtension(pollingFullDataExtension);
 
-      it('keeps polling when poll-interval header is provided', async () => {
-        registerExtension({
-          ...pollingExtension,
-          methods: {
-            ...pollingExtension.methods,
-            fetchCollapsedData() {
-              return Promise.resolve({
-                data: {},
-                headers: { 'poll-interval': 1 },
-                status: 204,
-              });
-            },
-          },
-        });
         await createComponent();
-        expect(findWidgetTestExtension().html()).toContain('Test extension loading...');
+
+        api.trackRedisHllUserEvent.mockClear();
+        api.trackRedisCounterEvent.mockClear();
+
+        findExtensionToggleButton().trigger('click');
+
+        // The default working extension is a "warning" type, which generates a second - more specific - telemetry event for expansions
+        expect(api.trackRedisHllUserEvent).toHaveBeenCalledTimes(2);
+        expect(api.trackRedisHllUserEvent).toHaveBeenCalledWith(
+          'i_code_review_merge_request_widget_test_extension_expand',
+        );
+        expect(api.trackRedisHllUserEvent).toHaveBeenCalledWith(
+          'i_code_review_merge_request_widget_test_extension_expand_warning',
+        );
+        expect(api.trackRedisCounterEvent).toHaveBeenCalledTimes(2);
+        expect(api.trackRedisCounterEvent).toHaveBeenCalledWith(
+          'i_code_review_merge_request_widget_test_extension_count_expand',
+        );
+        expect(api.trackRedisCounterEvent).toHaveBeenCalledWith(
+          'i_code_review_merge_request_widget_test_extension_count_expand_warning',
+        );
       });
     });
 
     describe('error', () => {
-      let captureException;
-
-      beforeEach(() => {
-        captureException = jest.spyOn(Sentry, 'captureException');
-
+      it('does not make additional requests after poll has failed', async () => {
         registerExtension(pollingErrorExtension);
+        await createComponent();
 
-        createComponent();
+        expect(pollRequest).toHaveBeenCalledTimes(6);
       });
 
-      it('does not make additional requests after poll has failed', () => {
-        // called two times due to parent component polling (mount) and extension polling
-        expect(pollRequest).toHaveBeenCalledTimes(2);
-      });
+      it('captures sentry error and displays error when poll has failed', async () => {
+        registerExtension(pollingErrorExtension);
+        await createComponent();
 
-      it('captures sentry error and displays error when poll has failed', () => {
-        expect(captureException).toHaveBeenCalledTimes(1);
-        expect(captureException).toHaveBeenCalledWith(new Error('Fetch error'));
+        expect(Sentry.captureException).toHaveBeenCalledTimes(5);
+        expect(Sentry.captureException).toHaveBeenCalledWith(new Error('Fetch error'));
         expect(wrapper.findComponent(StatusIcon).props('iconName')).toBe('failed');
       });
     });
   });
 
   describe('mock extension errors', () => {
-    let captureException;
-
-    const itHandlesTheException = () => {
-      expect(captureException).toHaveBeenCalledTimes(1);
-      expect(captureException).toHaveBeenCalledWith(new Error('Fetch error'));
-      expect(wrapper.findComponent(StatusIcon).props('iconName')).toBe('failed');
-    };
-
-    beforeEach(() => {
-      captureException = jest.spyOn(Sentry, 'captureException');
-    });
-
     afterEach(() => {
       registeredExtensions.extensions = [];
-      captureException = null;
     });
 
     it('handles collapsed data fetch errors', async () => {
       registerExtension(collapsedDataErrorExtension);
-      createComponent();
-      await waitForPromises();
+      await createComponent();
 
       expect(
         wrapper.find('[data-testid="widget-extension"] [data-testid="toggle-button"]').exists(),
       ).toBe(false);
-      itHandlesTheException();
+      expect(Sentry.captureException).toHaveBeenCalledTimes(5);
+      expect(Sentry.captureException).toHaveBeenCalledWith(new Error('Fetch error'));
+      expect(wrapper.findComponent(StatusIcon).props('iconName')).toBe('failed');
     });
 
     it('handles full data fetch errors', async () => {
       registerExtension(fullDataErrorExtension);
-      createComponent();
-      await waitForPromises();
+      await createComponent();
 
       expect(wrapper.findComponent(StatusIcon).props('iconName')).not.toBe('error');
       wrapper
@@ -1148,7 +1143,9 @@ describe('MrWidgetOptions', () => {
       await nextTick();
       await waitForPromises();
 
-      itHandlesTheException();
+      expect(Sentry.captureException).toHaveBeenCalledTimes(1);
+      expect(Sentry.captureException).toHaveBeenCalledWith(new Error('Fetch error'));
+      expect(wrapper.findComponent(StatusIcon).props('iconName')).toBe('failed');
     });
   });
 
@@ -1163,11 +1160,11 @@ describe('MrWidgetOptions', () => {
 
       expect(api.trackRedisHllUserEvent).toHaveBeenCalledTimes(1);
       expect(api.trackRedisHllUserEvent).toHaveBeenCalledWith(
-        'i_merge_request_widget_test_extension_view',
+        'i_code_review_merge_request_widget_test_extension_view',
       );
       expect(api.trackRedisCounterEvent).toHaveBeenCalledTimes(1);
       expect(api.trackRedisCounterEvent).toHaveBeenCalledWith(
-        'i_merge_request_widget_test_extension_count_view',
+        'i_code_review_merge_request_widget_test_extension_count_view',
       );
     });
 
@@ -1186,17 +1183,17 @@ describe('MrWidgetOptions', () => {
         // The default working extension is a "warning" type, which generates a second - more specific - telemetry event for expansions
         expect(api.trackRedisHllUserEvent).toHaveBeenCalledTimes(2);
         expect(api.trackRedisHllUserEvent).toHaveBeenCalledWith(
-          'i_merge_request_widget_test_extension_expand',
+          'i_code_review_merge_request_widget_test_extension_expand',
         );
         expect(api.trackRedisHllUserEvent).toHaveBeenCalledWith(
-          'i_merge_request_widget_test_extension_expand_warning',
+          'i_code_review_merge_request_widget_test_extension_expand_warning',
         );
         expect(api.trackRedisCounterEvent).toHaveBeenCalledTimes(2);
         expect(api.trackRedisCounterEvent).toHaveBeenCalledWith(
-          'i_merge_request_widget_test_extension_count_expand',
+          'i_code_review_merge_request_widget_test_extension_count_expand',
         );
         expect(api.trackRedisCounterEvent).toHaveBeenCalledWith(
-          'i_merge_request_widget_test_extension_count_expand_warning',
+          'i_code_review_merge_request_widget_test_extension_count_expand_warning',
         );
       });
 
@@ -1239,11 +1236,11 @@ describe('MrWidgetOptions', () => {
 
       expect(api.trackRedisHllUserEvent).toHaveBeenCalledTimes(1);
       expect(api.trackRedisHllUserEvent).toHaveBeenCalledWith(
-        'i_merge_request_widget_test_extension_click_full_report',
+        'i_code_review_merge_request_widget_test_extension_click_full_report',
       );
       expect(api.trackRedisCounterEvent).toHaveBeenCalledTimes(1);
       expect(api.trackRedisCounterEvent).toHaveBeenCalledWith(
-        'i_merge_request_widget_test_extension_count_click_full_report',
+        'i_code_review_merge_request_widget_test_extension_count_click_full_report',
       );
     });
 
diff --git a/spec/frontend/vue_mr_widget/test_extensions.js b/spec/frontend/vue_mr_widget/test_extensions.js
index 76644e0be77..1977f550577 100644
--- a/spec/frontend/vue_mr_widget/test_extensions.js
+++ b/spec/frontend/vue_mr_widget/test_extensions.js
@@ -109,6 +109,39 @@ export const pollingExtension = {
   enablePolling: true,
 };
 
+export const pollingFullDataExtension = {
+  ...workingExtension(),
+  enableExpandedPolling: true,
+  methods: {
+    fetchCollapsedData({ targetProjectFullPath }) {
+      return Promise.resolve({ targetProjectFullPath, count: 1 });
+    },
+    fetchFullData() {
+      return Promise.resolve([
+        {
+          headers: { 'poll-interval': 0 },
+          status: 200,
+          data: {
+            id: 1,
+            text: 'Hello world',
+            icon: {
+              name: EXTENSION_ICONS.failed,
+            },
+            badge: {
+              text: 'Closed',
+            },
+            link: {
+              href: 'https://gitlab.com',
+              text: 'GitLab.com',
+            },
+            actions: [{ text: 'Full report', href: 'https://gitlab.com', target: '_blank' }],
+          },
+        },
+      ]);
+    },
+  },
+};
+
 export const fullReportExtension = {
   ...workingExtension(),
   computed: {
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 93b59800c27..441e21ee905 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
@@ -84,15 +84,15 @@ describe('LabelsSelectRoot', () => {
   });
 
   describe('if the variant is `sidebar`', () => {
-    beforeEach(() => {
+    it('renders SidebarEditableItem component', () => {
       createComponent();
-    });
 
-    it('renders SidebarEditableItem component', () => {
       expect(findSidebarEditableItem().exists()).toBe(true);
     });
 
     it('renders correct props for the SidebarEditableItem component', () => {
+      createComponent();
+
       expect(findSidebarEditableItem().props()).toMatchObject({
         title: wrapper.vm.$options.i18n.widgetTitle,
         canEdit: defaultProps.allowEdit,
@@ -135,7 +135,7 @@ describe('LabelsSelectRoot', () => {
 
     it('handles DropdownContents setColor', () => {
       findDropdownContents().vm.$emit('setColor', color);
-      expect(wrapper.emitted('updateSelectedColor')).toEqual([[color]]);
+      expect(wrapper.emitted('updateSelectedColor')).toEqual([[{ color }]]);
     });
   });
 
@@ -157,20 +157,24 @@ describe('LabelsSelectRoot', () => {
     createComponent({ propsData: { iid: undefined } });
 
     findDropdownContents().vm.$emit('setColor', color);
-    expect(wrapper.emitted('updateSelectedColor')).toEqual([[color]]);
+    expect(wrapper.emitted('updateSelectedColor')).toEqual([[{ color }]]);
   });
 
   describe('when updating color for epic', () => {
-    beforeEach(() => {
+    const setup = () => {
       createComponent();
       findDropdownContents().vm.$emit('setColor', color);
-    });
+    };
 
     it('sets the loading state', () => {
+      setup();
+
       expect(findSidebarEditableItem().props('loading')).toBe(true);
     });
 
     it('updates color correctly after successful mutation', async () => {
+      setup();
+
       await waitForPromises();
       expect(findDropdownValue().props('selectedColor').color).toEqual(
         updateColorMutationResponse.data.updateIssuableColor.issuable.color,
diff --git a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js
index 74f50b878e2..ee4d3a2630a 100644
--- a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js
+++ b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js
@@ -1,57 +1,30 @@
-import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import { GlDropdown } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { DROPDOWN_VARIANT } from '~/vue_shared/components/color_select_dropdown/constants';
 import DropdownContents from '~/vue_shared/components/color_select_dropdown/dropdown_contents.vue';
 import DropdownContentsColorView from '~/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue';
+import DropdownHeader from '~/vue_shared/components/color_select_dropdown/dropdown_header.vue';
 
 import { color } from './mock_data';
 
-const showDropdown = jest.fn();
-const focusInput = jest.fn();
-
 const defaultProps = {
   dropdownTitle: '',
   selectedColor: color,
-  dropdownButtonText: '',
+  dropdownButtonText: 'Pick a color',
   variant: '',
   isVisible: false,
 };
 
-const GlDropdownStub = {
-  template: `
-    <div>
-      <slot name="header"></slot>
-      <slot></slot>
-    </div>
-  `,
-  methods: {
-    show: showDropdown,
-    hide: jest.fn(),
-  },
-};
-
-const DropdownHeaderStub = {
-  template: `
-    <div>Hello, I am a header</div>
-  `,
-  methods: {
-    focusInput,
-  },
-};
-
 describe('DropdownContent', () => {
   let wrapper;
 
   const createComponent = ({ propsData = {} } = {}) => {
-    wrapper = shallowMount(DropdownContents, {
+    wrapper = mountExtended(DropdownContents, {
       propsData: {
         ...defaultProps,
         ...propsData,
       },
-      stubs: {
-        GlDropdown: GlDropdownStub,
-        DropdownHeader: DropdownHeaderStub,
-      },
     });
   };
 
@@ -60,16 +33,17 @@ describe('DropdownContent', () => {
   });
 
   const findColorView = () => wrapper.findComponent(DropdownContentsColorView);
-  const findDropdownHeader = () => wrapper.findComponent(DropdownHeaderStub);
-  const findDropdown = () => wrapper.findComponent(GlDropdownStub);
+  const findDropdownHeader = () => wrapper.findComponent(DropdownHeader);
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
 
   it('calls dropdown `show` method on `isVisible` prop change', async () => {
     createComponent();
+    const spy = jest.spyOn(wrapper.vm.$refs.dropdown, 'show');
     await wrapper.setProps({
       isVisible: true,
     });
 
-    expect(showDropdown).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledTimes(1);
   });
 
   it('does not emit `setColor` event on dropdown hide if color did not change', () => {
@@ -110,4 +84,12 @@ describe('DropdownContent', () => {
 
     expect(findDropdownHeader().exists()).toBe(true);
   });
+
+  it('handles no selected color', () => {
+    createComponent({ propsData: { selectedColor: {} } });
+
+    expect(wrapper.findByTestId('fallback-button-text').text()).toEqual(
+      defaultProps.dropdownButtonText,
+    );
+  });
 });
diff --git a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js
index f22592dd604..5bbdb136353 100644
--- a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js
+++ b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js
@@ -33,7 +33,7 @@ describe('DropdownValue', () => {
 
     it.each`
       index | cssClass
-      ${0}  | ${['gl-font-base', 'gl-line-height-24']}
+      ${0}  | ${[]}
       ${1}  | ${['hide-collapsed']}
     `(
       'passes correct props to the ColorItem with CSS class `$cssClass`',
diff --git a/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js b/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js
index e3d8bfd22ca..79001b9282f 100644
--- a/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js
+++ b/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js
@@ -1,7 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import DeployBoardInstance from '~/vue_shared/components/deployment_instance.vue';
-import { folder } from './mock_data';
 
 describe('Deploy Board Instance', () => {
   let wrapper;
@@ -13,7 +12,6 @@ describe('Deploy Board Instance', () => {
         ...props,
       },
       provide: {
-        glFeatures: { monitorLogging: true },
         ...provide,
       },
     });
@@ -25,7 +23,6 @@ describe('Deploy Board Instance', () => {
 
     it('should render a div with the correct css status and tooltip data', () => {
       wrapper = createComponent({
-        logsPath: folder.logs_path,
         tooltipText: 'This is a pod',
       });
 
@@ -43,17 +40,6 @@ describe('Deploy Board Instance', () => {
       expect(wrapper.classes('deployment-instance-deploying')).toBe(true);
       expect(wrapper.attributes('title')).toEqual('');
     });
-
-    it('should have a log path computed with a pod name as a parameter', () => {
-      wrapper = createComponent({
-        logsPath: folder.logs_path,
-        podName: 'tanuki-1',
-      });
-
-      expect(wrapper.vm.computedLogPath).toEqual(
-        '/root/review-app/-/logs?environment_name=foo&pod_name=tanuki-1',
-      );
-    });
   });
 
   describe('as a canary deployment', () => {
@@ -76,46 +62,10 @@ describe('Deploy Board Instance', () => {
       wrapper.destroy();
     });
 
-    it('should not be a link without a logsPath prop', async () => {
-      wrapper = createComponent({
-        stable: false,
-        logsPath: '',
-      });
-
-      await nextTick();
-      expect(wrapper.vm.computedLogPath).toBeNull();
-      expect(wrapper.vm.isLink).toBeFalsy();
-    });
-
-    it('should render a link without href if path is not passed', () => {
-      wrapper = createComponent();
-
-      expect(wrapper.attributes('href')).toBeUndefined();
-    });
-
     it('should not have a tooltip', () => {
       wrapper = createComponent();
 
       expect(wrapper.attributes('title')).toEqual('');
     });
   });
-
-  describe(':monitor_logging feature flag', () => {
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
-    it.each`
-      flagState | logsState  | expected
-      ${true}   | ${'shows'} | ${'/root/review-app/-/logs?environment_name=foo&pod_name=tanuki-1'}
-      ${false}  | ${'hides'} | ${undefined}
-    `('$logsState log link when flag state is $flagState', async ({ flagState, expected }) => {
-      wrapper = createComponent(
-        { logsPath: folder.logs_path, podName: 'tanuki-1' },
-        { glFeatures: { monitorLogging: flagState } },
-      );
-
-      expect(wrapper.attributes('href')).toEqual(expected);
-    });
-  });
 });
diff --git a/spec/frontend/vue_shared/components/deployment_instance/mock_data.js b/spec/frontend/vue_shared/components/deployment_instance/mock_data.js
index 6618c57948c..098787cd1b4 100644
--- a/spec/frontend/vue_shared/components/deployment_instance/mock_data.js
+++ b/spec/frontend/vue_shared/components/deployment_instance/mock_data.js
@@ -140,5 +140,4 @@ export const folder = {
   created_at: '2017-02-01T19:42:18.400Z',
   updated_at: '2017-02-01T19:42:18.400Z',
   rollout_status: {},
-  logs_path: '/root/review-app/-/logs?environment_name=foo',
 };
diff --git a/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
index d0fa8b8dacb..16f924b44d8 100644
--- a/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
@@ -1,11 +1,9 @@
 import { mount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
-import { compileToFunctions } from 'vue-template-compiler';
-
+import { nextTick } from 'vue';
 import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
-import imageDiffViewer from '~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue';
+import ImageDiffViewer from '~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue';
 
-describe('ImageDiffViewer', () => {
+describe('ImageDiffViewer component', () => {
   const requiredProps = {
     diffMode: 'replaced',
     newPath: GREEN_BOX_IMAGE_URL,
@@ -17,15 +15,12 @@ describe('ImageDiffViewer', () => {
     newSize: 1024,
   };
   let wrapper;
-  let vm;
 
-  function createComponent(props) {
-    const ImageDiffViewer = Vue.extend(imageDiffViewer);
-    wrapper = mount(ImageDiffViewer, { propsData: props });
-    vm = wrapper.vm;
-  }
+  const createComponent = (props, slots) => {
+    wrapper = mount(ImageDiffViewer, { propsData: props, slots });
+  };
 
-  const triggerEvent = (eventName, el = vm.$el, clientX = 0) => {
+  const triggerEvent = (eventName, el = wrapper.$el, clientX = 0) => {
     const event = new MouseEvent(eventName, {
       bubbles: true,
       cancelable: true,
@@ -51,128 +46,76 @@ describe('ImageDiffViewer', () => {
     wrapper.destroy();
   });
 
-  it('renders image diff for replaced', async () => {
-    createComponent({ ...allProps });
-
-    await nextTick();
-    const metaInfoElements = vm.$el.querySelectorAll('.image-info');
-
-    expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL);
-
-    expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(RED_BOX_IMAGE_URL);
-
-    expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe('2-up');
-    expect(vm.$el.querySelector('.view-modes-menu li:nth-child(2)').textContent.trim()).toBe(
-      'Swipe',
-    );
-
-    expect(vm.$el.querySelector('.view-modes-menu li:nth-child(3)').textContent.trim()).toBe(
-      'Onion skin',
-    );
-
-    expect(metaInfoElements.length).toBe(2);
-    expect(metaInfoElements[0]).toHaveText('2.00 KiB');
-    expect(metaInfoElements[1]).toHaveText('1.00 KiB');
+  it('renders image diff for replaced', () => {
+    createComponent(allProps);
+    const metaInfoElements = wrapper.findAll('.image-info');
+
+    expect(wrapper.find('.added img').attributes('src')).toBe(GREEN_BOX_IMAGE_URL);
+    expect(wrapper.find('.deleted img').attributes('src')).toBe(RED_BOX_IMAGE_URL);
+    expect(wrapper.find('.view-modes-menu li.active').text()).toBe('2-up');
+    expect(wrapper.find('.view-modes-menu li:nth-child(2)').text()).toBe('Swipe');
+    expect(wrapper.find('.view-modes-menu li:nth-child(3)').text()).toBe('Onion skin');
+    expect(metaInfoElements).toHaveLength(2);
+    expect(metaInfoElements.at(0).text()).toBe('2.00 KiB');
+    expect(metaInfoElements.at(1).text()).toBe('1.00 KiB');
   });
 
-  it('renders image diff for new', async () => {
+  it('renders image diff for new', () => {
     createComponent({ ...allProps, diffMode: 'new', oldPath: '' });
 
-    await nextTick();
-
-    const metaInfoElement = vm.$el.querySelector('.image-info');
-
-    expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL);
-    expect(metaInfoElement).toHaveText('1.00 KiB');
+    expect(wrapper.find('.added img').attributes('src')).toBe(GREEN_BOX_IMAGE_URL);
+    expect(wrapper.find('.image-info').text()).toBe('1.00 KiB');
   });
 
-  it('renders image diff for deleted', async () => {
+  it('renders image diff for deleted', () => {
     createComponent({ ...allProps, diffMode: 'deleted', newPath: '' });
 
-    await nextTick();
-
-    const metaInfoElement = vm.$el.querySelector('.image-info');
-
-    expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(RED_BOX_IMAGE_URL);
-    expect(metaInfoElement).toHaveText('2.00 KiB');
+    expect(wrapper.find('.deleted img').attributes('src')).toBe(RED_BOX_IMAGE_URL);
+    expect(wrapper.find('.image-info').text()).toBe('2.00 KiB');
   });
 
-  it('renders image diff for renamed', async () => {
-    vm = new Vue({
-      components: {
-        imageDiffViewer,
-      },
-      data() {
-        return {
-          ...allProps,
-          diffMode: 'renamed',
-        };
-      },
-      ...compileToFunctions(`
-        <image-diff-viewer
-          :diff-mode="diffMode"
-          :new-path="newPath"
-          :old-path="oldPath"
-          :new-size="newSize"
-          :old-size="oldSize"
-        >
-          <template #image-overlay>
-            <span class="overlay">test</span>
-          </template>
-        </image-diff-viewer>
-      `),
-    }).$mount();
-
-    await nextTick();
-
-    const metaInfoElement = vm.$el.querySelector('.image-info');
-
-    expect(vm.$el.querySelector('img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL);
-    expect(vm.$el.querySelector('.overlay')).not.toBe(null);
-
-    expect(metaInfoElement).toHaveText('2.00 KiB');
+  it('renders image diff for renamed', () => {
+    createComponent(
+      { ...allProps, diffMode: 'renamed' },
+      { 'image-overlay': '<span class="overlay">test</span>' },
+    );
+
+    expect(wrapper.find('img').attributes('src')).toBe(GREEN_BOX_IMAGE_URL);
+    expect(wrapper.find('.overlay').exists()).toBe(true);
+    expect(wrapper.find('.image-info').text()).toBe('2.00 KiB');
   });
 
   describe('swipeMode', () => {
     beforeEach(() => {
-      createComponent({ ...requiredProps });
-
-      return nextTick();
+      createComponent(requiredProps);
     });
 
     it('switches to Swipe Mode', async () => {
-      vm.$el.querySelector('.view-modes-menu li:nth-child(2)').click();
+      await wrapper.find('.view-modes-menu li:nth-child(2)').trigger('click');
 
-      await nextTick();
-      expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe('Swipe');
+      expect(wrapper.find('.view-modes-menu li.active').text()).toBe('Swipe');
     });
   });
 
   describe('onionSkin', () => {
     beforeEach(() => {
       createComponent({ ...requiredProps });
-
-      return nextTick();
     });
 
     it('switches to Onion Skin Mode', async () => {
-      vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click();
+      await wrapper.find('.view-modes-menu li:nth-child(3)').trigger('click');
 
-      await nextTick();
-      expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe(
-        'Onion skin',
-      );
+      expect(wrapper.find('.view-modes-menu li.active').text()).toBe('Onion skin');
     });
 
     it('has working drag handler', async () => {
-      vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click();
+      await wrapper.find('.view-modes-menu li:nth-child(3)').trigger('click');
 
+      dragSlider(wrapper.find('.dragger').element, document, 20);
       await nextTick();
-      dragSlider(vm.$el.querySelector('.dragger'), document, 20);
 
-      await nextTick();
-      expect(vm.$el.querySelector('.dragger').style.left).toBe('20px');
-      expect(vm.$el.querySelector('.added.frame').style.opacity).toBe('0.2');
+      expect(wrapper.find('.dragger').attributes('style')).toBe('left: 20px;');
+      expect(wrapper.find('.added.frame').attributes('style')).toBe('opacity: 0.2;');
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
index e3e2ef5610d..86d1f21fd04 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
@@ -8,6 +8,8 @@ import EmojiToken from '~/vue_shared/components/filtered_search_bar/tokens/emoji
 import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
 import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue';
 import ReleaseToken from '~/vue_shared/components/filtered_search_bar/tokens/release_token.vue';
+import CrmContactToken from '~/vue_shared/components/filtered_search_bar/tokens/crm_contact_token.vue';
+import CrmOrganizationToken from '~/vue_shared/components/filtered_search_bar/tokens/crm_organization_token.vue';
 
 export const mockAuthor1 = {
   id: 1,
@@ -62,6 +64,128 @@ export const mockMilestones = [
   mockEscapedMilestone,
 ];
 
+export const mockCrmContacts = [
+  {
+    id: 'gid://gitlab/CustomerRelations::Contact/1',
+    firstName: 'John',
+    lastName: 'Smith',
+    email: 'john@smith.com',
+  },
+  {
+    id: 'gid://gitlab/CustomerRelations::Contact/2',
+    firstName: 'Andy',
+    lastName: 'Green',
+    email: 'andy@green.net',
+  },
+];
+
+export const mockCrmOrganizations = [
+  {
+    id: 'gid://gitlab/CustomerRelations::Organization/1',
+    name: 'First Org Ltd.',
+  },
+  {
+    id: 'gid://gitlab/CustomerRelations::Organization/2',
+    name: 'Organizer S.p.a.',
+  },
+];
+
+export const mockProjectCrmContactsQueryResponse = {
+  data: {
+    project: {
+      __typename: 'Project',
+      id: 1,
+      group: {
+        __typename: 'Group',
+        id: 1,
+        contacts: {
+          __typename: 'CustomerRelationsContactConnection',
+          nodes: [
+            {
+              __typename: 'CustomerRelationsContact',
+              ...mockCrmContacts[0],
+            },
+            {
+              __typename: 'CustomerRelationsContact',
+              ...mockCrmContacts[1],
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export const mockProjectCrmOrganizationsQueryResponse = {
+  data: {
+    project: {
+      __typename: 'Project',
+      id: 1,
+      group: {
+        __typename: 'Group',
+        id: 1,
+        organizations: {
+          __typename: 'CustomerRelationsOrganizationConnection',
+          nodes: [
+            {
+              __typename: 'CustomerRelationsOrganization',
+              ...mockCrmOrganizations[0],
+            },
+            {
+              __typename: 'CustomerRelationsOrganization',
+              ...mockCrmOrganizations[1],
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export const mockGroupCrmContactsQueryResponse = {
+  data: {
+    group: {
+      __typename: 'Group',
+      id: 1,
+      contacts: {
+        __typename: 'CustomerRelationsContactConnection',
+        nodes: [
+          {
+            __typename: 'CustomerRelationsContact',
+            ...mockCrmContacts[0],
+          },
+          {
+            __typename: 'CustomerRelationsContact',
+            ...mockCrmContacts[1],
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const mockGroupCrmOrganizationsQueryResponse = {
+  data: {
+    group: {
+      __typename: 'Group',
+      id: 1,
+      organizations: {
+        __typename: 'CustomerRelationsOrganizationConnection',
+        nodes: [
+          {
+            __typename: 'CustomerRelationsOrganization',
+            ...mockCrmOrganizations[0],
+          },
+          {
+            __typename: 'CustomerRelationsOrganization',
+            ...mockCrmOrganizations[1],
+          },
+        ],
+      },
+    },
+  },
+};
+
 export const mockEmoji1 = {
   name: 'thumbsup',
 };
@@ -134,6 +258,28 @@ export const mockReactionEmojiToken = {
   fetchEmojis: () => Promise.resolve(mockEmojis),
 };
 
+export const mockCrmContactToken = {
+  type: 'crm_contact',
+  title: 'Contact',
+  icon: 'user',
+  token: CrmContactToken,
+  isProject: false,
+  fullPath: 'group',
+  operators: OPERATOR_IS_ONLY,
+  unique: true,
+};
+
+export const mockCrmOrganizationToken = {
+  type: 'crm_contact',
+  title: 'Organization',
+  icon: 'user',
+  token: CrmOrganizationToken,
+  isProject: false,
+  fullPath: 'group',
+  operators: OPERATOR_IS_ONLY,
+  unique: true,
+};
+
 export const mockMembershipToken = {
   type: 'with_inherited_permissions',
   icon: 'group',
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js
index ca8cd419d87..a0126c2bd63 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js
@@ -418,8 +418,6 @@ describe('BaseToken', () => {
         });
 
         it('does not emit `fetch-suggestions` event on component after a delay when component emits `input` event', async () => {
-          jest.useFakeTimers();
-
           findGlFilteredSearchToken().vm.$emit('input', { data: 'foo' });
           await nextTick();
 
@@ -437,8 +435,6 @@ describe('BaseToken', () => {
         });
 
         it('emits `fetch-suggestions` event on component after a delay when component emits `input` event', async () => {
-          jest.useFakeTimers();
-
           findGlFilteredSearchToken().vm.$emit('input', { data: 'foo' });
           await nextTick();
 
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
new file mode 100644
index 00000000000..157e021fc60
--- /dev/null
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/crm_contact_token_spec.js
@@ -0,0 +1,283 @@
+import {
+  GlFilteredSearchSuggestion,
+  GlFilteredSearchTokenSegment,
+  GlDropdownDivider,
+} from '@gitlab/ui';
+import { mount } 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 createFlash 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';
+import CrmContactToken from '~/vue_shared/components/filtered_search_bar/tokens/crm_contact_token.vue';
+import searchCrmContactsQuery from '~/vue_shared/components/filtered_search_bar/queries/search_crm_contacts.query.graphql';
+
+import {
+  mockCrmContacts,
+  mockCrmContactToken,
+  mockGroupCrmContactsQueryResponse,
+  mockProjectCrmContactsQueryResponse,
+} from '../mock_data';
+
+jest.mock('~/flash');
+
+const defaultStubs = {
+  Portal: true,
+  BaseToken,
+  GlFilteredSearchSuggestionList: {
+    template: '<div></div>',
+    methods: {
+      getValue: () => '=',
+    },
+  },
+};
+
+describe('CrmContactToken', () => {
+  Vue.use(VueApollo);
+
+  let wrapper;
+  let fakeApollo;
+
+  const getBaseToken = () => wrapper.findComponent(BaseToken);
+
+  const searchGroupCrmContactsQueryHandler = jest
+    .fn()
+    .mockResolvedValue(mockGroupCrmContactsQueryResponse);
+  const searchProjectCrmContactsQueryHandler = jest
+    .fn()
+    .mockResolvedValue(mockProjectCrmContactsQueryResponse);
+
+  const mountComponent = ({
+    config = mockCrmContactToken,
+    value = { data: '' },
+    active = false,
+    stubs = defaultStubs,
+    listeners = {},
+    queryHandler = searchGroupCrmContactsQueryHandler,
+  } = {}) => {
+    fakeApollo = createMockApollo([[searchCrmContactsQuery, queryHandler]]);
+
+    wrapper = mount(CrmContactToken, {
+      propsData: {
+        config,
+        value,
+        active,
+        cursorPosition: 'start',
+      },
+      provide: {
+        portalName: 'fake target',
+        alignSuggestions: function fakeAlignSuggestions() {},
+        suggestionsListClass: () => 'custom-class',
+      },
+      stubs,
+      listeners,
+      apolloProvider: fakeApollo,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    fakeApollo = null;
+  });
+
+  describe('methods', () => {
+    describe('fetchContacts', () => {
+      describe('for groups', () => {
+        beforeEach(() => {
+          mountComponent();
+        });
+
+        it('calls the apollo query providing the searchString when search term is a string', async () => {
+          getBaseToken().vm.$emit('fetch-suggestions', 'foo');
+          await waitForPromises();
+
+          expect(createFlash).not.toHaveBeenCalled();
+          expect(searchGroupCrmContactsQueryHandler).toHaveBeenCalledWith({
+            fullPath: 'group',
+            isProject: false,
+            searchString: 'foo',
+            searchIds: null,
+          });
+          expect(getBaseToken().props('suggestions')).toEqual(mockCrmContacts);
+        });
+
+        it('calls the apollo query providing the searchId when search term is a number', async () => {
+          getBaseToken().vm.$emit('fetch-suggestions', '5');
+          await waitForPromises();
+
+          expect(createFlash).not.toHaveBeenCalled();
+          expect(searchGroupCrmContactsQueryHandler).toHaveBeenCalledWith({
+            fullPath: 'group',
+            isProject: false,
+            searchString: null,
+            searchIds: ['gid://gitlab/CustomerRelations::Contact/5'],
+          });
+          expect(getBaseToken().props('suggestions')).toEqual(mockCrmContacts);
+        });
+      });
+
+      describe('for projects', () => {
+        beforeEach(() => {
+          mountComponent({
+            config: {
+              fullPath: 'project',
+              isProject: true,
+            },
+            queryHandler: searchProjectCrmContactsQueryHandler,
+          });
+        });
+
+        it('calls the apollo query providing the searchString when search term is a string', async () => {
+          getBaseToken().vm.$emit('fetch-suggestions', 'foo');
+          await waitForPromises();
+
+          expect(createFlash).not.toHaveBeenCalled();
+          expect(searchProjectCrmContactsQueryHandler).toHaveBeenCalledWith({
+            fullPath: 'project',
+            isProject: true,
+            searchString: 'foo',
+            searchIds: null,
+          });
+          expect(getBaseToken().props('suggestions')).toEqual(mockCrmContacts);
+        });
+
+        it('calls the apollo query providing the searchId when search term is a number', async () => {
+          getBaseToken().vm.$emit('fetch-suggestions', '5');
+          await waitForPromises();
+
+          expect(createFlash).not.toHaveBeenCalled();
+          expect(searchProjectCrmContactsQueryHandler).toHaveBeenCalledWith({
+            fullPath: 'project',
+            isProject: true,
+            searchString: null,
+            searchIds: ['gid://gitlab/CustomerRelations::Contact/5'],
+          });
+          expect(getBaseToken().props('suggestions')).toEqual(mockCrmContacts);
+        });
+      });
+
+      it('calls `createFlash` with flash error message when request fails', async () => {
+        mountComponent();
+
+        jest.spyOn(wrapper.vm.$apollo, 'query').mockRejectedValue({});
+
+        getBaseToken().vm.$emit('fetch-suggestions');
+        await waitForPromises();
+
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'There was a problem fetching CRM contacts.',
+        });
+      });
+
+      it('sets `loading` to false when request completes', async () => {
+        mountComponent();
+
+        jest.spyOn(wrapper.vm.$apollo, 'query').mockRejectedValue({});
+
+        getBaseToken().vm.$emit('fetch-suggestions');
+
+        await waitForPromises();
+
+        expect(getBaseToken().props('suggestionsLoading')).toBe(false);
+      });
+    });
+  });
+
+  describe('template', () => {
+    const defaultContacts = DEFAULT_NONE_ANY;
+
+    it('renders base-token component', () => {
+      mountComponent({
+        config: { ...mockCrmContactToken, initialContacts: mockCrmContacts },
+        value: { data: '1' },
+      });
+
+      const baseTokenEl = wrapper.find(BaseToken);
+
+      expect(baseTokenEl.exists()).toBe(true);
+      expect(baseTokenEl.props()).toMatchObject({
+        suggestions: mockCrmContacts,
+        getActiveTokenValue: wrapper.vm.getActiveContact,
+      });
+    });
+
+    it.each(mockCrmContacts)('renders token item when value is selected', (contact) => {
+      mountComponent({
+        config: { ...mockCrmContactToken, initialContacts: mockCrmContacts },
+        value: { data: `${getIdFromGraphQLId(contact.id)}` },
+      });
+
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+
+      expect(tokenSegments).toHaveLength(3); // Contact, =, Contact name
+      expect(tokenSegments.at(2).text()).toBe(`${contact.firstName} ${contact.lastName}`); // Contact name
+    });
+
+    it('renders provided defaultContacts as suggestions', async () => {
+      mountComponent({
+        active: true,
+        config: { ...mockCrmContactToken, defaultContacts },
+        stubs: { Portal: true },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await nextTick();
+
+      const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
+
+      expect(suggestions).toHaveLength(defaultContacts.length);
+      defaultContacts.forEach((contact, index) => {
+        expect(suggestions.at(index).text()).toBe(contact.text);
+      });
+    });
+
+    it('does not render divider when no defaultContacts', async () => {
+      mountComponent({
+        active: true,
+        config: { ...mockCrmContactToken, defaultContacts: [] },
+        stubs: { Portal: true },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await nextTick();
+
+      expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
+      expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
+    });
+
+    it('renders `DEFAULT_NONE_ANY` as default suggestions', () => {
+      mountComponent({
+        active: true,
+        config: { ...mockCrmContactToken },
+        stubs: { Portal: true },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+
+      const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
+
+      expect(suggestions).toHaveLength(DEFAULT_NONE_ANY.length);
+      DEFAULT_NONE_ANY.forEach((contact, index) => {
+        expect(suggestions.at(index).text()).toBe(contact.text);
+      });
+    });
+
+    it('emits listeners in the base-token', () => {
+      const mockInput = jest.fn();
+      mountComponent({
+        listeners: {
+          input: mockInput,
+        },
+      });
+      wrapper.findComponent(BaseToken).vm.$emit('input', [{ data: 'mockData', operator: '=' }]);
+
+      expect(mockInput).toHaveBeenLastCalledWith([{ data: 'mockData', operator: '=' }]);
+    });
+  });
+});
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
new file mode 100644
index 00000000000..977f8bbef61
--- /dev/null
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/crm_organization_token_spec.js
@@ -0,0 +1,282 @@
+import {
+  GlFilteredSearchSuggestion,
+  GlFilteredSearchTokenSegment,
+  GlDropdownDivider,
+} from '@gitlab/ui';
+import { mount } 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 createFlash 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';
+import CrmOrganizationToken from '~/vue_shared/components/filtered_search_bar/tokens/crm_organization_token.vue';
+import searchCrmOrganizationsQuery from '~/vue_shared/components/filtered_search_bar/queries/search_crm_organizations.query.graphql';
+
+import {
+  mockCrmOrganizations,
+  mockCrmOrganizationToken,
+  mockGroupCrmOrganizationsQueryResponse,
+  mockProjectCrmOrganizationsQueryResponse,
+} from '../mock_data';
+
+jest.mock('~/flash');
+
+const defaultStubs = {
+  Portal: true,
+  BaseToken,
+  GlFilteredSearchSuggestionList: {
+    template: '<div></div>',
+    methods: {
+      getValue: () => '=',
+    },
+  },
+};
+
+describe('CrmOrganizationToken', () => {
+  Vue.use(VueApollo);
+
+  let wrapper;
+  let fakeApollo;
+
+  const getBaseToken = () => wrapper.findComponent(BaseToken);
+
+  const searchGroupCrmOrganizationsQueryHandler = jest
+    .fn()
+    .mockResolvedValue(mockGroupCrmOrganizationsQueryResponse);
+  const searchProjectCrmOrganizationsQueryHandler = jest
+    .fn()
+    .mockResolvedValue(mockProjectCrmOrganizationsQueryResponse);
+
+  const mountComponent = ({
+    config = mockCrmOrganizationToken,
+    value = { data: '' },
+    active = false,
+    stubs = defaultStubs,
+    listeners = {},
+    queryHandler = searchGroupCrmOrganizationsQueryHandler,
+  } = {}) => {
+    fakeApollo = createMockApollo([[searchCrmOrganizationsQuery, queryHandler]]);
+    wrapper = mount(CrmOrganizationToken, {
+      propsData: {
+        config,
+        value,
+        active,
+        cursorPosition: 'start',
+      },
+      provide: {
+        portalName: 'fake target',
+        alignSuggestions: function fakeAlignSuggestions() {},
+        suggestionsListClass: () => 'custom-class',
+      },
+      stubs,
+      listeners,
+      apolloProvider: fakeApollo,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    fakeApollo = null;
+  });
+
+  describe('methods', () => {
+    describe('fetchOrganizations', () => {
+      describe('for groups', () => {
+        beforeEach(() => {
+          mountComponent();
+        });
+
+        it('calls the apollo query providing the searchString when search term is a string', async () => {
+          getBaseToken().vm.$emit('fetch-suggestions', 'foo');
+          await waitForPromises();
+
+          expect(createFlash).not.toHaveBeenCalled();
+          expect(searchGroupCrmOrganizationsQueryHandler).toHaveBeenCalledWith({
+            fullPath: 'group',
+            isProject: false,
+            searchString: 'foo',
+            searchIds: null,
+          });
+          expect(getBaseToken().props('suggestions')).toEqual(mockCrmOrganizations);
+        });
+
+        it('calls the apollo query providing the searchId when search term is a number', async () => {
+          getBaseToken().vm.$emit('fetch-suggestions', '5');
+          await waitForPromises();
+
+          expect(createFlash).not.toHaveBeenCalled();
+          expect(searchGroupCrmOrganizationsQueryHandler).toHaveBeenCalledWith({
+            fullPath: 'group',
+            isProject: false,
+            searchString: null,
+            searchIds: ['gid://gitlab/CustomerRelations::Organization/5'],
+          });
+          expect(getBaseToken().props('suggestions')).toEqual(mockCrmOrganizations);
+        });
+      });
+
+      describe('for projects', () => {
+        beforeEach(() => {
+          mountComponent({
+            config: {
+              fullPath: 'project',
+              isProject: true,
+            },
+            queryHandler: searchProjectCrmOrganizationsQueryHandler,
+          });
+        });
+
+        it('calls the apollo query providing the searchString when search term is a string', async () => {
+          getBaseToken().vm.$emit('fetch-suggestions', 'foo');
+          await waitForPromises();
+
+          expect(createFlash).not.toHaveBeenCalled();
+          expect(searchProjectCrmOrganizationsQueryHandler).toHaveBeenCalledWith({
+            fullPath: 'project',
+            isProject: true,
+            searchString: 'foo',
+            searchIds: null,
+          });
+          expect(getBaseToken().props('suggestions')).toEqual(mockCrmOrganizations);
+        });
+
+        it('calls the apollo query providing the searchId when search term is a number', async () => {
+          getBaseToken().vm.$emit('fetch-suggestions', '5');
+          await waitForPromises();
+
+          expect(createFlash).not.toHaveBeenCalled();
+          expect(searchProjectCrmOrganizationsQueryHandler).toHaveBeenCalledWith({
+            fullPath: 'project',
+            isProject: true,
+            searchString: null,
+            searchIds: ['gid://gitlab/CustomerRelations::Organization/5'],
+          });
+          expect(getBaseToken().props('suggestions')).toEqual(mockCrmOrganizations);
+        });
+      });
+
+      it('calls `createFlash` with flash error message when request fails', async () => {
+        mountComponent();
+
+        jest.spyOn(wrapper.vm.$apollo, 'query').mockRejectedValue({});
+
+        getBaseToken().vm.$emit('fetch-suggestions');
+        await waitForPromises();
+
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'There was a problem fetching CRM organizations.',
+        });
+      });
+
+      it('sets `loading` to false when request completes', async () => {
+        mountComponent();
+
+        jest.spyOn(wrapper.vm.$apollo, 'query').mockRejectedValue({});
+
+        getBaseToken().vm.$emit('fetch-suggestions');
+
+        await waitForPromises();
+
+        expect(getBaseToken().props('suggestionsLoading')).toBe(false);
+      });
+    });
+  });
+
+  describe('template', () => {
+    const defaultOrganizations = DEFAULT_NONE_ANY;
+
+    it('renders base-token component', () => {
+      mountComponent({
+        config: { ...mockCrmOrganizationToken, initialOrganizations: mockCrmOrganizations },
+        value: { data: '1' },
+      });
+
+      const baseTokenEl = wrapper.find(BaseToken);
+
+      expect(baseTokenEl.exists()).toBe(true);
+      expect(baseTokenEl.props()).toMatchObject({
+        suggestions: mockCrmOrganizations,
+        getActiveTokenValue: wrapper.vm.getActiveOrganization,
+      });
+    });
+
+    it.each(mockCrmOrganizations)('renders token item when value is selected', (organization) => {
+      mountComponent({
+        config: { ...mockCrmOrganizationToken, initialOrganizations: mockCrmOrganizations },
+        value: { data: `${getIdFromGraphQLId(organization.id)}` },
+      });
+
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+
+      expect(tokenSegments).toHaveLength(3); // Organization, =, Organization name
+      expect(tokenSegments.at(2).text()).toBe(organization.name); // Organization name
+    });
+
+    it('renders provided defaultOrganizations as suggestions', async () => {
+      mountComponent({
+        active: true,
+        config: { ...mockCrmOrganizationToken, defaultOrganizations },
+        stubs: { Portal: true },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await nextTick();
+
+      const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
+
+      expect(suggestions).toHaveLength(defaultOrganizations.length);
+      defaultOrganizations.forEach((organization, index) => {
+        expect(suggestions.at(index).text()).toBe(organization.text);
+      });
+    });
+
+    it('does not render divider when no defaultOrganizations', async () => {
+      mountComponent({
+        active: true,
+        config: { ...mockCrmOrganizationToken, defaultOrganizations: [] },
+        stubs: { Portal: true },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await nextTick();
+
+      expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
+      expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
+    });
+
+    it('renders `DEFAULT_NONE_ANY` as default suggestions', () => {
+      mountComponent({
+        active: true,
+        config: { ...mockCrmOrganizationToken },
+        stubs: { Portal: true },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+
+      const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
+
+      expect(suggestions).toHaveLength(DEFAULT_NONE_ANY.length);
+      DEFAULT_NONE_ANY.forEach((organization, index) => {
+        expect(suggestions.at(index).text()).toBe(organization.text);
+      });
+    });
+
+    it('emits listeners in the base-token', () => {
+      const mockInput = jest.fn();
+      mountComponent({
+        listeners: {
+          input: mockInput,
+        },
+      });
+      wrapper.findComponent(BaseToken).vm.$emit('input', [{ data: 'mockData', operator: '=' }]);
+
+      expect(mockInput).toHaveBeenLastCalledWith([{ data: 'mockData', operator: '=' }]);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/markdown/field_spec.js b/spec/frontend/vue_shared/components/markdown/field_spec.js
index b3376f26a25..85a135d2b89 100644
--- a/spec/frontend/vue_shared/components/markdown/field_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/field_spec.js
@@ -67,11 +67,6 @@ describe('Markdown field component', () => {
           enablePreview,
           restrictedToolBarItems,
         },
-        provide: {
-          glFeatures: {
-            contactsAutocomplete: true,
-          },
-        },
       },
     );
   }
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 5e956d66b6a..bf6c8e8c704 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
@@ -7,16 +7,19 @@ exports[`Issue placeholder note component matches snapshot 1`] = `
   <div
     class="timeline-icon"
   >
-    <user-avatar-link-stub
-      imgalt=""
-      imgcssclasses=""
-      imgsize="40"
-      imgsrc="mock_path"
-      linkhref="/root"
-      tooltipplacement="top"
-      tooltiptext=""
-      username=""
-    />
+    <gl-avatar-link-stub
+      class="gl-mr-3"
+      href="/root"
+    >
+      <gl-avatar-stub
+        alt="Root"
+        entityid="0"
+        entityname="root"
+        shape="circle"
+        size="[object Object]"
+        src="mock_path"
+      />
+    </gl-avatar-link-stub>
   </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 6881cb79740..f951cfd5cd9 100644
--- a/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js
+++ b/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js
@@ -1,8 +1,8 @@
 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';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { userDataMock } from 'jest/notes/mock_data';
 
 Vue.use(Vuex);
@@ -56,14 +56,14 @@ describe('Issue placeholder note component', () => {
 
   describe('avatar size', () => {
     it.each`
-      size  | line                    | isOverviewTab
-      ${40} | ${null}                 | ${false}
-      ${24} | ${{ line_code: '123' }} | ${false}
-      ${40} | ${{ line_code: '123' }} | ${true}
+      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(UserAvatarLink).props('imgSize')).toBe(size);
+      expect(wrapper.findComponent(GlAvatar).props('size')).toEqual(size);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/page_size_selector_spec.js b/spec/frontend/vue_shared/components/page_size_selector_spec.js
new file mode 100644
index 00000000000..5ec0b863afd
--- /dev/null
+++ b/spec/frontend/vue_shared/components/page_size_selector_spec.js
@@ -0,0 +1,44 @@
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import PageSizeSelector, { PAGE_SIZES } from '~/vue_shared/components/page_size_selector.vue';
+
+describe('Page size selector component', () => {
+  let wrapper;
+
+  const createWrapper = ({ pageSize = 20 } = {}) => {
+    wrapper = shallowMount(PageSizeSelector, {
+      propsData: { value: pageSize },
+    });
+  };
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it.each(PAGE_SIZES)('shows expected text in the dropdown button for page size %s', (pageSize) => {
+    createWrapper({ pageSize });
+
+    expect(findDropdown().props('text')).toBe(`Show ${pageSize} items`);
+  });
+
+  it('shows the expected dropdown items', () => {
+    createWrapper();
+
+    PAGE_SIZES.forEach((pageSize, index) => {
+      expect(findDropdownItems().at(index).text()).toBe(`Show ${pageSize} items`);
+    });
+  });
+
+  it('will emit the new page size when a dropdown item is clicked', () => {
+    createWrapper();
+
+    findDropdownItems().wrappers.forEach((itemWrapper, index) => {
+      itemWrapper.vm.$emit('click');
+
+      expect(wrapper.emitted('input')[index][0]).toBe(PAGE_SIZES[index]);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js b/spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js
index 8270ff31574..51a936c0509 100644
--- a/spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js
+++ b/spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js
@@ -195,7 +195,7 @@ describe('AlertManagementEmptyState', () => {
       tabs.forEach((tab, i) => {
         const status = ITEMS_STATUS_TABS[i].status.toLowerCase();
         expect(tab.attributes('data-testid')).toContain(ITEMS_STATUS_TABS[i].status);
-        expect(badges.at(i).text()).toContain(itemsCount[status]);
+        expect(badges.at(i).text()).toContain(itemsCount[status].toString());
       });
     });
   });
diff --git a/spec/frontend/vue_shared/components/runner_aws_deployments/__snapshots__/runner_aws_deployments_modal_spec.js.snap b/spec/frontend/vue_shared/components/runner_aws_deployments/__snapshots__/runner_aws_deployments_modal_spec.js.snap
index 8ff49271eb5..2ea8985b16a 100644
--- a/spec/frontend/vue_shared/components/runner_aws_deployments/__snapshots__/runner_aws_deployments_modal_spec.js.snap
+++ b/spec/frontend/vue_shared/components/runner_aws_deployments/__snapshots__/runner_aws_deployments_modal_spec.js.snap
@@ -42,6 +42,7 @@ exports[`RunnerAwsDeploymentsModal renders the modal 1`] = `
         >
           <gl-accordion-item-stub
             class="gl-font-weight-normal"
+            headerclass=""
             title="More Details"
             titlevisible="Less Details"
           >
@@ -76,6 +77,7 @@ exports[`RunnerAwsDeploymentsModal renders the modal 1`] = `
         >
           <gl-accordion-item-stub
             class="gl-font-weight-normal"
+            headerclass=""
             title="More Details"
             titlevisible="Less Details"
           >
@@ -110,6 +112,7 @@ exports[`RunnerAwsDeploymentsModal renders the modal 1`] = `
         >
           <gl-accordion-item-stub
             class="gl-font-weight-normal"
+            headerclass=""
             title="More Details"
             titlevisible="Less Details"
           >
@@ -144,6 +147,7 @@ exports[`RunnerAwsDeploymentsModal renders the modal 1`] = `
         >
           <gl-accordion-item-stub
             class="gl-font-weight-normal"
+            headerclass=""
             title="More Details"
             titlevisible="Less Details"
           >
diff --git a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
index 7173abe1316..a38dcd626f4 100644
--- a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
+++ b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
@@ -79,7 +79,7 @@ describe('RunnerInstructionsModal component', () => {
     }
   };
 
-  beforeEach(async () => {
+  beforeEach(() => {
     runnerPlatformsHandler = jest.fn().mockResolvedValue(mockGraphqlRunnerPlatforms);
     runnerSetupInstructionsHandler = jest.fn().mockResolvedValue(mockGraphqlInstructions);
   });
@@ -259,11 +259,11 @@ describe('RunnerInstructionsModal component', () => {
   });
 
   describe('when apollo is loading', () => {
-    beforeEach(() => {
+    it('should show a skeleton loader', async () => {
       createComponent();
-    });
+      await nextTick();
+      await nextTick();
 
-    it('should show a skeleton loader', async () => {
       expect(findSkeletonLoader().exists()).toBe(true);
       expect(findGlLoadingIcon().exists()).toBe(false);
 
@@ -275,6 +275,8 @@ describe('RunnerInstructionsModal component', () => {
     });
 
     it('once loaded, should not show a loading state', async () => {
+      createComponent();
+
       await waitForPromises();
 
       expect(findSkeletonLoader().exists()).toBe(false);
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/link_dependencies_spec.js b/spec/frontend/vue_shared/components/source_viewer/plugins/link_dependencies_spec.js
new file mode 100644
index 00000000000..3036ce43888
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/plugins/link_dependencies_spec.js
@@ -0,0 +1,14 @@
+import packageJsonLinker from '~/vue_shared/components/source_viewer/plugins/utils/package_json_linker';
+import linkDependencies from '~/vue_shared/components/source_viewer/plugins/link_dependencies';
+import { PACKAGE_JSON_FILE_TYPE, PACKAGE_JSON_CONTENT } from './mock_data';
+
+jest.mock('~/vue_shared/components/source_viewer/plugins/utils/package_json_linker');
+
+describe('Highlight.js plugin for linking dependencies', () => {
+  const hljsResultMock = { value: 'test' };
+
+  it('calls packageJsonLinker for package_json file types', () => {
+    linkDependencies(hljsResultMock, PACKAGE_JSON_FILE_TYPE, PACKAGE_JSON_CONTENT);
+    expect(packageJsonLinker).toHaveBeenCalled();
+  });
+});
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/mock_data.js b/spec/frontend/vue_shared/components/source_viewer/plugins/mock_data.js
new file mode 100644
index 00000000000..75659770e2c
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/plugins/mock_data.js
@@ -0,0 +1,2 @@
+export const PACKAGE_JSON_FILE_TYPE = 'package_json';
+export const PACKAGE_JSON_CONTENT = '{ "dependencies": { "@babel/core": "^7.18.5" } }';
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
new file mode 100644
index 00000000000..ee200747af9
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/plugins/utils/dependency_linker_util_spec.js
@@ -0,0 +1,33 @@
+import {
+  createLink,
+  generateHLJSOpenTag,
+} from '~/vue_shared/components/source_viewer/plugins/utils/dependency_linker_util';
+
+describe('createLink', () => {
+  it('generates a link with the correct attributes', () => {
+    const href = 'http://test.com';
+    const innerText = 'testing';
+    const result = `<a href="${href}" rel="nofollow noreferrer noopener">${innerText}</a>`;
+
+    expect(createLink(href, innerText)).toBe(result);
+  });
+
+  it('escapes the user-controlled content', () => {
+    const unescapedXSS = '<script>XSS</script>';
+    const escapedXSS = '&amp;lt;script&amp;gt;XSS&amp;lt;/script&amp;gt;';
+    const href = `http://test.com/${unescapedXSS}`;
+    const innerText = `testing${unescapedXSS}`;
+    const result = `<a href="http://test.com/${escapedXSS}" rel="nofollow noreferrer noopener">testing${escapedXSS}</a>`;
+
+    expect(createLink(href, innerText)).toBe(result);
+  });
+});
+
+describe('generateHLJSOpenTag', () => {
+  it('generates an open tag with the correct selector', () => {
+    const type = 'string';
+    const result = `<span class="hljs-${type}">&quot;`;
+
+    expect(generateHLJSOpenTag(type)).toBe(result);
+  });
+});
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/utils/package_json_linker_spec.js b/spec/frontend/vue_shared/components/source_viewer/plugins/utils/package_json_linker_spec.js
new file mode 100644
index 00000000000..e83c129818c
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/plugins/utils/package_json_linker_spec.js
@@ -0,0 +1,15 @@
+import packageJsonLinker from '~/vue_shared/components/source_viewer/plugins/utils/package_json_linker';
+import { PACKAGE_JSON_CONTENT } from '../mock_data';
+
+describe('Highlight.js plugin for linking package.json dependencies', () => {
+  it('mutates the input value by wrapping dependency names and versions in anchors', () => {
+    const inputValue =
+      '<span class="hljs-attr">&quot;@babel/core&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;^7.18.5&quot;</span>';
+    const outputValue =
+      '<span class="hljs-attr">&quot;<a href="https://npmjs.com/package/@babel/core" rel="nofollow noreferrer noopener">@babel/core</a>&quot;</span>: <span class="hljs-attr">&quot;<a href="https://npmjs.com/package/@babel/core" rel="nofollow noreferrer noopener">^7.18.5</a>&quot;</span>';
+    const hljsResultMock = { value: inputValue };
+
+    const output = packageJsonLinker(hljsResultMock, PACKAGE_JSON_CONTENT);
+    expect(output).toBe(outputValue);
+  });
+});
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 bb0945a1f3e..2c03b7aa7d3 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
@@ -5,10 +5,16 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import SourceViewer from '~/vue_shared/components/source_viewer/source_viewer.vue';
 import { registerPlugins } from '~/vue_shared/components/source_viewer/plugins/index';
 import Chunk from '~/vue_shared/components/source_viewer/components/chunk.vue';
-import { ROUGE_TO_HLJS_LANGUAGE_MAP } from '~/vue_shared/components/source_viewer/constants';
+import {
+  EVENT_ACTION,
+  EVENT_LABEL_VIEWER,
+  EVENT_LABEL_FALLBACK,
+  ROUGE_TO_HLJS_LANGUAGE_MAP,
+} from '~/vue_shared/components/source_viewer/constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import LineHighlighter from '~/blob/line_highlighter';
 import eventHub from '~/notes/event_hub';
+import Tracking from '~/tracking';
 
 jest.mock('~/blob/line_highlighter');
 jest.mock('highlight.js/lib/core');
@@ -34,7 +40,8 @@ describe('Source Viewer component', () => {
   const chunk2 = generateContent('// Some source code 2', 70);
   const content = chunk1 + chunk2;
   const path = 'some/path.js';
-  const DEFAULT_BLOB_DATA = { language, rawTextBlob: content, path };
+  const fileType = 'javascript';
+  const DEFAULT_BLOB_DATA = { language, rawTextBlob: content, path, fileType };
   const highlightedContent = `<span data-testid='test-highlighted' id='LC1'>${content}</span><span id='LC2'></span>`;
 
   const createComponent = async (blob = {}) => {
@@ -52,17 +59,38 @@ describe('Source Viewer component', () => {
     hljs.highlightAuto.mockImplementation(() => ({ value: highlightedContent }));
     jest.spyOn(window, 'requestIdleCallback').mockImplementation(execImmediately);
     jest.spyOn(eventHub, '$emit');
+    jest.spyOn(Tracking, 'event');
 
     return createComponent();
   });
 
   afterEach(() => wrapper.destroy());
 
+  describe('event tracking', () => {
+    it('fires a tracking event when the component is created', () => {
+      const eventData = { label: EVENT_LABEL_VIEWER, property: language };
+      expect(Tracking.event).toHaveBeenCalledWith(undefined, EVENT_ACTION, eventData);
+    });
+
+    it('does not emit an error event when the language is supported', () => {
+      expect(wrapper.emitted('error')).toBeUndefined();
+    });
+
+    it('fires a tracking event and emits an error when the language is not supported', () => {
+      const unsupportedLanguage = 'apex';
+      const eventData = { label: EVENT_LABEL_FALLBACK, property: unsupportedLanguage };
+      createComponent({ language: unsupportedLanguage });
+
+      expect(Tracking.event).toHaveBeenCalledWith(undefined, EVENT_ACTION, eventData);
+      expect(wrapper.emitted('error')).toHaveLength(1);
+    });
+  });
+
   describe('highlight.js', () => {
     beforeEach(() => createComponent({ language: mappedLanguage }));
 
     it('registers our plugins for Highlight.js', () => {
-      expect(registerPlugins).toHaveBeenCalledWith(hljs);
+      expect(registerPlugins).toHaveBeenCalledWith(hljs, fileType, content);
     });
 
     it('registers the language definition', async () => {
@@ -74,6 +102,13 @@ describe('Source Viewer component', () => {
       );
     });
 
+    it('registers json language definition if fileType is package_json', async () => {
+      await createComponent({ language: 'json', fileType: 'package_json' });
+      const languageDefinition = await import(`highlight.js/lib/languages/json`);
+
+      expect(hljs.registerLanguage).toHaveBeenCalledWith('json', languageDefinition.default);
+    });
+
     it('highlights the first chunk', () => {
       expect(hljs.highlight).toHaveBeenCalledWith(chunk1.trim(), { language: mappedLanguage });
     });
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 a54f3450633..9550368eefc 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
@@ -2,7 +2,6 @@ import { GlSkeletonLoader, GlIcon } from '@gitlab/ui';
 import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { AVAILABILITY_STATUS } from '~/set_status_modal/utils';
-import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
 import UserPopover from '~/vue_shared/components/user_popover/user_popover.vue';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
@@ -48,7 +47,6 @@ describe('User Popover Component', () => {
 
   const findUserStatus = () => wrapper.findByTestId('user-popover-status');
   const findTarget = () => document.querySelector('.js-user-link');
-  const findUserName = () => wrapper.find(UserNameWithStatus);
   const findSecurityBotDocsLink = () => wrapper.findByTestId('user-popover-bot-docs-link');
   const findUserLocalTime = () => wrapper.findByTestId('user-popover-local-time');
   const findToggleFollowButton = () => wrapper.findByTestId('toggle-follow-button');
@@ -245,9 +243,7 @@ describe('User Popover Component', () => {
 
       createWrapper({ user });
 
-      expect(findUserName().exists()).toBe(true);
-      expect(wrapper.text()).toContain(user.name);
-      expect(wrapper.text()).toContain('(Busy)');
+      expect(wrapper.findByText('(Busy)').exists()).toBe(true);
     });
 
     it('should hide the busy status for any other status', () => {
@@ -258,13 +254,32 @@ describe('User Popover Component', () => {
 
       createWrapper({ user });
 
-      expect(wrapper.text()).not.toContain('(Busy)');
+      expect(wrapper.findByText('(Busy)').exists()).toBe(false);
     });
 
-    it('passes `pronouns` prop to `UserNameWithStatus` component', () => {
+    it('shows pronouns when user has them set', () => {
       createWrapper();
 
-      expect(findUserName().props('pronouns')).toBe('they/them');
+      expect(wrapper.findByText('(they/them)').exists()).toBe(true);
+    });
+
+    describe.each`
+      pronouns
+      ${undefined}
+      ${null}
+      ${''}
+      ${'   '}
+    `('when pronouns are set to $pronouns', ({ pronouns }) => {
+      it('does not render pronouns', () => {
+        const user = {
+          ...DEFAULT_PROPS.user,
+          pronouns,
+        };
+
+        createWrapper({ user });
+
+        expect(wrapper.findByTestId('user-popover-pronouns').exists()).toBe(false);
+      });
     });
   });
 
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
index 70017903079..80f14dffd08 100644
--- a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
+++ b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
@@ -39,6 +39,8 @@ describe('IssuableItem', () => {
   const originalUrl = gon.gitlab_url;
   let wrapper;
 
+  const findTimestampWrapper = () => wrapper.find('[data-testid="issuable-timestamp"]');
+
   beforeEach(() => {
     gon.gitlab_url = MOCK_GITLAB_URL;
   });
@@ -150,12 +152,54 @@ describe('IssuableItem', () => {
       });
     });
 
-    describe('updatedAt', () => {
-      it('returns string containing timeago string based on `issuable.updatedAt`', () => {
+    describe('timestamp', () => {
+      it('returns timestamp based on `issuable.updatedAt` when the issue is open', () => {
         wrapper = createComponent();
 
-        expect(wrapper.vm.updatedAt).toContain('updated');
-        expect(wrapper.vm.updatedAt).toContain('ago');
+        expect(findTimestampWrapper().attributes('title')).toBe('Sep 10, 2020 11:41am UTC');
+      });
+
+      it('returns timestamp based on `issuable.closedAt` when the issue is closed', () => {
+        wrapper = createComponent({
+          issuable: { ...mockIssuable, closedAt: '2020-06-18T11:30:00Z', state: 'closed' },
+        });
+
+        expect(findTimestampWrapper().attributes('title')).toBe('Jun 18, 2020 11:30am UTC');
+      });
+
+      it('returns timestamp based on `issuable.updatedAt` when the issue is closed but `issuable.closedAt` is undefined', () => {
+        wrapper = createComponent({
+          issuable: { ...mockIssuable, closedAt: undefined, state: 'closed' },
+        });
+
+        expect(findTimestampWrapper().attributes('title')).toBe('Sep 10, 2020 11:41am UTC');
+      });
+    });
+
+    describe('formattedTimestamp', () => {
+      it('returns timeago string based on `issuable.updatedAt` when the issue is open', () => {
+        wrapper = createComponent();
+
+        expect(findTimestampWrapper().text()).toContain('updated');
+        expect(findTimestampWrapper().text()).toContain('ago');
+      });
+
+      it('returns timeago string based on `issuable.closedAt` when the issue is closed', () => {
+        wrapper = createComponent({
+          issuable: { ...mockIssuable, closedAt: '2020-06-18T11:30:00Z', state: 'closed' },
+        });
+
+        expect(findTimestampWrapper().text()).toContain('closed');
+        expect(findTimestampWrapper().text()).toContain('ago');
+      });
+
+      it('returns timeago string based on `issuable.updatedAt` when the issue is closed but `issuable.closedAt` is undefined', () => {
+        wrapper = createComponent({
+          issuable: { ...mockIssuable, closedAt: undefined, state: 'closed' },
+        });
+
+        expect(findTimestampWrapper().text()).toContain('updated');
+        expect(findTimestampWrapper().text()).toContain('ago');
       });
     });
 
@@ -456,18 +500,31 @@ describe('IssuableItem', () => {
     it('renders issuable updatedAt info', () => {
       wrapper = createComponent();
 
-      const updatedAtEl = wrapper.find('[data-testid="issuable-updated-at"]');
+      const timestampEl = wrapper.find('[data-testid="issuable-timestamp"]');
 
-      expect(updatedAtEl.attributes('title')).toBe('Sep 10, 2020 11:41am UTC');
-      expect(updatedAtEl.text()).toBe(wrapper.vm.updatedAt);
+      expect(timestampEl.attributes('title')).toBe('Sep 10, 2020 11:41am UTC');
+      expect(timestampEl.text()).toBe(wrapper.vm.formattedTimestamp);
     });
 
     describe('when issuable is closed', () => {
       it('renders issuable card with a closed style', () => {
-        wrapper = createComponent({ issuable: { ...mockIssuable, closedAt: '2020-12-10' } });
+        wrapper = createComponent({
+          issuable: { ...mockIssuable, closedAt: '2020-12-10', state: 'closed' },
+        });
 
         expect(wrapper.classes()).toContain('closed');
       });
+
+      it('renders issuable closedAt info and does not render updatedAt info', () => {
+        wrapper = createComponent({
+          issuable: { ...mockIssuable, closedAt: '2022-06-18T11:30:00Z', state: 'closed' },
+        });
+
+        const timestampEl = wrapper.find('[data-testid="issuable-timestamp"]');
+
+        expect(timestampEl.attributes('title')).toBe('Jun 18, 2022 11:30am UTC');
+        expect(timestampEl.text()).toBe(wrapper.vm.formattedTimestamp);
+      });
     });
 
     describe('when issuable was created within the past 24 hours', () => {
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js
index 66f71c0b028..50e79dbe589 100644
--- a/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js
+++ b/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js
@@ -9,6 +9,7 @@ import IssuableItem from '~/vue_shared/issuable/list/components/issuable_item.vu
 import IssuableListRoot from '~/vue_shared/issuable/list/components/issuable_list_root.vue';
 import IssuableTabs from '~/vue_shared/issuable/list/components/issuable_tabs.vue';
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
+import PageSizeSelector from '~/vue_shared/components/page_size_selector.vue';
 
 import { mockIssuableListProps, mockIssuables } from '../mock_data';
 
@@ -44,6 +45,7 @@ describe('IssuableListRoot', () => {
   const findIssuableItem = () => wrapper.findComponent(IssuableItem);
   const findIssuableTabs = () => wrapper.findComponent(IssuableTabs);
   const findVueDraggable = () => wrapper.findComponent(VueDraggable);
+  const findPageSizeSelector = () => wrapper.findComponent(PageSizeSelector);
 
   afterEach(() => {
     wrapper.destroy();
@@ -292,6 +294,7 @@ describe('IssuableListRoot', () => {
       });
 
       expect(findGlKeysetPagination().exists()).toBe(false);
+      expect(findPageSizeSelector().exists()).toBe(false);
       expect(findGlPagination().props()).toMatchObject({
         perPage: 20,
         value: 1,
@@ -483,4 +486,24 @@ describe('IssuableListRoot', () => {
       });
     });
   });
+
+  describe('page size selector', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        props: {
+          showPageSizeChangeControls: true,
+        },
+      });
+    });
+
+    it('has the page size change component', async () => {
+      expect(findPageSizeSelector().exists()).toBe(true);
+    });
+
+    it('emits "page-size-change" event when its input is changed', () => {
+      const pageSize = 123;
+      findPageSizeSelector().vm.$emit('input', pageSize);
+      expect(wrapper.emitted('page-size-change')).toEqual([[pageSize]]);
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js
index 5aa67667033..6f62fb77353 100644
--- a/spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js
+++ b/spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js
@@ -70,7 +70,7 @@ describe('IssuableTitle', () => {
 
       expect(titleEl.exists()).toBe(true);
       expect(titleEl.html()).toBe(
-        '<h1 dir="auto" data-testid="title" class="title qa-title gl-font-size-h-display"><b>Sample</b> title</h1>',
+        '<h1 dir="auto" data-qa-selector="title_content" data-testid="title" class="title gl-font-size-h-display"><b>Sample</b> title</h1>',
       );
 
       wrapperWithTitle.destroy();
diff --git a/spec/frontend/work_items/components/item_title_spec.js b/spec/frontend/work_items/components/item_title_spec.js
index 2c3f6ef8634..a55f448c9a2 100644
--- a/spec/frontend/work_items/components/item_title_spec.js
+++ b/spec/frontend/work_items/components/item_title_spec.js
@@ -1,5 +1,4 @@
 import { shallowMount } from '@vue/test-utils';
-import { escape } from 'lodash';
 import ItemTitle from '~/work_items/components/item_title.vue';
 
 jest.mock('lodash/escape', () => jest.fn((fn) => fn));
@@ -51,6 +50,5 @@ describe('ItemTitle', () => {
     await findInputEl().trigger(sourceEvent);
 
     expect(wrapper.emitted(eventName)).toBeTruthy();
-    expect(escape).toHaveBeenCalledWith(mockUpdatedTitle);
   });
 });
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 0552fe5050e..299949a4baa 100644
--- a/spec/frontend/work_items/components/work_item_assignees_spec.js
+++ b/spec/frontend/work_items/components/work_item_assignees_spec.js
@@ -1,52 +1,90 @@
-import { GlLink, GlTokenSelector } from '@gitlab/ui';
-import { nextTick } from 'vue';
+import { GlLink, GlTokenSelector, GlSkeletonLoader } from '@gitlab/ui';
+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 { mountExtended } from 'helpers/vue_test_utils_helper';
+import { mockTracking } from 'helpers/tracking_helper';
+import { stripTypenames } from 'helpers/graphql_helpers';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+import userSearchQuery from '~/graphql_shared/queries/users_search.query.graphql';
+import currentUserQuery from '~/graphql_shared/queries/current_user.query.graphql';
+import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
 import WorkItemAssignees from '~/work_items/components/work_item_assignees.vue';
-import localUpdateWorkItemMutation from '~/work_items/graphql/local_update_work_item.mutation.graphql';
-
-const mockAssignees = [
-  {
-    __typename: 'UserCore',
-    id: 'gid://gitlab/User/1',
-    avatarUrl: '',
-    webUrl: '',
-    name: 'John Doe',
-    username: 'doe_I',
-  },
-  {
-    __typename: 'UserCore',
-    id: 'gid://gitlab/User/2',
-    avatarUrl: '',
-    webUrl: '',
-    name: 'Marcus Rutherford',
-    username: 'ruthfull',
-  },
-];
+import { i18n, TASK_TYPE_NAME, TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
+import { temporaryConfig, resolvers } from '~/work_items/graphql/provider';
+import {
+  projectMembersResponseWithCurrentUser,
+  mockAssignees,
+  workItemQueryResponse,
+  currentUserResponse,
+  currentUserNullResponse,
+  projectMembersResponseWithoutCurrentUser,
+} from '../mock_data';
 
-const workItemId = 'gid://gitlab/WorkItem/1';
+Vue.use(VueApollo);
 
-const mutate = jest.fn();
+const workItemId = 'gid://gitlab/WorkItem/1';
+const dropdownItems = projectMembersResponseWithCurrentUser.data.workspace.users.nodes;
 
 describe('WorkItemAssignees component', () => {
   let wrapper;
 
   const findAssigneeLinks = () => wrapper.findAllComponents(GlLink);
   const findTokenSelector = () => wrapper.findComponent(GlTokenSelector);
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
 
   const findEmptyState = () => wrapper.findByTestId('empty-state');
+  const findAssignSelfButton = () => wrapper.findByTestId('assign-self');
+  const findAssigneesTitle = () => wrapper.findByTestId('assignees-title');
+
+  const successSearchQueryHandler = jest
+    .fn()
+    .mockResolvedValue(projectMembersResponseWithCurrentUser);
+  const successCurrentUserQueryHandler = jest.fn().mockResolvedValue(currentUserResponse);
+  const noCurrentUserQueryHandler = jest.fn().mockResolvedValue(currentUserNullResponse);
+
+  const errorHandler = jest.fn().mockRejectedValue('Houston, we have a problem');
+
+  const createComponent = ({
+    assignees = mockAssignees,
+    searchQueryHandler = successSearchQueryHandler,
+    currentUserQueryHandler = successCurrentUserQueryHandler,
+    allowsMultipleAssignees = true,
+    canUpdate = true,
+  } = {}) => {
+    const apolloProvider = createMockApollo(
+      [
+        [userSearchQuery, searchQueryHandler],
+        [currentUserQuery, currentUserQueryHandler],
+      ],
+      resolvers,
+      {
+        typePolicies: temporaryConfig.cacheConfig.typePolicies,
+      },
+    );
+
+    apolloProvider.clients.defaultClient.writeQuery({
+      query: workItemQuery,
+      variables: {
+        id: workItemId,
+      },
+      data: workItemQueryResponse.data,
+    });
 
-  const createComponent = ({ assignees = mockAssignees } = {}) => {
     wrapper = mountExtended(WorkItemAssignees, {
+      provide: {
+        fullPath: 'test-project-path',
+      },
       propsData: {
         assignees,
         workItemId,
-      },
-      mocks: {
-        $apollo: {
-          mutate,
-        },
+        allowsMultipleAssignees,
+        workItemType: TASK_TYPE_NAME,
+        canUpdate,
       },
       attachTo: document.body,
+      apolloProvider,
     });
   };
 
@@ -54,39 +92,316 @@ describe('WorkItemAssignees component', () => {
     wrapper.destroy();
   });
 
-  it('should pass the correct data-user-id attribute', () => {
+  it('passes the correct data-user-id attribute', () => {
     createComponent();
 
     expect(findAssigneeLinks().at(0).attributes('data-user-id')).toBe('1');
   });
 
-  describe('when there are assignees', () => {
+  it('container does not have shadow by default', () => {
+    createComponent();
+    expect(findTokenSelector().props('containerClass')).toBe('gl-shadow-none!');
+  });
+
+  it('container has shadow after focusing token selector', async () => {
+    createComponent();
+    findTokenSelector().vm.$emit('focus');
+    await nextTick();
+
+    expect(findTokenSelector().props('containerClass')).toBe('');
+  });
+
+  it('focuses token selector on token selector input event', async () => {
+    createComponent();
+    findTokenSelector().vm.$emit('input', [mockAssignees[0]]);
+    await nextTick();
+
+    expect(findEmptyState().exists()).toBe(false);
+    expect(findTokenSelector().element.contains(document.activeElement)).toBe(true);
+  });
+
+  it('calls a mutation on clicking outside the token selector', async () => {
+    createComponent();
+    findTokenSelector().vm.$emit('input', [mockAssignees[0]]);
+    findTokenSelector().vm.$emit('blur', new FocusEvent({ relatedTarget: null }));
+    await waitForPromises();
+
+    expect(findTokenSelector().props('selectedTokens')).toEqual([mockAssignees[0]]);
+  });
+
+  it('passes `false` to `viewOnly` token selector prop if user can update assignees', () => {
+    createComponent();
+
+    expect(findTokenSelector().props('viewOnly')).toBe(false);
+  });
+
+  it('passes `true` to `viewOnly` token selector prop if user can not update assignees', () => {
+    createComponent({ canUpdate: false });
+
+    expect(findTokenSelector().props('viewOnly')).toBe(true);
+  });
+
+  describe('when searching for users', () => {
     beforeEach(() => {
       createComponent();
     });
 
-    it('should focus token selector on token removal', async () => {
-      findTokenSelector().vm.$emit('token-remove', mockAssignees[0].id);
+    it('does not start user search by default', () => {
+      expect(findTokenSelector().props('loading')).toBe(false);
+      expect(findTokenSelector().props('dropdownItems')).toEqual([]);
+    });
+
+    it('starts user search on hovering for more than 250ms', async () => {
+      findTokenSelector().trigger('mouseover');
+      jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
       await nextTick();
 
-      expect(findEmptyState().exists()).toBe(false);
-      expect(findTokenSelector().element.contains(document.activeElement)).toBe(true);
+      expect(findTokenSelector().props('loading')).toBe(true);
     });
 
-    it('should call a mutation on clicking outside the token selector', async () => {
-      findTokenSelector().vm.$emit('input', [mockAssignees[0]]);
-      findTokenSelector().vm.$emit('token-remove');
+    it('starts user search on focusing token selector', async () => {
+      findTokenSelector().vm.$emit('focus');
       await nextTick();
-      expect(mutate).not.toHaveBeenCalled();
 
-      findTokenSelector().vm.$emit('blur', new FocusEvent({ relatedTarget: null }));
+      expect(findTokenSelector().props('loading')).toBe(true);
+    });
+
+    it('does not start searching if token-selector was hovered for less than 250ms', async () => {
+      findTokenSelector().trigger('mouseover');
+      jest.advanceTimersByTime(100);
+      await nextTick();
+
+      expect(findTokenSelector().props('loading')).toBe(false);
+    });
+
+    it('does not start searching if cursor was moved out from token selector before 250ms passed', async () => {
+      findTokenSelector().trigger('mouseover');
+      jest.advanceTimersByTime(100);
+
+      findTokenSelector().trigger('mouseout');
+      jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
+      await nextTick();
+
+      expect(findTokenSelector().props('loading')).toBe(false);
+    });
+
+    it('shows skeleton loader on dropdown when loading users', async () => {
+      findTokenSelector().vm.$emit('focus');
       await nextTick();
 
-      expect(mutate).toHaveBeenCalledWith({
-        mutation: localUpdateWorkItemMutation,
-        variables: {
-          input: { id: workItemId, assigneeIds: [mockAssignees[0].id] },
-        },
+      expect(findSkeletonLoader().exists()).toBe(true);
+    });
+
+    it('shows correct users list in dropdown when loaded', async () => {
+      findTokenSelector().vm.$emit('focus');
+      await nextTick();
+
+      expect(findSkeletonLoader().exists()).toBe(true);
+
+      await waitForPromises();
+
+      expect(findSkeletonLoader().exists()).toBe(false);
+      expect(findTokenSelector().props('dropdownItems')).toHaveLength(2);
+    });
+
+    it('should search for users with correct key after text input', async () => {
+      const searchKey = 'Hello';
+
+      findTokenSelector().vm.$emit('focus');
+      findTokenSelector().vm.$emit('text-input', searchKey);
+      await waitForPromises();
+
+      expect(successSearchQueryHandler).toHaveBeenCalledWith(
+        expect.objectContaining({ search: searchKey }),
+      );
+    });
+  });
+
+  it('emits error event if search users query fails', async () => {
+    createComponent({ searchQueryHandler: errorHandler });
+    findTokenSelector().vm.$emit('focus');
+    await waitForPromises();
+
+    expect(wrapper.emitted('error')).toEqual([[i18n.fetchError]]);
+  });
+
+  describe('when assigning to current user', () => {
+    it('does not show `Assign myself` button if current user is loading', () => {
+      createComponent();
+      findTokenSelector().trigger('mouseover');
+
+      expect(findAssignSelfButton().exists()).toBe(false);
+    });
+
+    it('does not show `Assign myself` button if work item has assignees', async () => {
+      createComponent();
+      await waitForPromises();
+      findTokenSelector().trigger('mouseover');
+
+      expect(findAssignSelfButton().exists()).toBe(false);
+    });
+
+    it('does now show `Assign myself` button if user is not logged in', async () => {
+      createComponent({ currentUserQueryHandler: noCurrentUserQueryHandler, assignees: [] });
+      await waitForPromises();
+      findTokenSelector().trigger('mouseover');
+
+      expect(findAssignSelfButton().exists()).toBe(false);
+    });
+  });
+
+  describe('when user is logged in and there are no assignees', () => {
+    beforeEach(() => {
+      createComponent({ assignees: [] });
+      return waitForPromises();
+    });
+
+    it('renders `Assign myself` button', async () => {
+      findTokenSelector().trigger('mouseover');
+      expect(findAssignSelfButton().exists()).toBe(true);
+    });
+
+    it('calls update work item assignees mutation with current user as a variable on button click', () => {
+      // TODO: replace this test as soon as we have a real mutation implemented
+      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockImplementation(jest.fn());
+
+      findTokenSelector().trigger('mouseover');
+      findAssignSelfButton().vm.$emit('click', new MouseEvent('click'));
+
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          variables: {
+            input: {
+              assignees: [stripTypenames(currentUserResponse.data.currentUser)],
+              id: workItemId,
+            },
+          },
+        }),
+      );
+    });
+  });
+
+  it('moves current user to the top of dropdown items if user is a project member', async () => {
+    createComponent();
+    await waitForPromises();
+
+    expect(findTokenSelector().props('dropdownItems')[0]).toEqual(
+      expect.objectContaining({
+        ...stripTypenames(currentUserResponse.data.currentUser),
+      }),
+    );
+  });
+
+  describe('when current user is not in the list of project members', () => {
+    const searchQueryHandler = jest
+      .fn()
+      .mockResolvedValue(projectMembersResponseWithoutCurrentUser);
+
+    beforeEach(() => {
+      createComponent({ searchQueryHandler });
+      return waitForPromises();
+    });
+
+    it('adds current user to the top of dropdown items', () => {
+      expect(findTokenSelector().props('dropdownItems')[0]).toEqual(
+        stripTypenames(currentUserResponse.data.currentUser),
+      );
+    });
+
+    it('does not add current user if search is not empty', async () => {
+      findTokenSelector().vm.$emit('text-input', 'test');
+      await waitForPromises();
+
+      expect(findTokenSelector().props('dropdownItems')[0]).not.toEqual(
+        stripTypenames(currentUserResponse.data.currentUser),
+      );
+    });
+  });
+
+  it('has `Assignee` label when only one assignee is present', () => {
+    createComponent({ assignees: [mockAssignees[0]] });
+
+    expect(findAssigneesTitle().text()).toBe('Assignee');
+  });
+
+  it('has `Assignees` label if more than one assignee is present', () => {
+    createComponent();
+
+    expect(findAssigneesTitle().text()).toBe('Assignees');
+  });
+
+  describe('when multiple assignees are allowed', () => {
+    beforeEach(() => {
+      createComponent({ allowsMultipleAssignees: true, assignees: [] });
+      return waitForPromises();
+    });
+
+    it('has `Add assignees` text on placeholder', () => {
+      expect(findEmptyState().text()).toContain('Add assignees');
+    });
+
+    it('adds multiple assignees when token-selector provides multiple values', async () => {
+      findTokenSelector().vm.$emit('input', dropdownItems);
+      await nextTick();
+
+      expect(findTokenSelector().props('selectedTokens')).toHaveLength(2);
+    });
+  });
+
+  describe('when multiple assignees are not allowed', () => {
+    beforeEach(() => {
+      createComponent({ allowsMultipleAssignees: false, assignees: [] });
+      return waitForPromises();
+    });
+
+    it('has `Add assignee` text on placeholder', () => {
+      expect(findEmptyState().text()).toContain('Add assignee');
+      expect(findEmptyState().text()).not.toContain('Add assignees');
+    });
+
+    it('adds a single assignee token-selector provides multiple values', async () => {
+      findTokenSelector().vm.$emit('input', dropdownItems);
+      await nextTick();
+
+      expect(findTokenSelector().props('selectedTokens')).toHaveLength(1);
+    });
+
+    it('removes shadow after token-selector input', async () => {
+      findTokenSelector().vm.$emit('input', dropdownItems);
+      await nextTick();
+
+      expect(findTokenSelector().props('containerClass')).toBe('gl-shadow-none!');
+    });
+  });
+
+  describe('tracking', () => {
+    let trackingSpy;
+
+    beforeEach(() => {
+      createComponent();
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+    });
+
+    afterEach(() => {
+      trackingSpy = null;
+    });
+
+    it('does not track updating assignees until token selector blur event', async () => {
+      findTokenSelector().vm.$emit('input', [mockAssignees[0]]);
+      await waitForPromises();
+
+      expect(trackingSpy).not.toHaveBeenCalled();
+    });
+
+    it('tracks editing the assignees on token selector blur', async () => {
+      findTokenSelector().vm.$emit('input', [mockAssignees[0]]);
+      findTokenSelector().vm.$emit('blur', new FocusEvent({ relatedTarget: null }));
+      await waitForPromises();
+
+      expect(trackingSpy).toHaveBeenCalledWith(TRACKING_CATEGORY_SHOW, 'updated_assignees', {
+        category: TRACKING_CATEGORY_SHOW,
+        label: 'item_assignees',
+        property: 'type_Task',
       });
     });
   });
diff --git a/spec/frontend/work_items/components/work_item_detail_modal_spec.js b/spec/frontend/work_items/components/work_item_detail_modal_spec.js
index d55ba318e46..70b1261bdb7 100644
--- a/spec/frontend/work_items/components/work_item_detail_modal_spec.js
+++ b/spec/frontend/work_items/components/work_item_detail_modal_spec.js
@@ -66,6 +66,7 @@ describe('WorkItemDetailModal component', () => {
     createComponent();
 
     expect(findWorkItemDetail().props()).toEqual({
+      isModal: true,
       workItemId: '1',
       workItemParentId: '2',
     });
@@ -98,6 +99,15 @@ describe('WorkItemDetailModal component', () => {
     expect(wrapper.emitted('close')).toBeTruthy();
   });
 
+  it('hides the modal when WorkItemDetail emits `close` event', () => {
+    createComponent();
+    const closeSpy = jest.spyOn(wrapper.vm.$refs.modal, 'hide');
+
+    findWorkItemDetail().vm.$emit('close');
+
+    expect(closeSpy).toHaveBeenCalled();
+  });
+
   describe('delete work item', () => {
     it('emits workItemDeleted and closes modal', async () => {
       createComponent();
diff --git a/spec/frontend/work_items/components/work_item_information_spec.js b/spec/frontend/work_items/components/work_item_information_spec.js
new file mode 100644
index 00000000000..d5f6921c2bc
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_information_spec.js
@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils';
+import { GlAlert, GlLink } from '@gitlab/ui';
+import WorkItemInformation from '~/work_items/components/work_item_information.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+const createComponent = () => mount(WorkItemInformation);
+
+describe('Work item information alert', () => {
+  let wrapper;
+  const tasksHelpPath = helpPagePath('user/tasks');
+  const workItemsHelpPath = helpPagePath('development/work_items');
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findHelpLink = () => wrapper.findComponent(GlLink);
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should be visible', () => {
+    expect(findAlert().exists()).toBe(true);
+  });
+
+  it('should emit `work-item-banner-dismissed` event when cross icon is clicked', () => {
+    findAlert().vm.$emit('dismiss');
+    expect(wrapper.emitted('work-item-banner-dismissed').length).toBe(1);
+  });
+
+  it('the alert variant should be tip', () => {
+    expect(findAlert().props('variant')).toBe('tip');
+  });
+
+  it('should have the correct text for primary button and link', () => {
+    expect(findAlert().props('title')).toBe(WorkItemInformation.i18n.tasksInformationTitle);
+    expect(findAlert().props('primaryButtonText')).toBe(
+      WorkItemInformation.i18n.learnTasksButtonText,
+    );
+    expect(findAlert().props('primaryButtonLink')).toBe(tasksHelpPath);
+  });
+
+  it('should have the correct link to work item link', () => {
+    expect(findHelpLink().exists()).toBe(true);
+    expect(findHelpLink().attributes('href')).toBe(workItemsHelpPath);
+  });
+});
diff --git a/spec/frontend/work_items/components/work_item_labels_spec.js b/spec/frontend/work_items/components/work_item_labels_spec.js
new file mode 100644
index 00000000000..1734b901d1a
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_labels_spec.js
@@ -0,0 +1,171 @@
+import { GlTokenSelector, GlSkeletonLoader } from '@gitlab/ui';
+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 { 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 WorkItemLabels from '~/work_items/components/work_item_labels.vue';
+import { i18n } from '~/work_items/constants';
+import { temporaryConfig, resolvers } from '~/work_items/graphql/provider';
+import { projectLabelsResponse, mockLabels, workItemQueryResponse } from '../mock_data';
+
+Vue.use(VueApollo);
+
+const workItemId = 'gid://gitlab/WorkItem/1';
+
+describe('WorkItemLabels component', () => {
+  let wrapper;
+
+  const findTokenSelector = () => wrapper.findComponent(GlTokenSelector);
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+
+  const findEmptyState = () => wrapper.findByTestId('empty-state');
+
+  const successSearchQueryHandler = jest.fn().mockResolvedValue(projectLabelsResponse);
+  const errorHandler = jest.fn().mockRejectedValue('Houston, we have a problem');
+
+  const createComponent = ({
+    labels = mockLabels,
+    canUpdate = true,
+    searchQueryHandler = successSearchQueryHandler,
+  } = {}) => {
+    const apolloProvider = createMockApollo([[labelSearchQuery, searchQueryHandler]], resolvers, {
+      typePolicies: temporaryConfig.cacheConfig.typePolicies,
+    });
+
+    apolloProvider.clients.defaultClient.writeQuery({
+      query: workItemQuery,
+      variables: {
+        id: workItemId,
+      },
+      data: workItemQueryResponse.data,
+    });
+
+    wrapper = mountExtended(WorkItemLabels, {
+      provide: {
+        fullPath: 'test-project-path',
+      },
+      propsData: {
+        labels,
+        workItemId,
+        canUpdate,
+      },
+      attachTo: document.body,
+      apolloProvider,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('focuses token selector on token selector input event', async () => {
+    createComponent();
+    findTokenSelector().vm.$emit('input', [mockLabels[0]]);
+    await nextTick();
+
+    expect(findEmptyState().exists()).toBe(false);
+    expect(findTokenSelector().element.contains(document.activeElement)).toBe(true);
+  });
+
+  it('does not start search by default', () => {
+    createComponent();
+
+    expect(findTokenSelector().props('loading')).toBe(false);
+    expect(findTokenSelector().props('dropdownItems')).toEqual([]);
+  });
+
+  it('starts search on hovering for more than 250ms', async () => {
+    createComponent();
+    findTokenSelector().trigger('mouseover');
+    jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
+    await nextTick();
+
+    expect(findTokenSelector().props('loading')).toBe(true);
+  });
+
+  it('starts search on focusing token selector', async () => {
+    createComponent();
+    findTokenSelector().vm.$emit('focus');
+    await nextTick();
+
+    expect(findTokenSelector().props('loading')).toBe(true);
+  });
+
+  it('does not start searching if token-selector was hovered for less than 250ms', async () => {
+    createComponent();
+    findTokenSelector().trigger('mouseover');
+    jest.advanceTimersByTime(100);
+    await nextTick();
+
+    expect(findTokenSelector().props('loading')).toBe(false);
+  });
+
+  it('does not start searching if cursor was moved out from token selector before 250ms passed', async () => {
+    createComponent();
+    findTokenSelector().trigger('mouseover');
+    jest.advanceTimersByTime(100);
+
+    findTokenSelector().trigger('mouseout');
+    jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
+    await nextTick();
+
+    expect(findTokenSelector().props('loading')).toBe(false);
+  });
+
+  it('shows skeleton loader on dropdown when loading', async () => {
+    createComponent();
+    findTokenSelector().vm.$emit('focus');
+    await nextTick();
+
+    expect(findSkeletonLoader().exists()).toBe(true);
+  });
+
+  it('shows list in dropdown when loaded', async () => {
+    createComponent();
+    findTokenSelector().vm.$emit('focus');
+    await nextTick();
+
+    expect(findSkeletonLoader().exists()).toBe(true);
+
+    await waitForPromises();
+
+    expect(findSkeletonLoader().exists()).toBe(false);
+    expect(findTokenSelector().props('dropdownItems')).toHaveLength(2);
+  });
+
+  it.each([true, false])(
+    'passes canUpdate=%s prop to view-only of token-selector',
+    async (canUpdate) => {
+      createComponent({ canUpdate });
+
+      await waitForPromises();
+
+      expect(findTokenSelector().props('viewOnly')).toBe(!canUpdate);
+    },
+  );
+
+  it('emits error event if search query fails', async () => {
+    createComponent({ searchQueryHandler: errorHandler });
+    findTokenSelector().vm.$emit('focus');
+    await waitForPromises();
+
+    expect(wrapper.emitted('error')).toEqual([[i18n.fetchError]]);
+  });
+
+  it('should search for with correct key after text input', async () => {
+    const searchKey = 'Hello';
+
+    createComponent();
+    findTokenSelector().vm.$emit('focus');
+    findTokenSelector().vm.$emit('text-input', searchKey);
+    await waitForPromises();
+
+    expect(successSearchQueryHandler).toHaveBeenCalledWith(
+      expect.objectContaining({ search: searchKey }),
+    );
+  });
+});
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
new file mode 100644
index 00000000000..93bf7286aa7
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_links/work_item_links_form_spec.js
@@ -0,0 +1,65 @@
+import Vue from 'vue';
+import { GlForm, GlFormCombobox } from '@gitlab/ui';
+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 WorkItemLinksForm from '~/work_items/components/work_item_links/work_item_links_form.vue';
+import projectWorkItemsQuery from '~/work_items/graphql/project_work_items.query.graphql';
+import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
+import { availableWorkItemsResponse, updateWorkItemMutationResponse } from '../../mock_data';
+
+Vue.use(VueApollo);
+
+describe('WorkItemLinksForm', () => {
+  let wrapper;
+
+  const updateMutationResolver = jest.fn().mockResolvedValue(updateWorkItemMutationResponse);
+
+  const createComponent = async ({ listResponse = availableWorkItemsResponse } = {}) => {
+    wrapper = shallowMountExtended(WorkItemLinksForm, {
+      apolloProvider: createMockApollo([
+        [projectWorkItemsQuery, jest.fn().mockResolvedValue(listResponse)],
+        [updateWorkItemMutation, updateMutationResolver],
+      ]),
+      propsData: { issuableGid: 'gid://gitlab/WorkItem/1' },
+      provide: {
+        projectPath: 'project/path',
+      },
+    });
+
+    await waitForPromises();
+  };
+
+  const findForm = () => wrapper.findComponent(GlForm);
+  const findCombobox = () => wrapper.findComponent(GlFormCombobox);
+  const findAddChildButton = () => wrapper.findByTestId('add-child-button');
+
+  beforeEach(async () => {
+    await createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders form', () => {
+    expect(findForm().exists()).toBe(true);
+  });
+
+  it('passes available work items as prop when typing in combobox', async () => {
+    findCombobox().vm.$emit('input', 'Task');
+    await waitForPromises();
+
+    expect(findCombobox().exists()).toBe(true);
+    expect(findCombobox().props('tokenList').length).toBe(2);
+  });
+
+  it('selects and add child', async () => {
+    findCombobox().vm.$emit('input', availableWorkItemsResponse.data.workspace.workItems.edges[0]);
+
+    findAddChildButton().vm.$emit('click');
+    await waitForPromises();
+    expect(updateMutationResolver).toHaveBeenCalled();
+  });
+});
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
new file mode 100644
index 00000000000..f8471b7f167
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_links/work_item_links_menu_spec.js
@@ -0,0 +1,141 @@
+import Vue from 'vue';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { cloneDeep } from 'lodash';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import WorkItemLinksMenu from '~/work_items/components/work_item_links/work_item_links_menu.vue';
+import changeWorkItemParentMutation from '~/work_items/graphql/change_work_item_parent_link.mutation.graphql';
+import getWorkItemLinksQuery from '~/work_items/graphql/work_item_links.query.graphql';
+import { WIDGET_TYPE_HIERARCHY } from '~/work_items/constants';
+import { workItemHierarchyResponse, changeWorkItemParentMutationResponse } from '../../mock_data';
+
+Vue.use(VueApollo);
+
+const PARENT_ID = 'gid://gitlab/WorkItem/1';
+const WORK_ITEM_ID = 'gid://gitlab/WorkItem/3';
+
+describe('WorkItemLinksMenu', () => {
+  let wrapper;
+  let mockApollo;
+
+  const $toast = {
+    show: jest.fn(),
+  };
+
+  const createComponent = async ({
+    data = {},
+    mutationHandler = jest.fn().mockResolvedValue(changeWorkItemParentMutationResponse),
+  } = {}) => {
+    mockApollo = createMockApollo([
+      [getWorkItemLinksQuery, jest.fn().mockResolvedValue(workItemHierarchyResponse)],
+      [changeWorkItemParentMutation, mutationHandler],
+    ]);
+
+    mockApollo.clients.defaultClient.cache.writeQuery({
+      query: getWorkItemLinksQuery,
+      variables: {
+        id: PARENT_ID,
+      },
+      data: workItemHierarchyResponse.data,
+    });
+
+    wrapper = shallowMountExtended(WorkItemLinksMenu, {
+      data() {
+        return {
+          ...data,
+        };
+      },
+      propsData: {
+        workItemId: WORK_ITEM_ID,
+        parentWorkItemId: PARENT_ID,
+      },
+      apolloProvider: mockApollo,
+      mocks: {
+        $toast,
+      },
+    });
+
+    await waitForPromises();
+  };
+
+  const findDropdown = () => wrapper.find(GlDropdown);
+  const findRemoveDropdownItem = () => wrapper.find(GlDropdownItem);
+
+  beforeEach(async () => {
+    await createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    mockApollo = null;
+  });
+
+  it('renders dropdown and dropdown items', () => {
+    expect(findDropdown().exists()).toBe(true);
+    expect(findRemoveDropdownItem().exists()).toBe(true);
+  });
+
+  it('calls correct mutation with correct variables', async () => {
+    const mutationHandler = jest.fn().mockResolvedValue(changeWorkItemParentMutationResponse);
+
+    createComponent({ mutationHandler });
+
+    findRemoveDropdownItem().vm.$emit('click');
+
+    await waitForPromises();
+
+    expect(mutationHandler).toHaveBeenCalledWith({
+      id: WORK_ITEM_ID,
+      parentId: null,
+    });
+  });
+
+  it('shows toast when mutation succeeds', async () => {
+    const mutationHandler = jest.fn().mockResolvedValue(changeWorkItemParentMutationResponse);
+
+    createComponent({ mutationHandler });
+
+    findRemoveDropdownItem().vm.$emit('click');
+
+    await waitForPromises();
+
+    expect($toast.show).toHaveBeenCalledWith('Child removed', {
+      action: { onClick: expect.anything(), text: 'Undo' },
+    });
+  });
+
+  it('updates the cache when mutation succeeds', async () => {
+    const mutationHandler = jest.fn().mockResolvedValue(changeWorkItemParentMutationResponse);
+
+    createComponent({ mutationHandler });
+
+    mockApollo.clients.defaultClient.cache.readQuery = jest.fn(
+      () => workItemHierarchyResponse.data,
+    );
+
+    mockApollo.clients.defaultClient.cache.writeQuery = jest.fn();
+
+    findRemoveDropdownItem().vm.$emit('click');
+
+    await waitForPromises();
+
+    // Remove the work item from parent's children
+    const resp = cloneDeep(workItemHierarchyResponse);
+    const index = resp.data.workItem.widgets
+      .find((widget) => widget.type === WIDGET_TYPE_HIERARCHY)
+      .children.nodes.findIndex((child) => child.id === WORK_ITEM_ID);
+    resp.data.workItem.widgets
+      .find((widget) => widget.type === WIDGET_TYPE_HIERARCHY)
+      .children.nodes.splice(index, 1);
+
+    expect(mockApollo.clients.defaultClient.cache.writeQuery).toHaveBeenCalledWith(
+      expect.objectContaining({
+        query: expect.anything(),
+        variables: { id: PARENT_ID },
+        data: resp.data,
+      }),
+    );
+  });
+});
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 774e9198992..2ec9b1ec0ac 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
@@ -51,6 +51,20 @@ describe('WorkItemLinks', () => {
     expect(findLinksBody().exists()).toBe(false);
   });
 
+  describe('add link form', () => {
+    it('displays form on click add button and hides form on cancel', async () => {
+      findToggleAddFormButton().vm.$emit('click');
+      await nextTick();
+
+      expect(findAddLinksForm().exists()).toBe(true);
+
+      findAddLinksForm().vm.$emit('cancel');
+      await nextTick();
+
+      expect(findAddLinksForm().exists()).toBe(false);
+    });
+  });
+
   describe('when no child links', () => {
     beforeEach(async () => {
       await createComponent({ response: workItemHierarchyEmptyResponse });
@@ -59,22 +73,6 @@ describe('WorkItemLinks', () => {
     it('displays empty state if there are no children', () => {
       expect(findEmptyState().exists()).toBe(true);
     });
-
-    describe('add link form', () => {
-      it('displays form on click add button and hides form on cancel', async () => {
-        expect(findEmptyState().exists()).toBe(true);
-
-        findToggleAddFormButton().vm.$emit('click');
-        await nextTick();
-
-        expect(findAddLinksForm().exists()).toBe(true);
-
-        findAddLinksForm().vm.$emit('cancel');
-        await nextTick();
-
-        expect(findAddLinksForm().exists()).toBe(false);
-      });
-    });
   });
 
   it('renders all hierarchy widget children', () => {
diff --git a/spec/frontend/work_items/components/work_item_weight_spec.js b/spec/frontend/work_items/components/work_item_weight_spec.js
index 80a1d032ad7..c3bbea26cda 100644
--- a/spec/frontend/work_items/components/work_item_weight_spec.js
+++ b/spec/frontend/work_items/components/work_item_weight_spec.js
@@ -1,21 +1,51 @@
-import { shallowMount } from '@vue/test-utils';
+import { GlForm, GlFormInput } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import { mockTracking } from 'helpers/tracking_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { __ } from '~/locale';
 import WorkItemWeight from '~/work_items/components/work_item_weight.vue';
+import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
+import localUpdateWorkItemMutation from '~/work_items/graphql/local_update_work_item.mutation.graphql';
 
-describe('WorkItemAssignees component', () => {
+describe('WorkItemWeight component', () => {
   let wrapper;
 
-  const createComponent = ({ weight, hasIssueWeightsFeature = true } = {}) => {
-    wrapper = shallowMount(WorkItemWeight, {
+  const mutateSpy = jest.fn();
+  const workItemId = 'gid://gitlab/WorkItem/1';
+  const workItemType = 'Task';
+
+  const findForm = () => wrapper.findComponent(GlForm);
+  const findInput = () => wrapper.findComponent(GlFormInput);
+
+  const createComponent = ({
+    canUpdate = false,
+    hasIssueWeightsFeature = true,
+    isEditing = false,
+    weight,
+  } = {}) => {
+    wrapper = mountExtended(WorkItemWeight, {
       propsData: {
+        canUpdate,
         weight,
+        workItemId,
+        workItemType,
       },
       provide: {
         hasIssueWeightsFeature,
       },
+      mocks: {
+        $apollo: {
+          mutate: mutateSpy,
+        },
+      },
     });
+
+    if (isEditing) {
+      findInput().vm.$emit('focus');
+    }
   };
 
-  describe('weight licensed feature', () => {
+  describe('`issue_weights` licensed feature', () => {
     describe.each`
       description             | hasIssueWeightsFeature | exists
       ${'when available'}     | ${true}                | ${true}
@@ -24,23 +54,111 @@ describe('WorkItemAssignees component', () => {
       it(hasIssueWeightsFeature ? 'renders component' : 'does not render component', () => {
         createComponent({ hasIssueWeightsFeature });
 
-        expect(wrapper.find('div').exists()).toBe(exists);
+        expect(findForm().exists()).toBe(exists);
       });
     });
   });
 
-  describe('weight text', () => {
-    describe.each`
-      description       | weight       | text
-      ${'renders 1'}    | ${1}         | ${'1'}
-      ${'renders 0'}    | ${0}         | ${'0'}
-      ${'renders None'} | ${null}      | ${'None'}
-      ${'renders None'} | ${undefined} | ${'None'}
-    `('when weight is $weight', ({ description, weight, text }) => {
-      it(description, () => {
-        createComponent({ weight });
-
-        expect(wrapper.text()).toContain(text);
+  describe('weight input', () => {
+    it('has "Weight" label', () => {
+      createComponent();
+
+      expect(wrapper.findByLabelText(__('Weight')).exists()).toBe(true);
+    });
+
+    describe('placeholder attribute', () => {
+      describe.each`
+        description                             | isEditing | canUpdate | value
+        ${'when not editing and cannot update'} | ${false}  | ${false}  | ${__('None')}
+        ${'when editing and cannot update'}     | ${true}   | ${false}  | ${__('None')}
+        ${'when not editing and can update'}    | ${false}  | ${true}   | ${__('None')}
+        ${'when editing and can update'}        | ${true}   | ${true}   | ${__('Enter a number')}
+      `('$description', ({ isEditing, canUpdate, value }) => {
+        it(`has a value of "${value}"`, async () => {
+          createComponent({ canUpdate, isEditing });
+          await nextTick();
+
+          expect(findInput().attributes('placeholder')).toBe(value);
+        });
+      });
+    });
+
+    describe('readonly attribute', () => {
+      describe.each`
+        description             | canUpdate | value
+        ${'when cannot update'} | ${false}  | ${'readonly'}
+        ${'when can update'}    | ${true}   | ${undefined}
+      `('$description', ({ canUpdate, value }) => {
+        it(`renders readonly=${value}`, () => {
+          createComponent({ canUpdate });
+
+          expect(findInput().attributes('readonly')).toBe(value);
+        });
+      });
+    });
+
+    describe('type attribute', () => {
+      describe.each`
+        description                             | isEditing | canUpdate | type
+        ${'when not editing and cannot update'} | ${false}  | ${false}  | ${'text'}
+        ${'when editing and cannot update'}     | ${true}   | ${false}  | ${'text'}
+        ${'when not editing and can update'}    | ${false}  | ${true}   | ${'text'}
+        ${'when editing and can update'}        | ${true}   | ${true}   | ${'number'}
+      `('$description', ({ isEditing, canUpdate, type }) => {
+        it(`has a value of "${type}"`, async () => {
+          createComponent({ canUpdate, isEditing });
+          await nextTick();
+
+          expect(findInput().attributes('type')).toBe(type);
+        });
+      });
+    });
+
+    describe('value attribute', () => {
+      describe.each`
+        weight       | value
+        ${1}         | ${'1'}
+        ${0}         | ${'0'}
+        ${null}      | ${''}
+        ${undefined} | ${''}
+      `('when `weight` prop is "$weight"', ({ weight, value }) => {
+        it(`value is "${value}"`, () => {
+          createComponent({ weight });
+
+          expect(findInput().element.value).toBe(value);
+        });
+      });
+    });
+
+    describe('when blurred', () => {
+      it('calls a mutation to update the weight', () => {
+        const weight = 0;
+        createComponent({ isEditing: true, weight });
+
+        findInput().trigger('blur');
+
+        expect(mutateSpy).toHaveBeenCalledWith({
+          mutation: localUpdateWorkItemMutation,
+          variables: {
+            input: {
+              id: workItemId,
+              weight,
+            },
+          },
+        });
+      });
+
+      it('tracks updating the weight', () => {
+        const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+        createComponent();
+
+        findInput().trigger('blur');
+
+        expect(trackingSpy).toHaveBeenCalledWith(TRACKING_CATEGORY_SHOW, 'updated_weight', {
+          category: TRACKING_CATEGORY_SHOW,
+          label: 'item_weight',
+          property: 'type_Task',
+        });
       });
     });
   });
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index bf3f4e1364d..0359caf7116 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -1,3 +1,22 @@
+export const mockAssignees = [
+  {
+    __typename: 'UserCore',
+    id: 'gid://gitlab/User/1',
+    avatarUrl: '',
+    webUrl: '',
+    name: 'John Doe',
+    username: 'doe_I',
+  },
+  {
+    __typename: 'UserCore',
+    id: 'gid://gitlab/User/2',
+    avatarUrl: '',
+    webUrl: '',
+    name: 'Marcus Rutherford',
+    username: 'ruthfull',
+  },
+];
+
 export const workItemQueryResponse = {
   data: {
     workItem: {
@@ -23,6 +42,32 @@ export const workItemQueryResponse = {
           descriptionHtml:
             '<p data-sourcepos="1:1-1:19" dir="auto">some <strong>great</strong> text</p>',
         },
+        {
+          __typename: 'WorkItemWidgetAssignees',
+          type: 'ASSIGNEES',
+          allowsMultipleAssignees: true,
+          assignees: {
+            nodes: mockAssignees,
+          },
+        },
+        {
+          __typename: 'WorkItemWidgetHierarchy',
+          type: 'HIERARCHY',
+          parent: {
+            id: 'gid://gitlab/Issue/1',
+            iid: '5',
+            title: 'Parent title',
+          },
+          children: {
+            edges: [
+              {
+                node: {
+                  id: 'gid://gitlab/WorkItem/444',
+                },
+              },
+            ],
+          },
+        },
       ],
     },
   },
@@ -47,13 +92,28 @@ export const updateWorkItemMutationResponse = {
           deleteWorkItem: false,
           updateWorkItem: false,
         },
-        widgets: [],
+        widgets: [
+          {
+            children: {
+              edges: [
+                {
+                  node: 'gid://gitlab/WorkItem/444',
+                },
+              ],
+            },
+          },
+        ],
       },
     },
   },
 };
 
-export const workItemResponseFactory = ({ canUpdate } = {}) => ({
+export const workItemResponseFactory = ({
+  canUpdate = false,
+  allowsMultipleAssignees = true,
+  assigneesWidgetPresent = true,
+  parent = null,
+} = {}) => ({
   data: {
     workItem: {
       __typename: 'WorkItem',
@@ -78,6 +138,30 @@ export const workItemResponseFactory = ({ canUpdate } = {}) => ({
           descriptionHtml:
             '<p data-sourcepos="1:1-1:19" dir="auto">some <strong>great</strong> text</p>',
         },
+        assigneesWidgetPresent
+          ? {
+              __typename: 'WorkItemWidgetAssignees',
+              type: 'ASSIGNEES',
+              allowsMultipleAssignees,
+              assignees: {
+                nodes: mockAssignees,
+              },
+            }
+          : { type: 'MOCK TYPE' },
+        {
+          __typename: 'WorkItemWidgetHierarchy',
+          type: 'HIERARCHY',
+          children: {
+            edges: [
+              {
+                node: {
+                  id: 'gid://gitlab/WorkItem/444',
+                },
+              },
+            ],
+          },
+          parent,
+        },
       ],
     },
   },
@@ -140,13 +224,45 @@ export const createWorkItemFromTaskMutationResponse = {
       __typename: 'WorkItemCreateFromTaskPayload',
       errors: [],
       workItem: {
-        descriptionHtml: '<p>New description</p>',
-        id: 'gid://gitlab/WorkItem/13',
         __typename: 'WorkItem',
+        description: 'New description',
+        id: 'gid://gitlab/WorkItem/1',
+        title: 'Updated title',
+        state: 'OPEN',
+        workItemType: {
+          __typename: 'WorkItemType',
+          id: 'gid://gitlab/WorkItems::Type/5',
+          name: 'Task',
+        },
         userPermissions: {
           deleteWorkItem: false,
           updateWorkItem: false,
         },
+        widgets: [
+          {
+            __typename: 'WorkItemWidgetDescription',
+            type: 'DESCRIPTION',
+            description: 'New description',
+            descriptionHtml: '<p>New description</p>',
+          },
+        ],
+      },
+      newWorkItem: {
+        __typename: 'WorkItem',
+        id: 'gid://gitlab/WorkItem/1000000',
+        title: 'Updated title',
+        state: 'OPEN',
+        description: '',
+        workItemType: {
+          __typename: 'WorkItemType',
+          id: 'gid://gitlab/WorkItems::Type/5',
+          name: 'Task',
+        },
+        userPermissions: {
+          deleteWorkItem: false,
+          updateWorkItem: false,
+        },
+        widgets: [],
       },
     },
   },
@@ -275,3 +391,171 @@ export const workItemHierarchyResponse = {
     },
   },
 };
+
+export const changeWorkItemParentMutationResponse = {
+  data: {
+    workItemUpdate: {
+      workItem: {
+        id: 'gid://gitlab/WorkItem/2',
+        workItemType: {
+          id: 'gid://gitlab/WorkItems::Type/5',
+          __typename: 'WorkItemType',
+        },
+        title: 'Foo',
+        state: 'OPEN',
+        __typename: 'WorkItem',
+      },
+      errors: [],
+      __typename: 'WorkItemUpdatePayload',
+    },
+  },
+};
+
+export const availableWorkItemsResponse = {
+  data: {
+    workspace: {
+      __typename: 'Project',
+      id: 'gid://gitlab/Project/2',
+      workItems: {
+        edges: [
+          {
+            node: {
+              id: 'gid://gitlab/WorkItem/458',
+              title: 'Task 1',
+              state: 'OPEN',
+            },
+          },
+          {
+            node: {
+              id: 'gid://gitlab/WorkItem/459',
+              title: 'Task 2',
+              state: 'OPEN',
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const projectMembersResponseWithCurrentUser = {
+  data: {
+    workspace: {
+      id: '1',
+      __typename: 'Project',
+      users: {
+        nodes: [
+          {
+            id: 'user-2',
+            user: {
+              __typename: 'UserCore',
+              id: 'gid://gitlab/User/5',
+              avatarUrl: '/avatar2',
+              name: 'rookie',
+              username: 'rookie',
+              webUrl: 'rookie',
+              status: null,
+            },
+          },
+          {
+            id: 'user-1',
+            user: {
+              __typename: 'UserCore',
+              id: 'gid://gitlab/User/1',
+              avatarUrl:
+                'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+              name: 'Administrator',
+              username: 'root',
+              webUrl: '/root',
+              status: null,
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const projectMembersResponseWithoutCurrentUser = {
+  data: {
+    workspace: {
+      id: '1',
+      __typename: 'Project',
+      users: {
+        nodes: [
+          {
+            id: 'user-2',
+            user: {
+              __typename: 'UserCore',
+              id: 'gid://gitlab/User/5',
+              avatarUrl: '/avatar2',
+              name: 'rookie',
+              username: 'rookie',
+              webUrl: 'rookie',
+              status: null,
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const currentUserResponse = {
+  data: {
+    currentUser: {
+      __typename: 'UserCore',
+      id: 'gid://gitlab/User/1',
+      avatarUrl:
+        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+      name: 'Administrator',
+      username: 'root',
+      webUrl: '/root',
+    },
+  },
+};
+
+export const currentUserNullResponse = {
+  data: {
+    currentUser: null,
+  },
+};
+
+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: {
+      id: '1',
+      __typename: 'Project',
+      labels: {
+        nodes: mockLabels,
+      },
+    },
+  },
+};
+
+export const mockParent = {
+  parent: {
+    id: 'gid://gitlab/Issue/1',
+    iid: '5',
+    title: 'Parent title',
+  },
+};
diff --git a/spec/frontend/work_items/pages/create_work_item_spec.js b/spec/frontend/work_items/pages/create_work_item_spec.js
index e89477ed599..fed8be3783a 100644
--- a/spec/frontend/work_items/pages/create_work_item_spec.js
+++ b/spec/frontend/work_items/pages/create_work_item_spec.js
@@ -9,11 +9,7 @@ import ItemTitle from '~/work_items/components/item_title.vue';
 import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
 import createWorkItemMutation from '~/work_items/graphql/create_work_item.mutation.graphql';
 import createWorkItemFromTaskMutation from '~/work_items/graphql/create_work_item_from_task.mutation.graphql';
-import {
-  projectWorkItemTypesQueryResponse,
-  createWorkItemMutationResponse,
-  createWorkItemFromTaskMutationResponse,
-} from '../mock_data';
+import { projectWorkItemTypesQueryResponse, createWorkItemMutationResponse } from '../mock_data';
 
 jest.mock('~/lib/utils/uuids', () => ({ uuids: () => ['testuuid'] }));
 
@@ -25,9 +21,6 @@ describe('Create work item component', () => {
 
   const querySuccessHandler = jest.fn().mockResolvedValue(projectWorkItemTypesQueryResponse);
   const createWorkItemSuccessHandler = jest.fn().mockResolvedValue(createWorkItemMutationResponse);
-  const createWorkItemFromTaskSuccessHandler = jest
-    .fn()
-    .mockResolvedValue(createWorkItemFromTaskMutationResponse);
   const errorHandler = jest.fn().mockRejectedValue('Houston, we have a problem');
 
   const findAlert = () => wrapper.findComponent(GlAlert);
@@ -122,49 +115,6 @@ describe('Create work item component', () => {
     });
   });
 
-  describe('when displayed in a modal', () => {
-    beforeEach(() => {
-      createComponent({
-        props: {
-          isModal: true,
-        },
-        mutationHandler: createWorkItemFromTaskSuccessHandler,
-      });
-    });
-
-    it('emits `closeModal` event on Cancel button click', () => {
-      findCancelButton().vm.$emit('click');
-
-      expect(wrapper.emitted('closeModal')).toEqual([[]]);
-    });
-
-    it('emits `onCreate` on successful mutation', async () => {
-      findTitleInput().vm.$emit('title-input', 'Test title');
-
-      wrapper.find('form').trigger('submit');
-      await waitForPromises();
-
-      expect(wrapper.emitted('onCreate')).toEqual([['<p>New description</p>']]);
-    });
-
-    it('does not right margin for create button', () => {
-      expect(findCreateButton().classes()).not.toContain('gl-mr-3');
-    });
-
-    it('adds right margin for cancel button', () => {
-      expect(findCancelButton().classes()).toContain('gl-mr-3');
-    });
-
-    it('adds padding for content', () => {
-      expect(findContent().classes('gl-px-5')).toBe(true);
-    });
-
-    it('defaults type to `Task`', async () => {
-      await waitForPromises();
-      expect(findSelect().attributes('value')).toBe('gid://gitlab/WorkItems::Type/3');
-    });
-  });
-
   it('displays a loading icon inside dropdown when work items query is loading', () => {
     createComponent();
 
diff --git a/spec/frontend/work_items/pages/work_item_detail_spec.js b/spec/frontend/work_items/pages/work_item_detail_spec.js
index b9724034cb4..43869468ad0 100644
--- a/spec/frontend/work_items/pages/work_item_detail_spec.js
+++ b/spec/frontend/work_items/pages/work_item_detail_spec.js
@@ -1,26 +1,36 @@
-import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
+import { GlAlert, GlSkeletonLoader, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import WorkItemDetail from '~/work_items/components/work_item_detail.vue';
 import WorkItemDescription from '~/work_items/components/work_item_description.vue';
 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 WorkItemWeight from '~/work_items/components/work_item_weight.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 workItemTitleSubscription from '~/work_items/graphql/work_item_title.subscription.graphql';
 import { temporaryConfig } from '~/work_items/graphql/provider';
-import { workItemTitleSubscriptionResponse, workItemQueryResponse } from '../mock_data';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+import {
+  workItemTitleSubscriptionResponse,
+  workItemResponseFactory,
+  mockParent,
+} from '../mock_data';
 
 describe('WorkItemDetail component', () => {
   let wrapper;
+  useLocalStorageSpy();
 
   Vue.use(VueApollo);
 
+  const workItemQueryResponse = workItemResponseFactory();
   const successHandler = jest.fn().mockResolvedValue(workItemQueryResponse);
   const initialSubscriptionHandler = jest.fn().mockResolvedValue(workItemTitleSubscriptionResponse);
 
@@ -30,9 +40,17 @@ describe('WorkItemDetail component', () => {
   const findWorkItemState = () => wrapper.findComponent(WorkItemState);
   const findWorkItemDescription = () => wrapper.findComponent(WorkItemDescription);
   const findWorkItemAssignees = () => wrapper.findComponent(WorkItemAssignees);
+  const findWorkItemLabels = () => wrapper.findComponent(WorkItemLabels);
   const findWorkItemWeight = () => wrapper.findComponent(WorkItemWeight);
+  const findParent = () => wrapper.find('[data-testid="work-item-parent"]');
+  const findParentButton = () => findParent().findComponent(GlButton);
+  const findCloseButton = () => wrapper.find('[data-testid="work-item-close"]');
+  const findWorkItemType = () => wrapper.find('[data-testid="work-item-type"]');
+  const findWorkItemInformationAlert = () => wrapper.findComponent(WorkItemInformation);
+  const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
 
   const createComponent = ({
+    isModal = false,
     workItemId = workItemQueryResponse.data.workItem.id,
     handler = successHandler,
     subscriptionHandler = initialSubscriptionHandler,
@@ -50,7 +68,7 @@ describe('WorkItemDetail component', () => {
           typePolicies: includeWidgets ? temporaryConfig.cacheConfig.typePolicies : {},
         },
       ),
-      propsData: { workItemId },
+      propsData: { isModal, workItemId },
       provide: {
         glFeatures: {
           workItemsMvc2: workItemsMvc2Enabled,
@@ -98,6 +116,36 @@ describe('WorkItemDetail component', () => {
     });
   });
 
+  describe('close button', () => {
+    describe('when isModal prop is false', () => {
+      it('does not render', async () => {
+        createComponent({ isModal: false });
+        await waitForPromises();
+
+        expect(findCloseButton().exists()).toBe(false);
+      });
+    });
+
+    describe('when isModal prop is true', () => {
+      it('renders', async () => {
+        createComponent({ isModal: true });
+        await waitForPromises();
+
+        expect(findCloseButton().props('icon')).toBe('close');
+        expect(findCloseButton().attributes('aria-label')).toBe('Close');
+      });
+
+      it('emits `close` event when clicked', async () => {
+        createComponent({ isModal: true });
+        await waitForPromises();
+
+        findCloseButton().vm.$emit('click');
+
+        expect(wrapper.emitted('close')).toEqual([[]]);
+      });
+    });
+  });
+
   describe('description', () => {
     it('does not show description widget if loading description fails', () => {
       createComponent();
@@ -107,13 +155,56 @@ describe('WorkItemDetail component', () => {
 
     it('shows description widget if description loads', async () => {
       createComponent();
-
       await waitForPromises();
 
       expect(findWorkItemDescription().exists()).toBe(true);
     });
   });
 
+  describe('secondary breadcrumbs', () => {
+    it('does not show secondary breadcrumbs by default', () => {
+      createComponent();
+
+      expect(findParent().exists()).toBe(false);
+    });
+
+    it('does not show secondary breadcrumbs if there is not a parent', async () => {
+      createComponent();
+
+      await waitForPromises();
+
+      expect(findParent().exists()).toBe(false);
+    });
+
+    it('shows work item type if there is not a parent', async () => {
+      createComponent();
+
+      await waitForPromises();
+      expect(findWorkItemType().exists()).toBe(true);
+    });
+
+    describe('with parent', () => {
+      beforeEach(() => {
+        const parentResponse = workItemResponseFactory(mockParent);
+        createComponent({ handler: jest.fn().mockResolvedValue(parentResponse) });
+
+        return waitForPromises();
+      });
+
+      it('shows secondary breadcrumbs if there is a parent', () => {
+        expect(findParent().exists()).toBe(true);
+      });
+
+      it('does not show work item type', async () => {
+        expect(findWorkItemType().exists()).toBe(false);
+      });
+
+      it('sets the parent breadcrumb URL', () => {
+        expect(findParentButton().attributes().href).toBe('../../issues/5');
+      });
+    });
+  });
+
   it('shows an error message when the work item query was unsuccessful', async () => {
     const errorHandler = jest.fn().mockRejectedValue('Oops');
     createComponent({ handler: errorHandler });
@@ -145,7 +236,6 @@ describe('WorkItemDetail component', () => {
     it('renders assignees component when assignees widget is returned from the API', async () => {
       createComponent({
         workItemsMvc2Enabled: true,
-        includeWidgets: true,
       });
       await waitForPromises();
 
@@ -155,7 +245,9 @@ describe('WorkItemDetail component', () => {
     it('does not render assignees component when assignees widget is not returned from the API', async () => {
       createComponent({
         workItemsMvc2Enabled: true,
-        includeWidgets: false,
+        handler: jest
+          .fn()
+          .mockResolvedValue(workItemResponseFactory({ assigneesWidgetPresent: false })),
       });
       await waitForPromises();
 
@@ -170,6 +262,19 @@ describe('WorkItemDetail component', () => {
     expect(findWorkItemAssignees().exists()).toBe(false);
   });
 
+  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 });
+      await waitForPromises();
+
+      expect(findWorkItemLabels().exists()).toBe(exists);
+    });
+  });
+
   describe('weight widget', () => {
     describe('when work_items_mvc_2 feature flag is enabled', () => {
       describe.each`
@@ -201,4 +306,22 @@ describe('WorkItemDetail component', () => {
       });
     });
   });
+
+  describe('work item information', () => {
+    beforeEach(() => {
+      createComponent();
+      return waitForPromises();
+    });
+
+    it('is visible when viewed for the first time and sets localStorage value', async () => {
+      localStorage.clear();
+      expect(findWorkItemInformationAlert().exists()).toBe(true);
+      expect(findLocalStorageSync().props('value')).toBe(true);
+    });
+
+    it('is not visible after reading local storage input', async () => {
+      await findLocalStorageSync().vm.$emit('input', false);
+      expect(findWorkItemInformationAlert().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/work_items/pages/work_item_root_spec.js b/spec/frontend/work_items/pages/work_item_root_spec.js
index 3c5da94114e..d9372f2bcf0 100644
--- a/spec/frontend/work_items/pages/work_item_root_spec.js
+++ b/spec/frontend/work_items/pages/work_item_root_spec.js
@@ -52,6 +52,7 @@ describe('Work items root component', () => {
     createComponent();
 
     expect(findWorkItemDetail().props()).toEqual({
+      isModal: false,
       workItemId: 'gid://gitlab/WorkItem/1',
       workItemParentId: null,
     });