From 83b1db6a8c69bdbc75e4b01de63ea8f929c941c9 Mon Sep 17 00:00:00 2001
From: Chen Charnolevsky <ccharnolevsky@gitlab.com>
Date: Sat, 6 Jul 2024 11:35:09 +0300
Subject: [PATCH 1/4] Update Highlight.js and add multi lines marking
 functionality

Add the left side of 'code flow' that including description and steps

Disable feature flag

Update 'vulnerability_file_contents' with new highlighted component

remove unnecessary code

move functions

fix pipeline errors

CR changes

Fix unit test

Fix error
---
 .../components/source_viewer/plugins/index.js |  22 ---
 .../plugins/language_highlight.js             |  67 ++++++++
 .../plugins/mark_multiple_lines.js            |  41 +++++
 .../source_viewer/plugins/wrap_lines.js       |   4 +-
 .../source_viewer/workers/highlight_utils.js  |  60 +++-----
 .../vulnerability_file_content_viewer.vue     |  79 ++++++++++
 .../vulnerability_file_contents.vue           |  83 +++++-----
 .../vulnerability_file_content_viewer_spec.js |  65 ++++++++
 .../vulnerability_file_contents_spec.js       |  14 +-
 .../source_viewer/highlight_util_spec.js      | 145 +++++++-----------
 .../source_viewer/plugins/index_spec.js       |  18 ---
 .../plugins/language_highlight_spec.js        |  62 ++++++++
 .../plugins/mark_multi_lines_spec.js          |  22 +++
 13 files changed, 464 insertions(+), 218 deletions(-)
 delete mode 100644 app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js
 create mode 100644 app/assets/javascripts/vue_shared/components/source_viewer/plugins/language_highlight.js
 create mode 100644 app/assets/javascripts/vue_shared/components/source_viewer/plugins/mark_multiple_lines.js
 create mode 100644 ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue
 create mode 100644 ee/spec/frontend/vulnerabilities/vulnerability_file_content_viewer_spec.js
 delete mode 100644 spec/frontend/vue_shared/components/source_viewer/plugins/index_spec.js
 create mode 100644 spec/frontend/vue_shared/components/source_viewer/plugins/language_highlight_spec.js
 create mode 100644 spec/frontend/vue_shared/components/source_viewer/plugins/mark_multi_lines_spec.js

diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js
deleted file mode 100644
index 3f8a9258fc3304..00000000000000
--- a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import wrapChildNodes from './wrap_child_nodes';
-import linkDependencies from './link_dependencies';
-import wrapBidiChars from './wrap_bidi_chars';
-import wrapLines from './wrap_lines';
-
-export const HLJS_ON_AFTER_HIGHLIGHT = 'after:highlight';
-
-/**
- * Registers our plugins for Highlight.js
- *
- * Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst
- *
- * @param {Object} hljs - the Highlight.js instance.
- */
-export const registerPlugins = (hljs, fileType, rawContent, shouldWrapLines) => {
-  hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapChildNodes });
-  hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapBidiChars });
-  hljs.addPlugin({
-    [HLJS_ON_AFTER_HIGHLIGHT]: (result) => linkDependencies(result, fileType, rawContent),
-  });
-  if (shouldWrapLines) hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapLines });
-};
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/language_highlight.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/language_highlight.js
new file mode 100644
index 00000000000000..2a51b3397f15c4
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/language_highlight.js
@@ -0,0 +1,67 @@
+import hljsCore from 'highlight.js/lib/core';
+import languageLoader from '~/content_editor/services/highlight_js_language_loader';
+import { ROUGE_TO_HLJS_LANGUAGE_MAP } from '~/vue_shared/components/source_viewer/constants';
+
+const HLJS_ON_AFTER_HIGHLIGHT = 'after:highlight';
+
+const loadLanguage = async (language, hljs) => {
+  const languageDefinition = await languageLoader[language]();
+  hljs.registerLanguage(language, languageDefinition.default);
+};
+
+const loadSubLanguages = async (languageDefinition, hljs) => {
+  // Some files can contain sub-languages (i.e., Svelte); this ensures that sub-languages are also loaded
+  if (!languageDefinition?.contains) return;
+
+  // generate list of languages to load
+  const languages = new Set(
+    languageDefinition.contains
+      .filter((component) => Boolean(component.subLanguage))
+      .map((component) => component.subLanguage),
+  );
+
+  if (languageDefinition.subLanguage) {
+    languages.add(languageDefinition.subLanguage);
+  }
+
+  await Promise.all([...languages].map((language) => loadLanguage(language, hljs)));
+};
+
+// Registers our plugins for Highlight.js
+// Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst
+const registerPlugins = (hljs, plugins) => {
+  if (!plugins) {
+    return;
+  }
+  for (const plugin of plugins) {
+    hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: plugin });
+  }
+};
+
+const registerLanguage = async (hljs, language) => {
+  await loadLanguage(language, hljs);
+  await loadSubLanguages(hljs.getLanguage(language), hljs);
+};
+
+const initHighlightJs = async (language, plugins) => {
+  const hljs = hljsCore.newInstance();
+
+  registerPlugins(hljs, plugins);
+  await registerLanguage(hljs, language);
+
+  return hljs;
+};
+
+const highlightContent = async (lang, rawContent, plugins) => {
+  const language = ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()];
+  let highlightedContent;
+
+  if (language) {
+    const hljs = await initHighlightJs(language, plugins);
+    highlightedContent = hljs.highlight(rawContent, { language }).value;
+  }
+
+  return highlightedContent;
+};
+
+export { highlightContent };
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/mark_multiple_lines.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/mark_multiple_lines.js
new file mode 100644
index 00000000000000..3c153039f16166
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/mark_multiple_lines.js
@@ -0,0 +1,41 @@
+/**
+ * Highlight.js plugin for wrapping lines in the correct classes and attributes.
+ * Needed for things like hash highlighting to work.
+ *
+ * Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst
+ *
+ * @param {String} content - represent highlighted line of code
+ * @param {number} lineNum - represent highlighted line number
+ * @param {Object} markLineInfo - highlighting info for the current line
+ */
+function wrapLineWithDiv(content, lineNum, markLineInfo) {
+  let wrappedLine = content;
+
+  const stepNumberSpan =
+    lineNum === markLineInfo?.startLine
+      ? `<span class="inline-item-mark">${markLineInfo.index + 1}</span>`
+      : '';
+  const stepNumberSpanNone =
+    lineNum !== markLineInfo?.startLine && markLineInfo
+      ? `<span class="inline-item-mark gl-opacity-0">${markLineInfo.index + 1}</span>`
+      : '';
+
+  if (markLineInfo) {
+    const contentStartIndex = content.indexOf(content.trimStart());
+    wrappedLine = `${content.slice(
+      0,
+      contentStartIndex,
+    )}${stepNumberSpanNone}<span id="TEXT-MARKER${
+      markLineInfo.index + 1
+    }-L${lineNum}" class="inline-section-marker">${stepNumberSpan}${content.slice(contentStartIndex)}</span>`;
+  }
+  return `<div class="line">${wrappedLine}</div>`;
+}
+
+export default (result, lineToMarkersInfo) => {
+  // eslint-disable-next-line no-param-reassign
+  result.value = result.value
+    .split(/\r?\n/)
+    .map((content, index) => wrapLineWithDiv(content, index + 1, lineToMarkersInfo?.[index + 1]))
+    .join('\n');
+};
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_lines.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_lines.js
index 384ada300013b2..b0471e2af98c7d 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_lines.js
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_lines.js
@@ -4,7 +4,9 @@
  *
  * Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst
  *
