diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/parallel_diff_table_row.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/parallel_diff_table_row.vue | 310 |
1 files changed, 0 insertions, 310 deletions
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue deleted file mode 100644 index 2d33926c8aa..00000000000 --- a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue +++ /dev/null @@ -1,310 +0,0 @@ -<script> -import { GlTooltipDirective, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; -import $ from 'jquery'; -import { mapActions, mapGetters, mapState } from 'vuex'; -import { CONTEXT_LINE_CLASS_NAME, PARALLEL_DIFF_VIEW_TYPE } from '../constants'; -import { - getInteropOldSideAttributes, - getInteropNewSideAttributes, -} from '../utils/interoperability'; -import DiffGutterAvatars from './diff_gutter_avatars.vue'; -import * as utils from './diff_row_utils'; - -export default { - components: { - GlIcon, - DiffGutterAvatars, - }, - directives: { - GlTooltip: GlTooltipDirective, - SafeHtml, - }, - props: { - fileHash: { - type: String, - required: true, - }, - filePath: { - type: String, - required: true, - }, - line: { - type: Object, - required: true, - }, - isBottom: { - type: Boolean, - required: false, - default: false, - }, - isCommented: { - type: Boolean, - required: false, - default: false, - }, - }, - data() { - return { - isLeftHover: false, - isRightHover: false, - isCommentButtonRendered: false, - }; - }, - computed: { - ...mapGetters('diffs', ['fileLineCoverage']), - ...mapGetters(['isLoggedIn']), - ...mapState({ - isHighlighted(state) { - const line = this.line.left?.line_code ? this.line.left : this.line.right; - return utils.isHighlighted(state, line, this.isCommented); - }, - }), - classNameMap() { - return { - [CONTEXT_LINE_CLASS_NAME]: this.line.isContextLineLeft, - [PARALLEL_DIFF_VIEW_TYPE]: true, - }; - }, - parallelViewLeftLineType() { - return utils.parallelViewLeftLineType(this.line, this.isHighlighted); - }, - coverageState() { - return this.fileLineCoverage(this.filePath, this.line.right.new_line); - }, - classNameMapCellLeft() { - return utils.classNameMapCell({ - line: this.line.left, - hll: this.isHighlighted, - isLoggedIn: this.isLoggedIn, - isHover: this.isLeftHover, - }); - }, - classNameMapCellRight() { - return utils.classNameMapCell({ - line: this.line.right, - hll: this.isHighlighted, - isLoggedIn: this.isLoggedIn, - isHover: this.isRightHover, - }); - }, - addCommentTooltipLeft() { - return utils.addCommentTooltip(this.line.left); - }, - addCommentTooltipRight() { - return utils.addCommentTooltip(this.line.right); - }, - shouldRenderCommentButton() { - return utils.shouldRenderCommentButton(this.isLoggedIn, this.isCommentButtonRendered); - }, - shouldShowCommentButtonLeft() { - return utils.shouldShowCommentButton( - this.isLeftHover, - this.line.isContextLineLeft, - this.line.isMetaLineLeft, - this.line.hasDiscussionsLeft, - ); - }, - shouldShowCommentButtonRight() { - return utils.shouldShowCommentButton( - this.isRightHover, - this.line.isContextLineRight, - this.line.isMetaLineRight, - this.line.hasDiscussionsRight, - ); - }, - interopLeftAttributes() { - return getInteropOldSideAttributes(this.line.left); - }, - interopRightAttributes() { - return getInteropNewSideAttributes(this.line.right); - }, - }, - mounted() { - this.scrollToLineIfNeededParallel(this.line); - this.unwatchShouldShowCommentButton = this.$watch( - (vm) => [vm.shouldShowCommentButtonLeft, vm.shouldShowCommentButtonRight].join(), - (newVal) => { - if (newVal) { - this.isCommentButtonRendered = true; - this.unwatchShouldShowCommentButton(); - } - }, - ); - }, - beforeDestroy() { - this.unwatchShouldShowCommentButton(); - }, - methods: { - ...mapActions('diffs', [ - 'scrollToLineIfNeededParallel', - 'showCommentForm', - 'setHighlightedRow', - 'toggleLineDiscussions', - ]), - handleMouseMove(e) { - const isHover = e.type === 'mouseover'; - const hoveringCell = e.target.closest('td'); - const allCellsInHoveringRow = Array.from(e.currentTarget.children); - const hoverIndex = allCellsInHoveringRow.indexOf(hoveringCell); - - if (hoverIndex >= 3) { - this.isRightHover = isHover; - } else { - this.isLeftHover = isHover; - } - }, - // Prevent text selecting on both sides of parallel diff view - // Backport of the same code from legacy diff notes. - handleParallelLineMouseDown(e) { - const line = $(e.currentTarget); - const table = line.closest('table'); - - table.removeClass('left-side-selected right-side-selected'); - const [lineClass] = ['left-side', 'right-side'].filter((name) => line.hasClass(name)); - - if (lineClass) { - table.addClass(`${lineClass}-selected`); - } - }, - handleCommentButton(line) { - this.showCommentForm({ lineCode: line.line_code, fileHash: this.fileHash }); - }, - }, -}; -</script> - -<template> - <tr - :class="classNameMap" - class="line_holder" - @mouseover="handleMouseMove" - @mouseout="handleMouseMove" - > - <template v-if="line.left && !line.isMatchLineLeft"> - <td ref="oldTd" :class="classNameMapCellLeft" class="diff-line-num old_line"> - <span - v-if="shouldRenderCommentButton" - ref="addNoteTooltipLeft" - v-gl-tooltip - class="add-diff-note tooltip-wrapper" - :title="addCommentTooltipLeft" - > - <button - v-show="shouldShowCommentButtonLeft" - ref="addDiffNoteButtonLeft" - type="button" - class="add-diff-note note-button js-add-diff-note-button" - :disabled="line.left.commentsDisabled" - :aria-label="addCommentTooltipLeft" - @click="handleCommentButton(line.left)" - > - <gl-icon :size="12" name="comment" /> - </button> - </span> - <a - v-if="line.left.old_line" - ref="lineNumberRefOld" - :data-linenumber="line.left.old_line" - :href="line.lineHrefOld" - @click="setHighlightedRow(line.lineCode)" - > - </a> - <diff-gutter-avatars - v-if="line.hasDiscussionsLeft" - :discussions="line.left.discussions" - :discussions-expanded="line.left.discussionsExpanded" - @toggleLineDiscussions=" - toggleLineDiscussions({ - lineCode: line.left.line_code, - fileHash, - expanded: !line.left.discussionsExpanded, - }) - " - /> - </td> - <td :class="parallelViewLeftLineType" class="line-coverage left-side"></td> - <td - :id="line.left.line_code" - :key="line.left.line_code" - v-safe-html="line.left.rich_text" - :class="parallelViewLeftLineType" - v-bind="interopLeftAttributes" - class="line_content with-coverage parallel left-side" - @mousedown="handleParallelLineMouseDown" - ></td> - </template> - <template v-else> - <td class="diff-line-num old_line empty-cell"></td> - <td class="line-coverage left-side empty-cell"></td> - <td class="line_content with-coverage parallel left-side empty-cell"></td> - </template> - <template v-if="line.right && !line.isMatchLineRight"> - <td ref="newTd" :class="classNameMapCellRight" class="diff-line-num new_line"> - <span - v-if="shouldRenderCommentButton" - ref="addNoteTooltipRight" - v-gl-tooltip - class="add-diff-note tooltip-wrapper" - :title="addCommentTooltipRight" - > - <button - v-show="shouldShowCommentButtonRight" - ref="addDiffNoteButtonRight" - type="button" - class="add-diff-note note-button js-add-diff-note-button" - :disabled="line.right.commentsDisabled" - :aria-label="addCommentTooltipRight" - @click="handleCommentButton(line.right)" - > - <gl-icon :size="12" name="comment" /> - </button> - </span> - <a - v-if="line.right.new_line" - ref="lineNumberRefNew" - :data-linenumber="line.right.new_line" - :href="line.lineHrefNew" - @click="setHighlightedRow(line.lineCode)" - > - </a> - <diff-gutter-avatars - v-if="line.hasDiscussionsRight" - :discussions="line.right.discussions" - :discussions-expanded="line.right.discussionsExpanded" - @toggleLineDiscussions=" - toggleLineDiscussions({ - lineCode: line.right.line_code, - fileHash, - expanded: !line.right.discussionsExpanded, - }) - " - /> - </td> - <td - v-gl-tooltip.hover - :title="coverageState.text" - :class="[line.right.type, coverageState.class, { hll: isHighlighted }]" - class="line-coverage right-side" - ></td> - <td - :id="line.right.line_code" - :key="line.right.rich_text" - v-safe-html="line.right.rich_text" - :class="[ - line.right.type, - { - hll: isHighlighted, - }, - ]" - v-bind="interopRightAttributes" - class="line_content with-coverage parallel right-side" - @mousedown="handleParallelLineMouseDown" - ></td> - </template> - <template v-else> - <td class="diff-line-num old_line empty-cell"></td> - <td class="line-coverage right-side empty-cell"></td> - <td class="line_content with-coverage parallel right-side empty-cell"></td> - </template> - </tr> -</template> |