Set the fileByFile state based on user preference

... when the app loads and the pref is available

app/assets/javascripts/diffs/components/app.vue

@@ -22,6 +22,7 @@ import MergeConflictWarning from './merge_conflict_warning.vue';
 import CollapsedFilesWarning from './collapsed_files_warning.vue';
 
 import { diffsApp } from '../utils/performance';
+import { fileByFile } from '../utils/preferences';
 
 import {
   TREE_LIST_WIDTH_STORAGE_KEY,
@@ -114,7 +115,7 @@ export default {
       required: false,
       default: false,
     },
-    viewDiffsFileByFile: {
+    fileByFileUserPreference: {
       type: Boolean,
       required: false,
       default: false,
@@ -154,6 +155,7 @@ export default {
       'conflictResolutionPath',
       'canMerge',
       'hasConflicts',
+      'viewDiffsFileByFile',
     ]),
     ...mapGetters('diffs', ['whichCollapsedTypes', 'isParallelView', 'currentDiffIndex']),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
@@ -254,7 +256,7 @@ export default {
       projectPath: this.projectPath,
       dismissEndpoint: this.dismissEndpoint,
       showSuggestPopover: this.showSuggestPopover,
-      viewDiffsFileByFile: this.viewDiffsFileByFile,
+      viewDiffsFileByFile: fileByFile(this.fileByFileUserPreference),
     });
 
     if (this.shouldShow) {

app/assets/javascripts/diffs/index.js

@@ -116,7 +116,7 @@ export default function initDiffsApp(store) {
           isFluidLayout: this.isFluidLayout,
           dismissEndpoint: this.dismissEndpoint,
           showSuggestPopover: this.showSuggestPopover,
-          viewDiffsFileByFile: this.viewDiffsFileByFile,
+          fileByFileUserPreference: this.viewDiffsFileByFile,
         },
       });
     },

spec/frontend/diffs/components/app_spec.js

@@ -19,8 +19,8 @@ import diffsMockData from '../mock_data/merge_request_diffs';
 
 const mergeRequestDiff = { version_index: 1 };
 const TEST_ENDPOINT = `${TEST_HOST}/diff/endpoint`;
-const COMMIT_URL = '[BASE URL]/OLD';
-const UPDATED_COMMIT_URL = '[BASE URL]/NEW';
+const COMMIT_URL = `${TEST_HOST}/COMMIT/OLD`;
+const UPDATED_COMMIT_URL = `${TEST_HOST}/COMMIT/NEW`;
 
 function getCollapsedFilesWarning(wrapper) {
   return wrapper.find(CollapsedFilesWarning);
@@ -61,7 +61,7 @@ describe('diffs/components/app', () => {
         changesEmptyStateIllustration: '',
         dismissEndpoint: '',
         showSuggestPopover: true,
-        viewDiffsFileByFile: false,
+        fileByFileUserPreference: false,
         ...props,
       },
       provide,
@@ -700,12 +700,14 @@ describe('diffs/components/app', () => {
   });
 
   describe('file-by-file', () => {
-    it('renders a single diff', () => {
-      createComponent({ viewDiffsFileByFile: true }, ({ state }) => {
+    it('renders a single diff', async () => {
+      createComponent({ fileByFileUserPreference: true }, ({ state }) => {
         state.diffs.diffFiles.push({ file_hash: '123' });
         state.diffs.diffFiles.push({ file_hash: '312' });
       });
 
+      await wrapper.vm.$nextTick();
+
       expect(wrapper.findAll(DiffFile).length).toBe(1);
     });
 
@@ -713,31 +715,37 @@ describe('diffs/components/app', () => {
       const fileByFileNav = () => wrapper.find('[data-testid="file-by-file-navigation"]');
       const paginator = () => fileByFileNav().find(GlPagination);
 
-      it('sets previous button as disabled', () => {
-        createComponent({ viewDiffsFileByFile: true }, ({ state }) => {
+      it('sets previous button as disabled', async () => {
+        createComponent({ fileByFileUserPreference: true }, ({ state }) => {
           state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' });
         });
 
+        await wrapper.vm.$nextTick();
+
         expect(paginator().attributes('prevpage')).toBe(undefined);
         expect(paginator().attributes('nextpage')).toBe('2');
       });
 
-      it('sets next button as disabled', () => {
-        createComponent({ viewDiffsFileByFile: true }, ({ state }) => {
+      it('sets next button as disabled', async () => {
+        createComponent({ fileByFileUserPreference: true }, ({ state }) => {
           state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' });
           state.diffs.currentDiffFileId = '312';
         });
 
+        await wrapper.vm.$nextTick();
+
         expect(paginator().attributes('prevpage')).toBe('1');
         expect(paginator().attributes('nextpage')).toBe(undefined);
       });
 
-      it("doesn't display when there's fewer than 2 files", () => {
-        createComponent({ viewDiffsFileByFile: true }, ({ state }) => {
+      it("doesn't display when there's fewer than 2 files", async () => {
+        createComponent({ fileByFileUserPreference: true }, ({ state }) => {
           state.diffs.diffFiles.push({ file_hash: '123' });
           state.diffs.currentDiffFileId = '123';
         });
 
+        await wrapper.vm.$nextTick();
+
         expect(fileByFileNav().exists()).toBe(false);
       });
 
@@ -748,11 +756,13 @@ describe('diffs/components/app', () => {
       `(
         'it calls navigateToDiffFileIndex with $index when $link is clicked',
         async ({ currentDiffFileId, targetFile }) => {
-          createComponent({ viewDiffsFileByFile: true }, ({ state }) => {
+          createComponent({ fileByFileUserPreference: true }, ({ state }) => {
             state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' });
             state.diffs.currentDiffFileId = currentDiffFileId;
           });
 
+          await wrapper.vm.$nextTick();
+
           jest.spyOn(wrapper.vm, 'navigateToDiffFileIndex');
 
           paginator().vm.$emit('input', targetFile);