123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- /*
- * 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 { 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: 'nearest',
- behavior: 'smooth',
- });
- }
- }, [selected]);
-
- const handleClick = useCallback(
- (event: React.MouseEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- onClick(index);
- },
- [index, onClick],
- );
-
- return (
- <StyledLink
- aria-label={normalizedMessage}
- 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()}
- />
- )}
- <StyledLocationName>
- {normalizedMessage ?? translate('issue.unnamed_location')}
- </StyledLocationName>
- </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;
- `;
-
- 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;
- }
|