Move InlineConflictLines HAML template to Vue SFC

We are moving the InlineConflictLines HAML template straight to a Vue
SFC, without adjusting anything. This will surely break linters, but we
can improve the code later on.

.haml-lint_todo.yml

@@ -216,7 +216,6 @@ linters:
       - 'app/views/projects/merge_requests/conflicts/_commit_stats.html.haml'
       - 'app/views/projects/merge_requests/conflicts/_file_actions.html.haml'
       - 'app/views/projects/merge_requests/conflicts/_submit_form.html.haml'
-      - 'app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml'
       - 'app/views/projects/merge_requests/conflicts/show.html.haml'
       - 'app/views/projects/merge_requests/creations/_diffs.html.haml'
       - 'app/views/projects/merge_requests/creations/_new_compare.html.haml'

app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js

-// This is a true violation of @gitlab/no-runtime-template-compiler, as it relies on
-// app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
-// for its template.
-/* eslint-disable no-param-reassign, @gitlab/no-runtime-template-compiler */
-
-import Vue from 'vue';
-import actionsMixin from '../mixins/line_conflict_actions';
-import utilsMixin from '../mixins/line_conflict_utils';
-
-((global) => {
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  global.mergeConflicts.inlineConflictLines = Vue.extend({
-    mixins: [utilsMixin, actionsMixin],
-    props: {
-      file: {
-        type: Object,
-        required: true,
-      },
-    },
-  });
-})(window.gl || (window.gl = {}));

app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue

+<script>
+import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import actionsMixin from '../mixins/line_conflict_actions';
+import utilsMixin from '../mixins/line_conflict_utils';
+
+export default {
+  directives: {
+    SafeHtml,
+  },
+  mixins: [utilsMixin, actionsMixin],
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <table class="diff-wrap-lines code code-commit js-syntax-highlight">
+    <tr
+      v-for="line in file.inlineLines"
+      :key="(line.isHeader ? line.id : line.new_line) + line.richText"
+      class="line_holder diff-inline"
+    >
+      <template v-if="line.isHeader">
+        <td :class="lineCssClass(line)" class="diff-line-num header"></td>
+        <td :class="lineCssClass(line)" class="diff-line-num header"></td>
+        <td :class="lineCssClass(line)" class="line_content header">
+          <strong>{{ line.richText }}</strong>
+          <button class="btn" @click="handleSelected(file, line.id, line.section)">
+            {{ line.buttonTitle }}
+          </button>
+        </td>
+      </template>
+      <template v-else>
+        <td :class="lineCssClass(line)" class="diff-line-num new_line">
+          <a>{{ line.new_line }}</a>
+        </td>
+        <td :class="lineCssClass(line)" class="diff-line-num old_line">
+          <a>{{ line.old_line }}</a>
+        </td>
+        <td v-safe-html="line.richText" :class="lineCssClass(line)" class="line_content"></td>
+      </template>
+    </tr>
+  </table>
+</template>

app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js

@@ -11,8 +11,8 @@ import initIssuableSidebar from '../init_issuable_sidebar';
 import './merge_conflict_store';
 import syntaxHighlight from '../syntax_highlight';
 import DiffFileEditor from './components/diff_file_editor.vue';
+import InlineConflictLines from './components/inline_conflict_lines.vue';
 import MergeConflictsService from './merge_conflict_service';
-import './components/inline_conflict_lines';
 import './components/parallel_conflict_lines';
 
 export default function initMergeConflicts() {
@@ -30,9 +30,9 @@ export default function initMergeConflicts() {
     el: '#conflicts',
     components: {
       FileIcon,
-      'inline-conflict-lines': gl.mergeConflicts.inlineConflictLines,
       'parallel-conflict-lines': gl.mergeConflicts.parallelConflictLines,
       DiffFileEditor,
+      InlineConflictLines,
     },
     data: mergeConflictsStore.state,
     computed: {

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

-%inline-conflict-lines{ "inline-template" => "true", ":file" => "file" }
-  %table.diff-wrap-lines.code.code-commit.js-syntax-highlight
-    %tr.line_holder.diff-inline{ "v-for" => "line in file.inlineLines" }
-      %td.diff-line-num.new_line{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader" }
-        %a {{line.new_line}}
-      %td.diff-line-num.old_line{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader" }
-        %a {{line.old_line}}
-      %td.line_content{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader", "v-html" => "line.richText" }
-      %td.diff-line-num.header{ ":class" => "lineCssClass(line)", "v-if" => "line.isHeader" }
-      %td.diff-line-num.header{ ":class" => "lineCssClass(line)", "v-if" => "line.isHeader" }
-      %td.line_content.header{ ":class" => "lineCssClass(line)", "v-if" => "line.isHeader" }
-        %strong{ "v-html" => "line.richText" }
-        %button.btn{ "@click" => "handleSelected(file, line.id, line.section)" }
-          {{line.buttonTitle}}

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

@@ -27,7 +27,7 @@
           = render partial: 'projects/merge_requests/conflicts/file_actions'
         .diff-content.diff-wrap-lines
           .file-content{ "v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
-            = render partial: "projects/merge_requests/conflicts/components/inline_conflict_lines"
+            %inline-conflict-lines{ ":file" => "file" }
           .file-content{ "v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
             %parallel-conflict-lines{ ":file" => "file" }
           %div{ "v-show" => "file.resolveMode === 'edit' ||  file.type === 'text-editor'" }