diff options
Diffstat (limited to 'app/assets/javascripts/repository/components/table')
| -rw-r--r-- | app/assets/javascripts/repository/components/table/index.vue | 45 | ||||
| -rw-r--r-- | app/assets/javascripts/repository/components/table/row.vue | 58 |
2 files changed, 92 insertions, 11 deletions
diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue index 10a30bd44b1..0a2ed753e38 100644 --- a/app/assets/javascripts/repository/components/table/index.vue +++ b/app/assets/javascripts/repository/components/table/index.vue @@ -1,5 +1,6 @@ <script> import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlButton } from '@gitlab/ui'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { sprintf, __ } from '../../../locale'; import getRefMixin from '../../mixins/get_ref'; import projectPathQuery from '../../queries/project_path.query.graphql'; @@ -15,13 +16,18 @@ export default { ParentRow, GlButton, }, - mixins: [getRefMixin], + mixins: [getRefMixin, glFeatureFlagMixin()], apollo: { projectPath: { query: projectPathQuery, }, }, props: { + commits: { + type: Array, + required: false, + default: () => [], + }, path: { type: String, required: true, @@ -48,6 +54,7 @@ export default { data() { return { projectPath: '', + rowNumbers: {}, }; }, computed: { @@ -73,10 +80,38 @@ export default { return ['', '/'].indexOf(this.path) === -1; }, }, + watch: { + $route: function routeChange() { + this.$options.totalRowsLoaded = -1; + }, + }, + totalRowsLoaded: -1, methods: { showMore() { this.$emit('showMore'); }, + generateRowNumber(path, id, index) { + const key = `${path}-${id}-${index}`; + if (!this.glFeatures.lazyLoadCommits) { + return 0; + } + + if (!this.rowNumbers[key] && this.rowNumbers[key] !== 0) { + this.$options.totalRowsLoaded += 1; + this.rowNumbers[key] = this.$options.totalRowsLoaded; + } + + return this.rowNumbers[key]; + }, + getCommit(fileName, type) { + if (!this.glFeatures.lazyLoadCommits) { + return {}; + } + + return this.commits.find( + (commitEntry) => commitEntry.fileName === fileName && commitEntry.type === type, + ); + }, }, }; </script> @@ -87,6 +122,7 @@ export default { <table :aria-label="tableCaption" class="table tree-table" + :class="{ 'gl-table-layout-fixed': !showParentRow }" aria-live="polite" data-qa-selector="file_tree_table" > @@ -115,12 +151,17 @@ export default { :lfs-oid="entry.lfsOid" :loading-path="loadingPath" :total-entries="totalEntries" + :row-number="generateRowNumber(entry.flatPath, entry.id, index)" + :commit-info="getCommit(entry.name, entry.type)" + v-on="$listeners" /> </template> <template v-if="isLoading"> <tr v-for="i in 5" :key="i" aria-hidden="true"> <td><gl-skeleton-loading :lines="1" class="h-auto" /></td> - <td><gl-skeleton-loading :lines="1" class="h-auto" /></td> + <td class="gl-display-none gl-sm-display-block"> + <gl-skeleton-loading :lines="1" class="h-auto" /> + </td> <td><gl-skeleton-loading :lines="1" class="ml-auto h-auto w-50" /></td> </tr> </template> diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue index 009dd19b4a5..5010d60f374 100644 --- a/app/assets/javascripts/repository/components/table/row.vue +++ b/app/assets/javascripts/repository/components/table/row.vue @@ -7,6 +7,8 @@ import { GlLoadingIcon, GlIcon, GlHoverLoadDirective, + GlSafeHtmlDirective, + GlIntersectionObserver, } from '@gitlab/ui'; import { escapeRegExp } from 'lodash'; import filesQuery from 'shared_queries/repository/files.query.graphql'; @@ -29,10 +31,12 @@ export default { GlIcon, TimeagoTooltip, FileIcon, + GlIntersectionObserver, }, directives: { GlTooltip: GlTooltipDirective, GlHoverLoad: GlHoverLoadDirective, + SafeHtml: GlSafeHtmlDirective, }, apollo: { commit: { @@ -46,10 +50,23 @@ export default { maxOffset: this.totalEntries, }; }, + skip() { + return this.glFeatures.lazyLoadCommits; + }, }, }, mixins: [getRefMixin, glFeatureFlagMixin()], props: { + commitInfo: { + type: Object, + required: false, + default: null, + }, + rowNumber: { + type: Number, + required: false, + default: null, + }, totalEntries: { type: Number, required: true, @@ -111,9 +128,13 @@ export default { data() { return { commit: null, + hasRowAppeared: false, }; }, computed: { + commitData() { + return this.glFeatures.lazyLoadCommits ? this.commitInfo : this.commit; + }, refactorBlobViewerEnabled() { return this.glFeatures.refactorBlobViewer; }, @@ -146,7 +167,10 @@ export default { return this.sha.slice(0, 8); }, hasLockLabel() { - return this.commit && this.commit.lockLabel; + return this.commitData && this.commitData.lockLabel; + }, + showSkeletonLoader() { + return !this.commitData && this.hasRowAppeared; }, }, methods: { @@ -177,7 +201,21 @@ export default { apolloQuery(query, variables) { this.$apollo.query({ query, variables }); }, + rowAppeared() { + this.hasRowAppeared = true; + + if (this.glFeatures.lazyLoadCommits) { + this.$emit('row-appear', { + rowNumber: this.rowNumber, + hasCommit: Boolean(this.commitInfo), + }); + } + }, + rowDisappeared() { + this.hasRowAppeared = false; + }, }, + safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] }, }; </script> @@ -219,7 +257,7 @@ export default { <gl-icon v-if="hasLockLabel" v-gl-tooltip - :title="commit.lockLabel" + :title="commitData.lockLabel" name="lock" :size="12" class="ml-1" @@ -227,17 +265,19 @@ export default { </td> <td class="d-none d-sm-table-cell tree-commit cursor-default"> <gl-link - v-if="commit" - :href="commit.commitPath" - :title="commit.message" + v-if="commitData" + v-safe-html:[$options.safeHtmlConfig]="commitData.titleHtml" + :href="commitData.commitPath" + :title="commitData.message" class="str-truncated-100 tree-commit-link" - v-html="commit.titleHtml /* eslint-disable-line vue/no-v-html */" /> - <gl-skeleton-loading v-else :lines="1" class="h-auto" /> + <gl-intersection-observer @appear="rowAppeared" @disappear="rowDisappeared"> + <gl-skeleton-loading v-if="showSkeletonLoader" :lines="1" class="h-auto" /> + </gl-intersection-observer> </td> <td class="tree-time-ago text-right cursor-default"> - <timeago-tooltip v-if="commit" :time="commit.committedDate" /> - <gl-skeleton-loading v-else :lines="1" class="ml-auto h-auto w-50" /> + <timeago-tooltip v-if="commitData" :time="commitData.committedDate" /> + <gl-skeleton-loading v-if="showSkeletonLoader" :lines="1" class="ml-auto h-auto w-50" /> </td> </tr> </template> |