Merge branch 'tor/defect/diff-head-merge-conflicts' into 'master'

Show the Merge Conflict warning when there are conflicts and the UI is showing the full diff

See merge request gitlab-org/gitlab!63806

app/assets/javascripts/diffs/components/app.vue

@@ -14,7 +14,7 @@ import {
 } from '~/behaviors/shortcuts/keybindings';
 import createFlash from '~/flash';
 import { isSingleViewStyle } from '~/helpers/diffs_helper';
-import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import { updateHistory } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
@@ -192,6 +192,7 @@ export default {
       'showTreeList',
       'isLoading',
       'startVersion',
+      'latestDiff',
       'currentDiffFileId',
       'isTreeLoaded',
       'conflictResolutionPath',
@@ -234,8 +235,8 @@ export default {
     isLimitedContainer() {
       return !this.renderFileTree && !this.isParallelView && !this.isFluidLayout;
     },
-    isDiffHead() {
-      return parseBoolean(getParameterByName('diff_head'));
+    isFullChangeset() {
+      return this.startVersion === null && this.latestDiff;
     },
     showFileByFileNavigation() {
       return this.diffFiles.length > 1 && this.viewDiffsFileByFile;
@@ -258,7 +259,7 @@ export default {
 
       if (this.renderOverflowWarning) {
         visible = this.$options.alerts.ALERT_OVERFLOW_HIDDEN;
-      } else if (this.isDiffHead && this.hasConflicts) {
+      } else if (this.isFullChangeset && this.hasConflicts) {
         visible = this.$options.alerts.ALERT_MERGE_CONFLICT;
       } else if (this.whichCollapsedTypes.automatic && !this.viewDiffsFileByFile) {
         visible = this.$options.alerts.ALERT_COLLAPSED_FILES;

spec/frontend/diffs/components/app_spec.js

@@ -6,14 +6,19 @@ import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { TEST_HOST } from 'spec/test_constants';
 import App from '~/diffs/components/app.vue';
-import CollapsedFilesWarning from '~/diffs/components/collapsed_files_warning.vue';
 import CommitWidget from '~/diffs/components/commit_widget.vue';
 import CompareVersions from '~/diffs/components/compare_versions.vue';
 import DiffFile from '~/diffs/components/diff_file.vue';
-import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue';
 import NoChanges from '~/diffs/components/no_changes.vue';
 import TreeList from '~/diffs/components/tree_list.vue';
 
+/* eslint-disable import/order */
+/* You know what: sometimes alphabetical isn't the best order */
+import CollapsedFilesWarning from '~/diffs/components/collapsed_files_warning.vue';
+import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue';
+import MergeConflictWarning from '~/diffs/components/merge_conflict_warning.vue';
+/* eslint-enable import/order */
+
 import axios from '~/lib/utils/axios_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import createDiffsStore from '../create_diffs_store';
@@ -541,6 +546,43 @@ describe('diffs/components/app', () => {
           expect(getCollapsedFilesWarning(wrapper).exists()).toBe(false);
         });
       });
+
+      describe('merge conflicts', () => {
+        it('should render the merge conflicts banner if viewing the whole changeset and there are conflicts', () => {
+          createComponent({}, ({ state }) => {
+            Object.assign(state.diffs, {
+              latestDiff: true,
+              startVersion: null,
+              hasConflicts: true,
+              canMerge: false,
+              conflictResolutionPath: 'path',
+            });
+          });
+
+          expect(wrapper.find(MergeConflictWarning).exists()).toBe(true);
+        });
+
+        it.each`
+          prop              | value
+          ${'latestDiff'}   | ${false}
+          ${'startVersion'} | ${'notnull'}
+          ${'hasConflicts'} | ${false}
+        `(
+          "should not render if any of the MR properties aren't correct - like $prop: $value",
+          ({ prop, value }) => {
+            createComponent({}, ({ state }) => {
+              Object.assign(state.diffs, {
+                latestDiff: true,
+                startVersion: null,
+                hasConflicts: true,
+                [prop]: value,
+              });
+            });
+
+            expect(wrapper.find(MergeConflictWarning).exists()).toBe(false);
+          },
+        );
+      });
     });
 
     it('should display commit widget if store has a commit', () => {