Add syntax highlighting to suggestion preview

10 files changed, 28 insertions, 6 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index e7569ba7b84..18edbe286ba 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -28,6 +28,11 @@ export default {
       type: Object,
       required: true,
     },
+    helpPagePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     ...mapState({
@@ -95,6 +100,7 @@ export default {
       :is-editing="true"
       :line-code="line.line_code"
       :line="line"
+      :help-page-path="helpPagePath"
       save-button-title="Comment"
       class="diff-comment-form"
       @cancelForm="handleCancelCommentForm"
diff --git a/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue b/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
index 814ee0b7c02..69146f1f6fd 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
@@ -54,6 +54,7 @@ export default {
           :diff-file-hash="diffFileHash"
           :line="line"
           :note-target-line="line"
+          :help-page-path="helpPagePath"
         />
       </div>
     </td>
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
index a65cf025cde..370cb6e339a 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
@@ -101,6 +101,7 @@ export default {
         :diff-file-hash="diffFileHash"
         :line="line.left"
         :note-target-line="line.left"
+        :help-page-path="helpPagePath"
         line-position="left"
       />
     </td>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 937a2847a58..cc07ef46064 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -182,9 +182,9 @@ export default {
         this.hasSuggestion = data.references.suggestions && data.references.suggestions.length;
       }
 
-      this.$nextTick(() => {
-        $(this.$refs['markdown-preview']).renderGFM();
-      });
+      this.$nextTick()
+        .then(() => $(this.$refs['markdown-preview']).renderGFM())
+        .catch(() => new Flash(__('Error rendering markdown preview')));
     },
 
     versionedPreviewPath() {
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
index 563e2f94fcc..c5a2aa1f2af 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
@@ -42,7 +42,7 @@ export default {
   <div class="md-suggestion-header border-bottom-0 mt-2">
     <div class="qa-suggestion-diff-header font-weight-bold">
       {{ __('Suggested change') }}
-      <a v-if="helpPagePath" :href="helpPagePath" :aria-label="__('Help')">
+      <a v-if="helpPagePath" :href="helpPagePath" :aria-label="__('Help')" class="js-help-btn">
         <icon name="question-o" css-classes="link-highlight" />
       </a>
     </div>
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index ce46d760d7b..679148ddf7b 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -158,7 +158,7 @@
     max-height: calc(100vh - 100px);
   }
 
-  table {
+  table:not(.js-syntax-highlight) {
     @include markdown-table;
   }
 }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 0c81dc2e156..45dab036d35 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -143,7 +143,7 @@
     margin: 0 0 16px;
   }
 
-  table {
+  table:not(.js-syntax-highlight) {
     @extend .table;
     @extend .table-bordered;
     margin: 16px 0;
diff --git a/changelogs/unreleased/55945-suggested-change-preview-highlight.yml b/changelogs/unreleased/55945-suggested-change-preview-highlight.yml
new file mode 100644
index 00000000000..997290a5d50
--- /dev/null
+++ b/changelogs/unreleased/55945-suggested-change-preview-highlight.yml
@@ -0,0 +1,5 @@
+---
+title: Fix syntax highlighting for suggested changes preview
+merge_request: 24358
+author:
+type: fixed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7155c39b35d..329d258cd09 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2956,6 +2956,9 @@ msgstr ""
 msgid "Error occurred when toggling the notification subscription"
 msgstr ""
 
+msgid "Error rendering markdown preview"
+msgstr ""
+
 msgid "Error saving label update."
 msgstr ""
 
diff --git a/spec/javascripts/vue_shared/components/markdown/suggestion_diff_header_spec.js b/spec/javascripts/vue_shared/components/markdown/suggestion_diff_header_spec.js
index 8187b3204b1..12ee804f668 100644
--- a/spec/javascripts/vue_shared/components/markdown/suggestion_diff_header_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/suggestion_diff_header_spec.js
@@ -31,6 +31,12 @@ describe('Suggestion Diff component', () => {
       expect(header.innerHTML.includes('Suggested change')).toBe(true);
     });
 
+    it('renders a help button', () => {
+      const helpBtn = vm.$el.querySelector('.js-help-btn');
+
+      expect(helpBtn).not.toBeNull();
+    });
+
     it('renders an apply button', () => {
       const applyBtn = vm.$el.querySelector('.qa-apply-btn');