Improve diff view switching and components

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

@@ -27,9 +27,22 @@
   = render partial: "projects/merge_requests/conflicts/commit_stats"
 
   .files-wrapper{"v-if" => "!isLoading && !hasError"}
-    = render partial: "projects/merge_requests/conflicts/inline_view", locals: { class_bindings: class_bindings }
-    = render partial: "projects/merge_requests/conflicts/parallel_view", locals: { class_bindings: class_bindings }
+    .files
+      .diff-file.file-holder.conflict{"v-for" => "file in conflictsData.files"}
+        .file-title
+          %i.fa.fa-fw{":class" => "file.iconClass"}
+          %strong {{file.filePath}}
+          = render partial: 'projects/merge_requests/conflicts/file_actions'
+        .diff-content.diff-wrap-lines
+          %div{"v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
+            = render partial: "projects/merge_requests/conflicts/resolve_mode_interactive_inline", locals: { class_bindings: class_bindings }
+          %div{"v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
+            = render partial: "projects/merge_requests/conflicts/resolve_mode_interactive_parallel", locals: { class_bindings: class_bindings }
+          %div{"v-show" => " file.resolveMode === 'edit' ||  file.type === 'text-editor'"}
+            = render partial: 'projects/merge_requests/conflicts/diff_file_editor', locals: { if_condition: "file.loadFile && isParallel" }
+
     = render partial: "projects/merge_requests/conflicts/submit_form"
 
 -# Components 
 = render partial: 'projects/merge_requests/conflicts/components/diff_file_editor'
+ 
\ No newline at end of file

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

-.files{"v-show" => "!isParallel"}
-  .diff-file.file-holder.conflict.inline-view{"v-for" => "file in conflictsData.files"}
-    .file-title
-      %i.fa.fa-fw{":class" => "file.iconClass"}
-      %strong {{file.filePath}}
-      = render partial: 'projects/merge_requests/conflicts/file_actions'
-    %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'" }
+.diff-wrap-lines.code.file-content.js-syntax-highlight
   %table
     %tr.line_holder.diff-inline{"v-for" => "line in file.inlineLines"}
       %template{"v-if" => "!line.isHeader"}
@@ -16,7 +8,6 @@
           %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}
@@ -24,6 +15,3 @@
           %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 → app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_parallel.html.haml

-.files{"v-show" => "isParallel"}
-  .diff-file.file-holder.conflict.parallel-view{"v-for" => "file in conflictsData.files"}
-    .file-title
-      %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'" }
+.diff-wrap-lines.code.file-content.js-syntax-highlight
   %table
     %tr.line_holder.parallel{"v-for" => "section in file.parallelLines"}
       %template{"v-for" => "line in section"}
@@ -22,4 +15,3 @@
             {{line.lineNumber}}
           %td.line_content.parallel{":class" => class_bindings}
             {{{line.richText}}}
-      = render partial: 'projects/merge_requests/conflicts/diff_file_editor', locals: { if_condition: "file.loadFile && isParallel" }

spec/features/merge_requests/conflicts_spec.rb

@@ -39,16 +39,16 @@ feature 'Merge request conflict resolution', js: true, feature: true 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
+          within find('.files-wrapper .diff-file', text: 'files/ruby/popen.rb') do
             click_button 'Edit inline'
             wait_for_ajax
-            execute_script('ace.edit($(".files-wrapper .diff-file.inline-view pre")[0]).setValue("One morning");')
+            execute_script('ace.edit($(".files-wrapper .diff-file pre")[0]).setValue("One morning");')
           end
 
           within find('.files-wrapper .diff-file', text: 'files/ruby/regex.rb') do
             click_button 'Edit inline'
             wait_for_ajax
-            execute_script('ace.edit($(".files-wrapper .diff-file.inline-view pre")[1]).setValue("Gregor Samsa woke from troubled dreams");')
+            execute_script('ace.edit($(".files-wrapper .diff-file pre")[1]).setValue("Gregor Samsa woke from troubled dreams");')
           end
 
           click_button 'Commit conflict resolution'
@@ -80,9 +80,9 @@ feature 'Merge request conflict resolution', js: true, feature: true 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
+        within find('.files-wrapper .diff-file', 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");')
+          execute_script('ace.edit($(".files-wrapper .diff-file pre")[0]).setValue("Gregor Samsa woke from troubled dreams");')
         end
 
         click_button 'Commit conflict resolution'