Move ParallelConflictLines to SFC

This already was a simple template string, why not use a SFC instead.

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

-/* eslint-disable no-param-reassign */
-
-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.parallelConflictLines = Vue.extend({
-    mixins: [utilsMixin, actionsMixin],
-    props: {
-      file: {
-        type: Object,
-        required: true,
-      },
-    },
-    // This is a true violation of @gitlab/no-runtime-template-compiler, as it
-    // has a template string.
-    // eslint-disable-next-line @gitlab/no-runtime-template-compiler
-    template: `
-      <table class="diff-wrap-lines code js-syntax-highlight">
-        <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 = {}));

app/assets/javascripts/merge_conflicts/components/parallel_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>
+  <!-- Unfortunately there isn't a good key for these sections -->
+  <!-- eslint-disable vue/require-v-for-key -->
+  <table class="diff-wrap-lines code js-syntax-highlight">
+    <tr v-for="section in file.parallelLines" class="line_holder parallel">
+      <template v-for="line in section">
+        <template v-if="line.isHeader">
+          <td class="diff-line-num header" :class="lineCssClass(line)"></td>
+          <td class="line_content header" :class="lineCssClass(line)">
+            <strong>{{ line.richText }}</strong>
+            <button class="btn" @click="handleSelected(file, line.id, line.section)">
+              {{ line.buttonTitle }}
+            </button>
+          </td>
+        </template>
+        <template v-else>
+          <td class="diff-line-num old_line" :class="lineCssClass(line)">
+            {{ line.lineNumber }}
+          </td>
+          <td
+            v-safe-html="line.richText"
+            class="line_content parallel"
+            :class="lineCssClass(line)"
+          ></td>
+        </template>
+      </template>
+    </tr>
+  </table>
+</template>

app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js

@@ -12,8 +12,8 @@ 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 ParallelConflictLines from './components/parallel_conflict_lines.vue';
 import MergeConflictsService from './merge_conflict_service';
-import './components/parallel_conflict_lines';
 
 export default function initMergeConflicts() {
   const INTERACTIVE_RESOLVE_MODE = 'interactive';
@@ -30,9 +30,9 @@ export default function initMergeConflicts() {
     el: '#conflicts',
     components: {
       FileIcon,
-      'parallel-conflict-lines': gl.mergeConflicts.parallelConflictLines,
       DiffFileEditor,
       InlineConflictLines,
+      ParallelConflictLines,
     },
     data: mergeConflictsStore.state,
     computed: {