Add feature flag62536-file-by-file-merge-request-diff-navigation-product-discovery-sprint

Hide file by file check box unless file_by_file_option is set
Show file by file by default if file_by_file_default is set

11 files changed, 50 insertions, 11 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 19472104792..4f89324539d 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -104,7 +104,7 @@ export default {
       plainDiffPath: state => state.diffs.plainDiffPath,
       emailPatchPath: state => state.diffs.emailPatchPath,
     }),
-    ...mapState('diffs', ['showTreeList', 'isLoading', 'startVersion']),
+    ...mapState('diffs', ['showTreeList', 'isLoading', 'startVersion', 'showFileByFile']),
     ...mapGetters('diffs', ['isParallelView', 'currentDiffIndex']),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
     targetBranch() {
@@ -274,7 +274,8 @@ export default {
       }
     },
     showFile(idx) {
-      return (gon.features && !gon.features.fileByFile) || idx === this.currentDiffIndex;
+      const show = (gon.features&&!gon.features.fileByFileDefault&&!this.showFileByFile)||idx===this.currentDiffIndex;
+      return show;
     },
   },
   minTreeWidth: MIN_TREE_WIDTH,
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index 004ba636df1..4776c2325f8 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -52,6 +52,7 @@ export default {
       'latestVersionPath',
       'addedLines',
       'removedLines',
+      'showFileByFile'
     ]),
     comparableDiffs() {
       return this.mergeRequestDiffs.slice(1);
@@ -69,7 +70,7 @@ export default {
       return this.mergeRequestDiff.base_version_path;
     },
     showToggle() {
-      return gon.features && !gon.features.fileByFile;
+      return gon.features && !gon.features.fileByFileDefault && !this.showFileByFile;
     },
   },
   created() {
diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue
index 0129763161a..06a27ae04a3 100644
--- a/app/assets/javascripts/diffs/components/settings_dropdown.vue
+++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue
@@ -10,7 +10,10 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['isInlineView', 'isParallelView']),
-    ...mapState('diffs', ['renderTreeList', 'showWhitespace']),
+    ...mapState('diffs', ['renderTreeList', 'showWhitespace', 'showFileByFile']),
+    showFileByFileOption() {
+      return gon.features && gon.features.fileByFileOption && !gon.features.fileByFileDefault
+    }
   },
   methods: {
     ...mapActions('diffs', [
@@ -18,6 +21,7 @@ export default {
       'setParallelDiffViewType',
       'setRenderTreeList',
       'setShowWhitespace',
+      'setShowFileByFile'
     ]),
   },
 };
