Add UI to toggle fileByFile setting

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

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlButtonGroup, GlButton, GlDropdown } from '@gitlab/ui';
+import { GlButtonGroup, GlButton, GlDropdown, GlFormCheckbox } from '@gitlab/ui';
+
+import eventHub from '../event_hub';
+import { EVT_VIEW_FILE_BY_FILE } from '../constants';
+import { SETTINGS_DROPDOWN } from '../i18n';
 
 export default {
+  i18n: SETTINGS_DROPDOWN,
   components: {
     GlButtonGroup,
     GlButton,
     GlDropdown,
+    GlFormCheckbox,
+  },
+  data() {
+    return {
+      checked: false,
+    };
   },
   computed: {
     ...mapGetters('diffs', ['isInlineView', 'isParallelView']),
-    ...mapState('diffs', ['renderTreeList', 'showWhitespace']),
+    ...mapState('diffs', ['renderTreeList', 'showWhitespace', 'viewDiffsFileByFile']),
+  },
+  watch: {
+    viewDiffsFileByFile() {
+      this.checked = this.viewDiffsFileByFile;
+    },
+    checked() {
+      eventHub.$emit(EVT_VIEW_FILE_BY_FILE, { setting: this.checked });
+    },
+  },
+  created() {
+    this.checked = this.viewDiffsFileByFile;
   },
   methods: {
     ...mapActions('diffs', [
@@ -19,6 +41,9 @@ export default {
       'setRenderTreeList',
       'setShowWhitespace',
     ]),
+    toggleFileByFile() {
+      eventHub.$emit(EVT_VIEW_FILE_BY_FILE, { setting: !this.viewDiffsFileByFile });
+    },
   },
 };
 </script>
@@ -84,5 +109,10 @@ export default {
         {{ __('Show whitespace changes') }}
       </label>
     </div>
+    <div class="gl-mt-3 gl-px-3">
+      <gl-form-checkbox v-model="checked" data-testid="file-by-file" class="gl-mb-0">
+        {{ $options.i18n.fileByFile }}
+      </gl-form-checkbox>
+    </div>
   </gl-dropdown>
 </template>

app/assets/javascripts/diffs/i18n.js

@@ -16,3 +16,7 @@ export const DIFF_FILE = {
   autoCollapsed: __('Files with large changes are collapsed by default.'),
   expand: __('Expand file'),
 };
+
+export const SETTINGS_DROPDOWN = {
+  fileByFile: __('Show one file at a time'),
+};

spec/frontend/diffs/components/settings_dropdown_spec.js

@@ -2,12 +2,18 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import diffModule from '~/diffs/store/modules';
 import SettingsDropdown from '~/diffs/components/settings_dropdown.vue';
-import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
+import {
+  EVT_VIEW_FILE_BY_FILE,
+  PARALLEL_DIFF_VIEW_TYPE,
+  INLINE_DIFF_VIEW_TYPE,
+} from '~/diffs/constants';
+import eventHub from '~/diffs/event_hub';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe('Diff settings dropdown component', () => {
+  let wrapper;
   let vm;
   let actions;
 
@@ -25,10 +31,15 @@ describe('Diff settings dropdown component', () => {
 
     extendStore(store);
 
-    vm = mount(SettingsDropdown, {
+    wrapper = mount(SettingsDropdown, {
       localVue,
       store,
     });
+    vm = wrapper.vm;
+  }
+
+  function getFileByFileCheckbox(vueWrapper) {
+    return vueWrapper.find('[data-testid="file-by-file"]');
   }
 
   beforeEach(() => {
@@ -41,14 +52,14 @@ describe('Diff settings dropdown component', () => {
   });
 
   afterEach(() => {
-    vm.destroy();
+    wrapper.destroy();
   });
 
   describe('tree view buttons', () => {
     it('list view button dispatches setRenderTreeList with false', () => {
       createComponent();
 
-      vm.find('.js-list-view').trigger('click');
+      wrapper.find('.js-list-view').trigger('click');
 
       expect(actions.setRenderTreeList).toHaveBeenCalledWith(expect.anything(), false);
     });
@@ -56,7 +67,7 @@ describe('Diff settings dropdown component', () => {
     it('tree view button dispatches setRenderTreeList with true', () => {
       createComponent();
 
-      vm.find('.js-tree-view').trigger('click');
+      wrapper.find('.js-tree-view').trigger('click');
 
       expect(actions.setRenderTreeList).toHaveBeenCalledWith(expect.anything(), true);
     });
@@ -68,8 +79,8 @@ describe('Diff settings dropdown component', () => {
         });
       });
 
-      expect(vm.find('.js-list-view').classes('selected')).toBe(true);
-      expect(vm.find('.js-tree-view').classes('selected')).toBe(false);
+      expect(wrapper.find('.js-list-view').classes('selected')).toBe(true);
+      expect(wrapper.find('.js-tree-view').classes('selected')).toBe(false);
     });
 
     it('sets tree button as selected when renderTreeList is true', () => {
@@ -79,8 +90,8 @@ describe('Diff settings dropdown component', () => {
         });
       });
 
-      expect(vm.find('.js-list-view').classes('selected')).toBe(false);
-      expect(vm.find('.js-tree-view').classes('selected')).toBe(true);
+      expect(wrapper.find('.js-list-view').classes('selected')).toBe(false);
+      expect(wrapper.find('.js-tree-view').classes('selected')).toBe(true);
     });
   });
 
@@ -92,8 +103,8 @@ describe('Diff settings dropdown component', () => {
         });
       });
 
-      expect(vm.find('.js-inline-diff-button').classes('selected')).toBe(true);
-      expect(vm.find('.js-parallel-diff-button').classes('selected')).toBe(false);
+      expect(wrapper.find('.js-inline-diff-button').classes('selected')).toBe(true);
+      expect(wrapper.find('.js-parallel-diff-button').classes('selected')).toBe(false);
     });
 
     it('sets parallel button as selected', () => {
@@ -103,14 +114,14 @@ describe('Diff settings dropdown component', () => {
         });
       });
 
-      expect(vm.find('.js-inline-diff-button').classes('selected')).toBe(false);
-      expect(vm.find('.js-parallel-diff-button').classes('selected')).toBe(true);
+      expect(wrapper.find('.js-inline-diff-button').classes('selected')).toBe(false);
+      expect(wrapper.find('.js-parallel-diff-button').classes('selected')).toBe(true);
     });
 
     it('calls setInlineDiffViewType when clicking inline button', () => {
       createComponent();
 
-      vm.find('.js-inline-diff-button').trigger('click');
+      wrapper.find('.js-inline-diff-button').trigger('click');
 
       expect(actions.setInlineDiffViewType).toHaveBeenCalled();
     });
