diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-21 00:08:12 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-21 00:08:12 +0300 |
commit | fc8614660ee6c0963c96925affa7d837c02e0b4b (patch) | |
tree | d81cfed376f54ed52cbf540e0aa0c3ac46bf7c2d /app/assets/javascripts/diffs | |
parent | a174146bf09aa549a4ae43f2b8a0f6aa638f499e (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/diffs')
7 files changed, 180 insertions, 87 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue index 4c7b8e8f667..cd726818031 100644 --- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue +++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue @@ -1,42 +1,33 @@ <script> -import { GlIcon } from '@gitlab/ui'; -import { mapState, mapActions } from 'vuex'; +import { GlTooltipDirective, GlSafeHtmlDirective, GlIcon, GlLoadingIcon } from '@gitlab/ui'; +import { mapActions } from 'vuex'; import createFlash from '~/flash'; import { s__, sprintf } from '~/locale'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { UNFOLD_COUNT, INLINE_DIFF_VIEW_TYPE, INLINE_DIFF_LINES_KEY } from '../constants'; +import { UNFOLD_COUNT, INLINE_DIFF_LINES_KEY } from '../constants'; import * as utils from '../store/utils'; const EXPAND_ALL = 0; const EXPAND_UP = 1; const EXPAND_DOWN = 2; -const lineNumberByViewType = (viewType, diffLine) => { - const numberGetters = { - [INLINE_DIFF_VIEW_TYPE]: (line) => line?.new_line, - }; - const numberGetter = numberGetters[viewType]; - return numberGetter && numberGetter(diffLine); -}; - -const i18n = { - showMore: sprintf(s__('Diffs|Show %{unfoldCount} lines'), { unfoldCount: UNFOLD_COUNT }), - showAll: s__('Diffs|Show all unchanged lines'), -}; - export default { - i18n, + i18n: { + showMore: sprintf(s__('Diffs|Show %{unfoldCount} lines'), { unfoldCount: UNFOLD_COUNT }), + showAll: s__('Diffs|Show all unchanged lines'), + }, components: { GlIcon, + GlLoadingIcon, + }, + directives: { + GlTooltip: GlTooltipDirective, + SafeHtml: GlSafeHtmlDirective, }, mixins: [glFeatureFlagsMixin()], props: { - fileHash: { - type: String, - required: true, - }, - contextLinesPath: { - type: String, + file: { + type: Object, required: true, }, line: { @@ -53,34 +44,45 @@ export default { required: false, default: false, }, + inline: { + type: Boolean, + required: true, + }, + lineCountBetween: { + type: Number, + required: false, + default: -1, + }, + }, + data() { + return { loading: { up: false, down: false, all: false } }; }, computed: { - ...mapState({ - diffFiles: (state) => state.diffs.diffFiles, - }), canExpandUp() { return !this.isBottom; }, canExpandDown() { return this.isBottom || !this.isTop; }, - }, - created() { - this.EXPAND_DOWN = EXPAND_DOWN; - this.EXPAND_UP = EXPAND_UP; + isLineCountSmall() { + return this.lineCountBetween >= 20 || this.lineCountBetween === -1; + }, + showExpandDown() { + return this.canExpandDown && this.isLineCountSmall; + }, + showExpandUp() { + return this.canExpandUp && this.isLineCountSmall; + }, }, methods: { ...mapActions('diffs', ['loadMoreLines']), getPrevLineNumber(oldLineNumber, newLineNumber) { - const diffFile = utils.findDiffFile(this.diffFiles, this.fileHash); - const index = utils.getPreviousLineIndex(INLINE_DIFF_VIEW_TYPE, diffFile, { + const index = utils.getPreviousLineIndex(this.file, { oldLineNumber, newLineNumber, }); - return ( - lineNumberByViewType(INLINE_DIFF_VIEW_TYPE, diffFile[INLINE_DIFF_LINES_KEY][index - 2]) || 0 - ); + return this.file[INLINE_DIFF_LINES_KEY][index - 2]?.new_line || 0; }, callLoadMoreLines( endpoint, @@ -99,6 +101,9 @@ export default { message: s__('Diffs|Something went wrong while fetching diff lines.'), }); this.isRequesting = false; + }) + .finally(() => { + this.loading = { up: false, down: false, all: false }; }); }, handleExpandLines(type = EXPAND_ALL) { @@ -107,25 +112,26 @@ export default { } this.isRequesting = true; - const endpoint = this.contextLinesPath; - const { fileHash } = this; - const view = INLINE_DIFF_VIEW_TYPE; + const endpoint = this.file.context_lines_path; const oldLineNumber = this.line.meta_data.old_pos || 0; const newLineNumber = this.line.meta_data.new_pos || 0; const offset = newLineNumber - oldLineNumber; - const expandOptions = { endpoint, fileHash, view, oldLineNumber, newLineNumber, offset }; + const expandOptions = { endpoint, oldLineNumber, newLineNumber, offset }; if (type === EXPAND_UP) { + this.loading.up = true; this.handleExpandUpLines(expandOptions); } else if (type === EXPAND_DOWN) { + this.loading.down = true; this.handleExpandDownLines(expandOptions); } else { + this.loading.all = true; this.handleExpandAllLines(expandOptions); } }, handleExpandUpLines(expandOptions) { - const { endpoint, fileHash, view, oldLineNumber, newLineNumber, offset } = expandOptions; + const { endpoint, oldLineNumber, newLineNumber, offset } = expandOptions; const bottom = this.isBottom; const lineNumber = newLineNumber - 1; @@ -139,15 +145,13 @@ export default { unfold = false; } - const params = { since, to, bottom, offset, unfold, view }; + const params = { since, to, bottom, offset, unfold }; const lineNumbers = { oldLineNumber, newLineNumber }; - this.callLoadMoreLines(endpoint, params, lineNumbers, fileHash); + this.callLoadMoreLines(endpoint, params, lineNumbers, this.file.file_hash); }, handleExpandDownLines(expandOptions) { const { endpoint, - fileHash, - view, oldLineNumber: metaOldPos, newLineNumber: metaNewPos, offset, @@ -183,19 +187,19 @@ export default { } } - const params = { since, to, bottom, offset, unfold, view }; + const params = { since, to, bottom, offset, unfold }; const lineNumbers = { oldLineNumber, newLineNumber }; this.callLoadMoreLines( endpoint, params, lineNumbers, - fileHash, + this.file.file_hash, isExpandDown, nextLineNumbers, ); }, handleExpandAllLines(expandOptions) { - const { endpoint, fileHash, view, oldLineNumber, newLineNumber, offset } = expandOptions; + const { endpoint, oldLineNumber, newLineNumber, offset } = expandOptions; const bottom = this.isBottom; const unfold = false; let since; @@ -213,21 +217,71 @@ export default { to = newLineNumber - 1; } - const params = { since, to, bottom, offset, unfold, view }; + const params = { since, to, bottom, offset, unfold }; const lineNumbers = { oldLineNumber, newLineNumber }; - this.callLoadMoreLines(endpoint, params, lineNumbers, fileHash); + this.callLoadMoreLines(endpoint, params, lineNumbers, this.file.file_hash); }, }, + EXPAND_DOWN, + EXPAND_UP, }; </script> <template> - <div class="content js-line-expansion-content"> + <div + v-if="glFeatures.updatedDiffExpansionButtons" + class="diff-grid-row diff-grid-row-full diff-tr line_holder match expansion" + > + <div :class="{ parallel: !inline }" class="diff-grid-left diff-grid-2-col left-side"> + <div + class="diff-td diff-line-num gl-text-center! gl-p-0! gl-w-full! gl-display-flex gl-flex-direction-column" + > + <button + v-if="showExpandDown" + v-gl-tooltip + :title="s__('Diffs|Next 20 lines')" + type="button" + class="js-unfold-down gl-rounded-0 gl-border-0 diff-line-expand-button" + @click="handleExpandLines($options.EXPAND_DOWN)" + > + <gl-loading-icon v-if="loading.down" size="sm" color="dark" inline /> + <gl-icon v-else name="expand-down" /> + </button> + <button + v-if="lineCountBetween !== -1 && lineCountBetween < 20" + v-gl-tooltip + :title="s__('Diffs|Expand all lines')" + type="button" + class="js-unfold-all gl-rounded-0 gl-border-0 diff-line-expand-button" + @click="handleExpandLines()" + > + <gl-loading-icon v-if="loading.all" size="sm" color="dark" inline /> + <gl-icon v-else name="expand" /> + </button> + <button + v-if="showExpandUp" + v-gl-tooltip + :title="s__('Diffs|Previous 20 lines')" + type="button" + class="js-unfold gl-rounded-0 gl-border-0 diff-line-expand-button" + @click="handleExpandLines($options.EXPAND_UP)" + > + <gl-loading-icon v-if="loading.up" size="sm" color="dark" inline /> + <gl-icon v-else name="expand-up" /> + </button> + </div> + <div + v-safe-html="line.rich_text" + class="gl-display-flex! gl-flex-direction-column gl-justify-content-center diff-td line_content left-side gl-white-space-normal!" + ></div> + </div> + </div> + <div v-else class="content js-line-expansion-content"> <button type="button" :disabled="!canExpandDown" class="js-unfold-down gl-mx-2 gl-py-4 gl-cursor-pointer" - @click="handleExpandLines(EXPAND_DOWN)" + @click="handleExpandLines($options.EXPAND_DOWN)" > <gl-icon :size="12" name="expand-down" /> <span>{{ $options.i18n.showMore }}</span> @@ -244,7 +298,7 @@ export default { type="button" :disabled="!canExpandUp" class="js-unfold gl-mx-2 gl-py-4 gl-cursor-pointer" - @click="handleExpandLines(EXPAND_UP)" + @click="handleExpandLines($options.EXPAND_UP)" > <gl-icon :size="12" name="expand-up" /> <span>{{ $options.i18n.showMore }}</span> diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue index 4893803a3b6..1b07b00d725 100644 --- a/app/assets/javascripts/diffs/components/diff_row.vue +++ b/app/assets/javascripts/diffs/components/diff_row.vue @@ -160,7 +160,13 @@ export default { <!-- eslint-disable-next-line vue/no-deprecated-functional-template --> <template functional> - <div :class="$options.classNameMap(props)" class="diff-grid-row diff-tr line_holder"> + <div + :class="[ + $options.classNameMap(props), + { expansion: props.line.left && props.line.left.type === 'expanded' }, + ]" + class="diff-grid-row diff-tr line_holder" + > <div :id="props.line.left && props.line.left.line_code" data-testid="left-side" diff --git a/app/assets/javascripts/diffs/components/diff_row_utils.js b/app/assets/javascripts/diffs/components/diff_row_utils.js index 99999445c43..f610ac979ca 100644 --- a/app/assets/javascripts/diffs/components/diff_row_utils.js +++ b/app/assets/javascripts/diffs/components/diff_row_utils.js @@ -10,6 +10,7 @@ import { CONFLICT_MARKER_THEIR, CONFLICT_THEIR, CONFLICT_OUR, + EXPANDED_LINE_TYPE, } from '../constants'; export const isHighlighted = (highlightedRow, line, isCommented) => { @@ -118,10 +119,12 @@ export const mapParallel = (content) => (line) => { if (right) { right = { ...right, - renderDiscussion: Boolean(hasExpandedDiscussionOnRight && right.type), + renderDiscussion: Boolean( + hasExpandedDiscussionOnRight && right.type && right.type !== EXPANDED_LINE_TYPE, + ), hasDraft: content.hasParallelDraftRight(content.diffFile.file_hash, line), lineDraft: content.draftForLine(content.diffFile.file_hash, line, 'right'), - hasCommentForm: Boolean(right.hasForm && right.type), + hasCommentForm: Boolean(right.hasForm && right.type && right.type !== EXPANDED_LINE_TYPE), emptyCellClassMap: { conflict_their: line.left?.type === CONFLICT_OUR }, addCommentTooltip: addCommentTooltip(line.right), }; diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue index f46b0a538f1..529f8e0a2f9 100644 --- a/app/assets/javascripts/diffs/components/diff_view.vue +++ b/app/assets/javascripts/diffs/components/diff_view.vue @@ -141,6 +141,18 @@ export default { table.classList.add(`${lineClass}-selected`); } }, + getCountBetweenIndex(index) { + if (index === 0) { + return -1; + } else if (!this.diffLines[index + 1]) { + return -1; + } + + return ( + Number(this.diffLines[index + 1].left.new_line) - + Number(this.diffLines[index - 1].left.new_line) + ); + }, }, userColorScheme: window.gon.user_color_scheme, }; @@ -158,38 +170,51 @@ export default { > <template v-for="(line, index) in diffLines"> <template v-if="line.isMatchLineLeft || line.isMatchLineRight"> - <div :key="`expand-${index}`" class="diff-tr line_expansion match"> - <div class="diff-td text-center gl-font-regular"> - <diff-expansion-cell - :file-hash="diffFile.file_hash" - :context-lines-path="diffFile.context_lines_path" - :line="line.left" - :is-top="index === 0" - :is-bottom="index + 1 === diffLinesLength" - /> + <diff-expansion-cell + v-if="glFeatures.updatedDiffExpansionButtons" + :key="`expand-${index}`" + :file="diffFile" + :line="line.left" + :is-top="index === 0" + :is-bottom="index + 1 === diffLinesLength" + :inline="inline" + :line-count-between="getCountBetweenIndex(index)" + /> + <template v-else> + <div :key="`expand-${index}`" class="diff-tr line_expansion old-line_expansion match"> + <div class="diff-td text-center gl-font-regular"> + <diff-expansion-cell + :file="diffFile" + :context-lines-path="diffFile.context_lines_path" + :line="line.left" + :is-top="index === 0" + :is-bottom="index + 1 === diffLinesLength" + :inline="inline" + /> + </div> </div> - </div> - <div - v-if="line.left.rich_text" - :key="`expand-definition-${index}`" - class="diff-grid-row diff-tr line_holder match" - > - <div class="diff-grid-left diff-grid-3-col left-side"> - <div class="diff-td diff-line-num"></div> - <div v-if="inline" class="diff-td diff-line-num"></div> - <div - v-safe-html="line.left.rich_text" - class="diff-td line_content left-side gl-white-space-normal!" - ></div> + <div + v-if="line.left.rich_text" + :key="`expand-definition-${index}`" + class="diff-grid-row diff-tr line_holder match" + > + <div class="diff-grid-left diff-grid-3-col left-side"> + <div class="diff-td diff-line-num"></div> + <div v-if="inline" class="diff-td diff-line-num"></div> + <div + v-safe-html="line.left.rich_text" + class="diff-td line_content left-side gl-white-space-normal!" + ></div> + </div> + <div v-if="!inline" class="diff-grid-right diff-grid-3-col right-side"> + <div class="diff-td diff-line-num"></div> + <div + v-safe-html="line.left.rich_text" + class="diff-td line_content right-side gl-white-space-normal!" + ></div> + </div> </div> - <div v-if="!inline" class="diff-grid-right diff-grid-3-col right-side"> - <div class="diff-td diff-line-num"></div> - <div - v-safe-html="line.left.rich_text" - class="diff-td line_content right-side gl-white-space-normal!" - ></div> - </div> - </div> + </template> </template> <diff-row v-if="!line.isMatchLineLeft && !line.isMatchLineRight" diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js index bbe27c0dbd6..f4b6bd85b84 100644 --- a/app/assets/javascripts/diffs/constants.js +++ b/app/assets/javascripts/diffs/constants.js @@ -1,6 +1,7 @@ export const INLINE_DIFF_VIEW_TYPE = 'inline'; export const PARALLEL_DIFF_VIEW_TYPE = 'parallel'; export const MATCH_LINE_TYPE = 'match'; +export const EXPANDED_LINE_TYPE = 'expanded'; export const OLD_NO_NEW_LINE_TYPE = 'old-nonewline'; export const NEW_NO_NEW_LINE_TYPE = 'new-nonewline'; export const CONTEXT_LINE_TYPE = 'context'; diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js index fb35114c0a9..d2b798245fc 100644 --- a/app/assets/javascripts/diffs/store/mutations.js +++ b/app/assets/javascripts/diffs/store/mutations.js @@ -4,6 +4,7 @@ import { DIFF_FILE_MANUAL_COLLAPSE, DIFF_FILE_AUTOMATIC_COLLAPSE, INLINE_DIFF_LINES_KEY, + EXPANDED_LINE_TYPE, } from '../constants'; import * as types from './mutation_types'; import { @@ -131,6 +132,7 @@ export default { : line.line_code || `${fileHash}_${line.old_line}_${line.new_line}`; return { ...line, + type: line.type || EXPANDED_LINE_TYPE, line_code: lineCode, discussions: line.discussions || [], hasForm: false, diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js index 4526a34a2bd..5656416cf2b 100644 --- a/app/assets/javascripts/diffs/store/utils.js +++ b/app/assets/javascripts/diffs/store/utils.js @@ -15,13 +15,15 @@ import { CONFLICT_MARKER, CONFLICT_MARKER_OUR, CONFLICT_MARKER_THEIR, + EXPANDED_LINE_TYPE, } from '../constants'; import { prepareRawDiffFile } from '../utils/diff_file'; export const isAdded = (line) => ['new', 'new-nonewline'].includes(line.type); export const isRemoved = (line) => ['old', 'old-nonewline'].includes(line.type); export const isUnchanged = (line) => !line.type; -export const isMeta = (line) => ['match', 'new-nonewline', 'old-nonewline'].includes(line.type); +export const isMeta = (line) => + ['match', EXPANDED_LINE_TYPE, 'new-nonewline', 'old-nonewline'].includes(line.type); export const isConflictMarker = (line) => [CONFLICT_MARKER_OUR, CONFLICT_MARKER_THEIR].includes(line.type); export const isConflictSeperator = (line) => line.type === CONFLICT_MARKER; @@ -205,7 +207,7 @@ export const findIndexInInlineLines = (lines, lineNumbers) => { ); }; -export const getPreviousLineIndex = (diffViewType, file, lineNumbers) => { +export const getPreviousLineIndex = (file, lineNumbers) => { return findIndexInInlineLines(file[INLINE_DIFF_LINES_KEY], lineNumbers); }; |