1 files changed, 72 insertions, 0 deletions
diff --git a/app/assets/javascripts/diffs/components/merge_conflict_warning.vue b/app/assets/javascripts/diffs/components/merge_conflict_warning.vue
new file mode 100644
index 00000000000..e47bea8e589
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/merge_conflict_warning.vue
@@ -0,0 +1,72 @@
+<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>