@@ -118,7 +129,7 @@ describe('Diff settings dropdown component', () => {
     it('calls setParallelDiffViewType when clicking parallel button', () => {
       createComponent();
 
-      vm.find('.js-parallel-diff-button').trigger('click');
+      wrapper.find('.js-parallel-diff-button').trigger('click');
 
       expect(actions.setParallelDiffViewType).toHaveBeenCalled();
     });
@@ -132,7 +143,7 @@ describe('Diff settings dropdown component', () => {
         });
       });
 
-      expect(vm.find('#show-whitespace').element.checked).toBe(false);
+      expect(wrapper.find('#show-whitespace').element.checked).toBe(false);
     });
 
     it('sets as checked when showWhitespace is true', () => {
@@ -142,13 +153,13 @@ describe('Diff settings dropdown component', () => {
         });
       });
 
-      expect(vm.find('#show-whitespace').element.checked).toBe(true);
+      expect(wrapper.find('#show-whitespace').element.checked).toBe(true);
     });
 
     it('calls setShowWhitespace on change', () => {
       createComponent();
 
-      const checkbox = vm.find('#show-whitespace');
+      const checkbox = wrapper.find('#show-whitespace');
 
       checkbox.element.checked = true;
       checkbox.trigger('change');
@@ -159,4 +170,52 @@ describe('Diff settings dropdown component', () => {
       });
     });
   });
+
+  describe('file-by-file toggle', () => {
+    beforeEach(() => {
+      jest.spyOn(eventHub, '$emit');
+    });
+
+    it.each`
+      fileByFile | checked
+      ${true}    | ${true}
+      ${false}   | ${false}
+    `(
+      'sets { checked: $checked } if the fileByFile setting is $fileByFile',
+      async ({ fileByFile, checked }) => {
+        createComponent(store => {
+          Object.assign(store.state.diffs, {
+            viewDiffsFileByFile: fileByFile,
+          });
+        });
+
+        await vm.$nextTick();
+
+        expect(vm.checked).toBe(checked);
+      },
+    );
+
+    it.each`
+      start    | emit
+      ${true}  | ${false}
+      ${false} | ${true}
+    `(
+      'when the file by file setting starts as $start, toggling the checkbox should emit an event set to $emit',
+      async ({ start, emit }) => {
+        createComponent(store => {
+          Object.assign(store.state.diffs, {
+            viewDiffsFileByFile: start,
+          });
+        });
+
+        await vm.$nextTick();
+
+        getFileByFileCheckbox(wrapper).trigger('click');
+
+        await vm.$nextTick();
+
+        expect(eventHub.$emit).toHaveBeenCalledWith(EVT_VIEW_FILE_BY_FILE, { setting: emit });
+      },
+    );
+  });
 });