1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
import { takeRightWhile } from 'lodash';
export function getSymbol(type) {
if (type === 'new') return '+';
if (type === 'old') return '-';
return '';
}
function getLineNumber(lineRange, key) {
if (!lineRange || !key || !lineRange[key]) return '';
const { new_line: newLine, old_line: oldLine, type } = lineRange[key];
const otherKey = key === 'start' ? 'end' : 'start';
// By default we want to see the "old" or "left side" line number
// The exception is if the "end" line is on the "right" side
// `otherLineType` is only used if `type` is null to make sure the line
// number relfects the "right" side number, if that is the side
// the comment form is located on
const otherLineType = !type ? lineRange[otherKey]?.type : null;
const lineType = type || '';
let lineNumber = oldLine;
if (lineType === 'new' || otherLineType === 'new') lineNumber = newLine;
return (lineNumber && getSymbol(lineType) + lineNumber) || '';
}
export function getStartLineNumber(lineRange) {
return getLineNumber(lineRange, 'start');
}
export function getEndLineNumber(lineRange) {
return getLineNumber(lineRange, 'end');
}
export function getLineClasses(line) {
const symbol = typeof line === 'string' ? line.charAt(0) : getSymbol(line?.type);
if (symbol !== '+' && symbol !== '-') return '';
return [
'gl-px-1 gl-rounded-small gl-border-solid gl-border-1 gl-border-white',
{
'gl-bg-green-100 gl-text-green-800': symbol === '+',
'gl-bg-red-100 gl-text-red-800': symbol === '-',
},
];
}
export function commentLineOptions(diffLines, startingLine, lineCode, side = 'left') {
const preferredSide = side === 'left' ? 'old_line' : 'new_line';
const fallbackSide = preferredSide === 'new_line' ? 'old_line' : 'new_line';
const notMatchType = l => l.type !== 'match';
const linesCopy = [...diffLines]; // don't mutate the argument
const startingLineCode = startingLine.line_code;
const currentIndex = linesCopy.findIndex(line => line.line_code === lineCode);
// We're limiting adding comments to only lines above the current line
// to make rendering simpler. Future interations will use a more
// intuitive dragging interface that will make this unnecessary
const upToSelected = linesCopy.slice(0, currentIndex + 1);
// Only include the lines up to the first "Show unchanged lines" block
// i.e. not a "match" type
const lines = takeRightWhile(upToSelected, notMatchType);
// If the selected line is "hidden" in an unchanged line block
// or "above" the current group of lines add it to the array so
// that the drop down is not defaulted to empty
const selectedIndex = lines.findIndex(line => line.line_code === startingLineCode);
if (selectedIndex < 0) lines.unshift(startingLine);
return lines.map(l => {
const { line_code, type, old_line, new_line } = l;
return {
value: { line_code, type, old_line, new_line },
text: `${getSymbol(type)}${l[preferredSide] || l[fallbackSide]}`,
};
});
}
export function formatLineRange(start, end) {
const extractProps = ({ line_code, type, old_line, new_line }) => ({
line_code,
type,
old_line,
new_line,
});
return {
start: extractProps(start),
end: extractProps(end),
};
}
export function getCommentedLines(selectedCommentPosition, diffLines) {
if (!selectedCommentPosition) {
// This structure simplifies the logic that consumes this result
// by keeping the returned shape the same and adjusting the bounds
// to something unreachable. This way our component logic stays:
// "if index between start and end"
return {
startLine: diffLines.length + 1,
endLine: diffLines.length + 1,
};
}
const findLineCodeIndex = line => position => {
return [position.line_code, position.left?.line_code, position.right?.line_code].includes(
line.line_code,
);
};
const { start, end } = selectedCommentPosition;
const startLine = diffLines.findIndex(findLineCodeIndex(start));
const endLine = diffLines.findIndex(findLineCodeIndex(end));
return { startLine, endLine };
}
|
