Add ability to import custom blob viewers

Adds the ability to import custom blob viewers

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

@@ -11,6 +11,7 @@ import { __ } from '~/locale';
 import blobInfoQuery from '../queries/blob_info.query.graphql';
 import BlobButtonGroup from './blob_button_group.vue';
 import BlobEdit from './blob_edit.vue';
+import { loadViewer } from './blob_viewers';
 
 export default {
   components: {
@@ -30,7 +31,7 @@ export default {
         };
       },
       result() {
-        if (this.hasRichViewer) {
+        if (this.hasRichViewer && !this.blobViewer) {
           this.loadLegacyViewer();
         }
         this.switchViewer(
@@ -118,6 +119,10 @@ export default {
     hasRenderError() {
       return Boolean(this.viewer.renderError);
     },
+    blobViewer() {
+      const { fileType } = this.viewer;
+      return loadViewer(fileType);
+    },
   },
   methods: {
     loadLegacyViewer() {
@@ -168,6 +173,7 @@ export default {
         </template>
       </blob-header>
       <blob-content
+        v-if="!blobViewer"
         :rich-viewer="legacyRichViewer"
         :blob="blobInfo"
         :content="blobInfo.rawTextBlob"
@@ -175,6 +181,7 @@ export default {
         :active-viewer="viewer"
         :loading="false"
       />
+      <component :is="blobViewer" v-else class="blob-viewer" />
     </div>
   </div>
 </template>

app/assets/javascripts/repository/components/blob_viewers/index.js

+export const loadViewer = (type) => {
+  switch (type) {
+    case 'empty':
+      // TODO (follow-up): import the empty viewer
+      return null; // () => import(/* webpackChunkName: 'blob_empty_viewer' */ './empty_viewer.vue');
+    case 'text':
+      // TODO (follow-up): import the text viewer
+      return null; // () => import(/* webpackChunkName: 'blob_text_viewer' */ './text_viewer.vue');
+    case 'download':
+      // TODO (follow-up): import the download viewer
+      return null; // () => import(/* webpackChunkName: 'blob_download_viewer' */ './download_viewer.vue');
+    default:
+      return null;
+  }
+};

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -11,8 +11,11 @@ import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobButtonGroup from '~/repository/components/blob_button_group.vue';
 import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
 import BlobEdit from '~/repository/components/blob_edit.vue';
+import { loadViewer } from '~/repository/components/blob_viewers';
 import blobInfoQuery from '~/repository/queries/blob_info.query.graphql';
 
+jest.mock('~/repository/components/blob_viewers');
+
 let wrapper;
 const simpleMockData = {
   name: 'some_file.js',
@@ -208,6 +211,19 @@ describe('Blob content viewer component', () => {
     });
   });
 
+  describe('Blob viewer', () => {
+    beforeEach(() => {
+      loadViewer.mockClear();
+    });
+
+    it('does not render a BlobContent component if a Blob viewer is available', () => {
+      loadViewer.mockReturnValueOnce(() => true);
+      factory({ mockData: { blobInfo: richMockData } });
+
+      expect(findBlobContent().exists()).toBe(false);
+    });
+  });
+
   describe('BlobHeader action slot', () => {
     const { ideEditPath, editBlobPath } = simpleMockData;