diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/diff_expansion_cell.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_expansion_cell.vue | 158 |
1 files changed, 106 insertions, 52 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..4e7dc578193 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.left + :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.left + :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.left + :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> |