1 files changed, 27 insertions, 14 deletions
diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue
index 78647065c8e..2fe2fd6b3d8 100644
--- a/app/assets/javascripts/diffs/components/settings_dropdown.vue
+++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue
@@ -1,23 +1,22 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlButtonGroup, GlButton, GlDropdown } from '@gitlab/ui';
-import { __ } from '~/locale';
+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,
   },
   computed: {
     ...mapGetters('diffs', ['isInlineView', 'isParallelView']),
-    ...mapState('diffs', ['renderTreeList', 'showWhitespace']),
-  },
-  mounted() {
-    this.patchAriaLabel();
-  },
-  updated() {
-    this.patchAriaLabel();
+    ...mapState('diffs', ['renderTreeList', 'showWhitespace', 'viewDiffsFileByFile']),
   },
   methods: {
     ...mapActions('diffs', [
@@ -26,17 +25,21 @@ export default {
       'setRenderTreeList',
       'setShowWhitespace',
     ]),
-    patchAriaLabel() {
-      this.$el
-        .querySelector('.js-show-diff-settings')
-        .setAttribute('aria-label', __('Diff view settings'));
+    toggleFileByFile() {
+      eventHub.$emit(EVT_VIEW_FILE_BY_FILE, { setting: !this.viewDiffsFileByFile });
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown icon="settings" toggle-class="js-show-diff-settings" right>
+  <gl-dropdown
+    icon="settings"
+    :text="__('Diff view settings')"
+    :text-sr-only="true"
+    toggle-class="js-show-diff-settings"
+    right
+  >
     <div class="gl-px-3">
       <span class="gl-font-weight-bold gl-display-block gl-mb-2">{{ __('File browser') }}</span>
       <gl-button-group class="gl-display-flex">
@@ -90,5 +93,15 @@ export default {
         {{ __('Show whitespace changes') }}
       </label>
     </div>
+    <div class="gl-mt-3 gl-px-3">
+      <gl-form-checkbox
+        data-testid="file-by-file"
+        class="gl-mb-0"
+        :checked="viewDiffsFileByFile"
+        @input="toggleFileByFile"
+      >
+        {{ $options.i18n.fileByFile }}
+      </gl-form-checkbox>
+    </div>
   </gl-dropdown>
 </template>