Updated richViewer for blobs

A snippet of a special file type (notebook, pdf, etc.) require
special handling on the frontend after BE has passed all the
information. This MR connects this additional functionality to the
richViewer without creating new viewers.

app/assets/javascripts/blob/components/blob_content.vue

@@ -45,7 +45,13 @@ export default {
 
     <template v-else>
       <blob-content-error v-if="viewerError" :viewer-error="viewerError" />
-      <component :is="viewer" v-else ref="contentViewer" :content="content" />
+      <component
+        :is="viewer"
+        v-else
+        ref="contentViewer"
+        :content="content"
+        :type="activeViewer.fileType"
+      />
     </template>
   </div>
 </template>

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

@@ -5,10 +5,43 @@ import { handleLocationHash } from '../../lib/utils/common_utils';
 import axios from '../../lib/utils/axios_utils';
 import { __ } from '~/locale';
 
+const loadRichBlobViewer = type => {
+  switch (type) {
+    case 'balsamiq':
+      return import(/* webpackChunkName: 'balsamiq_viewer' */ '../balsamiq_viewer');
+    case 'notebook':
+      return import(/* webpackChunkName: 'notebook_viewer' */ '../notebook_viewer');
+    case 'openapi':
+      return import(/* webpackChunkName: 'openapi_viewer' */ '../openapi_viewer');
+    case 'pdf':
+      return import(/* webpackChunkName: 'pdf_viewer' */ '../pdf_viewer');
+    case 'sketch':
+      return import(/* webpackChunkName: 'sketch_viewer' */ '../sketch_viewer');
+    case 'stl':
+      return import(/* webpackChunkName: 'stl_viewer' */ '../stl_viewer');
+    default:
+      return Promise.resolve();
+  }
+};
+
+export const handleBlobRichViewer = (viewer, type) => {
+  if (!viewer || !type) return;
+
+  loadRichBlobViewer(type)
+    .then(module => module?.default(viewer))
+    .catch(error => {
+      Flash(__('Error loading file viewer.'));
+      throw error;
+    });
+};
+
 export default class BlobViewer {
   constructor() {
+    const viewer = document.querySelector('.blob-viewer[data-type="rich"]');
+    const type = viewer?.dataset?.richType;
     BlobViewer.initAuxiliaryViewer();
-    BlobViewer.initRichViewer();
+
+    handleBlobRichViewer(viewer, type);
 
     this.initMainViewers();
   }
@@ -20,42 +53,6 @@ export default class BlobViewer {
     BlobViewer.loadViewer(auxiliaryViewer);
   }
 
-  static initRichViewer() {
-    const viewer = document.querySelector('.blob-viewer[data-type="rich"]');
-    if (!viewer || !viewer.dataset.richType) return;
-
-    const initViewer = promise =>
-      promise
-        .then(module => module.default(viewer))
-        .catch(error => {
-          Flash(__('Error loading file viewer.'));
-          throw error;
-        });
-
-    switch (viewer.dataset.richType) {
-      case 'balsamiq':
-        initViewer(import(/* webpackChunkName: 'balsamiq_viewer' */ '../balsamiq_viewer'));
-        break;
-      case 'notebook':
-        initViewer(import(/* webpackChunkName: 'notebook_viewer' */ '../notebook_viewer'));
-        break;
-      case 'openapi':
-        initViewer(import(/* webpackChunkName: 'openapi_viewer' */ '../openapi_viewer'));
-        break;
-      case 'pdf':
-        initViewer(import(/* webpackChunkName: 'pdf_viewer' */ '../pdf_viewer'));
-        break;
-      case 'sketch':
-        initViewer(import(/* webpackChunkName: 'sketch_viewer' */ '../sketch_viewer'));
-        break;
-      case 'stl':
-        initViewer(import(/* webpackChunkName: 'stl_viewer' */ '../stl_viewer'));
-        break;
-      default:
-        break;
-    }
-  }
-
   initMainViewers() {
     this.$fileHolder = $('.file-holder');
     if (!this.$fileHolder.length) return;

app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js

@@ -4,5 +4,9 @@ export default {
       type: String,
       required: true,
     },
+    type: {
+      type: String,
+      required: true,
+    },
   },
 };

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

 <script>
 import ViewerMixin from './mixins';
+import { handleBlobRichViewer } from '~/blob/viewer';
 
 export default {
   mixins: [ViewerMixin],
+  mounted() {
+    handleBlobRichViewer(this.$refs.content, this.type);
+  },
 };
 </script>
 <template>
-  <div v-html="content"></div>
+  <div ref="content" v-html="content"></div>
 </template>

changelogs/unreleased/dmishunov-rich-viewers.yml

+---
+title: Special handling for the rich viewer on specific file types
+merge_request: 26260
+author:
+type: changed

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

 import { shallowMount } from '@vue/test-utils';
 import RichViewer from '~/vue_shared/components/blob_viewers/rich_viewer.vue';
+import { handleBlobRichViewer } from '~/blob/viewer';
+
+jest.mock('~/blob/viewer');
 
 describe('Blob Rich Viewer component', () => {
   let wrapper;
   const content = '<h1 id="markdown">Foo Bar</h1>';
+  const defaultType = 'markdown';
 
-  function createComponent() {
+  function createComponent(type = defaultType) {
     wrapper = shallowMount(RichViewer, {
       propsData: {
         content,
+        type,
       },
     });
   }
@@ -24,4 +29,8 @@ describe('Blob Rich Viewer component', () => {
   it('renders the passed content without transformations', () => {
     expect(wrapper.html()).toContain(content);
   });
+
+  it('queries for advanced viewer', () => {
+    expect(handleBlobRichViewer).toHaveBeenCalledWith(expect.anything(), defaultType);
+  });
 });

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

@@ -10,6 +10,7 @@ describe('Blob Simple Viewer component', () => {
     wrapper = shallowMount(SimpleViewer, {
       propsData: {
         content,
+        type: 'text',
       },
     });
   }