diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/app.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/app.vue | 56 |
1 files changed, 39 insertions, 17 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index 9d8d184a3f6..7827c78b658 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -1,6 +1,7 @@ <script> import { mapState, mapGetters, mapActions } from 'vuex'; import { GlLoadingIcon, GlPagination, GlSprintf } from '@gitlab/ui'; +import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import Mousetrap from 'mousetrap'; import { __ } from '~/locale'; import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils'; @@ -9,7 +10,10 @@ import PanelResizer from '~/vue_shared/components/panel_resizer.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { isSingleViewStyle } from '~/helpers/diffs_helper'; import { updateHistory } from '~/lib/utils/url_utility'; -import eventHub from '../../notes/event_hub'; + +import notesEventHub from '../../notes/event_hub'; +import eventHub from '../event_hub'; + import CompareVersions from './compare_versions.vue'; import DiffFile from './diff_file.vue'; import NoChanges from './no_changes.vue'; @@ -21,6 +25,7 @@ import MergeConflictWarning from './merge_conflict_warning.vue'; import CollapsedFilesWarning from './collapsed_files_warning.vue'; import { diffsApp } from '../utils/performance'; +import { fileByFile } from '../utils/preferences'; import { TREE_LIST_WIDTH_STORAGE_KEY, @@ -33,6 +38,7 @@ import { ALERT_OVERFLOW_HIDDEN, ALERT_MERGE_CONFLICT, ALERT_COLLAPSED_FILES, + EVT_VIEW_FILE_BY_FILE, } from '../constants'; export default { @@ -113,7 +119,7 @@ export default { required: false, default: false, }, - viewDiffsFileByFile: { + fileByFileUserPreference: { type: Boolean, required: false, default: false, @@ -153,6 +159,7 @@ export default { 'conflictResolutionPath', 'canMerge', 'hasConflicts', + 'viewDiffsFileByFile', ]), ...mapGetters('diffs', ['whichCollapsedTypes', 'isParallelView', 'currentDiffIndex']), ...mapGetters(['isNotesFetched', 'getNoteableData']), @@ -230,9 +237,6 @@ export default { } }, diffViewType() { - if (!this.glFeatures.unifiedDiffLines && (this.needsReload() || this.needsFirstLoad())) { - this.refetchDiffData(); - } this.adjustView(); }, shouldShow() { @@ -256,7 +260,7 @@ export default { projectPath: this.projectPath, dismissEndpoint: this.dismissEndpoint, showSuggestPopover: this.showSuggestPopover, - viewDiffsFileByFile: this.viewDiffsFileByFile, + viewDiffsFileByFile: fileByFile(this.fileByFileUserPreference), }); if (this.shouldShow) { @@ -279,9 +283,8 @@ export default { }, created() { this.adjustView(); + this.subscribeToEvents(); - eventHub.$once('fetchDiffData', this.fetchData); - eventHub.$on('refetchDiffData', this.refetchDiffData); this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES; this.unwatchDiscussions = this.$watch( @@ -301,9 +304,7 @@ export default { }, beforeDestroy() { diffsApp.deinstrument(); - - eventHub.$off('fetchDiffData', this.fetchData); - eventHub.$off('refetchDiffData', this.refetchDiffData); + this.unsubscribeFromEvents(); this.removeEventListeners(); }, methods: { @@ -319,9 +320,23 @@ export default { 'setHighlightedRow', 'cacheTreeListWidth', 'scrollToFile', - 'toggleShowTreeList', + 'setShowTreeList', 'navigateToDiffFileIndex', + 'setFileByFile', ]), + subscribeToEvents() { + notesEventHub.$once('fetchDiffData', this.fetchData); + notesEventHub.$on('refetchDiffData', this.refetchDiffData); + eventHub.$on(EVT_VIEW_FILE_BY_FILE, this.fileByFileListener); + }, + unsubscribeFromEvents() { + eventHub.$off(EVT_VIEW_FILE_BY_FILE, this.fileByFileListener); + notesEventHub.$off('refetchDiffData', this.refetchDiffData); + notesEventHub.$off('fetchDiffData', this.fetchData); + }, + fileByFileListener({ setting } = {}) { + this.setFileByFile({ fileByFile: setting }); + }, navigateToDiffFileNumber(number) { this.navigateToDiffFileIndex(number - 1); }, @@ -346,7 +361,7 @@ export default { this.fetchDiffFilesMeta() .then(({ real_size }) => { this.diffFilesLength = parseInt(real_size, 10); - if (toggleTree) this.hideTreeListIfJustOneFile(); + if (toggleTree) this.setTreeDisplay(); this.startDiffRendering(); }) @@ -356,6 +371,7 @@ export default { this.fetchDiffFilesBatch() .then(() => { + if (toggleTree) this.setTreeDisplay(); // Guarantee the discussions are assigned after the batch finishes. // Just watching the length of the discussions or the diff files // isn't enough, because with split diff loading, neither will @@ -372,7 +388,7 @@ export default { } if (!this.isNotesFetched) { - eventHub.$emit('fetchNotesData'); + notesEventHub.$emit('fetchNotesData'); } }, setDiscussions() { @@ -425,12 +441,17 @@ export default { this.scrollToFile(this.diffFiles[targetIndex].file_path); } }, - hideTreeListIfJustOneFile() { + setTreeDisplay() { const storedTreeShow = localStorage.getItem(MR_TREE_SHOW_KEY); + let showTreeList = true; - if ((storedTreeShow === null && this.diffFiles.length <= 1) || storedTreeShow === 'false') { - this.toggleShowTreeList(false); + if (storedTreeShow !== null) { + showTreeList = parseBoolean(storedTreeShow); + } else if (!bp.isDesktop() || (!this.isBatchLoading && this.diffFiles.length <= 1)) { + showTreeList = false; } + + return this.setShowTreeList({ showTreeList, saving: false }); }, }, minTreeWidth: MIN_TREE_WIDTH, @@ -521,6 +542,7 @@ export default { <template #total>{{ diffFiles.length }}</template> </gl-sprintf> </div> + <gl-loading-icon v-else-if="retrievingBatches" size="lg" /> </template> <no-changes v-else :changes-empty-state-illustration="changesEmptyStateIllustration" /> </div> |