Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

12 files changed, 379 insertions, 167 deletions

diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js
index 34547238c23..8a1c5547581 100644
--- a/spec/frontend/diffs/components/app_spec.js
+++ b/spec/frontend/diffs/components/app_spec.js
@@ -56,6 +56,7 @@ describe('diffs/components/app', () => {
         endpointMetadata: `${TEST_HOST}/diff/endpointMetadata`,
         endpointBatch: `${TEST_HOST}/diff/endpointBatch`,
         endpointCoverage: `${TEST_HOST}/diff/endpointCoverage`,
+        endpointCodequality: '',
         projectPath: 'namespace/project',
         currentUser: {},
         changesEmptyStateIllustration: '',
@@ -105,7 +106,6 @@ describe('diffs/components/app', () => {
       jest.spyOn(wrapper.vm, 'fetchDiffFilesBatch').mockImplementation(fetchResolver);
       jest.spyOn(wrapper.vm, 'fetchCoverageFiles').mockImplementation(fetchResolver);
       jest.spyOn(wrapper.vm, 'setDiscussions').mockImplementation(() => {});
-      jest.spyOn(wrapper.vm, 'startRenderDiffsQueue').mockImplementation(() => {});
       jest.spyOn(wrapper.vm, 'unwatchDiscussions').mockImplementation(() => {});
       jest.spyOn(wrapper.vm, 'unwatchRetrievingBatches').mockImplementation(() => {});
       store.state.diffs.retrievingBatches = true;
@@ -119,7 +119,6 @@ describe('diffs/components/app', () => {
 
       await nextTick();
 
-      expect(wrapper.vm.startRenderDiffsQueue).toHaveBeenCalled();
       expect(wrapper.vm.fetchDiffFilesMeta).toHaveBeenCalled();
       expect(wrapper.vm.fetchDiffFilesBatch).toHaveBeenCalled();
       expect(wrapper.vm.fetchCoverageFiles).toHaveBeenCalled();
@@ -134,7 +133,6 @@ describe('diffs/components/app', () => {
 
       await nextTick();
 
-      expect(wrapper.vm.startRenderDiffsQueue).toHaveBeenCalled();
       expect(wrapper.vm.fetchDiffFilesMeta).toHaveBeenCalled();
       expect(wrapper.vm.fetchDiffFilesBatch).toHaveBeenCalled();
       expect(wrapper.vm.fetchCoverageFiles).toHaveBeenCalled();
@@ -144,6 +142,16 @@ describe('diffs/components/app', () => {
     });
   });
 
+  describe('codequality diff', () => {
+    it('does not fetch code quality data on FOSS', async () => {
+      createComponent();
+      jest.spyOn(wrapper.vm, 'fetchCodequality');
+      wrapper.vm.fetchData(false);
+
+      expect(wrapper.vm.fetchCodequality).not.toHaveBeenCalled();
+    });
+  });
+
   it.each`
     props                      | state                                                              | expected
     ${{ isFluidLayout: true }} | ${{ isParallelView: false }}                                       | ${false}
@@ -697,4 +705,24 @@ describe('diffs/components/app', () => {
       );
     });
   });
+
+  describe('diff file tree is aware of review bar', () => {
+    it('it does not have review-bar-visible class when review bar is not visible', () => {
+      createComponent({}, ({ state }) => {
+        state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
+      });
+
+      expect(wrapper.find('.js-diff-tree-list').exists()).toBe(true);
+      expect(wrapper.find('.js-diff-tree-list.review-bar-visible').exists()).toBe(false);
+    });
+
+    it('it does have review-bar-visible class when review bar is visible', () => {
+      createComponent({}, ({ state }) => {
+        state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
+        state.batchComments.drafts = ['draft message'];
+      });
+
+      expect(wrapper.find('.js-diff-tree-list.review-bar-visible').exists()).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/diffs/components/commit_item_spec.js b/spec/frontend/diffs/components/commit_item_spec.js
index 8cb4fd20063..0191822d97a 100644
--- a/spec/frontend/diffs/components/commit_item_spec.js
+++ b/spec/frontend/diffs/components/commit_item_spec.js
@@ -13,8 +13,6 @@ const TEST_AUTHOR_EMAIL = 'test+test@gitlab.com';
 const TEST_AUTHOR_GRAVATAR = `${TEST_HOST}/avatar/test?s=40`;
 const TEST_SIGNATURE_HTML = '<a>Legit commit</a>';
 const TEST_PIPELINE_STATUS_PATH = `${TEST_HOST}/pipeline/status`;
-const NEXT_COMMIT_URL = `${TEST_HOST}/?commit_id=next`;
-const PREV_COMMIT_URL = `${TEST_HOST}/?commit_id=prev`;
 
 describe('diffs/components/commit_item', () => {
   let wrapper;
@@ -31,12 +29,6 @@ describe('diffs/components/commit_item', () => {
   const getCommitActionsElement = () => wrapper.find('.commit-actions');
   const getCommitPipelineStatus = () => wrapper.find(CommitPipelineStatus);
 
-  const getCommitNavButtonsElement = () => wrapper.find('.commit-nav-buttons');
-  const getNextCommitNavElement = () =>
-    getCommitNavButtonsElement().find('.btn-group > *:last-child');
-  const getPrevCommitNavElement = () =>
-    getCommitNavButtonsElement().find('.btn-group > *:first-child');
-
   const mountComponent = (propsData) => {
     wrapper = mount(Component, {
       propsData: {
@@ -180,126 +172,4 @@ describe('diffs/components/commit_item', () => {
       expect(getCommitPipelineStatus().exists()).toBe(true);
     });
   });
-
-  describe('without neighbor commits', () => {
-    beforeEach(() => {
-      mountComponent({ commit: { ...commit, prev_commit_id: null, next_commit_id: null } });
-    });
-
-    it('does not render any navigation buttons', () => {
-      expect(getCommitNavButtonsElement().exists()).toEqual(false);
-    });
-  });
-
-  describe('with neighbor commits', () => {
-    let mrCommit;
-
-    beforeEach(() => {
-      mrCommit = {
-        ...commit,
-        next_commit_id: 'next',
-        prev_commit_id: 'prev',
-      };
-
-      mountComponent({ commit: mrCommit });
-    });
-
-    it('renders the commit navigation buttons', () => {
-      expect(getCommitNavButtonsElement().exists()).toEqual(true);
-
-      mountComponent({
-        commit: { ...mrCommit, next_commit_id: null },
-      });
-      expect(getCommitNavButtonsElement().exists()).toEqual(true);
-
-      mountComponent({
-        commit: { ...mrCommit, prev_commit_id: null },
-      });
-      expect(getCommitNavButtonsElement().exists()).toEqual(true);
-    });
-
-    describe('prev commit', () => {
-      const { location } = window;
-
-      beforeAll(() => {
-        delete window.location;
-        window.location = { href: `${TEST_HOST}?commit_id=${mrCommit.id}` };
-      });
-
-      beforeEach(() => {
-        jest.spyOn(wrapper.vm, 'moveToNeighboringCommit').mockImplementation(() => {});
-      });
-
-      afterAll(() => {
-        window.location = location;
-      });
-
-      it('uses the correct href', () => {
-        const link = getPrevCommitNavElement();
-
-        expect(link.element.getAttribute('href')).toEqual(PREV_COMMIT_URL);
-      });
-
-      it('triggers the correct Vuex action on click', () => {
-        const link = getPrevCommitNavElement();
-
-        link.trigger('click');
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.moveToNeighboringCommit).toHaveBeenCalledWith({
-            direction: 'previous',
-          });
-        });
-      });
-
-      it('renders a disabled button when there is no prev commit', () => {
-        mountComponent({ commit: { ...mrCommit, prev_commit_id: null } });
-
-        const button = getPrevCommitNavElement();
-
-        expect(button.element.tagName).toEqual('BUTTON');
-        expect(button.element.hasAttribute('disabled')).toEqual(true);
-      });
-    });
-
-    describe('next commit', () => {
-      const { location } = window;
-
-      beforeAll(() => {
-        delete window.location;
-        window.location = { href: `${TEST_HOST}?commit_id=${mrCommit.id}` };
-      });
-
-      beforeEach(() => {
-        jest.spyOn(wrapper.vm, 'moveToNeighboringCommit').mockImplementation(() => {});
-      });
-
-      afterAll(() => {
-        window.location = location;
-      });
-
-      it('uses the correct href', () => {
-        const link = getNextCommitNavElement();
-
-        expect(link.element.getAttribute('href')).toEqual(NEXT_COMMIT_URL);
-      });
-
-      it('triggers the correct Vuex action on click', () => {
-        const link = getNextCommitNavElement();
-
-        link.trigger('click');
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.moveToNeighboringCommit).toHaveBeenCalledWith({ direction: 'next' });
-        });
-      });
-
-      it('renders a disabled button when there is no next commit', () => {
-        mountComponent({ commit: { ...mrCommit, next_commit_id: null } });
-
-        const button = getNextCommitNavElement();
-
-        expect(button.element.tagName).toEqual('BUTTON');
-        expect(button.element.hasAttribute('disabled')).toEqual(true);
-      });
-    });
-  });
 });
diff --git a/spec/frontend/diffs/components/compare_versions_spec.js b/spec/frontend/diffs/components/compare_versions_spec.js
index c93a3771ec0..a01ec1db35c 100644
--- a/spec/frontend/diffs/components/compare_versions_spec.js
+++ b/spec/frontend/diffs/components/compare_versions_spec.js
@@ -1,5 +1,6 @@
 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { TEST_HOST } from 'helpers/test_constants';
 import { trimText } from 'helpers/text_helper';
 import CompareVersionsComponent from '~/diffs/components/compare_versions.vue';
 import { createStore } from '~/mr_notes/stores';
@@ -9,12 +10,17 @@ import diffsMockData from '../mock_data/merge_request_diffs';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
+const NEXT_COMMIT_URL = `${TEST_HOST}/?commit_id=next`;
+const PREV_COMMIT_URL = `${TEST_HOST}/?commit_id=prev`;
+
 describe('CompareVersions', () => {
   let wrapper;
   let store;
   const targetBranchName = 'tmp-wine-dev';
+  const { commit } = getDiffWithCommit();
 
-  const createWrapper = (props) => {
+  const createWrapper = (props = {}, commitArgs = {}) => {
+    store.state.diffs.commit = { ...store.state.diffs.commit, ...commitArgs };
     wrapper = mount(CompareVersionsComponent, {
       localVue,
       store,
@@ -28,6 +34,11 @@ describe('CompareVersions', () => {
   const findLimitedContainer = () => wrapper.find('.container-limited.limit-container-width');
   const findCompareSourceDropdown = () => wrapper.find('.mr-version-dropdown');
   const findCompareTargetDropdown = () => wrapper.find('.mr-version-compare-dropdown');
+  const getCommitNavButtonsElement = () => wrapper.find('.commit-nav-buttons');
+  const getNextCommitNavElement = () =>
+    getCommitNavButtonsElement().find('.btn-group > *:last-child');
+  const getPrevCommitNavElement = () =>
+    getCommitNavButtonsElement().find('.btn-group > *:first-child');
 
   beforeEach(() => {
     store = createStore();
@@ -161,4 +172,126 @@ describe('CompareVersions', () => {
       expect(findCompareTargetDropdown().exists()).toBe(false);
     });
   });
+
+  describe('without neighbor commits', () => {
+    beforeEach(() => {
+      createWrapper({ commit: { ...commit, prev_commit_id: null, next_commit_id: null } });
+    });
+
+    it('does not render any navigation buttons', () => {
+      expect(getCommitNavButtonsElement().exists()).toEqual(false);
+    });
+  });
+
+  describe('with neighbor commits', () => {
+    let mrCommit;
+
+    beforeEach(() => {
+      mrCommit = {
+        ...commit,
+        next_commit_id: 'next',
+        prev_commit_id: 'prev',
+      };
+
+      createWrapper({}, mrCommit);
+    });
+
+    it('renders the commit navigation buttons', () => {
+      expect(getCommitNavButtonsElement().exists()).toEqual(true);
+
+      createWrapper({
+        commit: { ...mrCommit, next_commit_id: null },
+      });
+      expect(getCommitNavButtonsElement().exists()).toEqual(true);
+
+      createWrapper({
+        commit: { ...mrCommit, prev_commit_id: null },
+      });
+      expect(getCommitNavButtonsElement().exists()).toEqual(true);
+    });
+
+    describe('prev commit', () => {
+      beforeAll(() => {
+        global.jsdom.reconfigure({
+          url: `${TEST_HOST}?commit_id=${mrCommit.id}`,
+        });
+      });
+
+      afterAll(() => {
+        global.jsdom.reconfigure({
+          url: TEST_HOST,
+        });
+      });
+
+      beforeEach(() => {
+        jest.spyOn(wrapper.vm, 'moveToNeighboringCommit').mockImplementation(() => {});
+      });
+
+      it('uses the correct href', () => {
+        const link = getPrevCommitNavElement();
+
+        expect(link.element.getAttribute('href')).toEqual(PREV_COMMIT_URL);
+      });
+
+      it('triggers the correct Vuex action on click', () => {
+        const link = getPrevCommitNavElement();
+
+        link.trigger('click');
+        return wrapper.vm.$nextTick().then(() => {
+          expect(wrapper.vm.moveToNeighboringCommit).toHaveBeenCalledWith({
+            direction: 'previous',
+          });
+        });
+      });
+
+      it('renders a disabled button when there is no prev commit', () => {
+        createWrapper({}, { ...mrCommit, prev_commit_id: null });
+
+        const button = getPrevCommitNavElement();
+
+        expect(button.element.hasAttribute('disabled')).toEqual(true);
+      });
+    });
+
+    describe('next commit', () => {
+      beforeAll(() => {
+        global.jsdom.reconfigure({
+          url: `${TEST_HOST}?commit_id=${mrCommit.id}`,
+        });
+      });
+
+      afterAll(() => {
+        global.jsdom.reconfigure({
+          url: TEST_HOST,
+        });
+      });
+
+      beforeEach(() => {
+        jest.spyOn(wrapper.vm, 'moveToNeighboringCommit').mockImplementation(() => {});
+      });
+
+      it('uses the correct href', () => {
+        const link = getNextCommitNavElement();
+
+        expect(link.element.getAttribute('href')).toEqual(NEXT_COMMIT_URL);
+      });
+
+      it('triggers the correct Vuex action on click', () => {
+        const link = getNextCommitNavElement();
+
+        link.trigger('click');
+        return wrapper.vm.$nextTick().then(() => {
+          expect(wrapper.vm.moveToNeighboringCommit).toHaveBeenCalledWith({ direction: 'next' });
+        });
+      });
+
+      it('renders a disabled button when there is no next commit', () => {
+        createWrapper({}, { ...mrCommit, next_commit_id: null });
+
+        const button = getNextCommitNavElement();
+
+        expect(button.element.hasAttribute('disabled')).toEqual(true);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js
index 5682b29d697..0bc1bd40f06 100644
--- a/spec/frontend/diffs/components/diff_row_spec.js
+++ b/spec/frontend/diffs/components/diff_row_spec.js
@@ -4,6 +4,7 @@ import Vuex from 'vuex';
 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';
 
 describe('DiffRow', () => {
@@ -211,4 +212,20 @@ describe('DiffRow', () => {
       expect(coverage.classes('no-coverage')).toBeFalsy();
     });
   });
+
+  describe('interoperability', () => {
+    it.each`
+      desc                                 | line                                                   | inline   | leftSide                                                  | rightSide
+      ${'with inline and new_line'}        | ${{ left: { old_line: 3, new_line: 5, type: 'new' } }} | ${true}  | ${{ type: 'new', line: '5', oldLine: '3', newLine: '5' }} | ${null}
+      ${'with inline and no new_line'}     | ${{ left: { old_line: 3, type: 'old' } }}              | ${true}  | ${{ type: 'old', line: '3', oldLine: '3' }}               | ${null}
+      ${'with parallel and no right side'} | ${{ left: { old_line: 3, new_line: 5 } }}              | ${false} | ${{ type: 'old', line: '3', oldLine: '3' }}               | ${null}
+      ${'with parallel and no left side'}  | ${{ right: { old_line: 3, new_line: 5 } }}             | ${false} | ${null}                                                   | ${{ type: 'new', line: '5', newLine: '5' }}
+      ${'with parallel and right side'}    | ${{ left: { old_line: 3 }, right: { new_line: 5 } }}   | ${false} | ${{ type: 'old', line: '3', oldLine: '3' }}               | ${{ type: 'new', line: '5', newLine: '5' }}
+    `('$desc, sets interop data attributes', ({ line, inline, leftSide, rightSide }) => {
+      const wrapper = createWrapper({ props: { line, inline } });
+
+      expect(findInteropAttributes(wrapper, '[data-testid="left-side"]')).toEqual(leftSide);
+      expect(findInteropAttributes(wrapper, '[data-testid="right-side"]')).toEqual(rightSide);
+    });
+  });
 });
diff --git a/spec/frontend/diffs/components/inline_diff_table_row_spec.js b/spec/frontend/diffs/components/inline_diff_table_row_spec.js
index 28b3055b58c..66b63a7a1d0 100644
--- a/spec/frontend/diffs/components/inline_diff_table_row_spec.js
+++ b/spec/frontend/diffs/components/inline_diff_table_row_spec.js
@@ -3,6 +3,7 @@ import DiffGutterAvatars from '~/diffs/components/diff_gutter_avatars.vue';
 import { mapInline } from '~/diffs/components/diff_row_utils';
 import InlineDiffTableRow from '~/diffs/components/inline_diff_table_row.vue';
 import { createStore } from '~/mr_notes/stores';
+import { findInteropAttributes } from '../find_interop_attributes';
 import discussionsMockData from '../mock_data/diff_discussions';
 import diffFileMockData from '../mock_data/diff_file';
 
@@ -310,4 +311,16 @@ describe('InlineDiffTableRow', () => {
       });
     });
   });
+
+  describe('interoperability', () => {
+    it.each`
+      desc               | line                                                      | expectation
+      ${'with type old'} | ${{ ...thisLine, type: 'old', old_line: 3, new_line: 5 }} | ${{ type: 'old', line: '3', oldLine: '3', newLine: '5' }}
+      ${'with type new'} | ${{ ...thisLine, type: 'new', old_line: 3, new_line: 5 }} | ${{ type: 'new', line: '5', oldLine: '3', newLine: '5' }}
+    `('$desc, sets interop data attributes', ({ line, expectation }) => {
+      createComponent({ line });
+
+      expect(findInteropAttributes(wrapper)).toEqual(expectation);
+    });
+  });
 });
diff --git a/spec/frontend/diffs/components/parallel_diff_table_row_spec.js b/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
index dbe8303077d..ed191d849fd 100644
--- a/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
+++ b/spec/frontend/diffs/components/parallel_diff_table_row_spec.js
@@ -5,6 +5,7 @@ import DiffGutterAvatars from '~/diffs/components/diff_gutter_avatars.vue';
 import { mapParallel } from '~/diffs/components/diff_row_utils';
 import ParallelDiffTableRow from '~/diffs/components/parallel_diff_table_row.vue';
 import { createStore } from '~/mr_notes/stores';
+import { findInteropAttributes } from '../find_interop_attributes';
 import discussionsMockData from '../mock_data/diff_discussions';
 import diffFileMockData from '../mock_data/diff_file';
 
@@ -418,5 +419,27 @@ describe('ParallelDiffTableRow', () => {
         });
       });
     });
+
+    describe('interoperability', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('adds old side interoperability data attributes', () => {
+        expect(findInteropAttributes(wrapper, '.line_content.left-side')).toEqual({
+          type: 'old',
+          line: thisLine.left.old_line.toString(),
+          oldLine: thisLine.left.old_line.toString(),
+        });
+      });
+
+      it('adds new side interoperability data attributes', () => {
+        expect(findInteropAttributes(wrapper, '.line_content.right-side')).toEqual({
+          type: 'new',
+          line: thisLine.right.new_line.toString(),
+          newLine: thisLine.right.new_line.toString(),
+        });
+      });
+    });
   });
 });
diff --git a/spec/frontend/diffs/create_diffs_store.js b/spec/frontend/diffs/create_diffs_store.js
index aacde99964c..e6a8b7a72ae 100644
--- a/spec/frontend/diffs/create_diffs_store.js
+++ b/spec/frontend/diffs/create_diffs_store.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import batchCommentsModule from '~/batch_comments/stores/modules/batch_comments';
 import diffsModule from '~/diffs/store/modules';
 import notesModule from '~/notes/stores/modules';
 
@@ -10,6 +11,7 @@ export default function createDiffsStore() {
     modules: {
       diffs: diffsModule(),
       notes: notesModule(),
+      batchComments: batchCommentsModule(),
     },
   });
 }
diff --git a/spec/frontend/diffs/find_interop_attributes.js b/spec/frontend/diffs/find_interop_attributes.js
new file mode 100644
index 00000000000..d2266b20e16
--- /dev/null
+++ b/spec/frontend/diffs/find_interop_attributes.js
@@ -0,0 +1,20 @@
+export const findInteropAttributes = (parent, sel) => {
+  const target = sel ? parent.find(sel) : parent;
+
+  if (!target.exists()) {
+    return null;
+  }
+
+  const type = target.attributes('data-interop-type');
+
+  if (!type) {
+    return null;
+  }
+
+  return {
+    type,
+    line: target.attributes('data-interop-line'),
+    oldLine: target.attributes('data-interop-old-line'),
+    newLine: target.attributes('data-interop-new-line'),
+  };
+};
diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js
index ed3210ecfaf..f46a42fae7a 100644
--- a/spec/frontend/diffs/store/actions_spec.js
+++ b/spec/frontend/diffs/store/actions_spec.js
@@ -80,7 +80,7 @@ describe('DiffsStoreActions', () => {
     jest.spyOn(utils, 'idleCallback').mockImplementation(() => null);
     ['requestAnimationFrame', 'requestIdleCallback'].forEach((method) => {
       global[method] = (cb) => {
-        cb();
+        cb({ timeRemaining: () => 10 });
       };
     });
   });
@@ -198,7 +198,7 @@ describe('DiffsStoreActions', () => {
           { type: types.VIEW_DIFF_FILE, payload: 'test2' },
           { type: types.SET_RETRIEVING_BATCHES, payload: false },
         ],
-        [],
+        [{ type: 'startRenderDiffsQueue' }, { type: 'startRenderDiffsQueue' }],
         done,
       );
     });
@@ -251,6 +251,8 @@ describe('DiffsStoreActions', () => {
           { type: types.SET_LOADING, payload: false },
           { type: types.SET_MERGE_REQUEST_DIFFS, payload: diffMetadata.merge_request_diffs },
           { type: types.SET_DIFF_METADATA, payload: noFilesData },
+          // Workers are synchronous in Jest environment (see https://gitlab.com/gitlab-org/gitlab/-/merge_requests/58805)
+          { type: types.SET_TREE_DATA, payload: utils.generateTreeList(diffMetadata.diff_files) },
         ],
         [],
         () => {
@@ -1459,19 +1461,42 @@ describe('DiffsStoreActions', () => {
   });
 
   describe('setFileByFile', () => {
+    const updateUserEndpoint = 'user/prefs';
+    let putSpy;
+    let mock;
+
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+      putSpy = jest.spyOn(axios, 'put');
+
+      mock.onPut(updateUserEndpoint).reply(200, {});
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
     it.each`
       value
       ${true}
       ${false}
-    `('commits SET_FILE_BY_FILE with the new value $value', ({ value }) => {
-      return testAction(
-        setFileByFile,
-        { fileByFile: value },
-        { viewDiffsFileByFile: null },
-        [{ type: types.SET_FILE_BY_FILE, payload: value }],
-        [],
-      );
-    });
+    `(
+      'commits SET_FILE_BY_FILE and persists the File-by-File user preference with the new value $value',
+      async ({ value }) => {
+        await testAction(
+          setFileByFile,
+          { fileByFile: value },
+          {
+            viewDiffsFileByFile: null,
+            endpointUpdateUser: updateUserEndpoint,
+          },
+          [{ type: types.SET_FILE_BY_FILE, payload: value }],
+          [],
+        );
+
+        expect(putSpy).toHaveBeenCalledWith(updateUserEndpoint, { view_diffs_file_by_file: value });
+      },
+    );
   });
 
   describe('reviewFile', () => {
diff --git a/spec/frontend/diffs/store/getters_spec.js b/spec/frontend/diffs/store/getters_spec.js
index 04606b48662..2e3a66d5b01 100644
--- a/spec/frontend/diffs/store/getters_spec.js
+++ b/spec/frontend/diffs/store/getters_spec.js
@@ -377,32 +377,40 @@ describe('Diffs Module Getters', () => {
   });
 
   describe('suggestionCommitMessage', () => {
+    let rootState;
+
     beforeEach(() => {
       Object.assign(localState, {
         defaultSuggestionCommitMessage:
           '%{branch_name}%{project_path}%{project_name}%{username}%{user_full_name}%{file_paths}%{suggestions_count}%{files_count}',
-        branchName: 'branch',
-        projectPath: '/path',
-        projectName: 'name',
-        username: 'user',
-        userFullName: 'user userton',
       });
+      rootState = {
+        page: {
+          mrMetadata: {
+            branch_name: 'branch',
+            project_path: '/path',
+            project_name: 'name',
+            username: 'user',
+            user_full_name: 'user userton',
+          },
+        },
+      };
     });
 
     it.each`
-      specialState              | output
-      ${{}}                     | ${'branch/pathnameuseruser userton%{file_paths}%{suggestions_count}%{files_count}'}
-      ${{ userFullName: null }} | ${'branch/pathnameuser%{user_full_name}%{file_paths}%{suggestions_count}%{files_count}'}
-      ${{ username: null }}     | ${'branch/pathname%{username}user userton%{file_paths}%{suggestions_count}%{files_count}'}
-      ${{ projectName: null }}  | ${'branch/path%{project_name}useruser userton%{file_paths}%{suggestions_count}%{files_count}'}
-      ${{ projectPath: null }}  | ${'branch%{project_path}nameuseruser userton%{file_paths}%{suggestions_count}%{files_count}'}
-      ${{ branchName: null }}   | ${'%{branch_name}/pathnameuseruser userton%{file_paths}%{suggestions_count}%{files_count}'}
+      specialState                | output
+      ${{}}                       | ${'branch/pathnameuseruser userton%{file_paths}%{suggestions_count}%{files_count}'}
+      ${{ user_full_name: null }} | ${'branch/pathnameuser%{user_full_name}%{file_paths}%{suggestions_count}%{files_count}'}
+      ${{ username: null }}       | ${'branch/pathname%{username}user userton%{file_paths}%{suggestions_count}%{files_count}'}
+      ${{ project_name: null }}   | ${'branch/path%{project_name}useruser userton%{file_paths}%{suggestions_count}%{files_count}'}
+      ${{ project_path: null }}   | ${'branch%{project_path}nameuseruser userton%{file_paths}%{suggestions_count}%{files_count}'}
+      ${{ branch_name: null }}    | ${'%{branch_name}/pathnameuseruser userton%{file_paths}%{suggestions_count}%{files_count}'}
     `(
       'provides the correct "base" default commit message based on state ($specialState)',
       ({ specialState, output }) => {
-        Object.assign(localState, specialState);
+        Object.assign(rootState.page.mrMetadata, specialState);
 
-        expect(getters.suggestionCommitMessage(localState)()).toBe(output);
+        expect(getters.suggestionCommitMessage(localState, null, rootState)()).toBe(output);
       },
     );
 
@@ -417,7 +425,9 @@ describe('Diffs Module Getters', () => {
     `(
       "properly overrides state values ($stateOverrides) if they're provided",
       ({ stateOverrides, output }) => {
-        expect(getters.suggestionCommitMessage(localState)(stateOverrides)).toBe(output);
+        expect(getters.suggestionCommitMessage(localState, null, rootState)(stateOverrides)).toBe(
+          output,
+        );
       },
     );
 
@@ -431,7 +441,9 @@ describe('Diffs Module Getters', () => {
     `(
       "fills in any missing interpolations ($providedValues) when they're provided at the getter callsite",
       ({ providedValues, output }) => {
-        expect(getters.suggestionCommitMessage(localState)(providedValues)).toBe(output);
+        expect(getters.suggestionCommitMessage(localState, null, rootState)(providedValues)).toBe(
+          output,
+        );
       },
     );
   });
diff --git a/spec/frontend/diffs/store/mutations_spec.js b/spec/frontend/diffs/store/mutations_spec.js
index a8ae759e693..b549ca42634 100644
--- a/spec/frontend/diffs/store/mutations_spec.js
+++ b/spec/frontend/diffs/store/mutations_spec.js
@@ -7,15 +7,17 @@ import diffFileMockData from '../mock_data/diff_file';
 
 describe('DiffsStoreMutations', () => {
   describe('SET_BASE_CONFIG', () => {
-    it('should set endpoint and project path', () => {
+    it.each`
+      prop                    | value
+      ${'endpoint'}           | ${'/diffs/endpoint'}
+      ${'projectPath'}        | ${'/root/project'}
+      ${'endpointUpdateUser'} | ${'/user/preferences'}
+    `('should set the $prop property into state', ({ prop, value }) => {
       const state = {};
-      const endpoint = '/diffs/endpoint';
-      const projectPath = '/root/project';
 
-      mutations[types.SET_BASE_CONFIG](state, { endpoint, projectPath });
+      mutations[types.SET_BASE_CONFIG](state, { [prop]: value });
 
-      expect(state.endpoint).toEqual(endpoint);
-      expect(state.projectPath).toEqual(projectPath);
+      expect(state[prop]).toEqual(value);
     });
   });
 
diff --git a/spec/frontend/diffs/utils/interoperability_spec.js b/spec/frontend/diffs/utils/interoperability_spec.js
new file mode 100644
index 00000000000..2557e83cb4c
--- /dev/null
+++ b/spec/frontend/diffs/utils/interoperability_spec.js
@@ -0,0 +1,67 @@
+import {
+  getInteropInlineAttributes,
+  getInteropNewSideAttributes,
+  getInteropOldSideAttributes,
+  ATTR_TYPE,
+  ATTR_LINE,
+  ATTR_NEW_LINE,
+  ATTR_OLD_LINE,
+} from '~/diffs/utils/interoperability';
+
+describe('~/diffs/utils/interoperability', () => {
+  describe('getInteropInlineAttributes', () => {
+    it.each([
+      ['with null input', { input: null, output: null }],
+      [
+        'with type=old input',
+        {
+          input: { type: 'old', old_line: 3, new_line: 5 },
+          output: { [ATTR_TYPE]: 'old', [ATTR_LINE]: 3, [ATTR_OLD_LINE]: 3, [ATTR_NEW_LINE]: 5 },
+        },
+      ],
+      [
+        'with type=old-nonewline input',
+        {
+          input: { type: 'old-nonewline', old_line: 3, new_line: 5 },
+          output: { [ATTR_TYPE]: 'old', [ATTR_LINE]: 3, [ATTR_OLD_LINE]: 3, [ATTR_NEW_LINE]: 5 },
+        },
+      ],
+      [
+        'with type=new input',
+        {
+          input: { type: 'new', old_line: 3, new_line: 5 },
+          output: { [ATTR_TYPE]: 'new', [ATTR_LINE]: 5, [ATTR_OLD_LINE]: 3, [ATTR_NEW_LINE]: 5 },
+        },
+      ],
+      [
+        'with type=bogus input',
+        {
+          input: { type: 'bogus', old_line: 3, new_line: 5 },
+          output: { [ATTR_TYPE]: 'new', [ATTR_LINE]: 5, [ATTR_OLD_LINE]: 3, [ATTR_NEW_LINE]: 5 },
+        },
+      ],
+    ])('%s', (desc, { input, output }) => {
+      expect(getInteropInlineAttributes(input)).toEqual(output);
+    });
+  });
+
+  describe('getInteropOldSideAttributes', () => {
+    it.each`
+      input              | output
+      ${null}            | ${null}
+      ${{ old_line: 2 }} | ${{ [ATTR_TYPE]: 'old', [ATTR_LINE]: 2, [ATTR_OLD_LINE]: 2 }}
+    `('with input=$input', ({ input, output }) => {
+      expect(getInteropOldSideAttributes(input)).toEqual(output);
+    });
+  });
+
+  describe('getInteropNewSideAttributes', () => {
+    it.each`
+      input              | output
+      ${null}            | ${null}
+      ${{ new_line: 2 }} | ${{ [ATTR_TYPE]: 'new', [ATTR_LINE]: 2, [ATTR_NEW_LINE]: 2 }}
+    `('with input=$input', ({ input, output }) => {
+      expect(getInteropNewSideAttributes(input)).toEqual(output);
+    });
+  });
+});