@@ -87,6 +91,18 @@ export default {
           {{ __('Show whitespace changes') }}
         </label>
       </div>
+      <div v-if="showFileByFileOption" class="mt-2">
+        <label class="mb-0">
+          <input
+            id="show-one-file"
+            type="checkbox"
+            :checked="showFileByFile"
+            @change="setShowFileByFile({ showFileByFile: $event.target.checked, pushState: true })"
+          />
+          {{ __('Show one file at a time') }}
+        </label>
+      </div>
+
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index d84e1af11f3..74de11561a7 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -37,6 +37,7 @@ export const TREE_TYPE = 'tree';
 export const TREE_LIST_STORAGE_KEY = 'mr_diff_tree_list';
 export const WHITESPACE_STORAGE_KEY = 'mr_show_whitespace';
 export const TREE_LIST_WIDTH_STORAGE_KEY = 'mr_tree_list_width';
+export const FILE_BY_FILE_STORAGE_KEY = 'mr_file_by_file';
 
 export const INITIAL_TREE_WIDTH = 320;
 export const MIN_TREE_WIDTH = 240;
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index 1e57e9b8a30..4e24887c3ad 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -87,9 +87,10 @@ export default function initDiffsApp(store) {
 
       this.setRenderTreeList(renderTreeList);
       this.setShowWhitespace({ showWhitespace: getParameterValues('w')[0] !== '1' });
+      this.setShowFileByFile({ showFileByFile: getParameterValues('f')[0] !== '1' });
     },
     methods: {
-      ...mapActions('diffs', ['setRenderTreeList', 'setShowWhitespace']),
+      ...mapActions('diffs', ['setRenderTreeList', 'setShowWhitespace', 'setShowFileByFile']),
     },
     render(createElement) {
       return createElement('diffs-app', {
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index cc635e44b5a..632faff463b 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -23,6 +23,7 @@ import {
   TREE_LIST_STORAGE_KEY,
   WHITESPACE_STORAGE_KEY,
   TREE_LIST_WIDTH_STORAGE_KEY,
+  FILE_BY_FILE_STORAGE_KEY,
   OLD_LINE_KEY,
   NEW_LINE_KEY,
   TYPE_KEY,
@@ -136,7 +137,7 @@ export const startRenderDiffsQueue = ({ state, commit }) => {
           (file.viewer && (!file.viewer.collapsed || !file.viewer.name === diffViewerModes.text)),
       );
 
-      if (gon.features && gon.features.fileByFile && state.currentDiffFileId === '') {
+      if (gon.features && gon.features.fileByFileDefault && state.currentDiffFileId === '') {
         commit(types.UPDATE_CURRENT_DIFF_FILE_ID, state.diffFiles[0].file_hash);
       }
 
@@ -316,7 +317,8 @@ export const toggleTreeOpen = ({ commit }, path) => {
 
 export const scrollToFile = ({ state, commit }, path) => {
   const { fileHash } = state.treeEntries[path];
-  if (gon.features && !gon.features.fileByFile) document.location.hash = fileHash;
+  const showFileByFile = gon.features && !gon.features.fileByFileDefault && !state.showFileByFile;
+  if (showFileByFile) document.location.hash = fileHash;
 
   commit(types.UPDATE_CURRENT_DIFF_FILE_ID, fileHash);
 };
@@ -361,6 +363,18 @@ export const setShowWhitespace = ({ commit }, { showWhitespace, pushState = fals
   eventHub.$emit('refetchDiffData');
 };
 
+export const setShowFileByFile = ({ commit }, { showFileByFile, pushState = false }) => {
+  commit(types.SET_SHOW_FILE_BY_FILE, showFileByFile);
+
+  localStorage.setItem(FILE_BY_FILE_STORAGE_KEY, showFileByFile);
+
+  if (pushState) {
+    historyPushState(mergeUrlParams({ f: showFileByFile ? '0' : '1' }, window.location.href));
+  }
+
+  eventHub.$emit('refetchDiffData');
+};
+
 export const toggleFileFinder = ({ commit }, visible) => {
   commit(types.TOGGLE_FILE_FINDER_VISIBLE, visible);
 };
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 6821c8445ea..4f6add4d075 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -27,6 +27,7 @@ export default () => ({
   highlightedRow: null,
   renderTreeList: true,
   showWhitespace: true,
+  showFileByFile: false,
   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 9db56331faa..843152d075a 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -22,6 +22,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_SHOW_FILE_BY_FILE = 'SET_SHOW_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 a6915a46c00..2c45c30831f 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -268,6 +268,9 @@ export default {
   [types.SET_SHOW_WHITESPACE](state, showWhitespace) {
     state.showWhitespace = showWhitespace;
   },
+  [types.SET_SHOW_FILE_BY_FILE](state, showFileByFile) {
+    state.showFileByFile = showFileByFile;
+  },
   [types.TOGGLE_FILE_FINDER_VISIBLE](state, visible) {
     state.fileFinderVisible = visible;
   },
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 406daa8a2fd..44c78cb9b31 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -44,11 +44,10 @@ export default {
     };
   },
   computed: {
-    ...mapState('diffs', ['currentDiffFileId']),
+    ...mapState('diffs', ['currentDiffFileId', 'showFileByFile']),
     isSelected() {
       return (
-        gon.features &&
-        gon.features.fileByFile &&
+        (this.showFileByFile || (gon.features && gon.features.fileByFileDefault)) &&
         this.currentDiffFileId === this.file.fileHash
       );
     },
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index dad42d50b83..0e169d36a1b 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -17,7 +17,8 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
   before_action :authenticate_user!, only: [:assign_related_issues]
   before_action :check_user_can_push_to_source_branch!, only: [:rebase]
   before_action do
-    push_frontend_feature_flag(:file_by_file)
+    push_frontend_feature_flag(:file_by_file_default)
+    push_frontend_feature_flag(:file_by_file_option)
   end
 
   around_action :allow_gitaly_ref_name_caching, only: [:index, :show, :discussions]