Respond to diffs app hub requests to change the fileByFile setting

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

@@ -12,6 +12,8 @@ import { isSingleViewStyle } from '~/helpers/diffs_helper';
 import { updateHistory } from '~/lib/utils/url_utility';
 
 import notesEventHub from '../../notes/event_hub';
+import eventHub from '../event_hub';
+
 import CompareVersions from './compare_versions.vue';
 import DiffFile from './diff_file.vue';
 import NoChanges from './no_changes.vue';
@@ -36,6 +38,7 @@ import {
   ALERT_OVERFLOW_HIDDEN,
   ALERT_MERGE_CONFLICT,
   ALERT_COLLAPSED_FILES,
+  EVT_VIEW_FILE_BY_FILE,
 } from '../constants';
 
 export default {
@@ -283,6 +286,8 @@ export default {
 
     notesEventHub.$once('fetchDiffData', this.fetchData);
     notesEventHub.$on('refetchDiffData', this.refetchDiffData);
+    eventHub.$on(EVT_VIEW_FILE_BY_FILE, this.fileByFileListener);
+
     this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES;
 
     this.unwatchDiscussions = this.$watch(
@@ -303,6 +308,7 @@ export default {
   beforeDestroy() {
     diffsApp.deinstrument();
 
+    eventHub.$off(EVT_VIEW_FILE_BY_FILE, this.fileByFileListener);
     notesEventHub.$off('refetchDiffData', this.refetchDiffData);
     notesEventHub.$off('fetchDiffData', this.fetchData);
 
@@ -323,7 +329,11 @@ export default {
       'scrollToFile',
       'setShowTreeList',
       'navigateToDiffFileIndex',
+      'setFileByFile',
     ]),
+    fileByFileListener({ setting } = {}) {
+      this.setFileByFile({ fileByFile: setting });
+    },
     navigateToDiffFileNumber(number) {
       this.navigateToDiffFileIndex(number - 1);
     },

app/assets/javascripts/diffs/constants.js

@@ -103,6 +103,7 @@ export const RENAMED_DIFF_TRANSITIONS = {
 
 // MR Diffs known events
 export const EVT_EXPAND_ALL_FILES = 'mr:diffs:expandAllFiles';
+export const EVT_VIEW_FILE_BY_FILE = 'mr:diffs:preference:fileByFile';
 export const EVT_PERF_MARK_FILE_TREE_START = 'mr:diffs:perf:fileTreeStart';
 export const EVT_PERF_MARK_FILE_TREE_END = 'mr:diffs:perf:fileTreeEnd';
 export const EVT_PERF_MARK_DIFF_FILES_START = 'mr:diffs:perf:filesStart';

spec/frontend/diffs/components/app_spec.js

@@ -17,6 +17,10 @@ import axios from '~/lib/utils/axios_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import diffsMockData from '../mock_data/merge_request_diffs';
 
+import { EVT_VIEW_FILE_BY_FILE } from '~/diffs/constants';
+
+import eventHub from '~/diffs/event_hub';
+
 const mergeRequestDiff = { version_index: 1 };
 const TEST_ENDPOINT = `${TEST_HOST}/diff/endpoint`;
 const COMMIT_URL = `${TEST_HOST}/COMMIT/OLD`;
@@ -773,5 +777,24 @@ describe('diffs/components/app', () => {
         },
       );
     });
+
+    describe('control via event stream', () => {
+      it.each`
+        setting
+        ${true}
+        ${false}
+      `(
+        'triggers the action with the new fileByFile setting - $setting - when the event with that setting is received',
+        async ({ setting }) => {
+          createComponent();
+          await wrapper.vm.$nextTick();
+
+          eventHub.$emit(EVT_VIEW_FILE_BY_FILE, { setting });
+          await wrapper.vm.$nextTick();
+
+          expect(store.state.diffs.viewDiffsFileByFile).toBe(setting);
+        },
+      );
+    });
   });
 });