Add latest changes from gitlab-org/gitlab@master

10 files changed, 112 insertions, 11 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 9218cc00303..53eb8cd8eb8 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -10,7 +10,10 @@ import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { isSingleViewStyle } from '~/helpers/diffs_helper';
 import { updateHistory } from '~/lib/utils/url_utility';
-import eventHub from '../../notes/event_hub';
+
+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';
@@ -22,6 +25,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,
@@ -34,6 +38,7 @@ import {
   ALERT_OVERFLOW_HIDDEN,
   ALERT_MERGE_CONFLICT,
   ALERT_COLLAPSED_FILES,
+  EVT_VIEW_FILE_BY_FILE,
 } from '../constants';
 
 export default {
@@ -114,7 +119,7 @@ export default {
       required: false,
       default: false,
     },
-    viewDiffsFileByFile: {
+    fileByFileUserPreference: {
       type: Boolean,
       required: false,
       default: false,
@@ -154,6 +159,7 @@ export default {
       'conflictResolutionPath',
       'canMerge',
       'hasConflicts',
+      'viewDiffsFileByFile',
     ]),
     ...mapGetters('diffs', ['whichCollapsedTypes', 'isParallelView', 'currentDiffIndex']),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
@@ -254,7 +260,7 @@ export default {
       projectPath: this.projectPath,
       dismissEndpoint: this.dismissEndpoint,
       showSuggestPopover: this.showSuggestPopover,
-      viewDiffsFileByFile: this.viewDiffsFileByFile,
+      viewDiffsFileByFile: fileByFile(this.fileByFileUserPreference),
     });
 
     if (this.shouldShow) {
@@ -278,8 +284,10 @@ export default {
   created() {
     this.adjustView();
 
-    eventHub.$once('fetchDiffData', this.fetchData);
-    eventHub.$on('refetchDiffData', this.refetchDiffData);
+    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(
@@ -300,8 +308,10 @@ export default {
   beforeDestroy() {
     diffsApp.deinstrument();
 
-    eventHub.$off('fetchDiffData', this.fetchData);
-    eventHub.$off('refetchDiffData', this.refetchDiffData);
+    eventHub.$off(EVT_VIEW_FILE_BY_FILE, this.fileByFileListener);
+    notesEventHub.$off('refetchDiffData', this.refetchDiffData);
+    notesEventHub.$off('fetchDiffData', this.fetchData);
+
     this.removeEventListeners();
   },
   methods: {
@@ -319,7 +329,11 @@ export default {
       'scrollToFile',
       'setShowTreeList',
       'navigateToDiffFileIndex',
+      'setFileByFile',
     ]),
+    fileByFileListener({ setting } = {}) {
+      this.setFileByFile({ fileByFile: setting });
+    },
     navigateToDiffFileNumber(number) {
       this.navigateToDiffFileIndex(number - 1);
     },
@@ -371,7 +385,7 @@ export default {
       }
 
       if (!this.isNotesFetched) {
-        eventHub.$emit('fetchNotesData');
+        notesEventHub.$emit('fetchNotesData');
       }
     },
     setDiscussions() {
diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue
index 590b2127e6b..b8904de8049 100644
--- a/app/assets/javascripts/diffs/components/settings_dropdown.vue
+++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue
@@ -1,16 +1,38 @@
 <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>
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index 79f8c08e389..07e27bd8e47 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -77,6 +77,11 @@ export const ALERT_COLLAPSED_FILES = 'collapsed';
 export const DIFF_FILE_AUTOMATIC_COLLAPSE = 'automatic';
 export const DIFF_FILE_MANUAL_COLLAPSE = 'manual';
 
+// Diff view single file mode
+export const DIFF_FILE_BY_FILE_COOKIE_NAME = 'fileViewMode';
+export const DIFF_VIEW_FILE_BY_FILE = 'single';
+export const DIFF_VIEW_ALL_FILES = 'all';
+
 // State machine states
 export const STATE_IDLING = 'idle';
 export const STATE_LOADING = 'loading';
@@ -98,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';
diff --git a/app/assets/javascripts/diffs/i18n.js b/app/assets/javascripts/diffs/i18n.js
index 4ec24d452bf..c4ac99ead91 100644
--- a/app/assets/javascripts/diffs/i18n.js
+++ b/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'),
+};
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index 06a138b1e13..587220488be 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/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,
         },
       });
     },
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 1a0e65bbb3e..51d9fe12102 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -44,6 +44,9 @@ import {
   EVT_PERF_MARK_FILE_TREE_START,
   EVT_PERF_MARK_FILE_TREE_END,
   EVT_PERF_MARK_DIFF_FILES_START,
+  DIFF_VIEW_FILE_BY_FILE,
+  DIFF_VIEW_ALL_FILES,
+  DIFF_FILE_BY_FILE_COOKIE_NAME,
 } from '../constants';
 import { diffViewerModes } from '~/ide/constants';
 import { isCollapsed } from '../diff_file';
@@ -57,6 +60,7 @@ export const setBaseConfig = ({ commit }, options) => {
     projectPath,
     dismissEndpoint,
     showSuggestPopover,
+    viewDiffsFileByFile,
   } = options;
   commit(types.SET_BASE_CONFIG, {
     endpoint,
@@ -66,6 +70,7 @@ export const setBaseConfig = ({ commit }, options) => {
     projectPath,
     dismissEndpoint,
     showSuggestPopover,
+    viewDiffsFileByFile,
   });
 };
 
@@ -694,3 +699,14 @@ export const navigateToDiffFileIndex = ({ commit, state }, index) => {
 
   commit(types.VIEW_DIFF_FILE, fileHash);
 };
+
+export const setFileByFile = ({ commit }, { fileByFile }) => {
+  const fileViewMode = fileByFile ? DIFF_VIEW_FILE_BY_FILE : DIFF_VIEW_ALL_FILES;
+  commit(types.SET_FILE_BY_FILE, fileByFile);
+
+  Cookies.set(DIFF_FILE_BY_FILE_COOKIE_NAME, fileViewMode);
+
+  historyPushState(
+    mergeUrlParams({ [DIFF_FILE_BY_FILE_COOKIE_NAME]: fileViewMode }, window.location.href),
+  );
+};
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 001d9d9f594..c331e52c887 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -5,6 +5,8 @@ import {
   DIFF_VIEW_COOKIE_NAME,
   DIFF_WHITESPACE_COOKIE_NAME,
 } from '../../constants';
+
+import { fileByFile } from '../../utils/preferences';
 import { getDefaultWhitespace } from '../utils';
 
 const viewTypeFromQueryString = getParameterValues('view')[0];
@@ -39,6 +41,7 @@ export default () => ({
   highlightedRow: null,
   renderTreeList: true,
   showWhitespace: getDefaultWhitespace(whiteSpaceFromQueryString, whiteSpaceFromCookie),
+  viewDiffsFileByFile: fileByFile(),
   fileFinderVisible: false,
   dismissEndpoint: '',
   showSuggestPopover: true,
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
index ed694419ab1..25184028799 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -28,6 +28,7 @@ export const SET_HIGHLIGHTED_ROW = 'SET_HIGHLIGHTED_ROW';
 export const SET_TREE_DATA = 'SET_TREE_DATA';
 export const SET_RENDER_TREE_LIST = 'SET_RENDER_TREE_LIST';
 export const SET_SHOW_WHITESPACE = 'SET_SHOW_WHITESPACE';
+export const SET_FILE_BY_FILE = 'SET_FILE_BY_FILE';
 export const TOGGLE_FILE_FINDER_VISIBLE = 'TOGGLE_FILE_FINDER_VISIBLE';
 
 export const REQUEST_FULL_DIFF = 'REQUEST_FULL_DIFF';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index 7b08c5e75e1..69ae3f705e3 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -36,6 +36,7 @@ export default {
       projectPath,
       dismissEndpoint,
       showSuggestPopover,
+      viewDiffsFileByFile,
     } = options;
     Object.assign(state, {
       endpoint,
@@ -45,6 +46,7 @@ export default {
       projectPath,
       dismissEndpoint,
       showSuggestPopover,
+      viewDiffsFileByFile,
     });
   },
 
@@ -352,4 +354,7 @@ export default {
   [types.SET_SHOW_SUGGEST_POPOVER](state) {
     state.showSuggestPopover = false;
   },
+  [types.SET_FILE_BY_FILE](state, fileByFile) {
+    state.viewDiffsFileByFile = fileByFile;
+  },
 };
diff --git a/app/assets/javascripts/diffs/utils/preferences.js b/app/assets/javascripts/diffs/utils/preferences.js
new file mode 100644
index 00000000000..e440de3350a
--- /dev/null
+++ b/app/assets/javascripts/diffs/utils/preferences.js
@@ -0,0 +1,22 @@
+import Cookies from 'js-cookie';
+import { getParameterValues } from '~/lib/utils/url_utility';
+
+import { DIFF_FILE_BY_FILE_COOKIE_NAME, DIFF_VIEW_FILE_BY_FILE } from '../constants';
+
+export function fileByFile(pref = false) {
+  const search = getParameterValues(DIFF_FILE_BY_FILE_COOKIE_NAME)?.[0];
+  const cookie = Cookies.get(DIFF_FILE_BY_FILE_COOKIE_NAME);
+  let viewFileByFile = pref;
+
+  // use the cookie first, if it exists
+  if (cookie) {
+    viewFileByFile = cookie === DIFF_VIEW_FILE_BY_FILE;
+  }
+
+  // the search parameter of the URL should override, if it exists
+  if (search) {
+    viewFileByFile = search === DIFF_VIEW_FILE_BY_FILE;
+  }
+
+  return viewFileByFile;
+}