diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 09:55:51 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-20 09:55:51 +0000 |
commit | e8d2c2579383897a1dd7f9debd359abe8ae8373d (patch) | |
tree | c42be41678c2586d49a75cabce89322082698334 /app/assets/javascripts/diffs/components/diff_view.vue | |
parent | fc845b37ec3a90aaa719975f607740c22ba6a113 (diff) | |
download | gitlab-ce-e8d2c2579383897a1dd7f9debd359abe8ae8373d.tar.gz |
Add latest changes from gitlab-org/gitlab@14-1-stable-eev14.1.0-rc42
Diffstat (limited to 'app/assets/javascripts/diffs/components/diff_view.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_view.vue | 74 |
1 files changed, 55 insertions, 19 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue index a2a6ebaeedf..5cf242b4ddd 100644 --- a/app/assets/javascripts/diffs/components/diff_view.vue +++ b/app/assets/javascripts/diffs/components/diff_view.vue @@ -1,12 +1,15 @@ <script> import { mapGetters, mapState, mapActions } from 'vuex'; +import { IdState } from 'vendor/vue-virtual-scroller'; import DraftNote from '~/batch_comments/components/draft_note.vue'; import draftCommentsMixin from '~/diffs/mixins/draft_comments'; import { getCommentedLines } from '~/notes/components/multiline_comment_utils'; +import { hide } from '~/tooltips'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import DiffCommentCell from './diff_comment_cell.vue'; import DiffExpansionCell from './diff_expansion_cell.vue'; import DiffRow from './diff_row.vue'; +import { isHighlighted } from './diff_row_utils'; export default { components: { @@ -15,7 +18,11 @@ export default { DiffCommentCell, DraftNote, }, - mixins: [draftCommentsMixin, glFeatureFlagsMixin()], + mixins: [ + draftCommentsMixin, + glFeatureFlagsMixin(), + IdState({ idProp: (vm) => vm.diffFile.file_hash }), + ], props: { diffFile: { type: Object, @@ -36,15 +43,15 @@ export default { default: false, }, }, - data() { + idState() { return { dragStart: null, updatedLineRange: null, }; }, computed: { - ...mapGetters('diffs', ['commitId']), - ...mapState('diffs', ['codequalityDiff']), + ...mapGetters('diffs', ['commitId', 'fileLineCoverage']), + ...mapState('diffs', ['codequalityDiff', 'highlightedRow']), ...mapState({ selectedCommentPosition: ({ notes }) => notes.selectedCommentPosition, selectedCommentPositionHover: ({ notes }) => notes.selectedCommentPositionHover, @@ -59,45 +66,65 @@ export default { ); }, hasCodequalityChanges() { - return ( - this.glFeatures.codequalityMrDiffAnnotations && - this.codequalityDiff?.files?.[this.diffFile.file_path]?.length > 0 - ); + return this.codequalityDiff?.files?.[this.diffFile.file_path]?.length > 0; }, }, methods: { ...mapActions(['setSelectedCommentPosition']), - ...mapActions('diffs', ['showCommentForm']), + ...mapActions('diffs', ['showCommentForm', 'setHighlightedRow', 'toggleLineDiscussions']), showCommentLeft(line) { return line.left && !line.right; }, showCommentRight(line) { return line.right && !line.left; }, - onStartDragging(line) { - this.dragStart = line; + onStartDragging({ event = {}, line }) { + if (event.target?.parentNode) { + hide(event.target.parentNode); + } + this.idState.dragStart = line; }, onDragOver(line) { - if (line.chunk !== this.dragStart.chunk) return; + if (line.chunk !== this.idState.dragStart.chunk) return; - let start = this.dragStart; + let start = this.idState.dragStart; let end = line; - if (this.dragStart.index >= line.index) { + if (this.idState.dragStart.index >= line.index) { start = line; - end = this.dragStart; + end = this.idState.dragStart; } - this.updatedLineRange = { start, end }; + this.idState.updatedLineRange = { start, end }; - this.setSelectedCommentPosition(this.updatedLineRange); + this.setSelectedCommentPosition(this.idState.updatedLineRange); }, onStopDragging() { this.showCommentForm({ - lineCode: this.updatedLineRange?.end?.line_code, + lineCode: this.idState.updatedLineRange?.end?.line_code, fileHash: this.diffFile.file_hash, }); - this.dragStart = null; + this.idState.dragStart = null; + }, + isHighlighted(line) { + return isHighlighted( + this.highlightedRow, + line.left?.line_code ? line.left : line.right, + false, + ); + }, + handleParallelLineMouseDown(e) { + const line = e.target.closest('.diff-td'); + const table = line.closest('.diff-table'); + + table.classList.remove('left-side-selected', 'right-side-selected'); + const [lineClass] = ['left-side', 'right-side'].filter((name) => + line.classList.contains(name), + ); + + if (lineClass) { + table.classList.add(`${lineClass}-selected`); + } }, }, userColorScheme: window.gon.user_color_scheme, @@ -109,6 +136,7 @@ export default { :class="[$options.userColorScheme, { inline, 'with-codequality': hasCodequalityChanges }]" :data-commit-id="commitId" class="diff-grid diff-table code diff-wrap-lines js-syntax-highlight text-file" + @mousedown="handleParallelLineMouseDown" > <template v-for="(line, index) in diffLines"> <div @@ -136,6 +164,14 @@ export default { :is-commented="index >= commentedLines.startLine && index <= commentedLines.endLine" :inline="inline" :index="index" + :is-highlighted="isHighlighted(line)" + :file-line-coverage="fileLineCoverage" + @showCommentForm="(lineCode) => showCommentForm({ lineCode, fileHash: diffFile.file_hash })" + @setHighlightedRow="setHighlightedRow" + @toggleLineDiscussions=" + ({ lineCode, expanded }) => + toggleLineDiscussions({ lineCode, fileHash: diffFile.file_hash, expanded }) + " @enterdragging="onDragOver" @startdragging="onStartDragging" @stopdragging="onStopDragging" |