1 files changed, 13 insertions, 29 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
index a351ca62c94..2eb4ec12a4a 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
@@ -1,24 +1,14 @@
 <script>
 import SuggestionDiffHeader from './suggestion_diff_header.vue';
+import SuggestionDiffRow from './suggestion_diff_row.vue';
+import { selectDiffLines } from '../lib/utils/diff_utils';
 
 export default {
   components: {
     SuggestionDiffHeader,
+    SuggestionDiffRow,
   },
   props: {
-    newLines: {
-      type: Array,
-      required: true,
-    },
-    fromContent: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    fromLine: {
-      type: Number,
-      required: true,
-    },
     suggestion: {
       type: Object,
       required: true,
@@ -33,6 +23,11 @@ export default {
       required: true,
     },
   },
+  computed: {
+    lines() {
+      return selectDiffLines(this.suggestion.diff_lines);
+    },
+  },
   methods: {
     applySuggestion(callback) {
       this.$emit('apply', { suggestionId: this.suggestion.id, callback });
@@ -52,22 +47,11 @@ export default {
     />
     <table class="mb-3 md-suggestion-diff js-syntax-highlight code">
       <tbody>
-        <!-- Old Line -->
-        <tr class="line_holder old">
-          <td class="diff-line-num old_line qa-old-diff-line-number old">{{ fromLine }}</td>
-          <td class="diff-line-num new_line old"></td>
-          <td class="line_content old">
-            <span>{{ fromContent }}</span>
-          </td>
-        </tr>
-        <!-- New Line(s) -->
-        <tr v-for="(line, key) of newLines" :key="key" class="line_holder new">
-          <td class="diff-line-num old_line new"></td>
-          <td class="diff-line-num new_line qa-new-diff-line-number new">{{ line.lineNumber }}</td>
-          <td class="line_content new">
-            <span>{{ line.content }}</span>
-          </td>
-        </tr>
+        <suggestion-diff-row
+          v-for="(line, index) of lines"
+          :key="`${index}-${line.text}`"
+          :line="line"
+        />
       </tbody>
     </table>
   </div>