diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue index cef5ae41106..0ab032b25d3 100644 --- a/app/assets/javascripts/repository/components/blob_content_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue @@ -3,6 +3,7 @@ import { GlLoadingIcon } from '@gitlab/ui'; import { uniqueId } from 'lodash'; import BlobContent from '~/blob/components/blob_content.vue'; import BlobHeader from '~/blob/components/blob_header.vue'; +import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants'; import createFlash from '~/flash'; import { __ } from '~/locale'; import blobInfoQuery from '../queries/blob_info.query.graphql'; @@ -22,6 +23,11 @@ export default { filePath: this.path, }; }, + result() { + this.switchViewer( + this.hasRichViewer && !window.location.hash ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER, + ); + }, error() { createFlash({ message: __('An error occurred while loading the file. Please try again.') }); }, @@ -44,6 +50,7 @@ export default { }, data() { return { + activeViewerType: SIMPLE_BLOB_VIEWER, project: { repository: { blobs: { @@ -69,7 +76,7 @@ export default { canModifyBlob: true, forkPath: '', simpleViewer: {}, - richViewer: {}, + richViewer: null, }, ], }, @@ -87,10 +94,19 @@ export default { return nodes[0] || {}; }, viewer() { - const viewer = this.blobInfo.richViewer || this.blobInfo.simpleViewer; - const { fileType, tooLarge, type } = viewer; - - return { fileType, tooLarge, type }; + const { richViewer, simpleViewer } = this.blobInfo; + return this.activeViewerType === RICH_BLOB_VIEWER ? richViewer : simpleViewer; + }, + hasRichViewer() { + return Boolean(this.blobInfo.richViewer); + }, + hasRenderError() { + return Boolean(this.viewer.renderError); + }, + }, + methods: { + switchViewer(newViewer) { + this.activeViewerType = newViewer || SIMPLE_BLOB_VIEWER; }, }, }; @@ -99,8 +115,14 @@ export default {