Separate inline haml vue templates into new files.

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

-- page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
+- class_bindings = "{ |
+    'head': line.isHead, |
+    'origin': line.isOrigin, |
+    'match': line.hasMatch, |
+    'selected': line.isSelected, |
+    'unselected': line.isUnselected }"
 
+- page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
 = render "projects/merge_requests/show/mr_title"
 
 .merge-request-details.issuable-details
@@ -7,14 +13,6 @@
 
 = render 'shared/issuable/sidebar', issuable: @merge_request
 
-
-- class_bindings = "{ |
-    'head': line.isHead, |
-    'origin': line.isOrigin, |
-    'match': line.hasMatch, |
-    'selected': line.isSelected, |
-    'unselected': line.isUnselected }"
-
 #conflicts{"v-cloak" => "true"}
   .loading{"v-if" => "isLoading"}
     %i.fa.fa-spinner.fa-spin
@@ -22,103 +20,9 @@
   .content-block.oneline-block{"v-if" => "hasError"}
     %p {{conflictsData.errorMessage}}
 
-  .content-block.oneline-block.files-changed{"v-if" => "!isLoading && !hasError"}
-    .inline-parallel-buttons
-      .btn-group
-        %a.btn{ |
-          ":class" => "{'active': !isParallel}", |
-          "@click" => "handleViewTypeChange('inline')"}
-          Inline
-        %a.btn{ |
-          ":class" => "{'active': isParallel}", |
-          "@click" => "handleViewTypeChange('parallel')"}
-          Side-by-side
-
-    .js-toggle-container
-      .commit-stat-summary
-        Showing
-        %strong.cred {{conflictsCount}} conflicts
-        for
-        %strong {{conflictsData.source_branch}}
-        into
-        %strong {{conflictsData.target_branch}}
-
+  = render partial: "projects/merge_requests/conflicts/commit_stats.html.haml"
 
   .files-wrapper{"v-if" => "!isLoading && !hasError"}
-    .files{"v-show" => "isParallel"}
-      .diff-file.file-holder.conflict.parallel-view{"v-for" => "file in conflictsData.files"}
-        .file-title
-          %i.fa.fa-fw.fa{":class" => "file.iconClass"}
-          %strong {{file.filePath}}
-          .file-actions
-            %a.btn.view-file.btn-file-option{":href" => "file.blobPath"}
-              View file @{{conflictsData.shortCommitSha}}
-        .diff-content.diff-wrap-lines
-          .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(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}}}
-
-
-    .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}}
-          .file-actions
-            %a.btn.view-file.btn-file-option{":href" => "file.blobPath"}
-              View file @{{conflictsData.shortCommitSha}}
-
-        .diff-content.diff-wrap-lines
-          .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(line.id, line.section)"}
-                      {{line.buttonTitle}}
-
-
-    .content-block.oneline-block.files-changed
-      %strong.resolved-count {{resolvedCount}}
-      of
-      %strong.total-count {{conflictsCount}}
-      conflicts have been resolved
-
-      .commit-message-container.form-group
-        .max-width-marker
-        %textarea.form-control.js-commit-message{":disabled" => "!allResolved", "v-model" => "conflictsData.commitMessage"}
-          {{{conflictsData.commitMessage}}}
-
-      %button{type: "button", class: "btn btn-success js-submit-button", ":disabled" => "!allResolved", "@click" => "commit()"}
-        %span Commit conflict resolution
-        %a.fa.fa-spin.fa-spinner{":class" => "{'hidden': !isSubmitting}"}
-
-      / FIXME: Hardcoded path
-      %a.btn.btn-cancel{"href" => "diffs"}
-        Cancel
+    = render partial: "projects/merge_requests/conflicts/parallel_view.html.haml", locals: { class_bindings: class_bindings }
+    = render partial: "projects/merge_requests/conflicts/inline_view.html.haml", locals: { class_bindings: class_bindings }
+    = render partial: "projects/merge_requests/conflicts/submit_form.html.haml"

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

+.content-block.oneline-block.files-changed{"v-if" => "!isLoading && !hasError"}
+  .inline-parallel-buttons
+    .btn-group
+      %a.btn{ |
+        ":class" => "{'active': !isParallel}", |
+        "@click" => "handleViewTypeChange('inline')"}
+        Inline
+      %a.btn{ |
+        ":class" => "{'active': isParallel}", |
+        "@click" => "handleViewTypeChange('parallel')"}
+        Side-by-side
+
+  .js-toggle-container
+    .commit-stat-summary
+      Showing
+      %strong.cred {{conflictsCount}} conflicts
+      for
+      %strong {{conflictsData.source_branch}}
+      into
+      %strong {{conflictsData.target_branch}}

app/views/projects/merge_requests/conflicts/_inline_view.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}}
+      .file-actions
+        %a.btn.view-file.btn-file-option{":href" => "file.blobPath"}
+          View file @{{conflictsData.shortCommitSha}}
+
+    .diff-content.diff-wrap-lines
+      .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(line.id, line.section)"}
+                  {{line.buttonTitle}}

app/views/projects/merge_requests/conflicts/_parallel_view.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.fa{":class" => "file.iconClass"}
+      %strong {{file.filePath}}
+      .file-actions
+        %a.btn.view-file.btn-file-option{":href" => "file.blobPath"}
+          View file @{{conflictsData.shortCommitSha}}
+    .diff-content.diff-wrap-lines
+      .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(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}}}

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

+.content-block.oneline-block.files-changed
+  %strong.resolved-count {{resolvedCount}}
+  of
+  %strong.total-count {{conflictsCount}}
+  conflicts have been resolved
+
+  .commit-message-container.form-group
+    .max-width-marker
+    %textarea.form-control.js-commit-message{":disabled" => "!allResolved", "v-model" => "conflictsData.commitMessage"}
+      {{{conflictsData.commitMessage}}}
+
+  %button{type: "button", class: "btn btn-success js-submit-button", ":disabled" => "!allResolved", "@click" => "commit()"}
+    %span Commit conflict resolution
+    %a.fa.fa-spin.fa-spinner{":class" => "{'hidden': !isSubmitting}"}
+
+  / FIXME: Hardcoded path
+  %a.btn.btn-cancel{"href" => "diffs"}
+    Cancel