Fix Merge Conflicts app to make it work with Vue 2

4 files changed, 17 insertions, 27 deletions

diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6 b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6
index 083a836f92f..4ccbdcd6daa 100644
--- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6
+++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6
@@ -7,7 +7,22 @@
     props: {
       file: Object
     },
-    mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions]
+    mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
+    template: `
+      <table>
+        <tr class="line_holder parallel" v-for="section in file.parallelLines">
+          <template v-for="line in section">
+            <td class="diff-line-num header" :class="lineCssClass(line)" v-if="line.isHeader"></td>
+            <td class="line_content header" :class="lineCssClass(line)" v-if="line.isHeader">
+              <strong>{{line.richText}}</strong>
+              <button class="btn" @click="handleSelected(file, line.id, line.section)">{{line.buttonTitle}}</button>
+            </td>
+            <td class="diff-line-num old_line" :class="lineCssClass(line)" v-if="!line.isHeader">{{line.lineNumber}}</td>
+            <td class="line_content parallel" :class="lineCssClass(line)" v-if="!line.isHeader" v-html="line.richText"></td>
+          </template> 
+        </tr>
+      </table>
+    `,
   });
 
 })(window.gl || (window.gl = {}));
diff --git a/app/views/projects/merge_requests/conflicts.html.haml b/app/views/projects/merge_requests/conflicts.html.haml
index d9f74d2cbfb..16789f68f70 100644
--- a/app/views/projects/merge_requests/conflicts.html.haml
+++ b/app/views/projects/merge_requests/conflicts.html.haml
@@ -30,11 +30,8 @@
           .diff-wrap-lines.code.file-content.js-syntax-highlight{"v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
             = render partial: "projects/merge_requests/conflicts/components/inline_conflict_lines"
           .diff-wrap-lines.code.file-content.js-syntax-highlight{"v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
-            = render partial: "projects/merge_requests/conflicts/components/parallel_conflict_lines"
+            %parallel-conflict-lines{ ":file" => "file" }
           %div{"v-show" => "file.resolveMode === 'edit' ||  file.type === 'text-editor'"}
             = render partial: "projects/merge_requests/conflicts/components/diff_file_editor"
 
     = render partial: "projects/merge_requests/conflicts/submit_form"
-
--# Components
-= render partial: 'projects/merge_requests/conflicts/components/parallel_conflict_line'
diff --git a/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_line.html.haml b/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_line.html.haml
deleted file mode 100644
index 7d0ab2043d9..00000000000
--- a/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_line.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-%script{"id" => 'parallel-conflict-line', "type" => "text/x-template"}
-  %td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-  %td.line_content.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-    %strong {{line.richText}}
-    %button.btn{"@click" => "handleSelected(file, line.id, line.section)"}
-      {{line.buttonTitle}}
-  %td.diff-line-num.old_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
-    {{line.lineNumber}}
-  %td.line_content.parallel{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader", "v-html" => "line.richText"}
diff --git a/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_lines.html.haml b/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_lines.html.haml
deleted file mode 100644
index 0fd7095683c..00000000000
--- a/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_lines.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-%parallel-conflict-lines{"inline-template" => "true", ":file" => "file"}
-  %table
-    %tr.line_holder.parallel{"v-for" => "section in file.parallelLines"}
-      %template{"is"=>"parallel-conflict-line", "v-for" => "line in section", ":line" => "line", ":file" => "file"}
-        %td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-        %td.line_content.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-          %strong {{line.richText}}
-          %button.btn{"@click" => "handleSelected(file, line.id, line.section)"}
-            {{line.buttonTitle}}
-        %td.diff-line-num.old_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
-          {{line.lineNumber}}
-        %td.line_content.parallel{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader", "v-html" => "line.richText"}
-