diff options
Diffstat (limited to 'app/assets/javascripts/repository')
11 files changed, 81 insertions, 19 deletions
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue index 665b0698cc0..1d79818cbe8 100644 --- a/app/assets/javascripts/repository/components/blob_content_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue @@ -118,7 +118,7 @@ export default { return this.$apollo.queries.project.loading || this.isLoadingLegacyViewer; }, isBinaryFileType() { - return this.isBinary || this.viewer.fileType === 'download'; + return this.isBinary || this.blobInfo.simpleViewer?.fileType !== 'text'; }, blobInfo() { const nodes = this.project?.repository?.blobs?.nodes || []; @@ -180,7 +180,7 @@ export default { <div v-if="blobInfo && !isLoading" class="file-holder"> <blob-header :blob="blobInfo" - :hide-viewer-switcher="!hasRichViewer || isBinary" + :hide-viewer-switcher="!hasRichViewer || isBinaryFileType" :is-binary="isBinaryFileType" :active-viewer-type="viewer.type" :has-render-error="hasRenderError" @@ -188,7 +188,7 @@ export default { > <template #actions> <blob-edit - :show-edit-button="!isBinary" + :show-edit-button="!isBinaryFileType" :edit-path="blobInfo.editBlobPath" :web-ide-path="blobInfo.ideEditPath" /> diff --git a/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue new file mode 100644 index 00000000000..83d36209bb3 --- /dev/null +++ b/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue @@ -0,0 +1,19 @@ +<script> +export default { + props: { + url: { + type: String, + required: true, + }, + alt: { + type: String, + required: true, + }, + }, +}; +</script> +<template> + <div class="gl-text-center gl-p-7 gl-bg-gray-50"> + <img :src="url" :alt="alt" data-testid="image" /> + </div> +</template> diff --git a/app/assets/javascripts/repository/components/blob_viewers/index.js b/app/assets/javascripts/repository/components/blob_viewers/index.js index 4e16b16041f..3b4f4eb51fe 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/index.js +++ b/app/assets/javascripts/repository/components/blob_viewers/index.js @@ -6,6 +6,8 @@ export const loadViewer = (type) => { return () => import(/* webpackChunkName: 'blob_text_viewer' */ './text_viewer.vue'); case 'download': return () => import(/* webpackChunkName: 'blob_download_viewer' */ './download_viewer.vue'); + case 'image': + return () => import(/* webpackChunkName: 'blob_image_viewer' */ './image_viewer.vue'); default: return null; } @@ -23,5 +25,9 @@ export const viewerProps = (type, blob) => { filePath: blob.rawPath, fileSize: blob.rawSize, }, + image: { + url: blob.rawPath, + alt: blob.name, + }, }[type]; }; diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue index a7176853819..5c713796bd6 100644 --- a/app/assets/javascripts/repository/components/last_commit.vue +++ b/app/assets/javascripts/repository/components/last_commit.vue @@ -1,5 +1,4 @@ <script> -/* eslint-disable vue/no-v-html */ import { GlTooltipDirective, GlLink, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui'; import defaultAvatarUrl from 'images/no_avatar.png'; import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql'; @@ -125,7 +124,7 @@ export default { :href="commit.webPath" :class="{ 'font-italic': !commit.message }" class="commit-row-message item-title" - v-html="commit.titleHtml" + v-html="commit.titleHtml /* eslint-disable-line vue/no-v-html */" /> <gl-button v-if="commit.descriptionHtml" @@ -153,11 +152,14 @@ export default { v-if="commitDescription" :class="{ 'd-block': showDescription }" class="commit-row-description gl-mb-3" - v-html="commitDescription" + v-html="commitDescription /* eslint-disable-line vue/no-v-html */" ></pre> </div> <div class="commit-actions flex-row"> - <div v-if="commit.signatureHtml" v-html="commit.signatureHtml"></div> + <div + v-if="commit.signatureHtml" + v-html="commit.signatureHtml /* eslint-disable-line vue/no-v-html */" + ></div> <div v-if="commit.pipeline" class="ci-status-link"> <gl-link v-gl-tooltip.left diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue index b74c2333148..54e67c5ab5c 100644 --- a/app/assets/javascripts/repository/components/preview/index.vue +++ b/app/assets/javascripts/repository/components/preview/index.vue @@ -1,5 +1,4 @@ <script> -/* eslint-disable vue/no-v-html */ import { GlIcon, GlLink, GlLoadingIcon } from '@gitlab/ui'; import $ from 'jquery'; import '~/behaviors/markdown/render_gfm'; @@ -60,7 +59,11 @@ export default { </div> <div class="blob-viewer" data-qa-selector="blob_viewer_content" itemprop="about"> <gl-loading-icon v-if="loading > 0" size="md" color="dark" class="my-4 mx-auto" /> - <div v-else-if="readme" ref="readme" v-html="readme.html"></div> + <div + v-else-if="readme" + ref="readme" + v-html="readme.html /* eslint-disable-line vue/no-v-html */" + ></div> </div> </article> </template> diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue index 69eefc807d7..10a30bd44b1 100644 --- a/app/assets/javascripts/repository/components/table/index.vue +++ b/app/assets/javascripts/repository/components/table/index.vue @@ -100,9 +100,9 @@ export default { /> <template v-for="val in entries"> <table-row - v-for="entry in val" + v-for="(entry, index) in val" :id="entry.id" - :key="`${entry.flatPath}-${entry.id}`" + :key="`${entry.flatPath}-${entry.id}-${index}`" :sha="entry.sha" :project-path="projectPath" :current-path="path" diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue index fa358a75cc1..009dd19b4a5 100644 --- a/app/assets/javascripts/repository/components/table/row.vue +++ b/app/assets/javascripts/repository/components/table/row.vue @@ -1,5 +1,4 @@ <script> -/* eslint-disable vue/no-v-html */ import { GlBadge, GlLink, @@ -11,6 +10,7 @@ import { } from '@gitlab/ui'; import { escapeRegExp } from 'lodash'; import filesQuery from 'shared_queries/repository/files.query.graphql'; +import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql'; import { escapeFileUrl } from '~/lib/utils/url_utility'; import { TREE_PAGE_SIZE } from '~/repository/constants'; import FileIcon from '~/vue_shared/components/file_icon.vue'; @@ -154,7 +154,8 @@ export default { return this.isFolder ? this.loadFolder() : this.loadBlob(); }, loadFolder() { - this.apolloQuery(filesQuery, { + const query = this.glFeatures.paginatedTreeGraphqlQuery ? paginatedTreeQuery : filesQuery; + this.apolloQuery(query, { projectPath: this.projectPath, ref: this.ref, path: this.path, @@ -230,7 +231,7 @@ export default { :href="commit.commitPath" :title="commit.message" class="str-truncated-100 tree-commit-link" - v-html="commit.titleHtml" + v-html="commit.titleHtml /* eslint-disable-line vue/no-v-html */" /> <gl-skeleton-loading v-else :lines="1" class="h-auto" /> </td> diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue index c861fb8dd06..5a8ead9ae8f 100644 --- a/app/assets/javascripts/repository/components/tree_content.vue +++ b/app/assets/javascripts/repository/components/tree_content.vue @@ -1,5 +1,6 @@ <script> import filesQuery from 'shared_queries/repository/files.query.graphql'; +import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql'; import createFlash from '~/flash'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { __ } from '../../locale'; @@ -69,6 +70,9 @@ export default { hasShowMore() { return !this.clickedShowMore && this.pageLimitReached; }, + paginatedTreeEnabled() { + return this.glFeatures.paginatedTreeGraphqlQuery; + }, }, watch: { @@ -91,7 +95,7 @@ export default { return this.$apollo .query({ - query: filesQuery, + query: this.paginatedTreeEnabled ? paginatedTreeQuery : filesQuery, variables: { projectPath: this.projectPath, ref: this.ref, @@ -104,13 +108,20 @@ export default { if (data.errors) throw data.errors; if (!data?.project?.repository || originalPath !== (this.path || '/')) return; - const pageInfo = this.hasNextPage(data.project.repository.tree); + const pageInfo = this.paginatedTreeEnabled + ? data.project.repository.paginatedTree.pageInfo + : this.hasNextPage(data.project.repository.tree); this.isLoadingFiles = false; this.entries = Object.keys(this.entries).reduce( (acc, key) => ({ ...acc, - [key]: this.normalizeData(key, data.project.repository.tree[key].edges), + [key]: this.normalizeData( + key, + this.paginatedTreeEnabled + ? data.project.repository.paginatedTree.nodes[0][key] + : data.project.repository.tree[key].edges, + ), }), {}, ); @@ -132,7 +143,9 @@ export default { }); }, normalizeData(key, data) { - return this.entries[key].concat(data.map(({ node }) => node)); + return this.entries[key].concat( + this.paginatedTreeEnabled ? data.nodes : data.map(({ node }) => node), + ); }, hasNextPage(data) { return [] diff --git a/app/assets/javascripts/repository/constants.js b/app/assets/javascripts/repository/constants.js index b536bcb1875..93032bf17e2 100644 --- a/app/assets/javascripts/repository/constants.js +++ b/app/assets/javascripts/repository/constants.js @@ -11,3 +11,5 @@ export const TOGGLE_CREATE_MR_LABEL = __('Start a new merge request with these c export const COMMIT_MESSAGE_SUBJECT_MAX_LENGTH = 52; export const COMMIT_MESSAGE_BODY_MAX_LENGTH = 72; + +export const LIMITED_CONTAINER_WIDTH_CLASS = 'limit-container-width'; diff --git a/app/assets/javascripts/repository/mixins/preload.js b/app/assets/javascripts/repository/mixins/preload.js index ffc260ec84f..a2ddcbf0e4c 100644 --- a/app/assets/javascripts/repository/mixins/preload.js +++ b/app/assets/javascripts/repository/mixins/preload.js @@ -1,4 +1,5 @@ import filesQuery from 'shared_queries/repository/files.query.graphql'; +import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql'; import projectPathQuery from '../queries/project_path.query.graphql'; import getRefMixin from './get_ref'; @@ -21,7 +22,7 @@ export default { return this.$apollo .query({ - query: filesQuery, + query: gon.features.paginatedTreeGraphqlQuery ? paginatedTreeQuery : filesQuery, variables: { projectPath: this.projectPath, ref: this.ref, diff --git a/app/assets/javascripts/repository/pages/blob.vue b/app/assets/javascripts/repository/pages/blob.vue index 2645b294096..c09e2133936 100644 --- a/app/assets/javascripts/repository/pages/blob.vue +++ b/app/assets/javascripts/repository/pages/blob.vue @@ -3,11 +3,25 @@ // https://gitlab.com/gitlab-org/gitlab/-/issues/323200 import BlobContentViewer from '../components/blob_content_viewer.vue'; +import { LIMITED_CONTAINER_WIDTH_CLASS } from '../constants'; export default { components: { BlobContentViewer, }, + beforeRouteEnter(to, from, next) { + next(({ $options }) => { + $options.limitedContainerElements.forEach((el) => + el.classList.remove(LIMITED_CONTAINER_WIDTH_CLASS), + ); + }); + }, + beforeRouteLeave(to, from, next) { + this.$options.limitedContainerElements.forEach((el) => + el.classList.add(LIMITED_CONTAINER_WIDTH_CLASS), + ); + next(); + }, props: { path: { type: String, @@ -18,6 +32,7 @@ export default { required: true, }, }, + limitedContainerElements: document.querySelectorAll(`.${LIMITED_CONTAINER_WIDTH_CLASS}`), }; </script> |