35 files changed, 247 insertions, 222 deletions

diff --git a/app/assets/javascripts/pages/groups/registry/repositories/index.js b/app/assets/javascripts/pages/groups/registry/repositories/index.js
index b663defad0e..635513afd95 100644
--- a/app/assets/javascripts/pages/groups/registry/repositories/index.js
+++ b/app/assets/javascripts/pages/groups/registry/repositories/index.js
@@ -1,3 +1,3 @@
-import initRegistryImages from '~/registry';
+import initRegistryImages from '~/registry/list';
 
 document.addEventListener('DOMContentLoaded', initRegistryImages);
diff --git a/app/assets/javascripts/pages/projects/registry/repositories/index.js b/app/assets/javascripts/pages/projects/registry/repositories/index.js
index 35564754ee0..59310b3f76f 100644
--- a/app/assets/javascripts/pages/projects/registry/repositories/index.js
+++ b/app/assets/javascripts/pages/projects/registry/repositories/index.js
@@ -1,3 +1,3 @@
-import initRegistryImages from '~/registry/index';
+import initRegistryImages from '~/registry/list/index';
 
 document.addEventListener('DOMContentLoaded', initRegistryImages);
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/list/components/app.vue
index 11b2c3b7016..c555c2b04d1 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/list/components/app.vue
@@ -5,7 +5,7 @@ import store from '../stores';
 import CollapsibleContainer from './collapsible_container.vue';
 import ProjectEmptyState from './project_empty_state.vue';
 import GroupEmptyState from './group_empty_state.vue';
