onClick?: () => void;
}
-export function ExecutionFlowAccordion(props: Props) {
+export function ExecutionFlowAccordion(props: Readonly<Props>) {
const { children, expanded, header, hidden, id, innerRef, onClick } = props;
return (
const dataFlowButton = await screen.findByRole('button', {
name: 'issue.flow.x_steps.2 Backtracking 1',
});
- const exectionFlowButton = screen.getByRole('link', {
+ const exectionFlowButton = screen.getByRole('button', {
name: 'issue.show_full_execution_flow.3',
});
await user.click(await ui.issueItemAction4.find());
- expect(screen.getByRole('link', { name: 'location 1' })).toBeInTheDocument();
- expect(screen.getByRole('link', { name: 'location 2' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'location 1' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'location 2' })).toBeInTheDocument();
// Select the "why is this an issue" tab
await user.click(
}),
).toHaveAttribute('aria-current', 'false');
- await user.click(screen.getByRole('link', { name: 'location 1' }));
+ await user.click(screen.getByRole('button', { name: 'location 1' }));
expect(
screen.queryByRole('tab', {
}),
).toHaveAttribute('aria-current', 'false');
- await user.click(screen.getByRole('link', { name: 'location 1' }));
+ await user.click(screen.getByRole('button', { name: 'location 1' }));
expect(
screen.queryByRole('tab', {
*/
import styled from '@emotion/styled';
import classNames from 'classnames';
-import { BaseLink, LocationMarker, StyledMarker, themeColor } from 'design-system';
+import { LocationMarker, StyledMarker, themeColor } from 'design-system';
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { translate } from '../../../helpers/l10n';
selected: boolean;
}
-export default function IssueLocation(props: Props) {
+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]);
}, [selected]);
const handleClick = useCallback(
- (event: React.MouseEvent<HTMLAnchorElement>) => {
+ (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
onClick(index);
},
);
return (
- <StyledLink
- aria-label={normalizedMessage}
- aria-current={selected}
- onClick={handleClick}
- to={{}}
- >
+ <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-body-sm', {
selected,
</StyledLocationName>
</span>
</StyledLocation>
- </StyledLink>
+ </StyledButton>
);
}
}
`;
-const StyledLink = styled(BaseLink)`
+const StyledButton = styled.button`
color: ${themeColor('pageContent')};
border: none;
+ background: none;
`;
const StyledLocationName = styled.span`
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import styled from '@emotion/styled';
-import { DiscreetLink, themeBorder, themeContrast } from 'design-system';
+import { BareButton, themeBorder, themeContrast } from 'design-system';
import React, { PureComponent } from 'react';
import { translateWithParameters } from '../../../helpers/l10n';
import { collapsePath } from '../../../helpers/path';
<div className="sw-flex sw-flex-col sw-gap-4">
{this.renderGroup(firstGroup, 0, { onlyFirst: true })}
<div>
- <ExpandLink
- blurAfterClick
- onClick={this.handleMoreLocationsClick}
- preventDefault
- to={{}}
- >
+ <ExpandButton onClick={this.handleMoreLocationsClick}>
{translateWithParameters(
'issues.show_x_more_locations',
locations.length - VISIBLE_LOCATIONS_COLLAPSE,
)}
- </ExpandLink>
+ </ExpandButton>
</div>
{this.renderGroup(lastGroup, groups.length - 1, { onlyLast: true })}
</div>
color: ${themeContrast('subnavigation')};
`;
-const ExpandLink = styled(DiscreetLink)`
+const ExpandButton = styled(BareButton)`
color: ${themeContrast('subnavigationSubheading')};
+ border-bottom: ${themeBorder('default', 'currentColor')};
`;
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { DiscreetLink, ExecutionFlowAccordion, SubnavigationFlowSeparator } from 'design-system';
+import styled from '@emotion/styled';
+import {
+ BareButton,
+ ExecutionFlowAccordion,
+ SubnavigationFlowSeparator,
+ themeBorder,
+} from 'design-system';
import React, { Fragment, useCallback, useRef } from 'react';
import { translate, translateWithParameters } from '../../../helpers/l10n';
import { Flow, FlowType, Issue } from '../../../types/types';
selectedLocationIndex: number | undefined;
}
-export default function IssueLocationsNavigator(props: Props) {
+export default function IssueLocationsNavigator(props: Readonly<Props>) {
const { issue, onFlowSelect, onLocationSelect, selectedFlowIndex, selectedLocationIndex } = props;
const accordionElement = useRef<HTMLDivElement | null>(null);
const hasFlows =
flow.type === FlowType.EXECUTION &&
hasFlowsWithType && (
<div>
- <DiscreetLink
+ <StyledBareButton
onClick={() => {
handleAccordionClick(index);
}}
- preventDefault
- to="{{}}"
>
{translateWithParameters(
'issue.show_full_execution_flow',
flow.locations.length,
)}
- </DiscreetLink>
+ </StyledBareButton>
</div>
)}
</Fragment>
return translate('issues.execution_flow');
}
+
+const StyledBareButton = styled(BareButton)`
+ border-bottom: ${themeBorder('default', 'currentColor')};
+`;
import * as React from 'react';
import { mockFlowLocation, mockIssue, mockPaging } from '../../../../helpers/testMocks';
import { renderComponent } from '../../../../helpers/testReactTestingUtils';
-import { byRole, byText } from '../../../../helpers/testSelector';
+import { byRole } from '../../../../helpers/testSelector';
import { ComponentPropsType } from '../../../../helpers/testUtils';
import { FlowType, Issue } from '../../../../types/types';
import { VISIBLE_LOCATIONS_COLLAPSE } from '../IssueLocationsCrossFile';
function getPageObject() {
const selectors = {
headerBackButton: byRole('link', { name: 'issues.return_to_list' }),
- expandBadgesButton: byText(/issues.show_x_more_locations.\d/),
+ expandBadgesButton: byRole('button', { name: /issues.show_x_more_locations.\d/ }),
};
const user = userEvent.setup();
const ui = {
projects / sonarqube.git / commitdiff