Fix scroll to line number

Fixes the scroll to line number bug in the blob viewer

Changelog: fixed

app/assets/javascripts/repository/components/blob_content_viewer.vue

@@ -12,6 +12,7 @@ import { redirectTo } from '~/lib/utils/url_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 import CodeIntelligence from '~/code_navigation/components/app.vue';
+import LineHighlighter from '~/blob/line_highlighter';
 import getRefMixin from '../mixins/get_ref';
 import blobInfoQuery from '../queries/blob_info.query.graphql';
 import userInfoQuery from '../queries/user_info.query.graphql';
@@ -192,6 +193,7 @@ export default {
 
             window.requestIdleCallback(() => {
               this.isRenderingLegacyTextViewer = false;
+              new LineHighlighter(); // eslint-disable-line no-new
             });
           } else {
             this.legacyRichViewer = html;

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';
 
@@ -13,7 +11,7 @@ export default {
   directives: {
     SafeHtml: GlSafeHtmlDirective,
   },
-  mixins: [ViewerMixin, glFeatureFlagsMixin()],
+  mixins: [ViewerMixin],
   inject: ['blobHash'],
   data() {
     return {
@@ -21,21 +19,14 @@ export default {
     };
   },
   computed: {
-    refactorBlobViewerEnabled() {
-      return this.glFeatures.refactorBlobViewer;
-    },
-
     lineNumbers() {
       return this.content.split('\n').length;
     },
   },
   mounted() {
-    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);
+    const { hash } = window.location;
+    if (hash) {
+      this.scrollToLine(hash, true);
     }
   },
   methods: {

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -25,6 +25,7 @@ import { redirectTo } from '~/lib/utils/url_utility';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import httpStatusCodes from '~/lib/utils/http_status';
+import LineHighlighter from '~/blob/line_highlighter';
 import {
   simpleViewerMock,
   richViewerMock,
@@ -39,6 +40,7 @@ import {
 jest.mock('~/repository/components/blob_viewers');
 jest.mock('~/lib/utils/url_utility');
 jest.mock('~/lib/utils/common_utils');
+jest.mock('~/blob/line_highlighter');
 
 let wrapper;
 let mockResolver;
@@ -173,20 +175,30 @@ describe('Blob content viewer component', () => {
     });
 
     describe('legacy viewers', () => {
+      const legacyViewerUrl = 'some_file.js?format=json&viewer=simple';
+      const fileType = 'text';
+      const highlightJs = false;
+
       it('loads a legacy viewer when a the fileType is text and the highlightJs feature is turned off', async () => {
         await createComponent({
-          blob: { ...simpleViewerMock, fileType: 'text', highlightJs: false },
+          blob: { ...simpleViewerMock, fileType, highlightJs },
         });
 
         expect(mockAxios.history.get).toHaveLength(1);
-        expect(mockAxios.history.get[0].url).toEqual('some_file.js?format=json&viewer=simple');
+        expect(mockAxios.history.get[0].url).toBe(legacyViewerUrl);
       });
 
       it('loads a legacy viewer when a viewer component is not available', async () => {
         await createComponent({ blob: { ...simpleViewerMock, fileType: 'unknown' } });
 
         expect(mockAxios.history.get).toHaveLength(1);
-        expect(mockAxios.history.get[0].url).toEqual('some_file.js?format=json&viewer=simple');
+        expect(mockAxios.history.get[0].url).toBe(legacyViewerUrl);
+      });
+
+      it('loads the LineHighlighter', async () => {
+        mockAxios.onGet(legacyViewerUrl).replyOnce(httpStatusCodes.OK, 'test');
+        await createComponent({ blob: { ...simpleViewerMock, fileType, highlightJs } });
+        expect(LineHighlighter).toHaveBeenCalled();
       });
     });
   });

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

@@ -2,9 +2,6 @@ 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;
@@ -30,20 +27,6 @@ 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('');