Merge branch '334789-expose-init-aux-viewer' into 'master'

Blob refactor: Expose initAuxiliaryViewer method

See merge request gitlab-org/gitlab!66528

app/assets/javascripts/blob/viewer/index.js

@@ -36,6 +36,34 @@ const loadRichBlobViewer = (type) => {
   }
 };
 
+const loadViewer = (viewerParam) => {
+  const viewer = viewerParam;
+  const url = viewer.getAttribute('data-url');
+
+  if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
+    return Promise.resolve(viewer);
+  }
+
+  viewer.setAttribute('data-loading', 'true');
+
+  return axios.get(url).then(({ data }) => {
+    viewer.innerHTML = data.html;
+
+    window.requestIdleCallback(() => {
+      viewer.removeAttribute('data-loading');
+    });
+
+    return viewer;
+  });
+};
+
+export const initAuxiliaryViewer = () => {
+  const auxiliaryViewer = document.querySelector('.blob-viewer[data-type="auxiliary"]');
+  if (!auxiliaryViewer) return;
+
+  loadViewer(auxiliaryViewer);
+};
+
 export const handleBlobRichViewer = (viewer, type) => {
   if (!viewer || !type) return;
 
@@ -49,27 +77,20 @@ export const handleBlobRichViewer = (viewer, type) => {
     });
 };
 
-export default class BlobViewer {
+export class BlobViewer {
   constructor() {
     performanceMarkAndMeasure({
       mark: REPO_BLOB_LOAD_VIEWER_START,
     });
     const viewer = document.querySelector('.blob-viewer[data-type="rich"]');
     const type = viewer?.dataset?.richType;
-    BlobViewer.initAuxiliaryViewer();
+    initAuxiliaryViewer();
 
     handleBlobRichViewer(viewer, type);
 
     this.initMainViewers();
   }
 
-  static initAuxiliaryViewer() {
-    const auxiliaryViewer = document.querySelector('.blob-viewer[data-type="auxiliary"]');
-    if (!auxiliaryViewer) return;
-
-    BlobViewer.loadViewer(auxiliaryViewer);
-  }
-
   initMainViewers() {
     this.$fileHolder = $('.file-holder');
     if (!this.$fileHolder.length) return;
@@ -173,7 +194,7 @@ export default class BlobViewer {
     this.activeViewer = newViewer;
 
     this.toggleCopyButtonState();
-    BlobViewer.loadViewer(newViewer)
+    loadViewer(newViewer)
       .then((viewer) => {
         $(viewer).renderGFM();
         window.requestIdleCallback(() => {
@@ -205,25 +226,4 @@ export default class BlobViewer {
         }),
       );
   }
-
-  static loadViewer(viewerParam) {
-    const viewer = viewerParam;
-    const url = viewer.getAttribute('data-url');
-
-    if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
-      return Promise.resolve(viewer);
-    }
-
-    viewer.setAttribute('data-loading', 'true');
-
-    return axios.get(url).then(({ data }) => {
-      viewer.innerHTML = data.html;
-
-      window.requestIdleCallback(() => {
-        viewer.removeAttribute('data-loading');
-      });
-
-      return viewer;
-    });
-  }
 }

app/assets/javascripts/pages/projects/artifacts/file/index.js

 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import BlobViewer from '~/blob/viewer/index';
+import { BlobViewer } from '~/blob/viewer/index';
 
 new ShortcutsNavigation(); // eslint-disable-line no-new
 new BlobViewer(); // eslint-disable-line no-new

app/assets/javascripts/pages/projects/blob/show/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import TableOfContents from '~/blob/components/table_contents.vue';
 import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
-import BlobViewer from '~/blob/viewer/index';
+import { BlobViewer } from '~/blob/viewer/index';
 import GpgBadges from '~/gpg_badges';
 import createDefaultClient from '~/lib/graphql';
 import initBlob from '~/pages/projects/init_blob';

app/assets/javascripts/pages/projects/show/index.js

 import initTree from 'ee_else_ce/repository';
 import Activities from '~/activities';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import BlobViewer from '~/blob/viewer/index';
+import { BlobViewer } from '~/blob/viewer/index';
 import { initUploadForm } from '~/blob_edit/blob_bundle';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
 import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';

spec/frontend/blob/viewer/index_spec.js

@@ -3,7 +3,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import { setTestTimeout } from 'helpers/timeout';
-import BlobViewer from '~/blob/viewer/index';
+import { BlobViewer } from '~/blob/viewer/index';
 import axios from '~/lib/utils/axios_utils';
 
 const execImmediately = (callback) => {