Merge branch 'dmishunov-rich-viewers' into 'master'

Updated richViewer for blobs

See merge request gitlab-org/gitlab!26260

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',
       },
     });
   }