diff options
Diffstat (limited to 'app/assets/javascripts/repository/components')
6 files changed, 80 insertions, 43 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> |