Add fileByFile setting to the diffs state

Mix the user setting with the URL parameter
and the cookie

app/assets/javascripts/diffs/constants.js

@@ -77,6 +77,9 @@ 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';
 // State machine states
 export const STATE_IDLING = 'idle';
 export const STATE_LOADING = 'loading';

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,

app/assets/javascripts/diffs/utils/preferences.js

+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;
+}

spec/frontend/diffs/utils/preferences_spec.js

+import Cookies from 'js-cookie';
+import { getParameterValues } from '~/lib/utils/url_utility';
+
+import { fileByFile } from '~/diffs/utils/preferences';
+import {
+  DIFF_FILE_BY_FILE_COOKIE_NAME,
+  DIFF_VIEW_FILE_BY_FILE,
+  DIFF_VIEW_ALL_FILES,
+} from '~/diffs/constants';
+
+jest.mock('~/lib/utils/url_utility');
+
+describe('diffs preferences', () => {
+  describe('fileByFile', () => {
+    it.each`
+      result   | preference | cookie                    | searchParam
+      ${false} | ${false}   | ${undefined}              | ${undefined}
+      ${true}  | ${true}    | ${undefined}              | ${undefined}
+      ${true}  | ${false}   | ${DIFF_VIEW_FILE_BY_FILE} | ${undefined}
+      ${false} | ${true}    | ${DIFF_VIEW_ALL_FILES}    | ${undefined}
+      ${true}  | ${false}   | ${undefined}              | ${[DIFF_VIEW_FILE_BY_FILE]}
+      ${false} | ${true}    | ${undefined}              | ${[DIFF_VIEW_ALL_FILES]}
+      ${true}  | ${false}   | ${DIFF_VIEW_FILE_BY_FILE} | ${[DIFF_VIEW_FILE_BY_FILE]}
+      ${true}  | ${true}    | ${DIFF_VIEW_ALL_FILES}    | ${[DIFF_VIEW_FILE_BY_FILE]}
+      ${false} | ${false}   | ${DIFF_VIEW_ALL_FILES}    | ${[DIFF_VIEW_ALL_FILES]}
+      ${false} | ${true}    | ${DIFF_VIEW_FILE_BY_FILE} | ${[DIFF_VIEW_ALL_FILES]}
+    `(
+      'should return $result when { preference: $preference, cookie: $cookie, search: $searchParam }',
+      ({ result, preference, cookie, searchParam }) => {
+        if (cookie) {
+          Cookies.set(DIFF_FILE_BY_FILE_COOKIE_NAME, cookie);
+        }
+
+        getParameterValues.mockReturnValue(searchParam);
+
+        expect(fileByFile(preference)).toBe(result);
+      },
+    );
+  });
+});