diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-26 15:08:44 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-26 15:08:44 +0300 |
commit | 6e320396b26439a0c3fa1df1ce9f4c2395518227 (patch) | |
tree | 46e646052ba87e38f6e6866692d92cdb01878189 /app/assets/javascripts/diffs | |
parent | c60d68bbaca234673f2f689e1f7444ce8edbcf86 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/diffs')
-rw-r--r-- | app/assets/javascripts/diffs/components/app.vue | 13 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/components/compare_versions.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_file.vue | 129 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_file_header.vue | 6 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/constants.js | 4 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/diff_file.js | 24 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/store/actions.js | 18 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/store/getters.js | 12 | ||||
-rw-r--r-- | app/assets/javascripts/diffs/store/mutations.js | 34 |
9 files changed, 180 insertions, 64 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index 085f951147f..a800cc8edc8 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -124,7 +124,6 @@ export default { return { treeWidth, diffFilesLength: 0, - collapsedWarningDismissed: false, }; }, computed: { @@ -153,7 +152,7 @@ export default { 'canMerge', 'hasConflicts', ]), - ...mapGetters('diffs', ['hasCollapsedFile', 'isParallelView', 'currentDiffIndex']), + ...mapGetters('diffs', ['whichCollapsedTypes', 'isParallelView', 'currentDiffIndex']), ...mapGetters(['isNotesFetched', 'getNoteableData']), diffs() { if (!this.viewDiffsFileByFile) { @@ -206,11 +205,7 @@ export default { visible = this.$options.alerts.ALERT_OVERFLOW_HIDDEN; } else if (this.isDiffHead && this.hasConflicts) { visible = this.$options.alerts.ALERT_MERGE_CONFLICT; - } else if ( - this.hasCollapsedFile && - !this.collapsedWarningDismissed && - !this.viewDiffsFileByFile - ) { + } else if (this.whichCollapsedTypes.automatic && !this.viewDiffsFileByFile) { visible = this.$options.alerts.ALERT_COLLAPSED_FILES; } @@ -429,9 +424,6 @@ export default { this.toggleShowTreeList(false); } }, - dismissCollapsedWarning() { - this.collapsedWarningDismissed = true; - }, }, minTreeWidth: MIN_TREE_WIDTH, maxTreeWidth: MAX_TREE_WIDTH, @@ -464,7 +456,6 @@ export default { <collapsed-files-warning v-if="visibleWarning == $options.alerts.ALERT_COLLAPSED_FILES" :limited="isLimitedContainer" - @dismiss="dismissCollapsedWarning" /> <div diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue index b1ebd8e6ebc..59c64303c60 100644 --- a/app/assets/javascripts/diffs/components/compare_versions.vue +++ b/app/assets/javascripts/diffs/components/compare_versions.vue @@ -38,7 +38,7 @@ export default { }, computed: { ...mapGetters('diffs', [ - 'hasCollapsedFile', + 'whichCollapsedTypes', 'diffCompareDropdownTargetVersions', 'diffCompareDropdownSourceVersions', ]), @@ -129,7 +129,7 @@ export default { {{ __('Show latest version') }} </gl-button> <gl-button - v-show="hasCollapsedFile" + v-show="whichCollapsedTypes.any" variant="default" class="gl-mr-3" @click="expandAllFiles" diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue index 529723a349d..0d5181d5720 100644 --- a/app/assets/javascripts/diffs/components/diff_file.vue +++ b/app/assets/javascripts/diffs/components/diff_file.vue @@ -10,6 +10,8 @@ import eventHub from '../../notes/event_hub'; import DiffFileHeader from './diff_file_header.vue'; import DiffContent from './diff_content.vue'; import { diffViewerErrors } from '~/ide/constants'; +import { collapsedType, isCollapsed } from '../diff_file'; +import { DIFF_FILE_AUTOMATIC_COLLAPSE, DIFF_FILE_MANUAL_COLLAPSE } from '../constants'; export default { components: { @@ -44,7 +46,7 @@ export default { return { isLoadingCollapsedDiff: false, forkMessageVisible: false, - isCollapsed: this.file.viewer.automaticallyCollapsed || false, + isCollapsed: isCollapsed(this.file), }; }, computed: { @@ -71,7 +73,7 @@ export default { return this.file.viewer.error === diffViewerErrors.too_large; }, errorMessage() { - return this.file.viewer.error_message; + return !this.manuallyCollapsed ? this.file.viewer.error_message : ''; }, forkMessage() { return sprintf( @@ -85,57 +87,94 @@ export default { false, ); }, - }, - watch: { - isCollapsed: function fileCollapsedWatch(newVal, oldVal) { - if (!newVal && oldVal && !this.hasDiff) { - this.handleLoadCollapsedDiff(); + hasBodyClasses() { + const domParts = { + header: 'gl-rounded-base!', + contentByHash: '', + content: '', + }; + + if (this.showBody) { + domParts.header = 'gl-rounded-bottom-left-none gl-rounded-bottom-right-none'; + domParts.contentByHash = + 'gl-rounded-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-border-1 gl-border-t-0! gl-border-solid gl-border-gray-100'; + domParts.content = 'gl-rounded-bottom-left-base gl-rounded-bottom-right-base'; } - this.setFileCollapsed({ filePath: this.file.file_path, collapsed: newVal }); + return domParts; + }, + automaticallyCollapsed() { + return collapsedType(this.file) === DIFF_FILE_AUTOMATIC_COLLAPSE; + }, + manuallyCollapsed() { + return collapsedType(this.file) === DIFF_FILE_MANUAL_COLLAPSE; + }, + showBody() { + return !this.isCollapsed || this.automaticallyCollapsed; }, + showWarning() { + return this.isCollapsed && (this.automaticallyCollapsed && !this.viewDiffsFileByFile); + }, + showContent() { + return !this.isCollapsed && !this.isFileTooLarge; + }, + }, + watch: { 'file.file_hash': { - handler: function watchFileHash() { - if (this.viewDiffsFileByFile && this.file.viewer.automaticallyCollapsed) { - this.isCollapsed = false; - this.handleLoadCollapsedDiff(); - } else { - this.isCollapsed = this.file.viewer.automaticallyCollapsed || false; + handler: function hashChangeWatch(newHash, oldHash) { + this.isCollapsed = isCollapsed(this.file); + + if (newHash && oldHash && !this.hasDiff) { + this.requestDiff(); } }, immediate: true, }, - 'file.viewer.automaticallyCollapsed': function setIsCollapsed(newVal) { - if (!this.viewDiffsFileByFile) { - this.isCollapsed = newVal; - } + 'file.viewer.automaticallyCollapsed': { + handler: function autoChangeWatch(automaticValue) { + if (collapsedType(this.file) !== DIFF_FILE_MANUAL_COLLAPSE) { + this.isCollapsed = this.viewDiffsFileByFile ? false : automaticValue; + } + }, + immediate: true, + }, + 'file.viewer.manuallyCollapsed': { + handler: function manualChangeWatch(manualValue) { + if (manualValue !== null) { + this.isCollapsed = manualValue; + } + }, + immediate: true, }, }, created() { - eventHub.$on(`loadCollapsedDiff/${this.file.file_hash}`, this.handleLoadCollapsedDiff); + eventHub.$on(`loadCollapsedDiff/${this.file.file_hash}`, this.requestDiff); }, methods: { ...mapActions('diffs', [ 'loadCollapsedDiff', 'assignDiscussionsToDiff', 'setRenderIt', - 'setFileCollapsed', + 'setFileCollapsedByUser', ]), handleToggle() { - if (!this.hasDiff) { - this.handleLoadCollapsedDiff(); - } else { - this.isCollapsed = !this.isCollapsed; - this.setRenderIt(this.file); + const currentCollapsedFlag = this.isCollapsed; + + this.setFileCollapsedByUser({ + filePath: this.file.file_path, + collapsed: !currentCollapsedFlag, + }); + + if (!this.hasDiff && currentCollapsedFlag) { + this.requestDiff(); } }, - handleLoadCollapsedDiff() { + requestDiff() { this.isLoadingCollapsedDiff = true; this.loadCollapsedDiff(this.file) .then(() => { this.isLoadingCollapsedDiff = false; - this.isCollapsed = false; this.setRenderIt(this.file); }) .then(() => { @@ -167,9 +206,10 @@ export default { :class="{ 'is-active': currentDiffFileId === file.file_hash, 'comments-disabled': Boolean(file.brokenSymlink), + 'has-body': showBody, }" :data-path="file.new_path" - class="diff-file file-holder" + class="diff-file file-holder gl-border-none" > <diff-file-header :can-current-user-fork="canCurrentUserFork" @@ -178,7 +218,8 @@ export default { :expanded="!isCollapsed" :add-merge-request-buttons="true" :view-diffs-file-by-file="viewDiffsFileByFile" - class="js-file-title file-title" + class="js-file-title file-title gl-border-1 gl-border-solid gl-border-gray-100" + :class="hasBodyClasses.header" @toggleFile="handleToggle" @showForkMessage="showForkMessage" /> @@ -198,21 +239,35 @@ export default { {{ __('Cancel') }} </button> </div> - <gl-loading-icon v-if="showLoadingIcon" class="diff-content loading" /> <template v-else> - <div :id="`diff-content-${file.file_hash}`"> - <div v-if="errorMessage" class="diff-viewer"> + <div + :id="`diff-content-${file.file_hash}`" + :class="hasBodyClasses.contentByHash" + data-testid="content-area" + > + <gl-loading-icon + v-if="showLoadingIcon" + class="diff-content loading gl-my-0 gl-pt-3" + data-testid="loader-icon" + /> + <div v-else-if="errorMessage" class="diff-viewer"> <div v-safe-html="errorMessage" class="nothing-here-block"></div> </div> <template v-else> - <div v-show="isCollapsed" class="nothing-here-block diff-collapsed"> + <div v-show="showWarning" class="nothing-here-block diff-collapsed"> {{ __('This diff is collapsed.') }} - <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{ - __('Click to expand it.') - }}</a> + <a + class="click-to-expand" + data-testid="toggle-link" + href="#" + @click.prevent="handleToggle" + > + {{ __('Click to expand it.') }} + </a> </div> <diff-content - v-show="!isCollapsed && !isFileTooLarge" + v-show="showContent" + :class="hasBodyClasses.content" :diff-file="file" :help-page-path="helpPagePath" /> diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index b08b9df13a4..ea7112689c1 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -18,6 +18,7 @@ import { __, s__, sprintf } from '~/locale'; import { diffViewerModes } from '~/ide/constants'; import DiffStats from './diff_stats.vue'; import { scrollToElement } from '~/lib/utils/common_utils'; +import { isCollapsed } from '../diff_file'; import { DIFF_FILE_HEADER } from '../i18n'; export default { @@ -125,6 +126,9 @@ export default { isUsingLfs() { return this.diffFile.stored_externally && this.diffFile.external_storage === 'lfs'; }, + isCollapsed() { + return isCollapsed(this.diffFile, { fileByFile: this.viewDiffsFileByFile }); + }, collapseIcon() { return this.expanded ? 'chevron-down' : 'chevron-right'; }, @@ -334,7 +338,7 @@ export default { </gl-dropdown-item> </template> - <template v-if="!diffFile.viewer.automaticallyCollapsed"> + <template v-if="!isCollapsed"> <gl-dropdown-divider v-if="!diffFile.is_fully_expanded || diffHasDiscussions(diffFile)" /> diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js index dc97d9993da..0735470bfa2 100644 --- a/app/assets/javascripts/diffs/constants.js +++ b/app/assets/javascripts/diffs/constants.js @@ -73,6 +73,10 @@ export const ALERT_OVERFLOW_HIDDEN = 'overflow'; export const ALERT_MERGE_CONFLICT = 'merge-conflict'; export const ALERT_COLLAPSED_FILES = 'collapsed'; +// Diff File collapse types +export const DIFF_FILE_AUTOMATIC_COLLAPSE = 'automatic'; +export const DIFF_FILE_MANUAL_COLLAPSE = 'manual'; + // State machine states export const STATE_IDLING = 'idle'; export const STATE_LOADING = 'loading'; diff --git a/app/assets/javascripts/diffs/diff_file.js b/app/assets/javascripts/diffs/diff_file.js index 933197a2c7f..a14a30b41a9 100644 --- a/app/assets/javascripts/diffs/diff_file.js +++ b/app/assets/javascripts/diffs/diff_file.js @@ -1,4 +1,9 @@ -import { DIFF_FILE_SYMLINK_MODE, DIFF_FILE_DELETED_MODE } from './constants'; +import { + DIFF_FILE_SYMLINK_MODE, + DIFF_FILE_DELETED_MODE, + DIFF_FILE_MANUAL_COLLAPSE, + DIFF_FILE_AUTOMATIC_COLLAPSE, +} from './constants'; function fileSymlinkInformation(file, fileList) { const duplicates = fileList.filter(iteratedFile => iteratedFile.file_hash === file.file_hash); @@ -23,6 +28,7 @@ function collapsed(file) { return { automaticallyCollapsed: viewer.automaticallyCollapsed || viewer.collapsed || false, + manuallyCollapsed: null, }; } @@ -37,3 +43,19 @@ export function prepareRawDiffFile({ file, allFiles }) { return file; } + +export function collapsedType(file) { + const isManual = typeof file.viewer?.manuallyCollapsed === 'boolean'; + + return isManual ? DIFF_FILE_MANUAL_COLLAPSE : DIFF_FILE_AUTOMATIC_COLLAPSE; +} + +export function isCollapsed(file) { + const type = collapsedType(file); + const collapsedStates = { + [DIFF_FILE_AUTOMATIC_COLLAPSE]: file.viewer?.automaticallyCollapsed || false, + [DIFF_FILE_MANUAL_COLLAPSE]: file.viewer?.manuallyCollapsed, + }; + + return collapsedStates[type]; +} diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js index 966b706fc31..322051cff05 100644 --- a/app/assets/javascripts/diffs/store/actions.js +++ b/app/assets/javascripts/diffs/store/actions.js @@ -40,8 +40,11 @@ import { DIFF_WHITESPACE_COOKIE_NAME, SHOW_WHITESPACE, NO_SHOW_WHITESPACE, + DIFF_FILE_MANUAL_COLLAPSE, + DIFF_FILE_AUTOMATIC_COLLAPSE, } from '../constants'; import { diffViewerModes } from '~/ide/constants'; +import { isCollapsed } from '../diff_file'; export const setBaseConfig = ({ commit }, options) => { const { @@ -239,6 +242,13 @@ export const renderFileForDiscussionId = ({ commit, rootState, state }, discussi if (file.viewer.automaticallyCollapsed) { eventHub.$emit(`loadCollapsedDiff/${file.file_hash}`); scrollToElement(document.getElementById(file.file_hash)); + } else if (file.viewer.manuallyCollapsed) { + commit(types.SET_FILE_COLLAPSED, { + filePath: file.file_path, + collapsed: false, + trigger: DIFF_FILE_AUTOMATIC_COLLAPSE, + }); + eventHub.$emit('scrollToDiscussion'); } else { eventHub.$emit('scrollToDiscussion'); } @@ -252,8 +262,7 @@ export const startRenderDiffsQueue = ({ state, commit }) => { const nextFile = state.diffFiles.find( file => !file.renderIt && - (file.viewer && - (!file.viewer.automaticallyCollapsed || file.viewer.name !== diffViewerModes.text)), + (file.viewer && (!isCollapsed(file) || file.viewer.name !== diffViewerModes.text)), ); if (nextFile) { @@ -641,8 +650,9 @@ export function switchToFullDiffFromRenamedFile({ commit, dispatch, state }, { d }); } -export const setFileCollapsed = ({ commit }, { filePath, collapsed }) => - commit(types.SET_FILE_COLLAPSED, { filePath, collapsed }); +export const setFileCollapsedByUser = ({ commit }, { filePath, collapsed }) => { + commit(types.SET_FILE_COLLAPSED, { filePath, collapsed, trigger: DIFF_FILE_MANUAL_COLLAPSE }); +}; export const setSuggestPopoverDismissed = ({ commit, state }) => axios diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js index 91425c7825b..4900dcd473d 100644 --- a/app/assets/javascripts/diffs/store/getters.js +++ b/app/assets/javascripts/diffs/store/getters.js @@ -8,8 +8,16 @@ export const isParallelView = state => state.diffViewType === PARALLEL_DIFF_VIEW export const isInlineView = state => state.diffViewType === INLINE_DIFF_VIEW_TYPE; -export const hasCollapsedFile = state => - state.diffFiles.some(file => file.viewer && file.viewer.automaticallyCollapsed); +export const whichCollapsedTypes = state => { + const automatic = state.diffFiles.some(file => file.viewer?.automaticallyCollapsed); + const manual = state.diffFiles.some(file => file.viewer?.manuallyCollapsed); + + return { + any: automatic || manual, + automatic, + manual, + }; +}; export const commitId = state => (state.commit && state.commit.id ? state.commit.id : null); diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js index 13ecf6a997d..5328845e4d9 100644 --- a/app/assets/javascripts/diffs/store/mutations.js +++ b/app/assets/javascripts/diffs/store/mutations.js @@ -1,6 +1,10 @@ import Vue from 'vue'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; -import { INLINE_DIFF_VIEW_TYPE } from '../constants'; +import { + DIFF_FILE_MANUAL_COLLAPSE, + DIFF_FILE_AUTOMATIC_COLLAPSE, + INLINE_DIFF_VIEW_TYPE, +} from '../constants'; import { findDiffFile, addLineReferences, @@ -16,6 +20,12 @@ function updateDiffFilesInState(state, files) { return Object.assign(state, { diffFiles: files }); } +function renderFile(file) { + Object.assign(file, { + renderIt: true, + }); +} + export default { [types.SET_BASE_CONFIG](state, options) { const { @@ -81,9 +91,7 @@ export default { }, [types.RENDER_FILE](state, file) { - Object.assign(file, { - renderIt: true, - }); + renderFile(file); }, [types.SET_MERGE_REQUEST_DIFFS](state, mergeRequestDiffs) { @@ -173,6 +181,7 @@ export default { Object.assign(file, { viewer: Object.assign(file.viewer, { automaticallyCollapsed: false, + manuallyCollapsed: false, }), }); }); @@ -351,11 +360,24 @@ export default { file.isShowingFullFile = true; file.isLoadingFullFile = false; }, - [types.SET_FILE_COLLAPSED](state, { filePath, collapsed }) { + [types.SET_FILE_COLLAPSED]( + state, + { filePath, collapsed, trigger = DIFF_FILE_AUTOMATIC_COLLAPSE }, + ) { const file = state.diffFiles.find(f => f.file_path === filePath); if (file && file.viewer) { - file.viewer.automaticallyCollapsed = collapsed; + if (trigger === DIFF_FILE_MANUAL_COLLAPSE) { + file.viewer.automaticallyCollapsed = false; + file.viewer.manuallyCollapsed = collapsed; + } else if (trigger === DIFF_FILE_AUTOMATIC_COLLAPSE) { + file.viewer.automaticallyCollapsed = collapsed; + file.viewer.manuallyCollapsed = null; + } + } + + if (file && !collapsed) { + renderFile(file); } }, [types.SET_HIDDEN_VIEW_DIFF_FILE_LINES](state, { filePath, lines }) { |