From 0c902da1537a0326faf36227967c68cb6b3037e6 Mon Sep 17 00:00:00 2001
From: Douwe Maan <douwe@selenight.nl>
Date: Sat, 23 Mar 2019 14:22:16 +0100
Subject: [PATCH] Add .code to all tables holding diffs

We need this to be able to distinguish between Markdown tables and diff
tables.
---
 .../behaviors/markdown/copy_as_gfm.js         |  2 +-
 .../diffs/components/parallel_diff_view.vue   | 54 +++++++++----------
 .../components/parallel_conflict_lines.js     |  2 +-
 .../notes/components/diff_with_note.vue       |  4 +-
 .../discussions/_diff_with_notes.html.haml    |  4 +-
 app/views/projects/blob/preview.html.haml     | 41 +++++++-------
 .../projects/diffs/_parallel_view.html.haml   |  4 +-
 .../_inline_conflict_lines.html.haml          |  2 +-
 .../merge_requests/conflicts/show.html.haml   |  4 +-
 9 files changed, 57 insertions(+), 60 deletions(-)

diff --git a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
index 83d4196d0aa..318b7f77c7b 100644
--- a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
@@ -13,7 +13,7 @@ export class CopyAsGFM {
     $(document).on('copy', '.md', e => {
       CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection);
     });
