diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-19 15:44:42 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-19 15:44:42 +0000 |
commit | 4555e1b21c365ed8303ffb7a3325d773c9b8bf31 (patch) | |
tree | 5423a1c7516cffe36384133ade12572cf709398d /app/assets/javascripts/repository | |
parent | e570267f2f6b326480d284e0164a6464ba4081bc (diff) | |
download | gitlab-ce-4555e1b21c365ed8303ffb7a3325d773c9b8bf31.tar.gz |
Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42
Diffstat (limited to 'app/assets/javascripts/repository')
7 files changed, 139 insertions, 59 deletions
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue index 58b42fb7859..a9701c8f8aa 100644 --- a/app/assets/javascripts/repository/components/blob_content_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue @@ -3,22 +3,21 @@ 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'; -import projectPathQuery from '../queries/project_path.query.graphql'; +import BlobHeaderEdit from './blob_header_edit.vue'; export default { components: { BlobHeader, + BlobHeaderEdit, BlobContent, GlLoadingIcon, }, apollo: { - projectPath: { - query: projectPathQuery, - }, - blobInfo: { + project: { query: blobInfoQuery, variables() { return { @@ -26,6 +25,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.') }); }, @@ -41,43 +45,70 @@ export default { type: String, required: true, }, + projectPath: { + type: String, + required: true, + }, }, data() { return { - projectPath: '', - blobInfo: { - name: '', - size: '', - rawBlob: '', - type: '', - fileType: '', - tooLarge: false, - path: '', - editBlobPath: '', - ideEditPath: '', - storedExternally: false, - rawPath: '', - externalStorageUrl: '', - replacePath: '', - deletePath: '', - canLock: false, - isLocked: false, - lockLink: '', - canModifyBlob: true, - forkPath: '', - simpleViewer: '', - richViewer: '', + activeViewerType: SIMPLE_BLOB_VIEWER, + project: { + repository: { + blobs: { + nodes: [ + { + name: '', + size: '', + rawTextBlob: '', + type: '', + fileType: '', + tooLarge: false, + path: '', + editBlobPath: '', + ideEditPath: '', + storedExternally: false, + rawPath: '', + externalStorageUrl: '', + replacePath: '', + deletePath: '', + canLock: false, + isLocked: false, + lockLink: '', + canModifyBlob: true, + forkPath: '', + simpleViewer: {}, + richViewer: null, + }, + ], + }, + }, }, }; }, computed: { isLoading() { - return this.$apollo.queries.blobInfo.loading; + return this.$apollo.queries.project.loading; }, - viewer() { - const { fileType, tooLarge, type } = this.blobInfo; + blobInfo() { + const nodes = this.project?.repository?.blobs?.nodes; - return { fileType, tooLarge, type }; + return nodes[0] || {}; + }, + viewer() { + 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; }, }, }; @@ -86,11 +117,21 @@ export default { <template> <div> <gl-loading-icon v-if="isLoading" /> - <div v-if="blobInfo && !isLoading"> - <blob-header :blob="blobInfo" /> + <div v-if="blobInfo && !isLoading" class="file-holder"> + <blob-header + :blob="blobInfo" + :hide-viewer-switcher="!hasRichViewer" + :active-viewer-type="viewer.type" + :has-render-error="hasRenderError" + @viewer-changed="switchViewer" + > + <template #actions> + <blob-header-edit :edit-path="blobInfo.editBlobPath" /> + </template> + </blob-header> <blob-content :blob="blobInfo" - :content="blobInfo.rawBlob" + :content="blobInfo.rawTextBlob" :is-raw-content="true" :active-viewer="viewer" :loading="false" diff --git a/app/assets/javascripts/repository/components/blob_header_edit.vue b/app/assets/javascripts/repository/components/blob_header_edit.vue new file mode 100644 index 00000000000..f3649895736 --- /dev/null +++ b/app/assets/javascripts/repository/components/blob_header_edit.vue @@ -0,0 +1,25 @@ +<script> +import { GlButton } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + i18n: { + edit: __('Edit'), + }, + components: { + GlButton, + }, + props: { + editPath: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <gl-button category="primary" variant="confirm" class="gl-mr-3" :href="editPath"> + {{ $options.i18n.edit }} + </gl-button> +</template> diff --git a/app/assets/javascripts/repository/components/upload_blob_modal.vue b/app/assets/javascripts/repository/components/upload_blob_modal.vue index d2ff01e7fc1..aa087d4c631 100644 --- a/app/assets/javascripts/repository/components/upload_blob_modal.vue +++ b/app/assets/javascripts/repository/components/upload_blob_modal.vue @@ -93,7 +93,7 @@ export default { text: PRIMARY_OPTIONS_TEXT, attributes: [ { - variant: 'success', + variant: 'confirm', loading: this.loading, disabled: !this.formCompleted || this.loading, }, diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js index 3a9a2adb417..501ae7e9f2f 100644 --- a/app/assets/javascripts/repository/index.js +++ b/app/assets/javascripts/repository/index.js @@ -4,6 +4,7 @@ import { parseBoolean } from '~/lib/utils/common_utils'; import { escapeFileUrl } from '~/lib/utils/url_utility'; import { __ } from '~/locale'; import initWebIdeLink from '~/pages/projects/shared/web_ide_link'; +import PerformancePlugin from '~/performance/vue_performance_plugin'; import App from './components/app.vue'; import Breadcrumbs from './components/breadcrumbs.vue'; import DirectoryDownloadLinks from './components/directory_download_links.vue'; @@ -17,6 +18,10 @@ import createRouter from './router'; import { updateFormAction } from './utils/dom'; import { setTitle } from './utils/title'; +Vue.use(PerformancePlugin, { + components: ['SimpleViewer', 'BlobContent'], +}); + export default function setupVueRepositoryList() { const el = document.getElementById('js-tree-list'); const { dataset } = el; diff --git a/app/assets/javascripts/repository/pages/blob.vue b/app/assets/javascripts/repository/pages/blob.vue index 27af398be09..2645b294096 100644 --- a/app/assets/javascripts/repository/pages/blob.vue +++ b/app/assets/javascripts/repository/pages/blob.vue @@ -13,10 +13,14 @@ export default { type: String, required: true, }, + projectPath: { + type: String, + required: true, + }, }, }; </script> <template> - <blob-content-viewer :path="path" /> + <blob-content-viewer :path="path" :project-path="projectPath" /> </template> diff --git a/app/assets/javascripts/repository/queries/blob_info.query.graphql b/app/assets/javascripts/repository/queries/blob_info.query.graphql index e0bbf12f3eb..07c076af54b 100644 --- a/app/assets/javascripts/repository/queries/blob_info.query.graphql +++ b/app/assets/javascripts/repository/queries/blob_info.query.graphql @@ -2,28 +2,32 @@ query getBlobInfo($projectPath: ID!, $filePath: String!) { project(fullPath: $projectPath) { id repository { - blobs(path: $filePath) { - name - size - rawBlob - type - fileType - tooLarge - path - editBlobPath - ideEditPath - storedExternally - rawPath - externalStorageUrl - replacePath - deletePath - canLock - isLocked - lockLink - canModifyBlob - forkPath - simpleViewer - richViewer + blobs(paths: [$filePath]) { + nodes { + webPath + name + size + rawSize + rawTextBlob + fileType + path + editBlobPath + storedExternally + rawPath + replacePath + simpleViewer { + fileType + tooLarge + type + renderError + } + richViewer { + fileType + tooLarge + type + renderError + } + } } } } diff --git a/app/assets/javascripts/repository/router.js b/app/assets/javascripts/repository/router.js index c7f7451fb55..6637d03a7a4 100644 --- a/app/assets/javascripts/repository/router.js +++ b/app/assets/javascripts/repository/router.js @@ -20,6 +20,7 @@ export default function createRouter(base, baseRef) { component: BlobPage, props: (route) => ({ path: route.params.path, + projectPath: base, }), }; |