diff options
Diffstat (limited to 'app/assets/javascripts/repository')
19 files changed, 100 insertions, 62 deletions
diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue index 45c343c3f7f..368fa029d07 100644 --- a/app/assets/javascripts/repository/components/breadcrumbs.vue +++ b/app/assets/javascripts/repository/components/breadcrumbs.vue @@ -1,12 +1,17 @@ <script> -import { GlDropdown, GlDropdownDivider, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui'; +import { + GlDeprecatedDropdown, + GlDeprecatedDropdownDivider, + GlDeprecatedDropdownHeader, + GlDeprecatedDropdownItem, +} from '@gitlab/ui'; import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility'; import { __ } from '../../locale'; import Icon from '../../vue_shared/components/icon.vue'; import getRefMixin from '../mixins/get_ref'; -import getProjectShortPath from '../queries/getProjectShortPath.query.graphql'; -import getProjectPath from '../queries/getProjectPath.query.graphql'; -import getPermissions from '../queries/getPermissions.query.graphql'; +import projectShortPathQuery from '../queries/project_short_path.query.graphql'; +import projectPathQuery from '../queries/project_path.query.graphql'; +import permissionsQuery from '../queries/permissions.query.graphql'; const ROW_TYPES = { header: 'header', @@ -15,21 +20,21 @@ const ROW_TYPES = { export default { components: { - GlDropdown, - GlDropdownDivider, - GlDropdownHeader, - GlDropdownItem, + GlDeprecatedDropdown, + GlDeprecatedDropdownDivider, + GlDeprecatedDropdownHeader, + GlDeprecatedDropdownItem, Icon, }, apollo: { projectShortPath: { - query: getProjectShortPath, + query: projectShortPathQuery, }, projectPath: { - query: getProjectPath, + query: projectPathQuery, }, userPermissions: { - query: getPermissions, + query: permissionsQuery, variables() { return { projectPath: this.projectPath, @@ -221,11 +226,11 @@ export default { getComponent(type) { switch (type) { case ROW_TYPES.divider: - return 'gl-dropdown-divider'; + return 'gl-deprecated-dropdown-divider'; case ROW_TYPES.header: - return 'gl-dropdown-header'; + return 'gl-deprecated-dropdown-header'; default: - return 'gl-dropdown-item'; + return 'gl-deprecated-dropdown-item'; } }, }, @@ -241,7 +246,7 @@ export default { </router-link> </li> <li v-if="renderAddToTreeDropdown" class="breadcrumb-item"> - <gl-dropdown toggle-class="add-to-tree qa-add-to-tree ml-1"> + <gl-deprecated-dropdown toggle-class="add-to-tree qa-add-to-tree ml-1"> <template #button-content> <span class="sr-only">{{ __('Add to tree') }}</span> <icon name="plus" :size="16" class="float-left" /> @@ -252,7 +257,7 @@ export default { {{ item.text }} </component> </template> - </gl-dropdown> + </gl-deprecated-dropdown> </li> </ol> </nav> diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue index c5c99d56e2a..3337ce6c6df 100644 --- a/app/assets/javascripts/repository/components/last_commit.vue +++ b/app/assets/javascripts/repository/components/last_commit.vue @@ -8,8 +8,8 @@ import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue'; import CiIcon from '../../vue_shared/components/ci_icon.vue'; import ClipboardButton from '../../vue_shared/components/clipboard_button.vue'; import getRefMixin from '../mixins/get_ref'; -import getProjectPath from '../queries/getProjectPath.query.graphql'; -import pathLastCommit from '../queries/pathLastCommit.query.graphql'; +import projectPathQuery from '../queries/project_path.query.graphql'; +import pathLastCommitQuery from '../queries/path_last_commit.query.graphql'; export default { components: { @@ -28,10 +28,10 @@ export default { mixins: [getRefMixin], apollo: { projectPath: { - query: getProjectPath, + query: projectPathQuery, }, commit: { - query: pathLastCommit, + query: pathLastCommitQuery, variables() { return { projectPath: this.projectPath, @@ -102,7 +102,7 @@ export default { <template v-else-if="commit"> <user-avatar-link v-if="commit.author" - :link-href="commit.author.webUrl" + :link-href="commit.author.webPath" :img-src="commit.author.avatarUrl" :img-size="40" class="avatar-cell" @@ -118,13 +118,13 @@ export default { <div class="commit-detail flex-list"> <div class="commit-content qa-commit-content"> <gl-link - :href="commit.webUrl" + :href="commit.webPath" :class="{ 'font-italic': !commit.message }" class="commit-row-message item-title" v-html="commit.titleHtml" /> <gl-deprecated-button - v-if="commit.description" + v-if="commit.descriptionHtml" :class="{ open: showDescription }" :aria-label="__('Show commit description')" class="text-expander" @@ -135,7 +135,7 @@ export default { <div class="committer"> <gl-link v-if="commit.author" - :href="commit.author.webUrl" + :href="commit.author.webPath" class="commit-author-link js-user-link" > {{ commit.author.name }} @@ -147,11 +147,11 @@ export default { <timeago-tooltip :time="commit.authoredDate" tooltip-placement="bottom" /> </div> <pre - v-if="commit.description" + v-if="commit.descriptionHtml" :class="{ 'd-block': showDescription }" class="commit-row-description gl-mb-3" - >{{ commit.description }}</pre - > + v-html="commit.descriptionHtml" + ></pre> </div> <div class="commit-actions flex-row"> <div v-if="commit.signatureHtml" v-html="commit.signatureHtml"></div> diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue index f96523bb497..013092ffefd 100644 --- a/app/assets/javascripts/repository/components/preview/index.vue +++ b/app/assets/javascripts/repository/components/preview/index.vue @@ -3,15 +3,15 @@ import $ from 'jquery'; import '~/behaviors/markdown/render_gfm'; import { GlLink, GlLoadingIcon } from '@gitlab/ui'; import { handleLocationHash } from '~/lib/utils/common_utils'; -import getReadmeQuery from '../../queries/getReadme.query.graphql'; +import readmeQuery from '../../queries/readme.query.graphql'; export default { apollo: { readme: { - query: getReadmeQuery, + query: readmeQuery, variables() { return { - url: this.blob.webUrl, + url: this.blob.webPath, }; }, loadingKey: 'loading', @@ -51,7 +51,7 @@ export default { <div class="js-file-title file-title-flex-parent"> <div class="file-header-content"> <i aria-hidden="true" class="fa fa-file-text-o fa-fw"></i> - <gl-link :href="blob.webUrl"> + <gl-link :href="blob.webPath"> <strong>{{ blob.name }}</strong> </gl-link> </div> diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue index 5e0ad7acdfd..d0cc617d755 100644 --- a/app/assets/javascripts/repository/components/table/index.vue +++ b/app/assets/javascripts/repository/components/table/index.vue @@ -2,7 +2,7 @@ import { GlSkeletonLoading } from '@gitlab/ui'; import { sprintf, __ } from '../../../locale'; import getRefMixin from '../../mixins/get_ref'; -import getProjectPath from '../../queries/getProjectPath.query.graphql'; +import projectPathQuery from '../../queries/project_path.query.graphql'; import TableHeader from './header.vue'; import TableRow from './row.vue'; import ParentRow from './parent_row.vue'; @@ -17,7 +17,7 @@ export default { mixins: [getRefMixin], apollo: { projectPath: { - query: getProjectPath, + query: projectPathQuery, }, }, props: { @@ -96,7 +96,7 @@ export default { :name="entry.name" :path="entry.flatPath" :type="entry.type" - :url="entry.webUrl" + :url="entry.webUrl || entry.webPath" :mode="entry.mode" :submodule-tree-url="entry.treeUrl" :lfs-oid="entry.lfsOid" diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue index 615e329f415..d2fef6693e2 100644 --- a/app/assets/javascripts/repository/components/table/row.vue +++ b/app/assets/javascripts/repository/components/table/row.vue @@ -12,7 +12,7 @@ import { escapeFileUrl } from '~/lib/utils/url_utility'; import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; import getRefMixin from '../../mixins/get_ref'; -import getCommit from '../../queries/getCommit.query.graphql'; +import commitQuery from '../../queries/commit.query.graphql'; export default { components: { @@ -29,7 +29,7 @@ export default { }, apollo: { commit: { - query: getCommit, + query: commitQuery, variables() { return { fileName: this.name, diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue index 59ba1caa8c9..fe3065a2145 100644 --- a/app/assets/javascripts/repository/components/tree_content.vue +++ b/app/assets/javascripts/repository/components/tree_content.vue @@ -1,24 +1,28 @@ <script> -import createFlash from '~/flash'; +import { GlButton } from '@gitlab/ui'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; import { __ } from '../../locale'; import FileTable from './table/index.vue'; import getRefMixin from '../mixins/get_ref'; -import getFiles from '../queries/getFiles.query.graphql'; -import getProjectPath from '../queries/getProjectPath.query.graphql'; +import filesQuery from '../queries/files.query.graphql'; +import projectPathQuery from '../queries/project_path.query.graphql'; import FilePreview from './preview/index.vue'; import { readmeFile } from '../utils/readme'; +const LIMIT = 1000; const PAGE_SIZE = 100; +export const INITIAL_FETCH_COUNT = LIMIT / PAGE_SIZE; export default { components: { FileTable, FilePreview, + GlButton, }, mixins: [getRefMixin], apollo: { projectPath: { - query: getProjectPath, + query: projectPathQuery, }, }, props: { @@ -43,12 +47,19 @@ export default { blobs: [], }, isLoadingFiles: false, + isOverLimit: false, + clickedShowMore: false, + pageSize: PAGE_SIZE, + fetchCounter: 0, }; }, computed: { readme() { return readmeFile(this.entries.blobs); }, + hasShowMore() { + return !this.clickedShowMore && this.fetchCounter === INITIAL_FETCH_COUNT; + }, }, watch: { @@ -70,13 +81,13 @@ export default { return this.$apollo .query({ - query: getFiles, + query: filesQuery, variables: { projectPath: this.projectPath, ref: this.ref, path: this.path || '/', nextPageCursor: this.nextPageCursor, - pageSize: PAGE_SIZE, + pageSize: this.pageSize, }, }) .then(({ data }) => { @@ -96,7 +107,11 @@ export default { if (pageInfo?.hasNextPage) { this.nextPageCursor = pageInfo.endCursor; - this.fetchFiles(); + this.fetchCounter += 1; + if (this.fetchCounter < INITIAL_FETCH_COUNT || this.clickedShowMore) { + this.fetchFiles(); + this.clickedShowMore = false; + } } }) .catch(error => { @@ -112,6 +127,10 @@ export default { .concat(data.trees.pageInfo, data.submodules.pageInfo, data.blobs.pageInfo) .find(({ hasNextPage }) => hasNextPage); }, + showMore() { + this.clickedShowMore = true; + this.fetchFiles(); + }, }, }; </script> @@ -124,6 +143,19 @@ export default { :is-loading="isLoadingFiles" :loading-path="loadingPath" /> + <div + v-if="hasShowMore" + class="gl-border-1 gl-border-gray-100 gl-rounded-base gl-border-t-none gl-border-b-solid gl-border-l-solid gl-border-r-solid gl-rounded-top-right-none gl-rounded-top-left-none gl-mt-n1" + > + <gl-button + variant="link" + class="gl-display-flex gl-w-full gl-py-4!" + :loading="isLoadingFiles" + @click="showMore" + > + {{ s__('ProjectFileTree|Show more') }} + </gl-button> + </div> <file-preview v-if="readme" :blob="readme" /> </div> </template> diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js index 4f80ab4ff5d..187bbfed125 100644 --- a/app/assets/javascripts/repository/index.js +++ b/app/assets/javascripts/repository/index.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import { escapeFileUrl } from '../lib/utils/url_utility'; import createRouter from './router'; import App from './components/app.vue'; import Breadcrumbs from './components/breadcrumbs.vue'; @@ -109,7 +110,7 @@ export default function setupVueRepositoryList() { return h(TreeActionLink, { props: { path: `${historyLink}/${ - this.$route.params.path ? encodeURIComponent(this.$route.params.path) : '' + this.$route.params.path ? escapeFileUrl(this.$route.params.path) : '' }`, text: __('History'), }, diff --git a/app/assets/javascripts/repository/log_tree.js b/app/assets/javascripts/repository/log_tree.js index cef17bf7acb..704dd88aabe 100644 --- a/app/assets/javascripts/repository/log_tree.js +++ b/app/assets/javascripts/repository/log_tree.js @@ -1,8 +1,8 @@ import { normalizeData } from 'ee_else_ce/repository/utils/commit'; import axios from '~/lib/utils/axios_utils'; -import getCommits from './queries/getCommits.query.graphql'; -import getProjectPath from './queries/getProjectPath.query.graphql'; -import getRef from './queries/getRef.query.graphql'; +import commitsQuery from './queries/commits.query.graphql'; +import projectPathQuery from './queries/project_path.query.graphql'; +import refQuery from './queries/ref.query.graphql'; let fetchpromise; let resolvers = []; @@ -22,8 +22,8 @@ export function fetchLogsTree(client, path, offset, resolver = null) { if (fetchpromise) return fetchpromise; - const { projectPath } = client.readQuery({ query: getProjectPath }); - const { escapedRef } = client.readQuery({ query: getRef }); + const { projectPath } = client.readQuery({ query: projectPathQuery }); + const { escapedRef } = client.readQuery({ query: refQuery }); fetchpromise = axios .get( @@ -36,10 +36,10 @@ export function fetchLogsTree(client, path, offset, resolver = null) { ) .then(({ data, headers }) => { const headerLogsOffset = headers['more-logs-offset']; - const { commits } = client.readQuery({ query: getCommits }); + const { commits } = client.readQuery({ query: commitsQuery }); const newCommitData = [...commits, ...normalizeData(data, path)]; client.writeQuery({ - query: getCommits, + query: commitsQuery, data: { commits: newCommitData }, }); diff --git a/app/assets/javascripts/repository/mixins/get_ref.js b/app/assets/javascripts/repository/mixins/get_ref.js index 99d19b77c35..1f1880a48c7 100644 --- a/app/assets/javascripts/repository/mixins/get_ref.js +++ b/app/assets/javascripts/repository/mixins/get_ref.js @@ -1,9 +1,9 @@ -import getRef from '../queries/getRef.query.graphql'; +import refQuery from '../queries/ref.query.graphql'; export default { apollo: { ref: { - query: getRef, + query: refQuery, manual: true, result({ data, loading }) { if (!loading) { diff --git a/app/assets/javascripts/repository/mixins/preload.js b/app/assets/javascripts/repository/mixins/preload.js index cb6c2294679..cb1d7f3aac9 100644 --- a/app/assets/javascripts/repository/mixins/preload.js +++ b/app/assets/javascripts/repository/mixins/preload.js @@ -1,12 +1,12 @@ -import getFiles from '../queries/getFiles.query.graphql'; +import filesQuery from '../queries/files.query.graphql'; import getRefMixin from './get_ref'; -import getProjectPath from '../queries/getProjectPath.query.graphql'; +import projectPathQuery from '../queries/project_path.query.graphql'; export default { mixins: [getRefMixin], apollo: { projectPath: { - query: getProjectPath, + query: projectPathQuery, }, }, data() { @@ -21,7 +21,7 @@ export default { return this.$apollo .query({ - query: getFiles, + query: filesQuery, variables: { projectPath: this.projectPath, ref: this.ref, diff --git a/app/assets/javascripts/repository/queries/getCommit.query.graphql b/app/assets/javascripts/repository/queries/commit.query.graphql index e4aeaaff8fe..e4aeaaff8fe 100644 --- a/app/assets/javascripts/repository/queries/getCommit.query.graphql +++ b/app/assets/javascripts/repository/queries/commit.query.graphql diff --git a/app/assets/javascripts/repository/queries/getCommits.query.graphql b/app/assets/javascripts/repository/queries/commits.query.graphql index 0976b8f32d7..0976b8f32d7 100644 --- a/app/assets/javascripts/repository/queries/getCommits.query.graphql +++ b/app/assets/javascripts/repository/queries/commits.query.graphql diff --git a/app/assets/javascripts/repository/queries/getFiles.query.graphql b/app/assets/javascripts/repository/queries/files.query.graphql index feb89df0492..9e9f5303dd4 100644 --- a/app/assets/javascripts/repository/queries/getFiles.query.graphql +++ b/app/assets/javascripts/repository/queries/files.query.graphql @@ -22,7 +22,7 @@ query getFiles( edges { node { ...TreeEntry - webUrl + webPath } } pageInfo { @@ -46,7 +46,7 @@ query getFiles( node { ...TreeEntry mode - webUrl + webPath lfsOid } } diff --git a/app/assets/javascripts/repository/queries/pathLastCommit.query.graphql b/app/assets/javascripts/repository/queries/path_last_commit.query.graphql index f54f09fd647..51f3f790a5d 100644 --- a/app/assets/javascripts/repository/queries/pathLastCommit.query.graphql +++ b/app/assets/javascripts/repository/queries/path_last_commit.query.graphql @@ -6,16 +6,16 @@ query pathLastCommit($projectPath: ID!, $path: String, $ref: String!) { sha title titleHtml - description + descriptionHtml message - webUrl + webPath authoredDate authorName authorGravatar author { name avatarUrl - webUrl + webPath } signatureHtml pipelines(ref: $ref, first: 1) { diff --git a/app/assets/javascripts/repository/queries/getPermissions.query.graphql b/app/assets/javascripts/repository/queries/permissions.query.graphql index 092fa44e2d0..092fa44e2d0 100644 --- a/app/assets/javascripts/repository/queries/getPermissions.query.graphql +++ b/app/assets/javascripts/repository/queries/permissions.query.graphql diff --git a/app/assets/javascripts/repository/queries/getProjectPath.query.graphql b/app/assets/javascripts/repository/queries/project_path.query.graphql index 74e73e07577..74e73e07577 100644 --- a/app/assets/javascripts/repository/queries/getProjectPath.query.graphql +++ b/app/assets/javascripts/repository/queries/project_path.query.graphql diff --git a/app/assets/javascripts/repository/queries/getProjectShortPath.query.graphql b/app/assets/javascripts/repository/queries/project_short_path.query.graphql index 34eb26598c2..34eb26598c2 100644 --- a/app/assets/javascripts/repository/queries/getProjectShortPath.query.graphql +++ b/app/assets/javascripts/repository/queries/project_short_path.query.graphql diff --git a/app/assets/javascripts/repository/queries/getReadme.query.graphql b/app/assets/javascripts/repository/queries/readme.query.graphql index cf056330133..cf056330133 100644 --- a/app/assets/javascripts/repository/queries/getReadme.query.graphql +++ b/app/assets/javascripts/repository/queries/readme.query.graphql diff --git a/app/assets/javascripts/repository/queries/getRef.query.graphql b/app/assets/javascripts/repository/queries/ref.query.graphql index 91afb751626..91afb751626 100644 --- a/app/assets/javascripts/repository/queries/getRef.query.graphql +++ b/app/assets/javascripts/repository/queries/ref.query.graphql |