Resolve Merge conflicts in editor

What does this MR do?

This is the second iteration of https://gitlab.com/gitlab-org/gitlab-ce/issues/20344 which now allows to resolve conflicts manually providing an editor to the user.

Are there points in the code the reviewer needs to double check?

• Previous implementation has been refactored almost from the ground up.
• Also some components like parallel-conflict-lines has been optimized to work well with PhantomJS.
• The app and files required files are loaded only when needed. merge_conflicts_bundle.js is only loaded in /<group>/<project>/merge_requests/<Id>/conflicts only

Why was this MR needed?

Some MRs were unable to be solved interactively in the UI, with this MR we let the user to manually fix complex merge request conflicts.

Screenshots (if relevant)

Does this MR meet the acceptance criteria?

• CHANGELOG entry added
• Documentation created/updated
• API support added
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if you do - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/20344, https://gitlab.com/gitlab-org/gitlab-ce/issues/3567.

app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6

+((global) => {
+  global.diffFileEditor = Vue.extend({
+    props: ['file', 'loadFile'],
+    template: '#diff-file-editor',
+    data() {
+      return {
+        originalState: '',
+        saved: false,
+        loading: false,
+        fileLoaded: false
+      }
+    },
+    computed: {
+      classObject() {
+        return {
+          'load-file': this.loadFile,
+          'saved': this.saved,
+          'is-loading': this.loading
+        };
+      }
+    },
+    watch: {
+      loadFile(val) {
+        const self = this;
+
+        if (!val || this.fileLoaded || this.loading) {
+          return
+        }
+
+        this.loading = true;
+
+        $.get(this.file.content_path)
+          .done((file) => {
+            $(self.$el).find('textarea').val(file.content);
+
+            self.originalState = file.content;
+            self.fileLoaded = true;
+            self.saveDiffResolution();
+          })
+          .fail(() => {
+            console.log('error');
+          })
+          .always(() => {
+            self.loading = false;
+          });
+      }
+    },
+    methods: {
+      saveDiffResolution() {
+        this.saved = true;
+
+        // This probably be better placed in the data provider
+        this.file.content = this.$el.querySelector('textarea').value;
+        this.file.resolveEditChanged = this.file.content !== this.originalState;
+        this.file.promptDiscardConfirmation = false;
+      },
+      onInput() {
+        this.saveDiffResolution();
+      }
+    }
+  });
+
+})(window.gl || (window.gl = {}));