Merge branch...

Merge branch '232820-display-a-visible-warning-when-at-least-one-file-is-collapsed-in-a-mr-diff' into 'master'

Extract Merge Request Conflicts warning to component

See merge request gitlab-org/gitlab!40636

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

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlLoadingIcon, GlButton, GlAlert, GlPagination, GlSprintf } from '@gitlab/ui';
+import { GlLoadingIcon, GlPagination, GlSprintf } from '@gitlab/ui';
 import Mousetrap from 'mousetrap';
 import { __ } from '~/locale';
 import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils';
@@ -13,9 +13,12 @@ import eventHub from '../../notes/event_hub';
 import CompareVersions from './compare_versions.vue';
 import DiffFile from './diff_file.vue';
 import NoChanges from './no_changes.vue';
-import HiddenFilesWarning from './hidden_files_warning.vue';
 import CommitWidget from './commit_widget.vue';
 import TreeList from './tree_list.vue';
+
+import HiddenFilesWarning from './hidden_files_warning.vue';
+import MergeConflictWarning from './merge_conflict_warning.vue';
+
 import {
   TREE_LIST_WIDTH_STORAGE_KEY,
   INITIAL_TREE_WIDTH,
@@ -33,13 +36,12 @@ export default {
     DiffFile,
     NoChanges,
     HiddenFilesWarning,
+    MergeConflictWarning,
     CommitWidget,
     TreeList,
     GlLoadingIcon,
     PanelResizer,
     GlPagination,
-    GlButton,
-    GlAlert,
     GlSprintf,
   },
   mixins: [glFeatureFlagsMixin()],
@@ -422,49 +424,12 @@ export default {
         :plain-diff-path="plainDiffPath"
         :email-patch-path="emailPatchPath"
       />
-
-      <div
+      <merge-conflict-warning
         v-if="isDiffHead && hasConflicts"
-        :class="{
-          [CENTERED_LIMITED_CONTAINER_CLASSES]: isLimitedContainer,
-        }"
-      >
-        <gl-alert
-          :dismissible="false"
-          :title="__('There are merge conflicts')"
-          variant="warning"
-          class="w-100 mb-3"
-        >
-          <p class="mb-1">
-            {{ __('The comparison view may be inaccurate due to merge conflicts.') }}
-          </p>
-          <p class="mb-0">
-            {{
-              __(
-                'Resolve these conflicts or ask someone with write access to this repository to merge it locally.',
-              )
-            }}
-          </p>
-          <template #actions>
-            <gl-button
-              v-if="conflictResolutionPath"
-              :href="conflictResolutionPath"
-              variant="info"
-              class="mr-3 gl-alert-action"
-            >
-              {{ __('Resolve conflicts') }}
-            </gl-button>
-            <gl-button
-              v-if="canMerge"
-              class="gl-alert-action"
-              data-toggle="modal"
-              data-target="#modal_merge_info"
-            >
-              {{ __('Merge locally') }}
-            </gl-button>
-          </template>
-        </gl-alert>
-      </div>
+        :limited="isLimitedContainer"
+        :resolution-path="conflictResolutionPath"
+        :mergeable="canMerge"
+      />
 
       <div
         :data-can-create-note="getNoteableData.current_user.can_create_note"

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

+<script>
+import { GlButton, GlAlert } from '@gitlab/ui';
+import { CENTERED_LIMITED_CONTAINER_CLASSES } from '../constants';
+
+export default {
+  components: {
+    GlAlert,
+    GlButton,
+  },
+  props: {
+    limited: {
+      type: Boolean,
+      required: true,
+    },
+    mergeable: {
+      type: Boolean,
+      required: true,
+    },
+    resolutionPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    containerClasses() {
+      return {
+        [CENTERED_LIMITED_CONTAINER_CLASSES]: this.limited,
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <div :class="containerClasses">
+    <gl-alert
+      :dismissible="false"
+      :title="__('There are merge conflicts')"
+      variant="warning"
+      class="gl-mb-5"
+    >
+      <p class="gl-mb-2">
+        {{ __('The comparison view may be inaccurate due to merge conflicts.') }}
+      </p>
+      <p class="gl-mb-0">
+        {{
+          __(
+            'Resolve these conflicts or ask someone with write access to this repository to merge it locally.',
+          )
+        }}
+      </p>
+      <template #actions>
+        <gl-button
+          v-if="resolutionPath"
+          :href="resolutionPath"
+          variant="info"
+          class="gl-mr-5 gl-alert-action"
+        >
+          {{ __('Resolve conflicts') }}
+        </gl-button>
+        <gl-button
+          v-if="mergeable"
+          class="gl-alert-action"
+          data-toggle="modal"
+          data-target="#modal_merge_info"
+        >
+          {{ __('Merge locally') }}
+        </gl-button>
+      </template>
+    </gl-alert>
+  </div>
+</template>

spec/frontend/diffs/components/merge_conflict_warning_spec.js

+import { shallowMount, mount } from '@vue/test-utils';
+import MergeConflictWarning from '~/diffs/components/merge_conflict_warning.vue';
+import { CENTERED_LIMITED_CONTAINER_CLASSES } from '~/diffs/constants';
+
+const propsData = {
+  limited: true,
+  mergeable: true,
+  resolutionPath: 'a-path',
+};
+const limitedClasses = CENTERED_LIMITED_CONTAINER_CLASSES.split(' ');
+
+function findResolveButton(wrapper) {
+  return wrapper.find('.gl-alert-actions a.gl-button:first-child');
+}
+function findLocalMergeButton(wrapper) {
+  return wrapper.find('.gl-alert-actions button.gl-button:last-child');
+}
+
+describe('MergeConflictWarning', () => {
+  let wrapper;
+
+  const createComponent = (props = {}, { full } = { full: false }) => {
+    const mounter = full ? mount : shallowMount;
+
+    wrapper = mounter(MergeConflictWarning, {
+      propsData: { ...propsData, ...props },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it.each`
+    limited  | containerClasses
+    ${true}  | ${limitedClasses}
+    ${false} | ${[]}
+  `(
+    'has the correct container classes when limited is $limited',
+    ({ limited, containerClasses }) => {
+      createComponent({ limited });
+
+      expect(wrapper.classes()).toEqual(containerClasses);
+    },
+  );
+
+  it.each`
+    present  | resolutionPath
+    ${false} | ${''}
+    ${true}  | ${'some-path'}
+  `(
+    'toggles the resolve conflicts button based on the provided resolutionPath "$resolutionPath"',
+    ({ present, resolutionPath }) => {
+      createComponent({ resolutionPath }, { full: true });
+      const resolveButton = findResolveButton(wrapper);
+
+      expect(resolveButton.exists()).toBe(present);
+      if (present) {
+        expect(resolveButton.attributes('href')).toBe(resolutionPath);
+      }
+    },
+  );
+
+  it.each`
+    present  | mergeable
+    ${false} | ${false}
+    ${true}  | ${true}
+  `(
+    'toggles the local merge button based on the provided mergeable property "$mergable"',
+    ({ present, mergeable }) => {
+      createComponent({ mergeable }, { full: true });
+      const localMerge = findLocalMergeButton(wrapper);
+
+      expect(localMerge.exists()).toBe(present);
+    },
+  );
+});