+++ /dev/null
-/*
- * 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 { forwardRef, LegacyRef } from 'react';
-import tw from 'twin.macro';
-import { themeColor, themeContrast } from '../helpers/theme';
-import { isDefined } from '../helpers/types';
-import { IssueLocationIcon } from './icons/IssueLocationIcon';
-
-interface Props {
- className?: string;
- onClick?: () => void;
- selected: boolean;
- text?: number | string;
-}
-
-function IssueLocationMarkerFunc(
- { className, onClick, text, selected }: Props,
- ref: LegacyRef<HTMLElement>
-) {
- return (
- <Marker
- className={classNames(className, {
- selected,
- concealed: !isDefined(text),
- 'sw-cursor-pointer': isDefined(onClick),
- })}
- onClick={onClick}
- ref={ref}
- >
- {isDefined(text) ? text : <IssueLocationIcon />}
- </Marker>
- );
-}
-
-export const IssueLocationMarker = forwardRef<HTMLElement, Props>(IssueLocationMarkerFunc);
-
-export const Marker = styled.span`
- ${tw`sw-flex sw-grow-0 sw-items-center sw-justify-center`}
- ${tw`sw-body-sm-highlight`}
- ${tw`sw-rounded-1/2`}
-
- height: 1.125rem;
- color: ${themeContrast('codeLineLocationMarker')};
- background-color: ${themeColor('codeLineLocationMarker')};
-
- &.selected,
- &:hover {
- background-color: ${themeColor('codeLineLocationMarkerSelected')};
- }
-
- &:not(.concealed) {
- ${tw`sw-px-1`}
- ${tw`sw-self-start`}
- }
-`;
--- /dev/null
+/*
+ * 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 { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render } from '../../helpers/testUtils';
+import { FCProps } from '../../types/misc';
+import { LineFinding } from '../code-line/LineFinding';
+
+it('should render correctly', async () => {
+ const user = userEvent.setup();
+ const { container } = setupWithProps();
+ await user.click(screen.getByRole('button'));
+ expect(container).toMatchSnapshot();
+});
+
+it('should render correctly when issueType is provided', () => {
+ const { container } = setupWithProps({ issueType: 'bugs' });
+ expect(container).toMatchSnapshot();
+});
+
+it('should be clickable when onIssueSelect is provided', async () => {
+ const mockClick = jest.fn();
+ const user = userEvent.setup();
+
+ setupWithProps({ issueType: 'bugs', onIssueSelect: mockClick });
+ await user.click(screen.getByRole('button'));
+ expect(mockClick).toHaveBeenCalled();
+});
+
+function setupWithProps(props?: Partial<FCProps<typeof LineFinding>>) {
+ return render(
+ <LineFinding issueKey="key" message="message" onIssueSelect={jest.fn()} {...props} />
+ );
+}
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+.emotion-0 {
+ all: unset;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 0.5rem;
+ margin-left: 0.25rem;
+ margin-right: 0.25rem;
+ margin-top: 0.75rem;
+ margin-bottom: 0.75rem;
+ padding: 0.75rem;
+ font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+ font-size: 1rem;
+ line-height: 1.5rem;
+ font-weight: 600;
+ border-radius: 0.25rem;
+ width: 100%;
+ box-sizing: border-box;
+ border: 1px solid rgb(253,162,155);
+ color: rgb(62,67,87);
+ word-break: break-word;
+ background-color: rgb(255,255,255);
+}
+
+.emotion-0:focus-visible {
+ background-color: rgb(239,242,249);
+}
+
+.emotion-0:hover {
+ box-shadow: 0px 1px 3px 0px rgba(29,33,47,0.05),0px 1px 25px 0px rgba(29,33,47,0.05);
+}
+
+<div>
+ <button
+ class="emotion-0 emotion-1"
+ data-issue="key"
+ >
+ message
+ </button>
+</div>
+`;
+
+exports[`should render correctly when issueType is provided 1`] = `
+.emotion-0 {
+ all: unset;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 0.5rem;
+ margin-left: 0.25rem;
+ margin-right: 0.25rem;
+ margin-top: 0.75rem;
+ margin-bottom: 0.75rem;
+ padding: 0.75rem;
+ font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+ font-size: 1rem;
+ line-height: 1.5rem;
+ font-weight: 600;
+ border-radius: 0.25rem;
+ width: 100%;
+ box-sizing: border-box;
+ border: 1px solid rgb(253,162,155);
+ color: rgb(62,67,87);
+ word-break: break-word;
+ background-color: rgb(255,255,255);
+}
+
+.emotion-0:focus-visible {
+ background-color: rgb(239,242,249);
+}
+
+.emotion-0:hover {
+ box-shadow: 0px 1px 3px 0px rgba(29,33,47,0.05),0px 1px 25px 0px rgba(29,33,47,0.05);
+}
+
+.emotion-2 {
+ height: 1.5rem;
+ width: 1.5rem;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ background: rgb(254,205,202);
+ border-radius: 100%;
+}
+
+<div>
+ <button
+ class="emotion-0 emotion-1"
+ data-issue="key"
+ >
+ <div
+ class="sw-ml-1/2 emotion-2 emotion-3"
+ >
+ <svg
+ aria-hidden="true"
+ fill="none"
+ height="1rem"
+ role="img"
+ style="clip-rule: evenodd; display: inline-block; fill-rule: evenodd; user-select: none; vertical-align: middle; stroke-linejoin: round; stroke-miterlimit: 1.414;"
+ version="1.1"
+ viewBox="0 0 16 16"
+ width="1rem"
+ xml:space="preserve"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ >
+ <path
+ d="M10.09,1.88A2.86,2.86,0,0,0,8,1a2.87,2.87,0,0,0-2.11.87A2.93,2.93,0,0,0,5,4h6A2.93,2.93,0,0,0,10.09,1.88Z"
+ fill="rgb(93,29,19)"
+ />
+ <path
+ d="M14.54,9H13V5.6L14.3,4.42a.5.5,0,0,0,0-.71.49.49,0,0,0-.7,0L12.17,5H3.82L2.34,3.66a.5.5,0,0,0-.67.74L2.94,5.55V9H1.46a.5.5,0,0,0,0,1H3a5.2,5.2,0,0,0,1.05,2.32l-2,1.81a.5.5,0,1,0,.67.74l2-1.82A4.62,4.62,0,0,0,7,14.1V8A1,1,0,0,1,8,7a.94.94,0,0,1,1,.9v6.17A4.55,4.55,0,0,0,11.18,13l2,1.83a.51.51,0,0,0,.33.13.48.48,0,0,0,.37-.17.49.49,0,0,0,0-.7l-2-1.8a5.34,5.34,0,0,0,1-2.29h1.64a.5.5,0,0,0,0-1Z"
+ fill="rgb(93,29,19)"
+ />
+ </svg>
+ </div>
+ message
+ </button>
+</div>
+`;
interface Props {
className?: string;
issueKey: string;
- issueType: string;
- message: string;
- onIssueSelect: (issueKey: string) => void;
+ issueType?: string;
+ message: React.ReactNode;
+ onIssueSelect?: (issueKey: string) => void;
selected?: boolean;
}
className={className}
data-issue={issueKey}
onClick={() => {
- onIssueSelect(issueKey);
+ if (onIssueSelect) {
+ onIssueSelect(issueKey);
+ }
}}
ref={ref}
selected={selected}
>
- <IssueTypeCircleIcon className="sw-ml-1/2" type={issueType} />
+ {issueType && <IssueTypeCircleIcon className="sw-ml-1/2" type={issueType} />}
{message}
</LineFindingStyled>
);
import { forwardRef, Ref, useCallback, useRef } from 'react';
import tw from 'twin.macro';
import { themeColor, themeContrast } from '../../helpers/theme';
-import { IssueLocationMarker } from '../IssueLocationMarker';
+import { LocationMarker } from '../LocationMarker';
interface Props {
hideLocationIndex?: boolean;
return (
<Wrapper className={classNames({ leading })} ref={element}>
- <IssueLocationMarker
+ <LocationMarker
onClick={handleClick}
- ref={ref}
+ ref={ref as React.RefObject<HTMLDivElement>}
selected={selected}
text={hideLocationIndex ? undefined : index + 1}
/>
*/
import styled from '@emotion/styled';
import classNames from 'classnames';
-import { FlagMessage, LineFinding, ThemeProp, themeColor, withTheme } from 'design-system';
+import { FlagMessage, LineFinding, themeColor } from 'design-system';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { getSources } from '../../../api/components';
import getCoverageStatus from '../../../components/SourceViewer/helpers/getCoverageStatus';
import { locationsByLine } from '../../../components/SourceViewer/helpers/indexing';
+import { IssueMessageHighlighting } from '../../../components/issue/IssueMessageHighlighting';
import { getBranchLikeQuery } from '../../../helpers/branch-like';
import { translate } from '../../../helpers/l10n';
import { BranchLike } from '../../../types/branch-like';
snippets: Snippet[];
}
-class ComponentSourceSnippetGroupViewer extends React.PureComponent<Props & ThemeProp, State> {
+export default class ComponentSourceSnippetGroupViewer extends React.PureComponent<Props, State> {
mounted = false;
- constructor(props: Props & ThemeProp) {
+ constructor(props: Props) {
super(props);
this.state = {
additionalLines: {},
<LineFinding
issueType={issueToDisplay.type}
issueKey={issueToDisplay.key}
- message={issueToDisplay.message}
+ message={
+ <IssueMessageHighlighting
+ message={issueToDisplay.message}
+ messageFormattings={issueToDisplay.messageFormattings}
+ />
+ }
selected={isSelectedIssue}
ref={isSelectedIssue ? ctx?.registerPrimaryLocationRef : undefined}
onIssueSelect={this.props.onIssueSelect}
};
render() {
- const { branchLike, isLastOccurenceOfPrimaryComponent, issue, snippetGroup, theme } =
- this.props;
+ const { branchLike, isLastOccurenceOfPrimaryComponent, issue, snippetGroup } = this.props;
const { additionalLines, loading, snippets } = this.state;
const snippetLines = linesForSnippets(snippets, {
? 'issue.closed.file_level'
: 'issue.closed.project_level';
- const borderColor = themeColor('codeLineBorder')({ theme });
-
- const FileLevelIssueStyle = styled.div`
- border: 1px solid ${borderColor};
- `;
-
const hideLocationIndex = issue.secondaryLocations.length !== 0;
return (
<LineFinding
issueType={issue.type}
issueKey={issue.key}
- message={issue.message}
+ message={
+ <IssueMessageHighlighting
+ message={issue.message}
+ messageFormattings={issue.messageFormattings}
+ />
+ }
selected={true}
ref={ctx?.registerPrimaryLocationRef}
onIssueSelect={this.props.onIssueSelect}
return !fullyShown && isFile(snippetGroup.component.q);
}
-export default withTheme(ComponentSourceSnippetGroupViewer);
+const FileLevelIssueStyle = styled.div`
+ border: 1px solid ${themeColor('codeLineBorder')};
+`;
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import classNames from 'classnames';
+import { LineFinding } from 'design-system';
import * as React from 'react';
import { IssueMessageHighlighting } from '../../../components/issue/IssueMessageHighlighting';
import { Hotspot } from '../../../types/security-hotspots';
-import './HotspotPrimaryLocationBox.css';
const SCROLL_DELAY = 100;
const SCROLL_TOP_OFFSET = 100; // 5 lines above
return (
<div
- className={classNames(
- 'hotspot-primary-location',
- 'display-flex-space-between display-flex-center padded-top padded-bottom big-padded-left big-padded-right',
- `hotspot-risk-exposure-${hotspot.rule.vulnerabilityProbability}`
- )}
style={{
scrollMarginTop: `${SCROLL_TOP_OFFSET}px`,
scrollMarginBottom: `${SCROLL_BOTTOM_OFFSET}px`,
}}
ref={locationRef}
>
- <div className="text-bold">
- <IssueMessageHighlighting
- message={hotspot.message}
- messageFormattings={hotspot.messageFormattings}
- />
- </div>
+ <LineFinding
+ issueKey={hotspot.key}
+ message={
+ <IssueMessageHighlighting
+ message={hotspot.message}
+ messageFormattings={hotspot.messageFormattings}
+ />
+ }
+ selected={true}
+ className="sw-cursor-default"
+ />
</div>
);
}
expandBlock: (direction: ExpandDirection) => Promise<void>,
direction: ExpandDirection
) {
- const wrapper = scrollableRef.current?.querySelector<HTMLElement>('.snippet');
+ const wrapper = scrollableRef.current?.querySelector<HTMLElement>('.it__source-viewer-code');
const table = wrapper?.firstChild as HTMLElement;
if (!wrapper || !table) {
renderAdditionalChildInLine={renderHotspotBoxInLine}
renderDuplicationPopup={noop}
snippet={sourceLines}
+ hideLocationIndex={secondaryLocations.length !== 0}
/>
)}
</SourceFileWrapper>
UncoveredUnderlineLabel,
UnderlineLabels,
} from 'design-system';
-import React, { Fragment, PureComponent, ReactNode, RefObject, createRef } from 'react';
+import React, { PureComponent, ReactNode, RefObject, createRef } from 'react';
import { IssueSourceViewerScrollContext } from '../../../apps/issues/components/IssueSourceViewerScrollContext';
import { translate } from '../../../helpers/l10n';
import { LinearIssueLocation, SourceLine } from '../../../types/types';
const message = loc?.text;
const isLeading = leadingMarker && markerIndex === 0;
return (
- <Fragment key={`${marker}-${index}`}>
- <IssueSourceViewerScrollContext.Consumer>
- {(ctx) => (
- <LineMarker
- hideLocationIndex={hideLocationIndex}
- index={marker}
- leading={isLeading}
- message={message}
- onLocationSelect={this.props.onLocationSelect}
- ref={selected ? ctx?.registerSelectedSecondaryLocationRef : undefined}
- selected={selected}
- />
- )}
- </IssueSourceViewerScrollContext.Consumer>
- </Fragment>
+ <IssueSourceViewerScrollContext.Consumer key={`${marker}-${index}`}>
+ {(ctx) => (
+ <LineMarker
+ hideLocationIndex={hideLocationIndex}
+ index={marker}
+ leading={isLeading}
+ message={message}
+ onLocationSelect={this.props.onLocationSelect}
+ ref={selected ? ctx?.registerSelectedSecondaryLocationRef : undefined}
+ selected={selected}
+ />
+ )}
+ </IssueSourceViewerScrollContext.Consumer>
);
};
(previousLine?.coverageStatus && previousLine.coverageBlock === line.coverageBlock);
return (
- <LineCodeLayers
- className="js-source-line-code it__source-line-code"
- data-line-number={line.line}
- >
+ <LineCodeLayers className="it__source-line-code" data-line-number={line.line}>
{(displayCoverageUnderlineLabel || displayNewCodeUnderlineLabel) && (
<UnderlineLabels aria-hidden={true} transparentBackground={previousLineHasUnderline}>
{displayCoverageUnderlineLabel && line.coverageStatus === 'covered' && (
projects / sonarqube.git / commitdiff