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
|
/*
* SonarQube
* Copyright (C) 2009-2023 SonarSource SA
* mailto:info AT sonarsource DOT com
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import styled from '@emotion/styled';
import classNames from 'classnames';
import { BaseLink, LocationMarker, StyledMarker, themeColor } from 'design-system';
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { translate } from '../../../helpers/l10n';
interface Props {
concealed?: boolean;
index: number;
message: string | undefined;
onClick: (index: number) => void;
selected: boolean;
}
export default function IssueLocation(props: Props) {
const { index, message, selected, concealed, onClick } = props;
const node = useRef<HTMLElement | null>(null);
const locationType = useMemo(() => getLocationType(message), [message]);
const normalizedMessage = useMemo(() => message?.replace(/^(source|sink): /i, ''), [message]);
useEffect(() => {
if (selected && node.current) {
node.current.scrollIntoView({
block: 'center',
behavior: 'smooth',
});
}
}, [selected]);
const handleClick = useCallback(
(event: React.MouseEvent<HTMLAnchorElement>) => {
event.preventDefault();
onClick(index);
},
[index, onClick]
);
return (
<StyledLink aria-current={selected} onClick={handleClick} to={{}}>
<StyledLocation
className={classNames('sw-p-1 sw-rounded-1/2 sw-flex sw-gap-2 sw-body-sm', {
selected,
})}
ref={(n) => (node.current = n)}
>
<LocationMarker selected={selected} text={concealed ? undefined : index + 1} />
<span>
{locationType && (
<LocationMarker
className="sw-inline sw-mr-2"
selected={selected}
text={locationType.toUpperCase()}
/>
)}
<span>{normalizedMessage ?? translate('issue.unnamed_location')}</span>
</span>
</StyledLocation>
</StyledLink>
);
}
const StyledLocation = styled.div`
&.selected,
&:hover {
background-color: ${themeColor('codeLineLocationSelected')};
}
&:hover ${StyledMarker} {
background-color: ${themeColor('codeLineLocationMarkerSelected')};
}
`;
const StyledLink = styled(BaseLink)`
color: ${themeColor('pageContent')};
border: none;
`;
function getLocationType(message?: string) {
if (message?.toLowerCase().startsWith('source')) {
return 'source';
} else if (message?.toLowerCase().startsWith('sink')) {
return 'sink';
}
return null;
}
|
