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
|
/*
* SonarQube
* Copyright (C) 2009-2024 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 React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { LocationMarker, StyledMarker, themeColor } from '~design-system';
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: Readonly<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: 'nearest',
behavior: 'smooth',
});
}
}, [selected]);
const handleClick = useCallback(
(event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
onClick(index);
},
[index, onClick],
);
return (
<StyledButton aria-label={normalizedMessage} aria-current={selected} onClick={handleClick}>
<StyledLocation
className={classNames(
'sw-p-1 sw-rounded-1/2 sw-flex sw-gap-2 sw-typo-default sw-text-left',
{
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()}
/>
)}
<StyledLocationName>
{normalizedMessage ?? translate('issue.unnamed_location')}
</StyledLocationName>
</span>
</StyledLocation>
</StyledButton>
);
}
const StyledLocation = styled.div`
&.selected,
&:hover {
background-color: ${themeColor('codeLineLocationSelected')};
}
&:hover ${StyledMarker} {
background-color: ${themeColor('codeLineLocationMarkerSelected')};
}
`;
const StyledButton = styled.button`
color: ${themeColor('pageContent')};
border: none;
background: none;
`;
const StyledLocationName = styled.span`
word-break: break-word;
`;
function getLocationType(message?: string) {
if (message?.toLowerCase().startsWith('source')) {
return 'source';
} else if (message?.toLowerCase().startsWith('sink')) {
return 'sink';
}
return null;
}
|
