Improve diff view switching and components

6 files changed, 54 insertions, 61 deletions

diff --git a/app/views/projects/merge_requests/conflicts.html.haml b/app/views/projects/merge_requests/conflicts.html.haml
index 997f40c0588..5ff7befe0ca 100644
--- a/app/views/projects/merge_requests/conflicts.html.haml
+++ b/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
diff --git a/app/views/projects/merge_requests/conflicts/_inline_view.html.haml b/app/views/projects/merge_requests/conflicts/_inline_view.html.haml
deleted file mode 100644
index 60ac21d26c3..00000000000
--- a/app/views/projects/merge_requests/conflicts/_inline_view.html.haml
+++ /dev/null
@@ -1,29 +0,0 @@
-.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'" }
-          %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'
-    %template{"v-else" => true}
-      = render partial: 'projects/merge_requests/conflicts/diff_file_editor'
diff --git a/app/views/projects/merge_requests/conflicts/_parallel_view.html.haml b/app/views/projects/merge_requests/conflicts/_parallel_view.html.haml
deleted file mode 100644
index 7ed1485fc01..00000000000
--- a/app/views/projects/merge_requests/conflicts/_parallel_view.html.haml
+++ /dev/null
@@ -1,25 +0,0 @@
-.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'" }
-        %table
-          %tr.line_holder.parallel{"v-for" => "section in file.parallelLines"}
-            %template{"v-for" => "line in section"}
-
-              %template{"v-if" => "line.isHeader"}
-                %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}}
-
-              %template{"v-if" => "!line.isHeader"}
-                %td.diff-line-num.old_line{":class" => class_bindings}
-                  {{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" }
diff --git a/app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_inline.html.haml b/app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_inline.html.haml
new file mode 100644
index 00000000000..b1d7a90eb74
--- /dev/null
+++ b/app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_inline.html.haml
@@ -0,0 +1,17 @@
+.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"}
+        %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}}
diff --git a/app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_parallel.html.haml b/app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_parallel.html.haml
new file mode 100644
index 00000000000..f5af347f59b
--- /dev/null
+++ b/app/views/projects/merge_requests/conflicts/_resolve_mode_interactive_parallel.html.haml
@@ -0,0 +1,17 @@
+.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"}
+
+        %template{"v-if" => "line.isHeader"}
+          %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}}
+
+        %template{"v-if" => "!line.isHeader"}
+          %td.diff-line-num.old_line{":class" => class_bindings}
+            {{line.lineNumber}}
+          %td.line_content.parallel{":class" => class_bindings}
+            {{{line.richText}}}
diff --git a/spec/features/merge_requests/conflicts_spec.rb b/spec/features/merge_requests/conflicts_spec.rb
index 0e5507a0210..4cecc22aa6c 100644
--- a/spec/features/merge_requests/conflicts_spec.rb
+++ b/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'