Ability to resolve conflicts for files with `text-editor` as conflict type

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

@@ -7,10 +7,10 @@
     template: '#diff-file-editor',
     data() {
       return {
-        originalContent: '',
         saved: false,
         loading: false,
-        fileLoaded: false
+        fileLoaded: false,
+        originalContent: '',
       }
     },
     computed: {
@@ -23,43 +23,48 @@
       }
     },
     watch: {
-      loadFile(val) {
-        const self = this;
-
+      ['file.showEditor'](val) {
         this.resetEditorContent();
 
         if (!val || this.fileLoaded || this.loading) {
-          return
+          return;
         }
 
+        this.loadEditor();
+      }
+    },
+    ready() {
+      if (this.file.loadEditor) {
+        this.loadEditor();
+      }
+    },
+    methods: {
+      loadEditor() {
         this.loading = true;
 
         $.get(this.file.content_path)
           .done((file) => {
-
-            let content = self.$el.querySelector('pre');
+            let content = this.$el.querySelector('pre');
             let fileContent = document.createTextNode(file.content);
 
             content.textContent = fileContent.textContent;
 
-            self.originalContent = file.content;
-            self.fileLoaded = true;
-            self.editor = ace.edit(content);
-            self.editor.$blockScrolling = Infinity; // Turn off annoying warning
-            self.editor.on('change', () => {
-              self.saveDiffResolution();
+            this.originalContent = file.content;
+            this.fileLoaded = true;
+            this.editor = ace.edit(content);
+            this.editor.$blockScrolling = Infinity; // Turn off annoying warning
+            this.editor.on('change', () => {
+              this.saveDiffResolution();
             });
-            self.saveDiffResolution();
+            this.saveDiffResolution();
           })
           .fail(() => {
             console.log('error');
           })
           .always(() => {
-            self.loading = false;
+            this.loading = false;
           });
-      }
-    },
-    methods: {
+      },
       saveDiffResolution() {
         this.saved = true;
 

app/views/projects/merge_requests/conflicts/_diff_file_editor.html.haml

-- if_condition = local_assigns.fetch(:if_condition, '')
-
-.diff-editor-wrap{ "v-show" => if_condition }
+.diff-editor-wrap{ "v-show" => "file.showEditor" }
   .discard-changes-alert-wrap{ "v-if" => "file.promptDiscardConfirmation" }
     .discard-changes-alert
       Are you sure to discard your changes?
       .discard-actions
         %button.btn.btn-sm.btn-close{ "@click" => "acceptDiscardConfirmation(file)" } Discard changes
         %button.btn.btn-sm{ "@click" => "cancelDiscardConfirmation(file)" } Cancel
-  %diff-file-editor{":file" => "file", ":load-file" => if_condition }
+  %diff-file-editor{":file" => "file"}

app/views/projects/merge_requests/conflicts/_file_actions.html.haml

 .file-actions
-  .btn-group
+  .btn-group{"v-if" => "file.type === 'text'"}
     %button.btn{ ":class" => "{ 'active': file.resolveMode == 'interactive' }",
       '@click' => "onClickResolveModeButton(file, 'interactive')",
       type: 'button' }

app/views/projects/merge_requests/conflicts/_inline_view.html.haml

@@ -4,23 +4,26 @@
       %i.fa.fa-fw{":class" => "file.iconClass"}
       %strong {{file.filePath}}
       = render partial: 'projects/merge_requests/conflicts/file_actions'
-    .diff-content.diff-wrap-lines
-      .diff-wrap-lines.code.file-content.js-syntax-highlight{ 'v-show' => "file.resolveMode === 'interactive'" }
-        %table
-          %tr.line_holder.diff-inline{"v-for" => "line in file.inlineLines"}
-            %template{"v-if" => "!line.isHeader"}
-              %td.diff-line-num.new_line{":class" => class_bindings}
-                %a {{line.new_line}}
-              %td.diff-line-num.old_line{":class" => class_bindings}
-                %a {{line.old_line}}
-              %td.line_content{":class" => class_bindings}
-                {{{line.richText}}}
+    %template{"v-if" => "file.type === 'text'"}
+      .diff-content.diff-wrap-lines
+        .diff-wrap-lines.code.file-content.js-syntax-highlight{ 'v-show' => "file.resolveMode === 'interactive'" }
+          %table
+            %tr.line_holder.diff-inline{"v-for" => "line in file.inlineLines"}
+              %template{"v-if" => "!line.isHeader"}
+                %td.diff-line-num.new_line{":class" => class_bindings}
+                  %a {{line.new_line}}
+                %td.diff-line-num.old_line{":class" => class_bindings}
+                  %a {{line.old_line}}
+                %td.line_content{":class" => class_bindings}
+                  {{{line.richText}}}
 
-            %template{"v-if" => "line.isHeader"}
-              %td.diff-line-num.header{":class" => class_bindings}
-              %td.diff-line-num.header{":class" => class_bindings}
-              %td.line_content.header{":class" => class_bindings}
-                %strong {{{line.richText}}}
-                %button.btn{ "@click" => "handleSelected(file, line.id, line.section)" }
-                  {{line.buttonTitle}}
-      = render partial: 'projects/merge_requests/conflicts/diff_file_editor', locals: { if_condition: "file.resolveMode === 'edit' && !isParallel" }
+              %template{"v-if" => "line.isHeader"}
+                %td.diff-line-num.header{":class" => class_bindings}
+                %td.diff-line-num.header{":class" => class_bindings}
+                %td.line_content.header{":class" => class_bindings}
+                  %strong {{{line.richText}}}
+                  %button.btn{ "@click" => "handleSelected(file, line.id, line.section)" }
+                    {{line.buttonTitle}}
+        = render partial: 'projects/merge_requests/conflicts/diff_file_editor'
+    %template{"v-else" => true}
+      = render partial: 'projects/merge_requests/conflicts/diff_file_editor'

app/views/projects/merge_requests/conflicts/_parallel_view.html.haml

@@ -22,4 +22,4 @@
                   {{line.lineNumber}}
                 %td.line_content.parallel{":class" => class_bindings}
                   {{{line.richText}}}
-      = render partial: 'projects/merge_requests/conflicts/diff_file_editor', locals: { if_condition: "file.resolveMode === 'edit' && isParallel" }
+      = render partial: 'projects/merge_requests/conflicts/diff_file_editor', locals: { if_condition: "file.loadFile && isParallel" }

spec/features/merge_requests/conflicts_spec.rb

@@ -37,7 +37,7 @@ feature 'Merge request conflict resolution', js: true, feature: true do
         end
       end
 
-      context 'when in inline mode' do
+      context 'when in inline mode'  do
         it 'resolves files manually' do
           within find('.files-wrapper .diff-file.inline-view', text: 'files/ruby/popen.rb') do
             click_button 'Edit inline'
@@ -66,6 +66,42 @@ feature 'Merge request conflict resolution', js: true, feature: true do
     end
   end
 
+  context 'when a merge request can be resolved in the UI' do
+    let(:merge_request) { create_merge_request('conflict-contains-conflict-markers') }
+
+    before do
+      project.team << [user, :developer]
+      login_as(user)
+
+      visit namespace_project_merge_request_path(project.namespace, project, merge_request)
+    end
+
+    context 'a conflict contain markers' do
+      before { click_link('conflicts', href: /\/conflicts\Z/) }
+
+      it 'resolves files manually' do
+        within find('.files-wrapper .diff-file.inline-view', text: 'files/markdown/ruby-style-guide.md') do
+          wait_for_ajax
+          execute_script('ace.edit($(".files-wrapper .diff-file.inline-view pre")[0]).setValue("Gregor Samsa woke from troubled dreams");')
+        end
+
+        click_button 'Commit conflict resolution'
+        wait_for_ajax
+
+        expect(page).to have_content('All merge conflicts were resolved')
+
+        merge_request.reload_diff
+
+        click_on 'Changes'
+        wait_for_ajax
+        find('.nothing-here-block', visible: true).click
+        wait_for_ajax
+
+        expect(page).to have_content('Gregor Samsa woke from troubled dreams')
+      end
+    end
+  end
+
   UNRESOLVABLE_CONFLICTS = {
     'conflict-too-large' => 'when the conflicts contain a large file',
     'conflict-binary-file' => 'when the conflicts contain a binary file',