Merge branch '351558-fix-line-selection' into 'master'

Fix line selection in the refactored blob viewer

See merge request gitlab-org/gitlab!80275

app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue

 <script>
 import { GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import LineHighlighter from '~/blob/line_highlighter';
 import { HIGHLIGHT_CLASS_NAME } from './constants';
 import ViewerMixin from './mixins';
 
@@ -20,13 +21,22 @@ export default {
     };
   },
   computed: {
+    refactorBlobViewerEnabled() {
+      return this.glFeatures.refactorBlobViewer;
+    },
+
     lineNumbers() {
       return this.content.split('\n').length;
     },
   },
   mounted() {
-    const { hash } = window.location;
-    if (hash) this.scrollToLine(hash, true);
+    if (this.refactorBlobViewerEnabled) {
+      // This line will be removed once we start using highlight.js on the frontend (https://gitlab.com/groups/gitlab-org/-/epics/7146)
+      new LineHighlighter(); // eslint-disable-line no-new
+    } else {
+      const { hash } = window.location;
+      if (hash) this.scrollToLine(hash, true);
+    }
   },
   methods: {
     scrollToLine(hash, scroll = false) {

spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js

@@ -2,16 +2,20 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { HIGHLIGHT_CLASS_NAME } from '~/vue_shared/components/blob_viewers/constants';
 import SimpleViewer from '~/vue_shared/components/blob_viewers/simple_viewer.vue';
+import LineHighlighter from '~/blob/line_highlighter';
+
+jest.mock('~/blob/line_highlighter');
 
 describe('Blob Simple Viewer component', () => {
   let wrapper;
   const contentMock = `<span id="LC1">First</span>\n<span id="LC2">Second</span>\n<span id="LC3">Third</span>`;
   const blobHash = 'foo-bar';
 
-  function createComponent(content = contentMock, isRawContent = false) {
+  function createComponent(content = contentMock, isRawContent = false, glFeatures = {}) {
     wrapper = shallowMount(SimpleViewer, {
       provide: {
         blobHash,
+        glFeatures,
       },
       propsData: {
         content,
@@ -26,6 +30,20 @@ describe('Blob Simple Viewer component', () => {
     wrapper.destroy();
   });
 
+  describe('refactorBlobViewer feature flag', () => {
+    it('loads the LineHighlighter if refactorBlobViewer is enabled', () => {
+      createComponent('', false, { refactorBlobViewer: true });
+
+      expect(LineHighlighter).toHaveBeenCalled();
+    });
+
+    it('does not load the LineHighlighter if refactorBlobViewer is disabled', () => {
+      createComponent('', false, { refactorBlobViewer: false });
+
+      expect(LineHighlighter).not.toHaveBeenCalled();
+    });
+  });
+
   it('does not fail if content is empty', () => {
     const spy = jest.spyOn(window.console, 'error');
     createComponent('');