diff options
Diffstat (limited to 'app/assets/javascripts/repository/components/blob_content_viewer.vue')
-rw-r--r-- | app/assets/javascripts/repository/components/blob_content_viewer.vue | 95 |
1 files changed, 29 insertions, 66 deletions
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue index 9368d7e6058..52963b49f68 100644 --- a/app/assets/javascripts/repository/components/blob_content_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue @@ -9,12 +9,14 @@ import axios from '~/lib/utils/axios_utils'; import { isLoggedIn } from '~/lib/utils/common_utils'; import { __ } from '~/locale'; import { redirectTo } from '~/lib/utils/url_utility'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import getRefMixin from '../mixins/get_ref'; import blobInfoQuery from '../queries/blob_info.query.graphql'; +import { DEFAULT_BLOB_INFO, TEXT_FILE_TYPE, LFS_STORAGE } from '../constants'; import BlobButtonGroup from './blob_button_group.vue'; import BlobEdit from './blob_edit.vue'; import ForkSuggestion from './fork_suggestion.vue'; -import { loadViewer, viewerProps } from './blob_viewers'; +import { loadViewer } from './blob_viewers'; export default { i18n: { @@ -29,7 +31,7 @@ export default { GlButton, ForkSuggestion, }, - mixins: [getRefMixin], + mixins: [getRefMixin, glFeatureFlagMixin()], inject: { originalBranch: { default: '', @@ -43,12 +45,11 @@ export default { projectPath: this.projectPath, filePath: this.path, ref: this.originalBranch || this.ref, + shouldFetchRawText: Boolean(this.glFeatures.highlightJs), }; }, result() { - this.switchViewer( - this.hasRichViewer && !window.location.hash ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER, - ); + this.switchViewer(this.hasRichViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER); }, error() { this.displayError(); @@ -78,50 +79,7 @@ export default { isBinary: false, isLoadingLegacyViewer: false, activeViewerType: SIMPLE_BLOB_VIEWER, - project: { - userPermissions: { - pushCode: false, - downloadCode: false, - createMergeRequestIn: false, - forkProject: false, - }, - pathLocks: { - nodes: [], - }, - repository: { - empty: true, - blobs: { - nodes: [ - { - name: '', - size: '', - rawTextBlob: '', - type: '', - fileType: '', - tooLarge: false, - path: '', - editBlobPath: '', - ideEditPath: '', - forkAndEditPath: '', - ideForkAndEditPath: '', - storedExternally: false, - externalStorage: '', - canModifyBlob: false, - canCurrentUserPushToBranch: false, - archived: false, - rawPath: '', - externalStorageUrl: '', - replacePath: '', - pipelineEditorPath: '', - deletePath: '', - simpleViewer: {}, - richViewer: null, - webPath: '', - }, - ], - }, - }, - }, + project: DEFAULT_BLOB_INFO, }; }, computed: { @@ -132,7 +90,7 @@ export default { return this.$apollo.queries.project.loading; }, isBinaryFileType() { - return this.isBinary || this.blobInfo.simpleViewer?.fileType !== 'text'; + return this.isBinary || this.blobInfo.simpleViewer?.fileType !== TEXT_FILE_TYPE; }, blobInfo() { const nodes = this.project?.repository?.blobs?.nodes || []; @@ -151,11 +109,16 @@ export default { }, blobViewer() { const { fileType } = this.viewer; - return loadViewer(fileType); + return this.shouldLoadLegacyViewer ? null : loadViewer(fileType, this.isUsingLfs); }, - viewerProps() { - const { fileType } = this.viewer; - return viewerProps(fileType, this.blobInfo); + shouldLoadLegacyViewer() { + return this.viewer.fileType === TEXT_FILE_TYPE && !this.glFeatures.highlightJs; + }, + legacyViewerLoaded() { + return ( + (this.activeViewerType === SIMPLE_BLOB_VIEWER && this.legacySimpleViewer) || + (this.activeViewerType === RICH_BLOB_VIEWER && this.legacyRichViewer) + ); }, canLock() { const { pushCode, downloadCode } = this.project.userPermissions; @@ -183,18 +146,23 @@ export default { ? this.blobInfo.ideForkAndEditPath : this.blobInfo.forkAndEditPath; }, + isUsingLfs() { + return this.blobInfo.storedExternally && this.blobInfo.externalStorage === LFS_STORAGE; + }, }, methods: { - loadLegacyViewer(type) { - if (this.legacyViewerLoaded(type)) { + loadLegacyViewer() { + if (this.legacyViewerLoaded) { return; } + const type = this.activeViewerType; + this.isLoadingLegacyViewer = true; axios .get(`${this.blobInfo.webPath}?format=json&viewer=${type}`) .then(({ data: { html, binary } }) => { - if (type === 'simple') { + if (type === SIMPLE_BLOB_VIEWER) { this.legacySimpleViewer = html; } else { this.legacyRichViewer = html; @@ -205,12 +173,6 @@ export default { }) .catch(() => this.displayError()); }, - legacyViewerLoaded(type) { - return ( - (type === SIMPLE_BLOB_VIEWER && this.legacySimpleViewer) || - (type === RICH_BLOB_VIEWER && this.legacyRichViewer) - ); - }, displayError() { createFlash({ message: __('An error occurred while loading the file. Please try again.') }); }, @@ -218,7 +180,7 @@ export default { this.activeViewerType = newViewer || SIMPLE_BLOB_VIEWER; if (!this.blobViewer) { - this.loadLegacyViewer(this.activeViewerType); + this.loadLegacyViewer(); } }, editBlob(target) { @@ -243,10 +205,11 @@ export default { <div v-if="blobInfo && !isLoading" class="file-holder"> <blob-header :blob="blobInfo" - :hide-viewer-switcher="!hasRichViewer || isBinaryFileType" + :hide-viewer-switcher="!hasRichViewer || isBinaryFileType || isUsingLfs" :is-binary="isBinaryFileType" :active-viewer-type="viewer.type" :has-render-error="hasRenderError" + :show-path="false" @viewer-changed="switchViewer" > <template #actions> @@ -303,7 +266,7 @@ export default { :hide-line-numbers="true" :loading="isLoadingLegacyViewer" /> - <component :is="blobViewer" v-else v-bind="viewerProps" class="blob-viewer" /> + <component :is="blobViewer" v-else :blob="blobInfo" class="blob-viewer" /> </div> </div> </template> |