summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
diff options
context:
space:
mode:
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.vue310
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>
View Lorry Controller Status