- * @param {Object} Result - an object that represents the highlighted result from Highlight.js
+ * @param content - represents the highlighted content
+ * @param number - represents the highlighted line number
+ * @param language - represents the highlighted language
  */
 
 function wrapLine(content, number, language) {
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js b/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js
index 057a1c2d1133b3..0ee7db99e38ff1 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js
@@ -1,36 +1,10 @@
-import hljs from 'highlight.js/lib/core';
-import languageLoader from '~/content_editor/services/highlight_js_language_loader';
-import { registerPlugins } from '../plugins/index';
-import { LINES_PER_CHUNK, NEWLINE, ROUGE_TO_HLJS_LANGUAGE_MAP } from '../constants';
-
-const loadLanguage = async (language) => {
-  const languageDefinition = await languageLoader[language]();
-  hljs.registerLanguage(language, languageDefinition.default);
-};
-
-const loadSubLanguages = async (languageDefinition) => {
-  // Some files can contain sub-languages (i.e., Svelte); this ensures that sub-languages are also loaded
-  if (!languageDefinition?.contains) return;
+import wrapChildNodes from '~/vue_shared/components/source_viewer/plugins/wrap_child_nodes';
+import wrapBidiChars from '~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars';
+import linkDependencies from '~/vue_shared/components/source_viewer/plugins/link_dependencies';
+import { highlightContent } from '~/vue_shared/components/source_viewer/plugins/language_highlight';
+import wrapMultipleLines from '~/vue_shared/components/source_viewer/plugins/mark_multiple_lines';
 
-  // generate list of languages to load
-  const languages = new Set(
-    languageDefinition.contains
-      .filter((component) => Boolean(component.subLanguage))
-      .map((component) => component.subLanguage),
-  );
-
-  if (languageDefinition.subLanguage) {
-    languages.add(languageDefinition.subLanguage);
-  }
-
-  await Promise.all([...languages].map(loadLanguage));
-};
-
-const initHighlightJs = async (fileType, content, language) => {
-  registerPlugins(hljs, fileType, content, true);
-  await loadLanguage(language);
-  await loadSubLanguages(hljs.getLanguage(language));
-};
+import { LINES_PER_CHUNK, NEWLINE, ROUGE_TO_HLJS_LANGUAGE_MAP } from '../constants';
 
 const splitByLineBreaks = (content = '') => content.split(/\r?\n/);
 
@@ -57,17 +31,29 @@ const splitIntoChunks = (language, rawContent, highlightedContent) => {
   return result;
 };
 
+const highlightPlugins = (fileType, rawContent, shouldWrapLines) => {
+  const plugins = [
+    wrapChildNodes,
+    wrapBidiChars,
+    (result) => linkDependencies(result, fileType, rawContent),
+  ];
+  if (shouldWrapLines) {
+    plugins.push(wrapMultipleLines);
+  }
+  return plugins;
+};
+
 const highlight = async (fileType, rawContent, lang) => {
   const language = ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()];
-  let result;
+  let highlightedChunks;
 
   if (language) {
-    await initHighlightJs(fileType, rawContent, language);
-    const highlightedContent = hljs.highlight(rawContent, { language }).value;
-    result = splitIntoChunks(language, rawContent, highlightedContent);
+    const plugins = highlightPlugins(fileType, rawContent, true);
+    const highlightedContent = await highlightContent(lang, rawContent, plugins);
+    highlightedChunks = splitIntoChunks(language, rawContent, highlightedContent);
   }
 
-  return result;
+  return highlightedChunks;
 };
 
 export { highlight, splitIntoChunks };
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue
new file mode 100644
index 00000000000000..776713841da117
--- /dev/null
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue
@@ -0,0 +1,79 @@
+<script>
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import CodeBlock from '~/vue_shared/components/code_block.vue';
+
+export default {
+  name: 'VulnerabilityFileContentViewer',
+  components: { CodeBlock },
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    startLine: { type: Number, required: false, default: null },
+    endLine: { type: Number, required: false, default: null },
+    isHighlighted: { type: Boolean, required: false, default: false },
+    content: { type: String, required: true },
+    highlightInfo: { type: Array, required: false, default: () => [] },
+  },
+  data() {
+    return {
+      loadingError: false,
+    };
+  },
+  computed: {
+    lineNumbers() {
+      const linesNumbers = [];
+      this.highlightInfo.forEach((highlight) => {
+        linesNumbers.push({ lineNumber: highlight.startLine, stepNumber: highlight.stepNumber });
+      });
+      return Array.from({ length: this.endLine - this.startLine + 1 }, (_, i) => ({
+        lineNumber: this.startLine + i,
+        stepNumber: linesNumbers.find((line) => line.lineNumber === this.startLine + i)?.stepNumber,
+      }));
+    },
+    sourceCodeLines() {
+      const lines = this.content.split('\n');
+      // rawTextBlob is the entire file, the GraphQL query does not have the ability to get only certain lines of the
+      // file. Because we only need certain lines, we'll split the lines into an array, slice out only those lines, then
+      // rejoin it back into a string so that the code block component can render it properly.
+      return lines
+        .slice(Math.max(this.startLine - 1, 0), Math.min(this.endLine, lines.length))
+        .map((line) => line || ' ') // to display empty lines as well!
+        .join('\n');
+    },
+    userColorTheme() {
+      return gon.user_color_scheme;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="file-holder">
+    <div
+      :class="userColorTheme"
+      class="code blob-viewer file-content gl-display-flex gl-align-items-center gl-overflow-auto gl-rounded-base"
+    >
+      <div
+        class="line-numbers line-links diff-line-num gl-absolute gl-z-3 gl-p-0! gl-hover-bg-transparent! gl-border-r"
+        data-testid="line-numbers"
+      >
+        <a
+          v-for="line in lineNumbers"
+          :id="`NUM-MARKER${line.stepNumber}-L${line.lineNumber}`"
+          :key="line.lineNumber"
+          class="file-line-num gl-hover-text-decoration-none"
+        >
+          {{ line.lineNumber }}
+        </a>
+      </div>
+
+      <code-block
+        class="highlight gl-overflow-visible! gl-p-0! gl-border-none! gl-flex-grow-1 !gl-leading-20"
+      >
+        <code v-if="isHighlighted" v-safe-html="sourceCodeLines" class="d-block"></code>
+        <span v-else v-safe-html="sourceCodeLines" class="plain-lines"></span>
+      </code-block>
+    </div>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue
index 132c4522560ad5..460cdfac9cb587 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue
@@ -1,23 +1,29 @@
 <script>
 import { GlSkeletonLoader, GlAlert, GlSprintf } from '@gitlab/ui';
 import vulnerabilityBlobInfoQuery from 'ee/security_dashboard/graphql/queries/vulnerability_blob_info.query.graphql';
-import CodeBlockHighlighted from '~/vue_shared/components/code_block_highlighted.vue';
+import VulnerabilityFileContentViewer from 'ee/vulnerabilities/components/vulnerability_file_content_viewer.vue';
+import { highlightContent } from '~/vue_shared/components/source_viewer/plugins/language_highlight';
 import { getRefFromBlobPath } from 'ee/vulnerabilities/helpers';
 
 export default {
-  components: { GlSkeletonLoader, GlAlert, GlSprintf, CodeBlockHighlighted },
+  components: {
+    VulnerabilityFileContentViewer,
+    GlSkeletonLoader,
+    GlAlert,
+    GlSprintf,
+  },
   inject: ['projectFullPath'],
   props: {
     location: { type: Object, required: true },
   },
   data() {
     return {
-      blobInfo: null,
+      blobContent: null,
       loadingError: false,
     };
   },
   apollo: {
-    blobInfo: {
+    blobContent: {
       query: vulnerabilityBlobInfoQuery,
       variables() {
         return {
@@ -29,7 +35,17 @@ export default {
         };
       },
       update({ project }) {
-        return project.repository.blobs.nodes[0];
+        const data = project.repository.blobs.nodes[0];
+        if (!data) return data;
+
+        highlightContent(data.language, data.rawTextBlob)
+          .then((res) => {
+            this.highlightedContent = res;
+          })
+          .catch(() => {
+            // silent failure - nothing should be done
+          });
+        return data.rawTextBlob;
       },
       error() {
         this.loadingError = true;
@@ -37,27 +53,19 @@ export default {
     },
   },
   computed: {
+    isHighlighted() {
+      return Boolean(this.highlightedContent);
+    },
+    content() {
+      return this.highlightedContent || this.blobContent;
+    },
+
     startLine() {
       return this.location.startLine;
     },
     endLine() {
       return this.location.endLine || this.startLine;
     },
-    lineNumbers() {
-      const numbers = [];
-      for (let i = this.startLine; i <= this.endLine; i += 1) {
-        numbers.push(i);
-      }
-
-      return numbers;
-    },
-    sourceCodeLines() {
-      // rawTextBlob is the entire file, the GraphQL query does not have the ability to get only certain lines of the
-      // file. Because we only need certain lines, we'll split the lines into an array, slice out only those lines, then
-      // rejoin it back into a string so that the code block component can render it properly.
-      const lines = this.blobInfo.rawTextBlob.split('\n');
-      return lines.slice(this.startLine - 1, this.endLine).join('\n');
-    },
     ref() {
       return getRefFromBlobPath(this.location.blobPath);
     },
@@ -70,7 +78,7 @@ export default {
 
 <template>
   <div
-    v-if="$apollo.queries.blobInfo.loading"
+    v-if="$apollo.queries.blobContent.loading"
     :class="userColorTheme"
     class="code gl-p-3 gl-pb-2 gl-rounded-base"
   >
@@ -87,7 +95,7 @@ export default {
   </gl-alert>
 
   <gl-alert
-    v-else-if="!blobInfo"
+    v-else-if="!blobContent"
     :dismissible="false"
     variant="warning"
     data-testid="file-not-found-warning"
@@ -102,28 +110,11 @@ export default {
     </gl-sprintf>
   </gl-alert>
 
-  <div v-else class="file-holder">
-    <div
-      :class="userColorTheme"
-      class="code blob-viewer file-content gl-display-flex gl-align-items-center gl-overflow-auto gl-rounded-base"
-    >
-      <div
-        class="line-numbers line-links diff-line-num gl-absolute gl-z-3 gl-p-0! gl-hover-bg-transparent! gl-border-r"
-        data-testid="line-numbers"
-      >
-        <a
-          v-for="lineNumber in lineNumbers"
-          :key="lineNumber"
-          class="file-line-num gl-hover-text-decoration-none"
-        >
-          {{ lineNumber }}
-        </a>
-      </div>
-      <code-block-highlighted
-        :language="blobInfo.language"
-        :code="sourceCodeLines"
-        class="gl-overflow-visible! gl-p-0! gl-border-none! !gl-leading-20"
-      />
-    </div>
-  </div>
+  <vulnerability-file-content-viewer
+    v-else
+    :start-line="startLine"
+    :end-line="endLine"
+    :is-highlighted="isHighlighted"
+    :content="content"
+  />
 </template>
diff --git a/ee/spec/frontend/vulnerabilities/vulnerability_file_content_viewer_spec.js b/ee/spec/frontend/vulnerabilities/vulnerability_file_content_viewer_spec.js
new file mode 100644
index 00000000000000..f1000508ebe306
--- /dev/null
+++ b/ee/spec/frontend/vulnerabilities/vulnerability_file_content_viewer_spec.js
@@ -0,0 +1,65 @@
+import VueApollo from 'vue-apollo';
+import Vue from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import VulnerabilityFileContentViewer from 'ee/vulnerabilities/components/vulnerability_file_content_viewer.vue';
+import CodeBlock from '~/vue_shared/components/code_block.vue';
+
+Vue.use(VueApollo);
+
+const vulFileContent = {
+  startLine: 2,
+  endLine: 4,
+  isHighlighted: false,
+  content: 'line 1\nline 2\nline 3\nline 4\nline 5',
+  highlightInfo: [],
+};
+const spanContent = '<span class="plain-lines">line 2\nline 3\nline 4</span>';
+const codeContent = '<code class="d-block">line 2\nline 3\nline 4</code>';
+
+describe('Vulnerability File Contents Viewer component', () => {
+  let wrapper;
+
+  const createWrapper = (vulnerabilityOverrides = {}) => {
+    const propsData = {
+      startLine: vulFileContent.startLine,
+      endLine: vulFileContent.endLine,
+      isHighlighted: vulFileContent.isHighlighted, // Ensure this matches the required prop
+      content: vulFileContent.content,
+      highlightInfo: vulFileContent.highlightInfo,
+      ...vulnerabilityOverrides,
+    };
+
+    wrapper = shallowMountExtended(VulnerabilityFileContentViewer, {
+      propsData,
+    });
+  };
+
+  const findCodeBlock = () => wrapper.findComponent(CodeBlock);
+
+  describe('file contents loaded', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('shows the correct line numbers', () => {
+      expect(wrapper.findByTestId('line-numbers').text()).toMatchInterpolatedText('2 3 4');
+    });
+
+    it('shows the source code', () => {
+      expect(findCodeBlock().exists()).toBe(true);
+    });
+
+    it('passes the given value to the code-block component when isHighlighted=false', () => {
+      expect(wrapper.find('span').exists()).toBe(true);
+      expect(wrapper.find('code').exists()).toBe(false);
+      expect(wrapper.find('span').html()).toContain(spanContent);
+    });
+
+    it('passes the given value to the code-block component when isHighlighted=true', () => {
+      createWrapper({ isHighlighted: true });
+      expect(wrapper.find('span').exists()).toBe(false);
+      expect(wrapper.find('code').exists()).toBe(true);
+      expect(wrapper.find('code').html()).toContain(codeContent);
+    });
+  });
+});
diff --git a/ee/spec/frontend/vulnerabilities/vulnerability_file_contents_spec.js b/ee/spec/frontend/vulnerabilities/vulnerability_file_contents_spec.js
index 47b5b374372ee4..12c55880a6c878 100644
--- a/ee/spec/frontend/vulnerabilities/vulnerability_file_contents_spec.js
+++ b/ee/spec/frontend/vulnerabilities/vulnerability_file_contents_spec.js
@@ -6,7 +6,7 @@ import VulnerabilityFileContents from 'ee/vulnerabilities/components/vulnerabili
 import vulnerabilityBlobInfoQuery from 'ee/security_dashboard/graphql/queries/vulnerability_blob_info.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import CodeBlockHighlighted from '~/vue_shared/components/code_block_highlighted.vue';
+import VulnerabilityFileContentViewer from 'ee/vulnerabilities/components/vulnerability_file_content_viewer.vue';
 
 Vue.use(VueApollo);
 
@@ -77,14 +77,12 @@ describe('Vulnerability File Contents component', () => {
       return waitForPromises();
     });
 
-    it('shows the correct line numbers', () => {
-      expect(wrapper.findByTestId('line-numbers').text()).toMatchInterpolatedText('2 3 4');
-    });
-
     it('shows the source code', () => {
-      expect(wrapper.findComponent(CodeBlockHighlighted).props()).toMatchObject({
-        code: 'line 2\nline 3\nline 4',
-        language: blobData.language,
+      expect(wrapper.findComponent(VulnerabilityFileContentViewer).props()).toMatchObject({
+        startLine: location.startLine,
+        endLine: location.endLine,
+        isHighlighted: false,
+        content: blobData.rawTextBlob,
       });
     });
   });
diff --git a/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js b/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js
index c84a39274f879a..78f689ad1751bf 100644
--- a/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js
@@ -1,104 +1,77 @@
-import hljs from 'highlight.js/lib/core';
-import { registerPlugins } from '~/vue_shared/components/source_viewer/plugins/index';
-import { highlight } from '~/vue_shared/components/source_viewer/workers/highlight_utils';
-import { LINES_PER_CHUNK, NEWLINE } from '~/vue_shared/components/source_viewer/constants';
-
-jest.mock('highlight.js/lib/core', () => ({
-  highlight: jest.fn().mockReturnValue({ value: 'highlighted content' }),
-  registerLanguage: jest.fn(),
-  getLanguage: jest.fn(),
-}));
-
-jest.mock('~/vue_shared/components/source_viewer/plugins/index', () => ({
-  registerPlugins: jest.fn(),
-}));
-
-const fileType = 'text';
-const rawContent = 'function test() { return true }; \n // newline';
-const highlightedContent = 'highlighted content';
-const language = 'json';
-
-describe('Highlight utility', () => {
-  beforeEach(() => highlight(fileType, rawContent, language));
-
-  it('registers the language', () => {
-    expect(hljs.registerLanguage).toHaveBeenCalledWith(language, expect.any(Function));
-  });
-
-  it('registers the plugins', () => {
-    expect(registerPlugins).toHaveBeenCalled();
-  });
-
-  describe('sub-languages', () => {
-    const languageDefinition = {
-      subLanguage: 'xml',
-      contains: [{ subLanguage: 'javascript' }, { subLanguage: 'typescript' }],
-    };
-
-    beforeEach(async () => {
-      jest.spyOn(hljs, 'getLanguage').mockReturnValue(languageDefinition);
-      await highlight(fileType, rawContent, language);
-    });
-
-    it('registers the primary sub-language', () => {
-      expect(hljs.registerLanguage).toHaveBeenCalledWith(
-        languageDefinition.subLanguage,
-        expect.any(Function),
-      );
-    });
-
-    it.each(languageDefinition.contains)(
-      'registers the rest of the sub-languages',
-      ({ subLanguage }) => {
-        expect(hljs.registerLanguage).toHaveBeenCalledWith(subLanguage, expect.any(Function));
-      },
-    );
+import { highlightContent } from '~/vue_shared/components/source_viewer/plugins/language_highlight';
+import { ROUGE_TO_HLJS_LANGUAGE_MAP } from '~/vue_shared/components/source_viewer/constants';
+import {
+  highlight,
+  splitIntoChunks,
+} from '~/vue_shared/components/source_viewer/workers/highlight_utils';
+
+jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_child_nodes');
+jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars');
+jest.mock('~/vue_shared/components/source_viewer/plugins/link_dependencies');
+jest.mock('~/vue_shared/components/source_viewer/plugins/language_highlight');
+jest.mock('~/vue_shared/components/source_viewer/plugins/mark_multiple_lines');
+
+describe('highlight', () => {
+  const fileType = 'javascript';
+  const rawContent = 'const a = 1;\nconst b = 2;\n';
+  const lang = 'javascript';
+  const highlightedContent =
+    '<span class="hljs-keyword">const</span> a = 1;\n<span class="hljs-keyword">const</span> b = 2;\n';
+
+  beforeEach(() => {
+    ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()] = lang;
+    highlightContent.mockResolvedValue(highlightedContent);
   });
 
-  it('highlights the content', () => {
-    expect(hljs.highlight).toHaveBeenCalledWith(rawContent, { language });
+  afterEach(() => {
+    jest.resetAllMocks();
   });
 
-  it('splits the content into chunks', async () => {
-    const contentArray = Array.from({ length: 140 }, () => 'newline'); // simulate 140 lines of code
-
-    const chunks = [
+  it('should highlight content and split into chunks', async () => {
+    const expectedChunks = [
       {
-        language,
         highlightedContent,
-        rawContent: contentArray.slice(0, 70).join(NEWLINE), // first 70 lines
+        rawContent,
+        totalLines: 3,
         startingFrom: 0,
-        totalLines: LINES_PER_CHUNK,
-      },
-      {
-        language,
-        highlightedContent: '',
-        rawContent: contentArray.slice(70, 140).join(NEWLINE), // last 70 lines
-        startingFrom: 70,
-        totalLines: LINES_PER_CHUNK,
+        language: lang,
       },
     ];
+    const result = await highlight(fileType, rawContent, lang);
 
-    expect(await highlight(fileType, contentArray.join(NEWLINE), language)).toEqual(
-      expect.arrayContaining(chunks),
-    );
+    expect(highlightContent).toHaveBeenCalledWith(lang, rawContent, expect.any(Array));
+    expect(result).toEqual(expectedChunks);
   });
-});
-
-describe('unsupported languages', () => {
-  const unsupportedLanguage = 'some_unsupported_language';
 
-  beforeEach(() => highlight(fileType, rawContent, unsupportedLanguage));
+  it('should return undefined for an unknown language', async () => {
+    ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()] = undefined;
+    const result = await highlight(fileType, rawContent, lang);
 
-  it('does not register plugins', () => {
-    expect(registerPlugins).not.toHaveBeenCalled();
+    expect(result).toBeUndefined();
   });
+});
 
-  it('does not attempt to highlight the content', () => {
-    expect(hljs.highlight).not.toHaveBeenCalled();
-  });
+describe('splitIntoChunks', () => {
+  it('should split content into chunks', () => {
+    const language = 'javascript';
+    const rawContent = 'const a = 1;\nconst b = 2;\nconst c = 3;\nconst d = 4;\n';
+    const highlightedContent =
+      '<span class="hljs-keyword">const</span> a = 1;\n<span class="hljs-keyword">const</span> b = 2;\n<span class="hljs-keyword">const</span> c = 3;\n<span class="hljs-keyword">const</span> d = 4;\n';
 
-  it('does not return a result', async () => {
-    expect(await highlight(fileType, rawContent, unsupportedLanguage)).toBe(undefined);
+    const expectedChunks = [
+      {
+        highlightedContent:
+          '<span class="hljs-keyword">const</span> a = 1;\n' +
+          '<span class="hljs-keyword">const</span> b = 2;\n' +
+          '<span class="hljs-keyword">const</span> c = 3;\n' +
+          '<span class="hljs-keyword">const</span> d = 4;\n',
+        rawContent: 'const a = 1;\nconst b = 2;\nconst c = 3;\nconst d = 4;\n',
+        totalLines: 5,
+        startingFrom: 0,
+        language: 'javascript',
+      },
+    ];
+    const result = splitIntoChunks(language, rawContent, highlightedContent);
+    expect(result).toEqual(expectedChunks);
   });
 });
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/index_spec.js b/spec/frontend/vue_shared/components/source_viewer/plugins/index_spec.js
deleted file mode 100644
index 57045ca54ae224..00000000000000
--- a/spec/frontend/vue_shared/components/source_viewer/plugins/index_spec.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import {
-  registerPlugins,
-  HLJS_ON_AFTER_HIGHLIGHT,
-} from '~/vue_shared/components/source_viewer/plugins/index';
-import wrapChildNodes from '~/vue_shared/components/source_viewer/plugins/wrap_child_nodes';
-import wrapBidiChars from '~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars';
-
-jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_child_nodes');
-const hljsMock = { addPlugin: jest.fn() };
-
-describe('Highlight.js plugin registration', () => {
-  beforeEach(() => registerPlugins(hljsMock));
-
-  it('registers our plugins', () => {
-    expect(hljsMock.addPlugin).toHaveBeenCalledWith({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapBidiChars });
-    expect(hljsMock.addPlugin).toHaveBeenCalledWith({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapChildNodes });
-  });
-});
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/language_highlight_spec.js b/spec/frontend/vue_shared/components/source_viewer/plugins/language_highlight_spec.js
new file mode 100644
index 00000000000000..b21141717b44a1
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/plugins/language_highlight_spec.js
@@ -0,0 +1,62 @@
+import hljsCore from 'highlight.js/lib/core';
+import languageLoader from '~/content_editor/services/highlight_js_language_loader';
+import { ROUGE_TO_HLJS_LANGUAGE_MAP } from '~/vue_shared/components/source_viewer/constants';
+import { highlightContent } from '~/vue_shared/components/source_viewer/plugins/language_highlight';
+
+jest.mock('highlight.js/lib/core');
+jest.mock('~/content_editor/services/highlight_js_language_loader');
+
+describe('highlightContent', () => {
+  const mockHljsInstance = {
+    registerLanguage: jest.fn(),
+    addPlugin: jest.fn(),
+    highlight: jest.fn(),
+    getLanguage: jest.fn(),
+  };
+
+  beforeEach(() => {
+    hljsCore.newInstance.mockReturnValue(mockHljsInstance);
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should highlight content with a known language', async () => {
+    const lang = 'ruby';
+    const rawContent = 'puts "Hello, world!"';
+    const plugins = [];
+    const hljsLanguage = 'ruby';
+
+    ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()] = hljsLanguage;
+
+    const mockLanguageDefinition = { default: jest.fn(), contains: [] };
+    languageLoader[hljsLanguage] = jest.fn().mockResolvedValue(mockLanguageDefinition);
+    mockHljsInstance.highlight.mockReturnValue({
+      value: '<span class="hljs-keyword">puts</span> "Hello, world!"',
+    });
+    mockHljsInstance.getLanguage.mockReturnValue(mockLanguageDefinition);
+
+    const result = await highlightContent(lang, rawContent, plugins);
+
+    expect(languageLoader[hljsLanguage]).toHaveBeenCalled();
+    expect(mockHljsInstance.registerLanguage).toHaveBeenCalledWith(
+      hljsLanguage,
+      mockLanguageDefinition.default,
+    );
+    expect(mockHljsInstance.highlight).toHaveBeenCalledWith(rawContent, { language: hljsLanguage });
+    expect(result).toBe('<span class="hljs-keyword">puts</span> "Hello, world!"');
+  });
+
+  it('should return undefined for an unknown language', async () => {
+    const lang = 'unknownLanguage';
+    const rawContent = 'some content';
+    const plugins = [];
+
+    ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()] = undefined;
+
+    const result = await highlightContent(lang, rawContent, plugins);
+
+    expect(result).toBeUndefined();
+  });
+});
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/mark_multi_lines_spec.js b/spec/frontend/vue_shared/components/source_viewer/plugins/mark_multi_lines_spec.js
new file mode 100644
index 00000000000000..f10a3964ec5d34
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/plugins/mark_multi_lines_spec.js
@@ -0,0 +1,22 @@
+import markMultipleLines from '~/vue_shared/components/source_viewer/plugins/mark_multiple_lines';
+
+describe('Highlight.js plugin for mark multi lines', () => {
+  it('mutates the input value by marking multi lines and numbering', () => {
+    const inputValue = `<span class="hljs-keyword">FROM</span> alpine:latest<span class="hljs-keyword">COPY</span> . /tmp<span class="hljs-keyword">CMD</span> /tmp/run-app`;
+    const hljsResultMock = { value: inputValue, language: 'dockerfile' };
+    const lineToMarkersInfo = {
+      1: {
+        index: 1,
+        startLine: 1,
+        endLine: 2,
+        stepNumber: 2,
+      },
+    };
+
+    const wrappedLine = `<span id="TEXT-MARKER2-L1" class="inline-section-marker"><span class="inline-item-mark">2</span><span class="hljs-keyword">FROM</span> alpine:latest<span class="hljs-keyword">COPY</span> . /tmp<span class="hljs-keyword">CMD</span> /tmp/run-app</span>`;
+    const outputValue = `<div class="line">${wrappedLine}</div>`;
+
+    markMultipleLines(hljsResultMock, lineToMarkersInfo);
+    expect(hljsResultMock.value).toBe(outputValue);
+  });
+});
-- 
GitLab


From 3c8a5e8b0edc0defafbbbb0e067154a8fddbdef1 Mon Sep 17 00:00:00 2001
From: Chen Charnolevsky <ccharnolevsky@gitlab.com>
Date: Fri, 19 Jul 2024 13:57:42 +0300
Subject: [PATCH 2/4] Tailwind CSS and add Sentry

---
 .../components/vulnerability_file_content_viewer.vue      | 8 ++++----
 .../components/vulnerability_file_contents.vue            | 5 +++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue
index 776713841da117..02d36143001eb4 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue
@@ -52,24 +52,24 @@ export default {
   <div class="file-holder">
     <div
       :class="userColorTheme"
-      class="code blob-viewer file-content gl-display-flex gl-align-items-center gl-overflow-auto gl-rounded-base"
+      class="code blob-viewer file-content gl-flex gl-items-center gl-overflow-auto gl-rounded-base"
     >
       <div
-        class="line-numbers line-links diff-line-num gl-absolute gl-z-3 gl-p-0! gl-hover-bg-transparent! gl-border-r"
+        class="line-numbers line-links diff-line-num gl-absolute gl-z-3 !gl-p-0 hover:!gl-bg-transparent gl-border-r"
         data-testid="line-numbers"
       >
         <a
           v-for="line in lineNumbers"
           :id="`NUM-MARKER${line.stepNumber}-L${line.lineNumber}`"
           :key="line.lineNumber"
-          class="file-line-num gl-hover-text-decoration-none"
+          class="file-line-num hover:gl-no-underline"
         >
           {{ line.lineNumber }}
         </a>
       </div>
 
       <code-block
-        class="highlight gl-overflow-visible! gl-p-0! gl-border-none! gl-flex-grow-1 !gl-leading-20"
+        class="highlight !gl-overflow-visible !gl-p-0 !gl-border-none gl-grow !gl-leading-20"
       >
         <code v-if="isHighlighted" v-safe-html="sourceCodeLines" class="d-block"></code>
         <span v-else v-safe-html="sourceCodeLines" class="plain-lines"></span>
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue
index 460cdfac9cb587..89f6b185c6e8b7 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlSkeletonLoader, GlAlert, GlSprintf } from '@gitlab/ui';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import vulnerabilityBlobInfoQuery from 'ee/security_dashboard/graphql/queries/vulnerability_blob_info.query.graphql';
 import VulnerabilityFileContentViewer from 'ee/vulnerabilities/components/vulnerability_file_content_viewer.vue';
 import { highlightContent } from '~/vue_shared/components/source_viewer/plugins/language_highlight';
@@ -42,8 +43,8 @@ export default {
           .then((res) => {
             this.highlightedContent = res;
           })
-          .catch(() => {
-            // silent failure - nothing should be done
+          .catch((error) => {
+            Sentry.captureException(error);
           });
         return data.rawTextBlob;
       },
-- 
GitLab


From b3566c259018d2785e03466c7edde222c28043c2 Mon Sep 17 00:00:00 2001
From: Chen Charnolevsky <ccharnolevsky@gitlab.com>
Date: Mon, 22 Jul 2024 22:26:22 +0300
Subject: [PATCH 3/4] CR changes

---
 .../index.js}                                 | 14 +----
 .../javascripts/highlight_js/plugins/index.js | 29 +++++++++
 .../plugins/mark_multiple_lines.js            |  6 +-
 .../source_viewer/workers/highlight_utils.js  | 20 +------
 .../vulnerability_file_contents.vue           |  2 +-
 .../index_spec.js}                            |  2 +-
 .../highlight_js/plugins/index_spec.js        | 60 +++++++++++++++++++
 .../source_viewer/highlight_util_spec.js      |  8 +--
 8 files changed, 99 insertions(+), 42 deletions(-)
 rename app/assets/javascripts/{vue_shared/components/source_viewer/plugins/language_highlight.js => highlight_js/index.js} (82%)
 create mode 100644 app/assets/javascripts/highlight_js/plugins/index.js
 rename spec/frontend/{vue_shared/components/source_viewer/plugins/language_highlight_spec.js => highlight_js/index_spec.js} (95%)
 create mode 100644 spec/frontend/highlight_js/plugins/index_spec.js

diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/language_highlight.js b/app/assets/javascripts/highlight_js/index.js
similarity index 82%
rename from app/assets/javascripts/vue_shared/components/source_viewer/plugins/language_highlight.js
rename to app/assets/javascripts/highlight_js/index.js
index 2a51b3397f15c4..aa66c721b9ab69 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/language_highlight.js
+++ b/app/assets/javascripts/highlight_js/index.js
@@ -1,8 +1,7 @@
 import hljsCore from 'highlight.js/lib/core';
 import languageLoader from '~/content_editor/services/highlight_js_language_loader';
 import { ROUGE_TO_HLJS_LANGUAGE_MAP } from '~/vue_shared/components/source_viewer/constants';
-
-const HLJS_ON_AFTER_HIGHLIGHT = 'after:highlight';
+import { registerPlugins } from './plugins/index';
 
 const loadLanguage = async (language, hljs) => {
   const languageDefinition = await languageLoader[language]();
@@ -27,17 +26,6 @@ const loadSubLanguages = async (languageDefinition, hljs) => {
   await Promise.all([...languages].map((language) => loadLanguage(language, hljs)));
 };
 
-// Registers our plugins for Highlight.js
-// Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst
-const registerPlugins = (hljs, plugins) => {
-  if (!plugins) {
-    return;
-  }
-  for (const plugin of plugins) {
-    hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: plugin });
-  }
-};
-
 const registerLanguage = async (hljs, language) => {
   await loadLanguage(language, hljs);
   await loadSubLanguages(hljs.getLanguage(language), hljs);
diff --git a/app/assets/javascripts/highlight_js/plugins/index.js b/app/assets/javascripts/highlight_js/plugins/index.js
new file mode 100644
index 00000000000000..43309611e8d5c1
--- /dev/null
+++ b/app/assets/javascripts/highlight_js/plugins/index.js
@@ -0,0 +1,29 @@
+import wrapChildNodes from '~/vue_shared/components/source_viewer/plugins/wrap_child_nodes';
+import wrapBidiChars from '~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars';
+import linkDependencies from '~/vue_shared/components/source_viewer/plugins/link_dependencies';
+import wrapLines from '~/vue_shared/components/source_viewer/plugins/wrap_lines';
+
+const HLJS_ON_AFTER_HIGHLIGHT = 'after:highlight';
+
+// Registers our plugins for Highlight.js
+// Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst
+export const highlightPlugins = (fileType, rawContent, shouldWrapLines) => {
+  const plugins = [
+    wrapChildNodes,
+    wrapBidiChars,
+    (result) => linkDependencies(result, fileType, rawContent),
+  ];
+  if (shouldWrapLines) {
+    plugins.push(wrapLines);
+  }
+  return plugins;
+};
+
+export const registerPlugins = (hljs, plugins) => {
+  if (!plugins) {
+    return;
+  }
+  for (const plugin of plugins) {
+    hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: plugin });
+  }
+};
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/mark_multiple_lines.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/mark_multiple_lines.js
index 3c153039f16166..055efc8d077bc4 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/mark_multiple_lines.js
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/mark_multiple_lines.js
@@ -1,6 +1,6 @@
 /**
  * Highlight.js plugin for wrapping lines in the correct classes and attributes.
- * Needed for things like hash highlighting to work.
+ * Needed to highlight a large amount of lines
  *
  * Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst
  *
@@ -8,7 +8,7 @@
  * @param {number} lineNum - represent highlighted line number
  * @param {Object} markLineInfo - highlighting info for the current line
  */
-function wrapLineWithDiv(content, lineNum, markLineInfo) {
+function markLinesWithDiv(content, lineNum, markLineInfo) {
   let wrappedLine = content;
 
   const stepNumberSpan =
@@ -36,6 +36,6 @@ export default (result, lineToMarkersInfo) => {
   // eslint-disable-next-line no-param-reassign
   result.value = result.value
     .split(/\r?\n/)
-    .map((content, index) => wrapLineWithDiv(content, index + 1, lineToMarkersInfo?.[index + 1]))
+    .map((content, index) => markLinesWithDiv(content, index + 1, lineToMarkersInfo?.[index + 1]))
     .join('\n');
 };
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js b/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js
index 0ee7db99e38ff1..713832cac4e4ee 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js
@@ -1,9 +1,5 @@
-import wrapChildNodes from '~/vue_shared/components/source_viewer/plugins/wrap_child_nodes';
-import wrapBidiChars from '~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars';
-import linkDependencies from '~/vue_shared/components/source_viewer/plugins/link_dependencies';
-import { highlightContent } from '~/vue_shared/components/source_viewer/plugins/language_highlight';
-import wrapMultipleLines from '~/vue_shared/components/source_viewer/plugins/mark_multiple_lines';
-
+import { highlightPlugins } from '~/highlight_js/plugins';
+import { highlightContent } from '~/highlight_js';
 import { LINES_PER_CHUNK, NEWLINE, ROUGE_TO_HLJS_LANGUAGE_MAP } from '../constants';
 
 const splitByLineBreaks = (content = '') => content.split(/\r?\n/);
@@ -31,18 +27,6 @@ const splitIntoChunks = (language, rawContent, highlightedContent) => {
   return result;
 };
 
-const highlightPlugins = (fileType, rawContent, shouldWrapLines) => {
-  const plugins = [
-    wrapChildNodes,
-    wrapBidiChars,
-    (result) => linkDependencies(result, fileType, rawContent),
-  ];
-  if (shouldWrapLines) {
-    plugins.push(wrapMultipleLines);
-  }
-  return plugins;
-};
-
 const highlight = async (fileType, rawContent, lang) => {
   const language = ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()];
   let highlightedChunks;
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue
index 89f6b185c6e8b7..130290be9017fe 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_contents.vue
@@ -3,8 +3,8 @@ import { GlSkeletonLoader, GlAlert, GlSprintf } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import vulnerabilityBlobInfoQuery from 'ee/security_dashboard/graphql/queries/vulnerability_blob_info.query.graphql';
 import VulnerabilityFileContentViewer from 'ee/vulnerabilities/components/vulnerability_file_content_viewer.vue';
-import { highlightContent } from '~/vue_shared/components/source_viewer/plugins/language_highlight';
 import { getRefFromBlobPath } from 'ee/vulnerabilities/helpers';
+import { highlightContent } from '~/highlight_js';
 
 export default {
   components: {
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/language_highlight_spec.js b/spec/frontend/highlight_js/index_spec.js
similarity index 95%
rename from spec/frontend/vue_shared/components/source_viewer/plugins/language_highlight_spec.js
rename to spec/frontend/highlight_js/index_spec.js
index b21141717b44a1..bcf2e40510f88c 100644
--- a/spec/frontend/vue_shared/components/source_viewer/plugins/language_highlight_spec.js
+++ b/spec/frontend/highlight_js/index_spec.js
@@ -1,7 +1,7 @@
 import hljsCore from 'highlight.js/lib/core';
 import languageLoader from '~/content_editor/services/highlight_js_language_loader';
 import { ROUGE_TO_HLJS_LANGUAGE_MAP } from '~/vue_shared/components/source_viewer/constants';
-import { highlightContent } from '~/vue_shared/components/source_viewer/plugins/language_highlight';
+import { highlightContent } from '~/highlight_js';
 
 jest.mock('highlight.js/lib/core');
 jest.mock('~/content_editor/services/highlight_js_language_loader');
diff --git a/spec/frontend/highlight_js/plugins/index_spec.js b/spec/frontend/highlight_js/plugins/index_spec.js
new file mode 100644
index 00000000000000..78c33406f31f1b
--- /dev/null
+++ b/spec/frontend/highlight_js/plugins/index_spec.js
@@ -0,0 +1,60 @@
+import { highlightPlugins, registerPlugins } from '~/highlight_js/plugins';
+import wrapChildNodes from '~/vue_shared/components/source_viewer/plugins/wrap_child_nodes';
+import wrapBidiChars from '~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars';
+
+jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_child_nodes', () => 'wrapChildNodes');
+jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars', () => 'wrapBidiChars');
+jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_lines', () => 'wrapLines');
+
+describe('index.js', () => {
+  describe('highlightPlugins', () => {
+    it('returns correct plugins without wrapping lines', () => {
+      const result = highlightPlugins('javascript', 'const x = 5;', false);
+
+      expect(result).toHaveLength(3);
+      expect(result[0]).toBe(wrapChildNodes);
+      expect(result[1]).toBe(wrapBidiChars);
+      expect(typeof result[2]).toBe('function');
+    });
+
+    it('adds wrapLines when shouldWrapLines is true', () => {
+      const withoutWrapLines = highlightPlugins('js', 'code', false);
+      const withWrapLines = highlightPlugins('js', 'code', true);
+
+      expect(withoutWrapLines).not.toContain('wrapLines');
+      expect(withWrapLines).toContain('wrapLines');
+      expect(withWrapLines.length).toBe(withoutWrapLines.length + 1);
+    });
+  });
+
+  describe('registerPlugins', () => {
+    let mockHljs;
+
+    beforeEach(() => {
+      mockHljs = { addPlugin: jest.fn() };
+    });
+
+    it('registers each plugin with hljs', () => {
+      const mockPlugins = [jest.fn(), jest.fn()];
+      registerPlugins(mockHljs, mockPlugins);
+
+      expect(mockHljs.addPlugin).toHaveBeenCalledTimes(2);
+      mockPlugins.forEach((plugin) => {
+        expect(mockHljs.addPlugin).toHaveBeenCalledWith({
+          'after:highlight': plugin,
+        });
+      });
+    });
+
+    it('does nothing when plugins array is empty', () => {
+      registerPlugins(mockHljs, []);
+      expect(mockHljs.addPlugin).not.toHaveBeenCalled();
+    });
+
+    it('does nothing when plugins is null or undefined', () => {
+      registerPlugins(mockHljs, null);
+      registerPlugins(mockHljs, undefined);
+      expect(mockHljs.addPlugin).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js b/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js
index 78f689ad1751bf..43a28bdec24811 100644
--- a/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js
@@ -1,15 +1,11 @@
-import { highlightContent } from '~/vue_shared/components/source_viewer/plugins/language_highlight';
 import { ROUGE_TO_HLJS_LANGUAGE_MAP } from '~/vue_shared/components/source_viewer/constants';
 import {
   highlight,
   splitIntoChunks,
 } from '~/vue_shared/components/source_viewer/workers/highlight_utils';
+import { highlightContent } from '~/highlight_js';
 
-jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_child_nodes');
-jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars');
-jest.mock('~/vue_shared/components/source_viewer/plugins/link_dependencies');
-jest.mock('~/vue_shared/components/source_viewer/plugins/language_highlight');
-jest.mock('~/vue_shared/components/source_viewer/plugins/mark_multiple_lines');
+jest.mock('~/highlight_js');
 
 describe('highlight', () => {
   const fileType = 'javascript';
-- 
GitLab


From edd60132d04dff00136e0c423a72cdc84357f2cd Mon Sep 17 00:00:00 2001
From: Chen Charnolevsky <ccharnolevsky@gitlab.com>
Date: Tue, 23 Jul 2024 12:56:31 +0300
Subject: [PATCH 4/4] CR change

---
 .../components/vulnerability_file_content_viewer.vue            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue
index 02d36143001eb4..514d9051e70735 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_file_content_viewer.vue
@@ -33,7 +33,7 @@ export default {
     },
     sourceCodeLines() {
       const lines = this.content.split('\n');
-      // rawTextBlob is the entire file, the GraphQL query does not have the ability to get only certain lines of the
+      // content is the entire file, the GraphQL query does not have the ability to get only certain lines of the
       // file. Because we only need certain lines, we'll split the lines into an array, slice out only those lines, then
       // rejoin it back into a string so that the code block component can render it properly.
       return lines
-- 
GitLab