Merge branch 'jdb/display-head-base-dropwdowns' into 'master'

Fix display head  and base in version dropdowns

See merge request gitlab-org/gitlab!29433

app/assets/javascripts/diffs/constants.js

@@ -60,3 +60,4 @@ export const PARALLEL_DIFF_LINES_KEY = 'parallel_diff_lines';
 export const DIFFS_PER_PAGE = 20;
 
 export const DIFF_COMPARE_BASE_VERSION_INDEX = -1;
+export const DIFF_COMPARE_HEAD_VERSION_INDEX = -2;

app/assets/javascripts/diffs/store/getters_versions_dropdowns.js

 import { __, n__, sprintf } from '~/locale';
-import { DIFF_COMPARE_BASE_VERSION_INDEX } from '../constants';
+import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils';
+import { DIFF_COMPARE_BASE_VERSION_INDEX, DIFF_COMPARE_HEAD_VERSION_INDEX } from '../constants';
 
 export const selectedTargetIndex = state =>
   state.startVersion?.version_index || DIFF_COMPARE_BASE_VERSION_INDEX;
@@ -9,12 +10,25 @@ export const selectedSourceIndex = state => state.mergeRequestDiff.version_index
 export const diffCompareDropdownTargetVersions = (state, getters) => {
   // startVersion only exists if the user has selected a version other
   // than "base" so if startVersion is null then base must be selected
+
+  const diffHead = parseBoolean(getParameterByName('diff_head'));
+  const isBaseSelected = !state.startVersion && !diffHead;
+  const isHeadSelected = !state.startVersion && diffHead;
+
   const baseVersion = {
     versionName: state.targetBranchName,
     version_index: DIFF_COMPARE_BASE_VERSION_INDEX,
     href: state.mergeRequestDiff.base_version_path,
     isBase: true,
-    selected: !state.startVersion,
+    selected: isBaseSelected,
+  };
+
+  const headVersion = {
+    versionName: state.targetBranchName,
+    version_index: DIFF_COMPARE_HEAD_VERSION_INDEX,
+    href: state.mergeRequestDiff.head_version_path,
+    isHead: true,
+    selected: isHeadSelected,
   };
   // Appended properties here are to make the compare_dropdown_layout easier to reason about
   const formatVersion = v => {
@@ -25,7 +39,7 @@ export const diffCompareDropdownTargetVersions = (state, getters) => {
       ...v,
     };
   };
-  return [...state.mergeRequestDiffs.slice(1).map(formatVersion), baseVersion];
+  return [...state.mergeRequestDiffs.slice(1).map(formatVersion), baseVersion, headVersion];
 };
 
 export const diffCompareDropdownSourceVersions = (state, getters) => {

changelogs/unreleased/jdb-display-head-base-dropwdowns.yml

+---
+title: fix display head and base in version dropdowns
+merge_request: 29433
+author:
+type: fixed

spec/frontend/diffs/store/getters_versions_dropdowns_spec.js

 import * as getters from '~/diffs/store/getters';
 import state from '~/diffs/store/modules/diff_state';
-import { DIFF_COMPARE_BASE_VERSION_INDEX } from '~/diffs/constants';
+import {
+  DIFF_COMPARE_BASE_VERSION_INDEX,
+  DIFF_COMPARE_HEAD_VERSION_INDEX,
+} from '~/diffs/constants';
 import diffsMockData from '../mock_data/merge_request_diffs';
 
 describe('Compare diff version dropdowns', () => {
@@ -37,47 +40,93 @@ describe('Compare diff version dropdowns', () => {
 
   describe('diffCompareDropdownTargetVersions', () => {
     // diffCompareDropdownTargetVersions slices the array at the first position
-    // and appends a "base" version which is why we use diffsMockData[1] below
-    // This is to display "base" at the end of the target dropdown
-    const expectedFirstVersion = {
+    // and appends a "base" and "head" version at the end of the list so that
+    // "base" and "head" appear at the bottom of the dropdown
+    // this is also why we use diffsMockData[1] for the "first" version
+
+    let expectedFirstVersion;
+    let expectedBaseVersion;
+    let expectedHeadVersion;
+    const originalLocation = window.location;
+
+    const setupTest = includeDiffHeadParam => {
+      const diffHeadParam = includeDiffHeadParam ? '?diff_head=true' : '';
+
+      Object.defineProperty(window, 'location', {
+        writable: true,
+        value: { href: `https://example.gitlab.com${diffHeadParam}` },
+      });
+
+      expectedFirstVersion = {
         ...diffsMockData[1],
         href: expect.any(String),
         versionName: expect.any(String),
+        selected: false,
       };
 
-    const expectedBaseVersion = {
+      expectedBaseVersion = {
         versionName: 'baseVersion',
         version_index: DIFF_COMPARE_BASE_VERSION_INDEX,
         href: 'basePath',
         isBase: true,
+        selected: false,
+      };
+
+      expectedHeadVersion = {
+        versionName: 'baseVersion',
+        version_index: DIFF_COMPARE_HEAD_VERSION_INDEX,
+        href: 'headPath',
+        isHead: true,
+        selected: false,
+      };
+    };
+
+    const assertVersions = targetVersions => {
+      // base and head should be the last two versions in that order
+      const targetBaseVersion = targetVersions[targetVersions.length - 2];
+      const targetHeadVersion = targetVersions[targetVersions.length - 1];
+      expect(targetVersions[0]).toEqual(expectedFirstVersion);
+      expect(targetBaseVersion).toEqual(expectedBaseVersion);
+      expect(targetHeadVersion).toEqual(expectedHeadVersion);
     };
 
+    afterEach(() => {
+      window.location = originalLocation;
+    });
+
     it('base version selected', () => {
-      expectedFirstVersion.selected = false;
+      setupTest();
       expectedBaseVersion.selected = true;
 
-      const targetVersions = getters.diffCompareDropdownTargetVersions(localState, {
-        selectedTargetIndex: DIFF_COMPARE_BASE_VERSION_INDEX,
+      const targetVersions = getters.diffCompareDropdownTargetVersions(localState, getters);
+      assertVersions(targetVersions);
     });
 
-      const lastVersion = targetVersions[targetVersions.length - 1];
-      expect(targetVersions[0]).toEqual(expectedFirstVersion);
-      expect(lastVersion).toEqual(expectedBaseVersion);
+    it('head version selected', () => {
+      setupTest(true);
+
+      expectedHeadVersion.selected = true;
+
+      const targetVersions = getters.diffCompareDropdownTargetVersions(localState, getters);
+      assertVersions(targetVersions);
     });
 
     it('first version selected', () => {
-      expectedFirstVersion.selected = true;
-      expectedBaseVersion.selected = false;
+      // NOTE: It should not be possible to have both "diff_head=true" and
+      // have anything other than the head version selected, but the user could
+      // manually add "?diff_head=true" to the url. In this instance we still
+      // want the actual selected version to display as "selected"
+      // Passing in "true" here asserts that first version is still selected
+      // even if "diff_head" is present in the url
+      setupTest(true);
 
+      expectedFirstVersion.selected = true;
       localState.startVersion = expectedFirstVersion;
 
       const targetVersions = getters.diffCompareDropdownTargetVersions(localState, {
         selectedTargetIndex: expectedFirstVersion.version_index,
       });
-
-      const lastVersion = targetVersions[targetVersions.length - 1];
-      expect(targetVersions[0]).toEqual(expectedFirstVersion);
-      expect(lastVersion).toEqual(expectedBaseVersion);
+      assertVersions(targetVersions);
     });
   });