diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-03 21:17:34 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-03 21:17:34 +0300 |
commit | 0aa20f3dac8e19cc10b62e08a5c84df105a648c2 (patch) | |
tree | 3347e2aa05c399d70f82775fa58ffd4b531ba282 /app/assets/javascripts/repository | |
parent | 67daaf4021a180166ad063e3a75ea777e96586a6 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/repository')
8 files changed, 113 insertions, 128 deletions
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue index ca89e549181..a37367afa3b 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: '', @@ -78,52 +80,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: '', - environmentFormattedExternalUrl: '', - environmentExternalUrlForRouteMap: '', - canModifyBlob: false, - canCurrentUserPushToBranch: false, - archived: false, - rawPath: '', - externalStorageUrl: '', - replacePath: '', - pipelineEditorPath: '', - deletePath: '', - simpleViewer: {}, - richViewer: null, - webPath: '', - }, - ], - }, - }, - }, + project: DEFAULT_BLOB_INFO, }; }, computed: { @@ -134,7 +91,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 || []; @@ -153,11 +110,16 @@ export default { }, blobViewer() { const { fileType } = this.viewer; - return loadViewer(fileType, this.isUsingLfs); + 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; @@ -186,20 +148,22 @@ export default { : this.blobInfo.forkAndEditPath; }, isUsingLfs() { - return this.blobInfo.storedExternally && this.blobInfo.externalStorage === 'lfs'; + 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; @@ -210,12 +174,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.') }); }, @@ -223,7 +181,7 @@ export default { this.activeViewerType = newViewer || SIMPLE_BLOB_VIEWER; if (!this.blobViewer) { - this.loadLegacyViewer(this.activeViewerType); + this.loadLegacyViewer(); } }, editBlob(target) { @@ -309,7 +267,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> diff --git a/app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue index 48fa33eb558..f7b318c64d9 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue @@ -9,19 +9,17 @@ export default { GlLink, }, props: { - fileName: { - type: String, + blob: { + type: Object, required: true, }, - filePath: { - type: String, - required: true, - }, - fileSize: { - type: Number, - required: false, - default: 0, - }, + }, + data() { + return { + fileName: this.blob.name, + filePath: this.blob.rawPath, + fileSize: this.blob.rawSize || 0, + }; }, computed: { downloadFileSize() { diff --git a/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue index 83d36209bb3..5027f7877aa 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue @@ -1,15 +1,17 @@ <script> export default { props: { - url: { - type: String, - required: true, - }, - alt: { - type: String, + blob: { + type: Object, required: true, }, }, + data() { + return { + url: this.blob.rawPath, + alt: this.blob.name, + }; + }, }; </script> <template> diff --git a/app/assets/javascripts/repository/components/blob_viewers/index.js b/app/assets/javascripts/repository/components/blob_viewers/index.js index 6e4e36579d3..daa11802cc5 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/index.js +++ b/app/assets/javascripts/repository/components/blob_viewers/index.js @@ -17,34 +17,3 @@ export const loadViewer = (type, isUsingLfs) => { return viewer; }; - -export const viewerProps = (type, blob) => { - const props = { - text: { - content: blob.rawTextBlob, - autoDetect: true, // We'll eventually disable autoDetect and pass the language explicitly to reduce the footprint (https://gitlab.com/gitlab-org/gitlab/-/issues/348145) - }, - download: { - fileName: blob.name, - filePath: blob.rawPath, - fileSize: blob.rawSize, - }, - image: { - url: blob.rawPath, - alt: blob.name, - }, - video: { - url: blob.rawPath, - }, - pdf: { - url: blob.rawPath, - fileSize: blob.rawSize, - }, - lfs: { - fileName: blob.name, - filePath: blob.rawPath, - }, - }; - - return props[type] || props[blob.externalStorage]; -}; diff --git a/app/assets/javascripts/repository/components/blob_viewers/lfs_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/lfs_viewer.vue index 1596c5c91b1..6dc7e10662e 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/lfs_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_viewers/lfs_viewer.vue @@ -13,15 +13,17 @@ export default { GlSprintf, }, props: { - fileName: { - type: String, - required: true, - }, - filePath: { - type: String, + blob: { + type: Object, required: true, }, }, + data() { + return { + fileName: this.blob.name, + filePath: this.blob.rawPath, + }; + }, }; </script> diff --git a/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue index 803a357df52..c3df5984426 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue @@ -11,17 +11,17 @@ export default { tooLargeButtonText: __('Download PDF'), }, props: { - url: { - type: String, - required: true, - }, - fileSize: { - type: Number, + blob: { + type: Object, required: true, }, }, data() { - return { totalPages: 0 }; + return { + url: this.blob.rawPath, + fileSize: this.blob.rawSize, + totalPages: 0, + }; }, computed: { tooLargeToDisplay() { diff --git a/app/assets/javascripts/repository/components/blob_viewers/video_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/video_viewer.vue index dec0c4802ca..260b831f4d1 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/video_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_viewers/video_viewer.vue @@ -1,11 +1,16 @@ <script> export default { props: { - url: { - type: String, + blob: { + type: Object, required: true, }, }, + data() { + return { + url: this.blob.rawPath, + }; + }, }; </script> <template> diff --git a/app/assets/javascripts/repository/constants.js b/app/assets/javascripts/repository/constants.js index d01757d6141..e206d9bfbd2 100644 --- a/app/assets/javascripts/repository/constants.js +++ b/app/assets/javascripts/repository/constants.js @@ -25,3 +25,54 @@ export const PDF_MAX_FILE_SIZE = 10000000; // 10 MB export const PDF_MAX_PAGE_LIMIT = 50; export const ROW_APPEAR_DELAY = 150; + +export const DEFAULT_BLOB_INFO = { + 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: '', + environmentFormattedExternalUrl: '', + environmentExternalUrlForRouteMap: '', + canModifyBlob: false, + canCurrentUserPushToBranch: false, + archived: false, + rawPath: '', + externalStorageUrl: '', + replacePath: '', + pipelineEditorPath: '', + deletePath: '', + simpleViewer: {}, + richViewer: null, + webPath: '', + }, + ], + }, + }, +}; + +export const TEXT_FILE_TYPE = 'text'; + +export const LFS_STORAGE = 'lfs'; |