diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components')
7 files changed, 79 insertions, 31 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index 19b85710710..8ea443814e9 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -1,11 +1,12 @@ <script> import { mapState, mapGetters, mapActions } from 'vuex'; +import { GlLoadingIcon } from '@gitlab/ui'; +import Mousetrap from 'mousetrap'; import Icon from '~/vue_shared/components/icon.vue'; import { __ } from '~/locale'; import createFlash from '~/flash'; -import { GlLoadingIcon } from '@gitlab/ui'; import PanelResizer from '~/vue_shared/components/panel_resizer.vue'; -import Mousetrap from 'mousetrap'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import eventHub from '../../notes/event_hub'; import CompareVersions from './compare_versions.vue'; import DiffFile from './diff_file.vue'; @@ -36,11 +37,20 @@ export default { GlLoadingIcon, PanelResizer, }, + mixins: [glFeatureFlagsMixin()], props: { endpoint: { type: String, required: true, }, + endpointMetadata: { + type: String, + required: true, + }, + endpointBatch: { + type: String, + required: true, + }, projectPath: { type: String, required: true, @@ -92,6 +102,7 @@ export default { computed: { ...mapState({ isLoading: state => state.diffs.isLoading, + isBatchLoading: state => state.diffs.isBatchLoading, diffFiles: state => state.diffs.diffFiles, diffViewType: state => state.diffs.diffViewType, mergeRequestDiffs: state => state.diffs.mergeRequestDiffs, @@ -133,6 +144,9 @@ export default { isLimitedContainer() { return !this.showTreeList && !this.isParallelView && !this.isFluidLayout; }, + shouldSetDiscussions() { + return this.isNotesFetched && !this.assignedDiscussions && !this.isLoading; + }, }, watch: { diffViewType() { @@ -149,13 +163,21 @@ export default { }, isLoading: 'adjustView', showTreeList: 'adjustView', + shouldSetDiscussions(newVal) { + if (newVal) { + this.setDiscussions(); + } + }, }, mounted() { this.setBaseConfig({ endpoint: this.endpoint, + endpointMetadata: this.endpointMetadata, + endpointBatch: this.endpointBatch, projectPath: this.projectPath, dismissEndpoint: this.dismissEndpoint, showSuggestPopover: this.showSuggestPopover, + useSingleDiffStyle: this.glFeatures.singleMrDiffView, }); if (this.shouldShow) { @@ -185,6 +207,8 @@ export default { ...mapActions('diffs', [ 'setBaseConfig', 'fetchDiffFiles', + 'fetchDiffFilesMeta', + 'fetchDiffFilesBatch', 'startRenderDiffsQueue', 'assignDiscussionsToDiff', 'setHighlightedRow', @@ -196,31 +220,56 @@ export default { this.assignedDiscussions = false; this.fetchData(false); }, + startDiffRendering() { + requestIdleCallback( + () => { + this.startRenderDiffsQueue(); + }, + { timeout: 1000 }, + ); + }, fetchData(toggleTree = true) { - this.fetchDiffFiles() - .then(() => { - if (toggleTree) { - this.hideTreeListIfJustOneFile(); - } + if (this.glFeatures.diffsBatchLoad) { + this.fetchDiffFilesMeta() + .then(() => { + if (toggleTree) this.hideTreeListIfJustOneFile(); - requestIdleCallback( - () => { - this.setDiscussions(); - this.startRenderDiffsQueue(); - }, - { timeout: 1000 }, - ); - }) - .catch(() => { - createFlash(__('Something went wrong on our end. Please try again!')); - }); + this.startDiffRendering(); + }) + .catch(() => { + createFlash(__('Something went wrong on our end. Please try again!')); + }); + + this.fetchDiffFilesBatch() + .then(() => this.startDiffRendering()) + .catch(() => { + createFlash(__('Something went wrong on our end. Please try again!')); + }); + } else { + this.fetchDiffFiles() + .then(() => { + if (toggleTree) { + this.hideTreeListIfJustOneFile(); + } + + requestIdleCallback( + () => { + this.startRenderDiffsQueue(); + }, + { timeout: 1000 }, + ); + }) + .catch(() => { + createFlash(__('Something went wrong on our end. Please try again!')); + }); + } if (!this.isNotesFetched) { eventHub.$emit('fetchNotesData'); } }, setDiscussions() { - if (this.isNotesFetched && !this.assignedDiscussions && !this.isLoading) { + if (this.shouldSetDiscussions) { this.assignedDiscussions = true; requestIdleCallback( @@ -324,7 +373,8 @@ export default { }" > <commit-widget v-if="commit" :commit="commit" /> - <template v-if="renderDiffFiles"> + <div v-if="isBatchLoading" class="loading"><gl-loading-icon /></div> + <template v-else-if="renderDiffFiles"> <diff-file v-for="file in diffFiles" :key="file.newPath" diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue index 839ab542377..23fbfc2b74b 100644 --- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue +++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue @@ -1,7 +1,7 @@ <script> +import { mapState, mapActions } from 'vuex'; import createFlash from '~/flash'; import { s__ } from '~/locale'; -import { mapState, mapActions } from 'vuex'; import Icon from '~/vue_shared/components/icon.vue'; import { UNFOLD_COUNT } from '../constants'; import * as utils from '../store/utils'; @@ -226,7 +226,7 @@ export default { <icon :size="12" name="expand-up" aria-hidden="true" /> </a> <a class="mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()"> - <span>{{ s__('Diffs|Show all lines') }}</span> + <span>{{ s__('Diffs|Show unchanged lines') }}</span> </a> <a v-if="canExpandDown" diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue index 9236f0d5349..0dbff4ffcec 100644 --- a/app/assets/javascripts/diffs/components/diff_file.vue +++ b/app/assets/javascripts/diffs/components/diff_file.vue @@ -1,9 +1,9 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; import _ from 'underscore'; +import { GlLoadingIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import createFlash from '~/flash'; -import { GlLoadingIcon } from '@gitlab/ui'; import eventHub from '../../notes/event_hub'; import DiffFileHeader from './diff_file_header.vue'; import DiffContent from './diff_content.vue'; diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 665328eb234..91d374eafc0 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -1,17 +1,17 @@ <script> import _ from 'underscore'; import { mapActions, mapGetters } from 'vuex'; -import { polyfillSticky, stickyMonitor } from '~/lib/utils/sticky'; +import { GlButton, GlTooltipDirective, GlTooltip, GlLoadingIcon } from '@gitlab/ui'; +import { polyfillSticky } from '~/lib/utils/sticky'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import Icon from '~/vue_shared/components/icon.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; -import { GlButton, GlTooltipDirective, GlTooltip, GlLoadingIcon } from '@gitlab/ui'; import { truncateSha } from '~/lib/utils/text_utility'; import { __, s__, sprintf } from '~/locale'; import { diffViewerModes } from '~/ide/constants'; import EditButton from './edit_button.vue'; import DiffStats from './diff_stats.vue'; -import { scrollToElement, contentTop } from '~/lib/utils/common_utils'; +import { scrollToElement } from '~/lib/utils/common_utils'; export default { components: { @@ -127,8 +127,6 @@ export default { }, mounted() { polyfillSticky(this.$refs.header); - const fileHeaderHeight = this.$refs.header.clientHeight; - stickyMonitor(this.$refs.header, contentTop() - fileHeaderHeight - 1, false); }, methods: { ...mapActions('diffs', [ diff --git a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue index 7ede7a4f430..be19d8520b5 100644 --- a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue +++ b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue @@ -1,9 +1,9 @@ <script> +import { GlTooltipDirective } from '@gitlab/ui'; import { n__ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; import { truncate } from '~/lib/utils/text_utility'; import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; -import { GlTooltipDirective } from '@gitlab/ui'; import { COUNT_OF_AVATARS_IN_GUTTER, LENGTH_OF_AVATAR_TOOLTIP } from '../constants'; export default { diff --git a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue index 434d554d148..34aa15856d2 100644 --- a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue +++ b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue @@ -72,7 +72,7 @@ export default { lineCode() { return ( this.line.line_code || - (this.line.left && this.line.line.left.line_code) || + (this.line.left && this.line.left.line_code) || (this.line.right && this.line.right.line_code) ); }, diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue index da0cdbe467b..f81f50f8490 100644 --- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue +++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue @@ -1,7 +1,7 @@ <script> import { mapState, mapGetters, mapActions } from 'vuex'; -import { s__ } from '~/locale'; import diffLineNoteFormMixin from 'ee_else_ce/notes/mixins/diff_line_note_form'; +import { s__ } from '~/locale'; import noteForm from '../../notes/components/note_form.vue'; import autosave from '../../notes/mixins/autosave'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; |