-import { s__, sprintf } from '../../locale';
+import { s__, sprintf } from '~/locale';
 
 export default {
   name: 'RegistryListApp',
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/list/components/collapsible_container.vue
index 5a6f9370564..5a6f9370564 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/app/assets/javascripts/registry/list/components/collapsible_container.vue
diff --git a/app/assets/javascripts/registry/components/group_empty_state.vue b/app/assets/javascripts/registry/list/components/group_empty_state.vue
index 7885fd2146d..7885fd2146d 100644
--- a/app/assets/javascripts/registry/components/group_empty_state.vue
+++ b/app/assets/javascripts/registry/list/components/group_empty_state.vue
diff --git a/app/assets/javascripts/registry/components/project_empty_state.vue b/app/assets/javascripts/registry/list/components/project_empty_state.vue
index 80ef31004c8..80ef31004c8 100644
--- a/app/assets/javascripts/registry/components/project_empty_state.vue
+++ b/app/assets/javascripts/registry/list/components/project_empty_state.vue
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/list/components/table_registry.vue
index 682c511a1ae..682c511a1ae 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/app/assets/javascripts/registry/list/components/table_registry.vue
diff --git a/app/assets/javascripts/registry/constants.js b/app/assets/javascripts/registry/list/constants.js
index db798fb88ac..e55ea9cc9d9 100644
--- a/app/assets/javascripts/registry/constants.js
+++ b/app/assets/javascripts/registry/list/constants.js
@@ -1,4 +1,4 @@
-import { __ } from '../locale';
+import { __ } from '~/locale';
 
 export const FETCH_REGISTRY_ERROR_MESSAGE = __(
   'Something went wrong while fetching the registry list.',
diff --git a/app/assets/javascripts/registry/index.js b/app/assets/javascripts/registry/list/index.js
index 18fd360f586..3d0ff327b42 100644
--- a/app/assets/javascripts/registry/index.js
+++ b/app/assets/javascripts/registry/list/index.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import registryApp from './components/app.vue';
-import Translate from '../vue_shared/translate';
+import Translate from '~/vue_shared/translate';
 
 Vue.use(Translate);
 
diff --git a/app/assets/javascripts/registry/stores/actions.js b/app/assets/javascripts/registry/list/stores/actions.js
index 6afba618486..6afba618486 100644
--- a/app/assets/javascripts/registry/stores/actions.js
+++ b/app/assets/javascripts/registry/list/stores/actions.js
diff --git a/app/assets/javascripts/registry/stores/getters.js b/app/assets/javascripts/registry/list/stores/getters.js
index ac90bde1b2a..ac90bde1b2a 100644
--- a/app/assets/javascripts/registry/stores/getters.js
+++ b/app/assets/javascripts/registry/list/stores/getters.js
diff --git a/app/assets/javascripts/registry/stores/index.js b/app/assets/javascripts/registry/list/stores/index.js
index 1bb06bd6e81..1bb06bd6e81 100644
--- a/app/assets/javascripts/registry/stores/index.js
+++ b/app/assets/javascripts/registry/list/stores/index.js
diff --git a/app/assets/javascripts/registry/stores/mutation_types.js b/app/assets/javascripts/registry/list/stores/mutation_types.js
index 6740bfede1a..6740bfede1a 100644
--- a/app/assets/javascripts/registry/stores/mutation_types.js
+++ b/app/assets/javascripts/registry/list/stores/mutation_types.js
diff --git a/app/assets/javascripts/registry/stores/mutations.js b/app/assets/javascripts/registry/list/stores/mutations.js
index 419de848883..419de848883 100644
--- a/app/assets/javascripts/registry/stores/mutations.js
+++ b/app/assets/javascripts/registry/list/stores/mutations.js
diff --git a/app/assets/javascripts/registry/stores/state.js b/app/assets/javascripts/registry/list/stores/state.js
index 724c64b4994..724c64b4994 100644
--- a/app/assets/javascripts/registry/stores/state.js
+++ b/app/assets/javascripts/registry/list/stores/state.js
diff --git a/doc/user/project/repository/index.md b/doc/user/project/repository/index.md
index 5a6e011220c..cb7fe63db6f 100644
--- a/doc/user/project/repository/index.md
+++ b/doc/user/project/repository/index.md
@@ -34,7 +34,7 @@ You can either use the user interface (UI), or connect your local computer
 with GitLab [through the command line](../../../gitlab-basics/command-line-commands.md#start-working-on-your-project).
 
 To configure [GitLab CI/CD](../../../ci/README.md) to build, test, and deploy
-you code, add a file called [`.gitlab-ci.yml`](../../../ci/quick_start/README.md)
+your code, add a file called [`.gitlab-ci.yml`](../../../ci/quick_start/README.md)
 to your repository's root.
 
 **From the user interface:**
diff --git a/package.json b/package.json
index b92b2c9b06e..6e9df140b2a 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/preset-env": "^7.6.2",
     "@gitlab/svgs": "^1.82.0",
-    "@gitlab/ui": "7.16.1",
+    "@gitlab/ui": "8.0.1",
     "@gitlab/visual-review-tools": "1.2.0",
     "@sentry/browser": "^5.7.1",
     "@sourcegraph/code-host-integration": "^0.0.14",
diff --git a/spec/frontend/diffs/components/compare_versions_spec.js b/spec/frontend/diffs/components/compare_versions_spec.js
new file mode 100644
index 00000000000..9900fcdb6e1
--- /dev/null
+++ b/spec/frontend/diffs/components/compare_versions_spec.js
@@ -0,0 +1,156 @@
+import { trimText } from 'helpers/text_helper';
+import { mount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import CompareVersionsComponent from '~/diffs/components/compare_versions.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import { createStore } from '~/mr_notes/stores';
+import diffsMockData from '../mock_data/merge_request_diffs';
+import getDiffWithCommit from '../mock_data/diff_with_commit';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('CompareVersions', () => {
+  let wrapper;
+  const targetBranch = { branchName: 'tmp-wine-dev', versionIndex: -1 };
+
+  const createWrapper = props => {
+    const store = createStore();
+
+    store.state.diffs.addedLines = 10;
+    store.state.diffs.removedLines = 20;
+    store.state.diffs.diffFiles.push('test');
+
+    wrapper = mount(CompareVersionsComponent, {
+      sync: false,
+      attachToDocument: true,
+      localVue,
+      store,
+      propsData: {
+        mergeRequestDiffs: diffsMockData,
+        mergeRequestDiff: diffsMockData[0],
+        targetBranch,
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('template', () => {
+    it('should render Tree List toggle button with correct attribute values', () => {
+      const treeListBtn = wrapper.find('.js-toggle-tree-list');
+
+      expect(treeListBtn.exists()).toBe(true);
+      expect(treeListBtn.attributes('data-original-title')).toBe('Hide file browser');
+      expect(treeListBtn.findAll(Icon).length).not.toBe(0);
+      expect(treeListBtn.find(Icon).props('name')).toBe('collapse-left');
+    });
+
+    it('should render comparison dropdowns with correct values', () => {
+      const sourceDropdown = wrapper.find('.mr-version-dropdown');
+      const targetDropdown = wrapper.find('.mr-version-compare-dropdown');
+
+      expect(sourceDropdown.exists()).toBe(true);
+      expect(targetDropdown.exists()).toBe(true);
+      expect(sourceDropdown.find('a span').html()).toContain('latest version');
+      expect(targetDropdown.find('a span').html()).toContain(targetBranch.branchName);
+    });
+
+    it('should not render comparison dropdowns if no mergeRequestDiffs are specified', () => {
+      createWrapper({ mergeRequestDiffs: [] });
+
+      const sourceDropdown = wrapper.find('.mr-version-dropdown');
+      const targetDropdown = wrapper.find('.mr-version-compare-dropdown');
+
+      expect(sourceDropdown.exists()).toBe(false);
+      expect(targetDropdown.exists()).toBe(false);
+    });
+
+    it('should render view types buttons with correct values', () => {
+      const inlineBtn = wrapper.find('#inline-diff-btn');
+      const parallelBtn = wrapper.find('#parallel-diff-btn');
+
+      expect(inlineBtn.exists()).toBe(true);
+      expect(parallelBtn.exists()).toBe(true);
+      expect(inlineBtn.attributes('data-view-type')).toEqual('inline');
+      expect(parallelBtn.attributes('data-view-type')).toEqual('parallel');
+      expect(inlineBtn.html()).toContain('Inline');
+      expect(parallelBtn.html()).toContain('Side-by-side');
+    });
+
+    it('adds container-limiting classes when showFileTree is false with inline diffs', () => {
+      createWrapper({ isLimitedContainer: true });
+
+      const limitedContainer = wrapper.find('.container-limited.limit-container-width');
+
+      expect(limitedContainer.exists()).toBe(true);
+    });
+
+    it('does not add container-limiting classes when showFileTree is false with inline diffs', () => {
+      createWrapper({ isLimitedContainer: false });
+
+      const limitedContainer = wrapper.find('.container-limited.limit-container-width');
+
+      expect(limitedContainer.exists()).toBe(false);
+    });
+  });
+
+  describe('setInlineDiffViewType', () => {
+    it('should persist the view type in the url', () => {
+      const viewTypeBtn = wrapper.find('#inline-diff-btn');
+      viewTypeBtn.trigger('click');
+
+      expect(window.location.toString()).toContain('?view=inline');
+    });
+  });
+
+  describe('setParallelDiffViewType', () => {
+    it('should persist the view type in the url', () => {
+      const viewTypeBtn = wrapper.find('#parallel-diff-btn');
+      viewTypeBtn.trigger('click');
+
+      expect(window.location.toString()).toContain('?view=parallel');
+    });
+  });
+
+  describe('comparableDiffs', () => {
+    it('should not contain the first item in the mergeRequestDiffs property', () => {
+      const { comparableDiffs } = wrapper.vm;
+      const comparableDiffsMock = diffsMockData.slice(1);
+
+      expect(comparableDiffs).toEqual(comparableDiffsMock);
+    });
+  });
+
+  describe('baseVersionPath', () => {
+    it('should be set correctly from mergeRequestDiff', () => {
+      expect(wrapper.vm.baseVersionPath).toEqual(wrapper.vm.mergeRequestDiff.base_version_path);
+    });
+  });
+
+  describe('commit', () => {
+    beforeEach(done => {
+      wrapper.vm.$store.state.diffs.commit = getDiffWithCommit().commit;
+      wrapper.mergeRequestDiffs = [];
+
+      wrapper.vm.$nextTick(done);
+    });
+
+    it('renders latest version button', () => {
+      expect(trimText(wrapper.find('.js-latest-version').text())).toBe('Show latest version');
+    });
+
+    it('renders short commit ID', () => {
+      expect(wrapper.text()).toContain('Viewing commit');
+      expect(wrapper.text()).toContain(wrapper.vm.commit.short_id);
+    });
+  });
+});
diff --git a/spec/frontend/diffs/mock_data/diff_with_commit.js b/spec/frontend/diffs/mock_data/diff_with_commit.js
new file mode 100644
index 00000000000..d646294ee84
--- /dev/null
+++ b/spec/frontend/diffs/mock_data/diff_with_commit.js
@@ -0,0 +1,7 @@
+const FIXTURE = 'merge_request_diffs/with_commit.json';
+
+preloadFixtures(FIXTURE);
+
+export default function getDiffWithCommit() {
+  return getJSONFixture(FIXTURE);
+}
diff --git a/spec/frontend/diffs/mock_data/merge_request_diffs.js b/spec/frontend/diffs/mock_data/merge_request_diffs.js
new file mode 100644
index 00000000000..4bbef146336
--- /dev/null
+++ b/spec/frontend/diffs/mock_data/merge_request_diffs.js
@@ -0,0 +1,46 @@
+export default [
+  {
+    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37',
+    version_index: 4,
+    created_at: '2018-10-23T11:49:16.611Z',
+    commits_count: 4,
+    latest: true,
+    short_commit_sha: 'de7a8f7f',
+    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37',
+    compare_path:
+      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=de7a8f7f20c3ea2e0bef3ba01cfd41c21f6b4995',
+  },
+  {
+    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=36',
+    version_index: 3,
+    created_at: '2018-10-23T11:46:40.617Z',
+    commits_count: 3,
+    latest: false,
+    short_commit_sha: 'e78fc18f',
+    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=36',
+    compare_path:
+      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=e78fc18fa37acb2185c59ca94d4a964464feb50e',
+  },
+  {
+    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=35',
+    version_index: 2,
+    created_at: '2018-10-04T09:57:39.648Z',
+    commits_count: 2,
+    latest: false,
+    short_commit_sha: '48da7e7e',
+    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=35',
+    compare_path:
+      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=48da7e7e9a99d41c852578bd9cb541ca4d864b3e',
+  },
+  {
+    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=20',
+    version_index: 1,
+    created_at: '2018-09-25T20:30:39.493Z',
+    commits_count: 1,
+    latest: false,
+    short_commit_sha: '47bac2ed',
+    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=20',
+    compare_path:
+      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=47bac2ed972c5bee344c1cea159a22cd7f711dc0',
+  },
+];
diff --git a/spec/frontend/registry/components/__snapshots__/group_empty_state_spec.js.snap b/spec/frontend/registry/list/components/__snapshots__/group_empty_state_spec.js.snap
index 3f13b7d4d76..3f13b7d4d76 100644
--- a/spec/frontend/registry/components/__snapshots__/group_empty_state_spec.js.snap
+++ b/spec/frontend/registry/list/components/__snapshots__/group_empty_state_spec.js.snap
diff --git a/spec/frontend/registry/components/__snapshots__/project_empty_state_spec.js.snap b/spec/frontend/registry/list/components/__snapshots__/project_empty_state_spec.js.snap
index 3084462f5ae..3084462f5ae 100644
--- a/spec/frontend/registry/components/__snapshots__/project_empty_state_spec.js.snap
+++ b/spec/frontend/registry/list/components/__snapshots__/project_empty_state_spec.js.snap
diff --git a/spec/frontend/registry/components/app_spec.js b/spec/frontend/registry/list/components/app_spec.js
index 63ef28c64f2..0013b27bd01 100644
--- a/spec/frontend/registry/components/app_spec.js
+++ b/spec/frontend/registry/list/components/app_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
-import registry from '~/registry/components/app.vue';
-import { TEST_HOST } from '../../helpers/test_constants';
+import registry from '~/registry/list/components/app.vue';
+import { TEST_HOST } from 'helpers/test_constants';
 import { reposServerResponse, parsedReposServerResponse } from '../mock_data';
 
 describe('Registry List', () => {
diff --git a/spec/frontend/registry/components/collapsible_container_spec.js b/spec/frontend/registry/list/components/collapsible_container_spec.js
index 2e471548a1b..1f7d48e6e2c 100644
--- a/spec/frontend/registry/components/collapsible_container_spec.js
+++ b/spec/frontend/registry/list/components/collapsible_container_spec.js
@@ -3,8 +3,8 @@ import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
 import createFlash from '~/flash';
 import Tracking from '~/tracking';
-import collapsibleComponent from '~/registry/components/collapsible_container.vue';
-import * as getters from '~/registry/stores/getters';
+import collapsibleComponent from '~/registry/list/components/collapsible_container.vue';
+import * as getters from '~/registry/list/stores/getters';
 import { repoPropsData } from '../mock_data';
 
 jest.mock('~/flash.js');
diff --git a/spec/frontend/registry/components/group_empty_state_spec.js b/spec/frontend/registry/list/components/group_empty_state_spec.js
index f71074b5154..7541c3d459c 100644
--- a/spec/frontend/registry/components/group_empty_state_spec.js
+++ b/spec/frontend/registry/list/components/group_empty_state_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import groupEmptyState from '~/registry/components/group_empty_state.vue';
+import groupEmptyState from '~/registry/list/components/group_empty_state.vue';
 
 describe('Registry Group Empty state', () => {
   let wrapper;
diff --git a/spec/frontend/registry/components/project_empty_state_spec.js b/spec/frontend/registry/list/components/project_empty_state_spec.js
index dd0fe32b68c..bd717a4eb10 100644
--- a/spec/frontend/registry/components/project_empty_state_spec.js
+++ b/spec/frontend/registry/list/components/project_empty_state_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import projectEmptyState from '~/registry/components/project_empty_state.vue';
+import projectEmptyState from '~/registry/list/components/project_empty_state.vue';
 
 describe('Registry Project Empty state', () => {
   let wrapper;
diff --git a/spec/frontend/registry/components/table_registry_spec.js b/spec/frontend/registry/list/components/table_registry_spec.js
index 7147988ab61..51fd9612758 100644
--- a/spec/frontend/registry/components/table_registry_spec.js
+++ b/spec/frontend/registry/list/components/table_registry_spec.js
@@ -3,9 +3,9 @@ import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
 import createFlash from '~/flash';
 import Tracking from '~/tracking';
-import tableRegistry from '~/registry/components/table_registry.vue';
+import tableRegistry from '~/registry/list/components/table_registry.vue';
 import { repoPropsData } from '../mock_data';
-import * as getters from '~/registry/stores/getters';
+import * as getters from '~/registry/list/stores/getters';
 
 jest.mock('~/flash');
 
diff --git a/spec/frontend/registry/mock_data.js b/spec/frontend/registry/list/mock_data.js
index 130ab298e89..130ab298e89 100644
--- a/spec/frontend/registry/mock_data.js
+++ b/spec/frontend/registry/list/mock_data.js
diff --git a/spec/frontend/registry/stores/actions_spec.js b/spec/frontend/registry/list/stores/actions_spec.js
index 7937fa82e80..1a9c23ed188 100644
--- a/spec/frontend/registry/stores/actions_spec.js
+++ b/spec/frontend/registry/list/stores/actions_spec.js
@@ -1,9 +1,9 @@
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import * as actions from '~/registry/stores/actions';
-import * as types from '~/registry/stores/mutation_types';
-import { TEST_HOST } from '../../helpers/test_constants';
-import testAction from '../../helpers/vuex_action_helper';
+import * as actions from '~/registry/list/stores/actions';
+import * as types from '~/registry/list/stores/mutation_types';
+import { TEST_HOST } from 'helpers/test_constants';
+import testAction from 'helpers/vuex_action_helper';
 import createFlash from '~/flash';
 
 import {
diff --git a/spec/frontend/registry/stores/getters_spec.js b/spec/frontend/registry/list/stores/getters_spec.js
index c16f520223b..c8d054b226b 100644
--- a/spec/frontend/registry/stores/getters_spec.js
+++ b/spec/frontend/registry/list/stores/getters_spec.js
@@ -1,4 +1,4 @@
-import * as getters from '~/registry/stores/getters';
+import * as getters from '~/registry/list/stores/getters';
 
 describe('Getters Registry Store', () => {
   let state;
diff --git a/spec/frontend/registry/stores/mutations_spec.js b/spec/frontend/registry/list/stores/mutations_spec.js
index 1d583028ca6..f894f688c1f 100644
--- a/spec/frontend/registry/stores/mutations_spec.js
+++ b/spec/frontend/registry/list/stores/mutations_spec.js
@@ -1,5 +1,5 @@
-import mutations from '~/registry/stores/mutations';
-import * as types from '~/registry/stores/mutation_types';
+import mutations from '~/registry/list/stores/mutations';
+import * as types from '~/registry/list/stores/mutation_types';
 import {
   defaultState,
   reposServerResponse,
diff --git a/spec/javascripts/diffs/components/compare_versions_spec.js b/spec/javascripts/diffs/components/compare_versions_spec.js
deleted file mode 100644
index ef4bb470734..00000000000
--- a/spec/javascripts/diffs/components/compare_versions_spec.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import Vue from 'vue';
-import CompareVersionsComponent from '~/diffs/components/compare_versions.vue';
-import { createStore } from '~/mr_notes/stores';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import diffsMockData from '../mock_data/merge_request_diffs';
-import getDiffWithCommit from '../mock_data/diff_with_commit';
-
-describe('CompareVersions', () => {
-  let vm;
-  const targetBranch = { branchName: 'tmp-wine-dev', versionIndex: -1 };
-
-  beforeEach(() => {
-    const store = createStore();
-
-    store.state.diffs.addedLines = 10;
-    store.state.diffs.removedLines = 20;
-    store.state.diffs.diffFiles.push('test');
-
-    vm = createComponentWithStore(Vue.extend(CompareVersionsComponent), store, {
-      mergeRequestDiffs: diffsMockData,
-      mergeRequestDiff: diffsMockData[0],
-      targetBranch,
-    }).$mount();
-  });
-
-  describe('template', () => {
-    it('should render Tree List toggle button with correct attribute values', () => {
-      const treeListBtn = vm.$el.querySelector('.js-toggle-tree-list');
-
-      expect(treeListBtn).not.toBeNull();
-      expect(treeListBtn.dataset.originalTitle).toBe('Hide file browser');
-      expect(treeListBtn.querySelectorAll('svg use').length).not.toBe(0);
-      expect(treeListBtn.querySelector('svg use').getAttribute('xlink:href')).toContain(
-        '#collapse-left',
-      );
-    });
-
-    it('should render comparison dropdowns with correct values', () => {
-      const sourceDropdown = vm.$el.querySelector('.mr-version-dropdown');
-      const targetDropdown = vm.$el.querySelector('.mr-version-compare-dropdown');
-
-      expect(sourceDropdown).not.toBeNull();
-      expect(targetDropdown).not.toBeNull();
-      expect(sourceDropdown.querySelector('a span').innerHTML).toContain('latest version');
-      expect(targetDropdown.querySelector('a span').innerHTML).toContain(targetBranch.branchName);
-    });
-
-    it('should not render comparison dropdowns if no mergeRequestDiffs are specified', () => {
-      vm.mergeRequestDiffs = [];
-
-      vm.$nextTick(() => {
-        const sourceDropdown = vm.$el.querySelector('.mr-version-dropdown');
-        const targetDropdown = vm.$el.querySelector('.mr-version-compare-dropdown');
-
-        expect(sourceDropdown).toBeNull();
-        expect(targetDropdown).toBeNull();
-      });
-    });
-
-    it('should render view types buttons with correct values', () => {
-      const inlineBtn = vm.$el.querySelector('#inline-diff-btn');
-      const parallelBtn = vm.$el.querySelector('#parallel-diff-btn');
-
-      expect(inlineBtn).not.toBeNull();
-      expect(parallelBtn).not.toBeNull();
-      expect(inlineBtn.dataset.viewType).toEqual('inline');
-      expect(parallelBtn.dataset.viewType).toEqual('parallel');
-      expect(inlineBtn.innerHTML).toContain('Inline');
-      expect(parallelBtn.innerHTML).toContain('Side-by-side');
-    });
-
-    it('adds container-limiting classes when showFileTree is false with inline diffs', () => {
-      vm.isLimitedContainer = true;
-
-      vm.$nextTick(() => {
-        const limitedContainer = vm.$el.querySelector('.container-limited.limit-container-width');
-
-        expect(limitedContainer).not.toBeNull();
-      });
-    });
-
-    it('does not add container-limiting classes when showFileTree is false with inline diffs', () => {
-      vm.isLimitedContainer = false;
-
-      vm.$nextTick(() => {
-        const limitedContainer = vm.$el.querySelector('.container-limited.limit-container-width');
-
-        expect(limitedContainer).toBeNull();
-      });
-    });
-  });
-
-  describe('setInlineDiffViewType', () => {
-    it('should persist the view type in the url', () => {
-      const viewTypeBtn = vm.$el.querySelector('#inline-diff-btn');
-      viewTypeBtn.click();
-
-      expect(window.location.toString()).toContain('?view=inline');
-    });
-  });
-
-  describe('setParallelDiffViewType', () => {
-    it('should persist the view type in the url', () => {
-      const viewTypeBtn = vm.$el.querySelector('#parallel-diff-btn');
-      viewTypeBtn.click();
-
-      expect(window.location.toString()).toContain('?view=parallel');
-    });
-  });
-
-  describe('comparableDiffs', () => {
-    it('should not contain the first item in the mergeRequestDiffs property', () => {
-      const { comparableDiffs } = vm;
-      const comparableDiffsMock = diffsMockData.slice(1);
-
-      expect(comparableDiffs).toEqual(comparableDiffsMock);
-    });
-  });
-
-  describe('baseVersionPath', () => {
-    it('should be set correctly from mergeRequestDiff', () => {
-      expect(vm.baseVersionPath).toEqual(vm.mergeRequestDiff.base_version_path);
-    });
-  });
-
-  describe('commit', () => {
-    beforeEach(done => {
-      vm.$store.state.diffs.commit = getDiffWithCommit().commit;
-      vm.mergeRequestDiffs = [];
-
-      vm.$nextTick(done);
-    });
-
-    it('renders latest version button', () => {
-      expect(vm.$el.querySelector('.js-latest-version').textContent.trim()).toBe(
-        'Show latest version',
-      );
-    });
-
-    it('renders short commit ID', () => {
-      expect(vm.$el.textContent).toContain('Viewing commit');
-      expect(vm.$el.textContent).toContain(vm.commit.short_id);
-    });
-  });
-});
diff --git a/spec/javascripts/diffs/mock_data/diff_with_commit.js b/spec/javascripts/diffs/mock_data/diff_with_commit.js
index d646294ee84..c36b0239060 100644
--- a/spec/javascripts/diffs/mock_data/diff_with_commit.js
+++ b/spec/javascripts/diffs/mock_data/diff_with_commit.js
@@ -1,7 +1,7 @@
-const FIXTURE = 'merge_request_diffs/with_commit.json';
+// No new code should be added to this file. Instead, modify the
+// file this one re-exports from. For more detail about why, see:
+// https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/31349
 
-preloadFixtures(FIXTURE);
+import getDiffWithCommit from '../../../frontend/diffs/mock_data/diff_with_commit';
 
-export default function getDiffWithCommit() {
-  return getJSONFixture(FIXTURE);
-}
+export default getDiffWithCommit;
diff --git a/spec/javascripts/diffs/mock_data/merge_request_diffs.js b/spec/javascripts/diffs/mock_data/merge_request_diffs.js
index 4bbef146336..de29eb7e560 100644
--- a/spec/javascripts/diffs/mock_data/merge_request_diffs.js
+++ b/spec/javascripts/diffs/mock_data/merge_request_diffs.js
@@ -1,46 +1,7 @@
-export default [
-  {
-    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37',
-    version_index: 4,
-    created_at: '2018-10-23T11:49:16.611Z',
-    commits_count: 4,
-    latest: true,
-    short_commit_sha: 'de7a8f7f',
-    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37',
-    compare_path:
-      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=de7a8f7f20c3ea2e0bef3ba01cfd41c21f6b4995',
-  },
-  {
-    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=36',
-    version_index: 3,
-    created_at: '2018-10-23T11:46:40.617Z',
-    commits_count: 3,
-    latest: false,
-    short_commit_sha: 'e78fc18f',
-    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=36',
-    compare_path:
-      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=e78fc18fa37acb2185c59ca94d4a964464feb50e',
-  },
-  {
-    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=35',
-    version_index: 2,
-    created_at: '2018-10-04T09:57:39.648Z',
-    commits_count: 2,
-    latest: false,
-    short_commit_sha: '48da7e7e',
-    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=35',
-    compare_path:
-      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=48da7e7e9a99d41c852578bd9cb541ca4d864b3e',
-  },
-  {
-    base_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=20',
-    version_index: 1,
-    created_at: '2018-09-25T20:30:39.493Z',
-    commits_count: 1,
-    latest: false,
-    short_commit_sha: '47bac2ed',
-    version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=20',
-    compare_path:
-      '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37&start_sha=47bac2ed972c5bee344c1cea159a22cd7f711dc0',
-  },
-];
+// No new code should be added to this file. Instead, modify the
+// file this one re-exports from. For more detail about why, see:
+// https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/31349
+
+import diffsMockData from '../../../frontend/diffs/mock_data/merge_request_diffs';
+
+export default diffsMockData;
diff --git a/yarn.lock b/yarn.lock
index df27000b93f..6a6360ca4dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -722,10 +722,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.82.0.tgz#c059c460afc13ebfe9df370521ca8963fa5afb80"
   integrity sha512-9L4Brys2LCk44lHvFsCFDKN768lYjoMVYDb4PD7FSjqUEruQQ1SRj0rvb1RWKLhiTCDKrtDOXkH6I1TTEms24w==
 
-"@gitlab/ui@7.16.1":
-  version "7.16.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-7.16.1.tgz#a539bd2e39866549f71d8678efe7cca8478ebde3"
-  integrity sha512-7SdwSC2P2/PKZNaIzNihAudSpP95cex98i6IMcukK0ocJYvHr8S9s8GoznaD8YugTR1EGhu+f1M6ubneU5vUwQ==
+"@gitlab/ui@8.0.1":
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-8.0.1.tgz#4e3b4791045540785cc389af931e24c6411910ca"
+  integrity sha512-PfZPlx3f12wcGxe0eMAXRk1gdhEAkX4czQWAt8EQ1WosKiADCNzCpEPR4jyWa60RF/+zHqJKIjq0VqLMClk8Jg==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"