-    $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', e => {
+    $(document).on('copy', 'pre.code.highlight, table.code td.line_content', e => {
       CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformCodeSelection);
     });
     $(document).on('paste', '.js-gfm-input', CopyAsGFM.pasteGFM);
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index 93e754fa896..41a80d99850 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -38,36 +38,34 @@ export default {
 </script>
 
 <template>
-  <div
+  <table
     :class="$options.userColorScheme"
     :data-commit-id="commitId"
     class="code diff-wrap-lines js-syntax-highlight text-file"
   >
-    <table>
-      <tbody>
-        <template v-for="(line, index) in diffLines">
-          <parallel-diff-table-row
-            :key="line.line_code"
-            :file-hash="diffFile.file_hash"
-            :context-lines-path="diffFile.context_lines_path"
-            :line="line"
-            :is-bottom="index + 1 === diffLinesLength"
-          />
-          <parallel-diff-comment-row
-            :key="`dcr-${line.line_code || index}`"
-            :line="line"
-            :diff-file-hash="diffFile.file_hash"
-            :line-index="index"
-            :help-page-path="helpPagePath"
-          />
-          <parallel-draft-comment-row
-            v-if="shouldRenderParallelDraftRow(diffFile.file_hash, line)"
-            :key="`drafts-${index}`"
-            :line="line"
-            :diff-file-content-sha="diffFile.file_hash"
-          />
-        </template>
-      </tbody>
-    </table>
-  </div>
+    <tbody>
+      <template v-for="(line, index) in diffLines">
+        <parallel-diff-table-row
+          :key="line.line_code"
+          :file-hash="diffFile.file_hash"
+          :context-lines-path="diffFile.context_lines_path"
+          :line="line"
+          :is-bottom="index + 1 === diffLinesLength"
+        />
+        <parallel-diff-comment-row
+          :key="`dcr-${line.line_code || index}`"
+          :line="line"
+          :diff-file-hash="diffFile.file_hash"
+          :line-index="index"
+          :help-page-path="helpPagePath"
+        />
+        <parallel-draft-comment-row
+          v-if="shouldRenderParallelDraftRow(diffFile.file_hash, line)"
+          :key="`drafts-${index}`"
+          :line="line"
+          :diff-file-content-sha="diffFile.file_hash"
+        />
+      </template>
+    </tbody>
+  </table>
 </template>
diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
index c2de0379d23..3cb406b819d 100644
--- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
+++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
@@ -16,7 +16,7 @@ import utilsMixin from '../mixins/line_conflict_utils';
       },
     },
     template: `
-      <table>
+      <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>
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index d8947e8ca50..9f9c7dc7dd6 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -72,8 +72,8 @@ export default {
       :can-current-user-fork="false"
       :expanded="!discussion.diff_file.viewer.collapsed"
     />
-    <div v-if="isTextFile" :class="$options.userColorSchemeClass" class="diff-content code">
-      <table>
+    <div v-if="isTextFile" class="diff-content">
+      <table class="code js-syntax-highlight" :class="$options.userColorSchemeClass">
         <template v-if="hasTruncatedDiffLines">
           <tr
             v-for="line in discussion.truncated_diff_lines"
diff --git a/app/views/discussions/_diff_with_notes.html.haml b/app/views/discussions/_diff_with_notes.html.haml
index 44c898e0fac..8a3c841de0b 100644
--- a/app/views/discussions/_diff_with_notes.html.haml
+++ b/app/views/discussions/_diff_with_notes.html.haml
@@ -11,8 +11,8 @@
       = render "projects/diffs/file_header", diff_file: diff_file, url: discussion_path(discussion), show_toggle: false
 
   - if diff_file.text?
-    .diff-content.code.js-syntax-highlight
-      %table
+    .diff-content
+      %table.code.js-syntax-highlight
         - if expanded
           - discussions = { discussion.original_line_code => [discussion] }
           = render partial: "projects/diffs/line",
diff --git a/app/views/projects/blob/preview.html.haml b/app/views/projects/blob/preview.html.haml
index 800ee2d61c8..365135e279e 100644
--- a/app/views/projects/blob/preview.html.haml
+++ b/app/views/projects/blob/preview.html.haml
@@ -1,21 +1,20 @@
-.diff-file.file-holder
-  .diff-content
-    - if markup?(@blob.name)
-      .file-content.md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
-        = markup(@blob.name, @content)
-    - else
-      .file-content.code.js-syntax-highlight
-        - unless @diff_lines.empty?
-          %table.text-file
-            - @diff_lines.each do |line|
-              %tr.line_holder{ class: "#{line.type}" }
-                - if line.type == "match"
-                  %td.old_line.diff-line-num= "..."
-                  %td.new_line.diff-line-num= "..."
-                  %td.line_content.match= line.text
-                - else
-                  %td.old_line.diff-line-num
-                  %td.new_line.diff-line-num
-                  %td.line_content{ class: "#{line.type}" }= diff_line_content(line.text)
-        - else
-          .nothing-here-block No changes.
+- if markup?(@blob.name)
+  .file-content.md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
+    = markup(@blob.name, @content)
+- else
+  .diff-file
+    .diff-content
+      - unless @diff_lines.empty?
+        %table.text-file.code.js-syntax-highlight
+          - @diff_lines.each do |line|
+            %tr.line_holder{ class: "#{line.type}" }
+              - if line.type == "match"
+                %td.old_line.diff-line-num= "..."
+                %td.new_line.diff-line-num= "..."
+                %td.line_content.match= line.text
+              - else
+                %td.old_line.diff-line-num
+                %td.new_line.diff-line-num
+                %td.line_content{ class: "#{line.type}" }= diff_line_content(line.text)
+      - else
+        .nothing-here-block No changes.
diff --git a/app/views/projects/diffs/_parallel_view.html.haml b/app/views/projects/diffs/_parallel_view.html.haml
index 4b1d4b3ea17..02e6c7c2666 100644
--- a/app/views/projects/diffs/_parallel_view.html.haml
+++ b/app/views/projects/diffs/_parallel_view.html.haml
@@ -1,7 +1,7 @@
 / Side-by-side diff view
 
-.text-file.diff-wrap-lines.code.js-syntax-highlight{ data: diff_view_data }
-  %table
+.text-file{ data: diff_view_data }
+  %table.diff-wrap-lines.code.js-syntax-highlight
     - diff_file.parallel_diff_lines.each do |line|
       - left = line[:left]
       - right = line[:right]
diff --git a/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml b/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
index d828cb6cf9e..03226de120d 100644
--- a/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
+++ b/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
@@ -1,5 +1,5 @@
 %inline-conflict-lines{ "inline-template" => "true", ":file" => "file" }
-  %table
+  %table.diff-wrap-lines.code.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}}
diff --git a/app/views/projects/merge_requests/conflicts/show.html.haml b/app/views/projects/merge_requests/conflicts/show.html.haml
index 09aeb81671a..f48390aa046 100644
--- a/app/views/projects/merge_requests/conflicts/show.html.haml
+++ b/app/views/projects/merge_requests/conflicts/show.html.haml
@@ -26,9 +26,9 @@
           %strong {{file.filePath}}
           = render partial: 'projects/merge_requests/conflicts/file_actions'
         .diff-content.diff-wrap-lines
-          .diff-wrap-lines.code.file-content.js-syntax-highlight{ "v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
+          .file-content{ "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'" }
+          .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'" }
             = render partial: "projects/merge_requests/conflicts/components/diff_file_editor"