1 files changed, 21 insertions, 25 deletions
diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue
index 7d74e81257a..879922f86a2 100644
--- a/app/assets/javascripts/diffs/components/settings_dropdown.vue
+++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue
@@ -1,9 +1,6 @@
 <script>
 import { GlButtonGroup, GlButton, GlDropdown, GlFormCheckbox } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
-
-import { EVT_VIEW_FILE_BY_FILE } from '../constants';
-import eventHub from '../event_hub';
 import { SETTINGS_DROPDOWN } from '../i18n';
 
 export default {
@@ -24,9 +21,13 @@ export default {
       'setParallelDiffViewType',
       'setRenderTreeList',
       'setShowWhitespace',
+      'setFileByFile',
     ]),
     toggleFileByFile() {
-      eventHub.$emit(EVT_VIEW_FILE_BY_FILE, { setting: !this.viewDiffsFileByFile });
+      this.setFileByFile({ fileByFile: !this.viewDiffsFileByFile });
+    },
+    toggleWhitespace(updatedSetting) {
+      this.setShowWhitespace({ showWhitespace: updatedSetting, pushState: true });
     },
   },
 };
@@ -82,26 +83,21 @@ export default {
         </gl-button>
       </gl-button-group>
     </div>
-    <div class="gl-mt-3 gl-px-3">
-      <label class="gl-mb-0">
-        <input
-          id="show-whitespace"
-          type="checkbox"
-          :checked="showWhitespace"
-          @change="setShowWhitespace({ showWhitespace: $event.target.checked, pushState: true })"
-        />
-        {{ __('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-form-checkbox
+      data-testid="show-whitespace"
+      class="gl-mt-3 gl-ml-3"
+      :checked="showWhitespace"
+      @input="toggleWhitespace"
+    >
+      {{ $options.i18n.whitespace }}
+    </gl-form-checkbox>
+    <gl-form-checkbox
+      data-testid="file-by-file"
+      class="gl-ml-3 gl-mb-0"
+      :checked="viewDiffsFileByFile"
+      @input="toggleFileByFile"
+    >
+      {{ $options.i18n.fileByFile }}
+    </gl-form-checkbox>
   </gl-dropdown>
 </template>