From: Kevin Silva Date: Fri, 1 Dec 2023 11:56:34 +0000 (+0100) Subject: SONAR-21164 - Add prettier into design system build X-Git-Tag: 10.4.0.87286~377 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=83325c00407343f092221844675490669840401e;p=sonarqube.git SONAR-21164 - Add prettier into design system build --- diff --git a/server/sonar-web/design-system/package.json b/server/sonar-web/design-system/package.json index d31534e8f3a..77cfdaf9ddc 100644 --- a/server/sonar-web/design-system/package.json +++ b/server/sonar-web/design-system/package.json @@ -4,6 +4,8 @@ "main": "lib/index.js", "types": "lib/index.d.ts", "scripts": { + "format": "prettier --write --list-different \"src/**/*.{ts,tsx}\"", + "format-check": "prettier --list-different \"src/**/*.{ts,tsx}\"", "build": "yarn lint && yarn ts-check && vite build", "build:no-checks": "vite build", "build-release": "yarn install --immutable && yarn build", @@ -11,7 +13,7 @@ "lint-report-ci": "yarn install --immutable && eslint --ext js,ts,tsx -f json -o eslint-report/eslint-report.json src || yarn lint", "test": "jest", "ts-check": "tsc --noEmit", - "validate-ci": "yarn install --immutable && yarn ts-check && yarn test --coverage --ci" + "validate-ci": "yarn install --immutable && yarn ts-check && yarn format-check && yarn test --coverage --ci" }, "devDependencies": { "@babel/core": "7.23.2", @@ -44,6 +46,7 @@ "postcss": "8.4.31", "postcss-calc": "9.0.1", "postcss-custom-properties": "12.1.11", + "prettier": "^3.1.0", "twin.macro": "3.4.0", "typescript": "5.2.2", "vite": "4.5.0", diff --git a/server/sonar-web/design-system/src/components/Accordion.tsx b/server/sonar-web/design-system/src/components/Accordion.tsx index 22c49a3b362..08573eb9056 100644 --- a/server/sonar-web/design-system/src/components/Accordion.tsx +++ b/server/sonar-web/design-system/src/components/Accordion.tsx @@ -78,7 +78,9 @@ const accordionStyle = (props: ThemedProps) => css` border: ${themeBorder('default', 'buttonSecondaryBorder')(props)}; color: ${themeContrast('buttonSecondary')(props)}; background-color: ${themeColor('buttonSecondary')(props)}; - transition: background-color 0.2s ease, outline 0.2s ease; + transition: + background-color 0.2s ease, + outline 0.2s ease; & > button { ${tw`sw-body-sm-highlight`} diff --git a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx index 2bc0a92d81d..66cf0aa3193 100644 --- a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx +++ b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx @@ -122,7 +122,7 @@ export function Breadcrumbs(props: Props) { overlay={modifiedChildren[index].props.children as React.ReactNode} > {modifiedChildren[index]} - + , ); } else if ( isLastBreadcrumb || diff --git a/server/sonar-web/design-system/src/components/BubbleChart.tsx b/server/sonar-web/design-system/src/components/BubbleChart.tsx index e1bd883e04d..a583615e384 100644 --- a/server/sonar-web/design-system/src/components/BubbleChart.tsx +++ b/server/sonar-web/design-system/src/components/BubbleChart.tsx @@ -121,7 +121,7 @@ export function BubbleChart(props: BubbleChartProps) { k, }); }, - [padding] + [padding], ); const boundNode = React.useCallback( @@ -130,7 +130,7 @@ export function BubbleChart(props: BubbleChartProps) { zoomRef.current = zoom().scaleExtent([1, 10]).on('zoom', zoomed); select(nodeRef.current).call(zoomRef.current); }, - [zoomed] + [zoomed], ); const resetZoom = React.useCallback((e: React.MouseEvent) => { @@ -150,7 +150,7 @@ export function BubbleChart(props: BubbleChartProps) { const dMaxX = maxX > x2 ? maxX - x2 : 0; return [dMinX, availableWidth - dMaxX]; }, - [items] + [items], ); const getYRange = React.useCallback( @@ -162,7 +162,7 @@ export function BubbleChart(props: BubbleChartProps) { const dMaxY = maxY > y1 ? maxY - y1 : 0; return [availableHeight - dMaxY, dMinY]; }, - [items] + [items], ); const getTicks = React.useCallback( @@ -176,7 +176,7 @@ export function BubbleChart(props: BubbleChartProps) { : TICKS_COUNT * zoomAmount; return scale.ticks(ticksCount); }, - [transform] + [transform], ); const renderXGrid = React.useCallback( @@ -202,7 +202,7 @@ export function BubbleChart(props: BubbleChartProps) { return {lines}; }, - [transform, displayXGrid] + [transform, displayXGrid], ); const renderYGrid = React.useCallback( @@ -228,7 +228,7 @@ export function BubbleChart(props: BubbleChartProps) { return {lines}; }, - [displayYGrid, transform] + [displayYGrid, transform], ); const renderXTicks = React.useCallback( @@ -252,7 +252,7 @@ export function BubbleChart(props: BubbleChartProps) { return {ticks}; }, - [displayXTicks, formatXTick, transform] + [displayXTicks, formatXTick, transform], ); const renderYTicks = React.useCallback( @@ -283,7 +283,7 @@ export function BubbleChart(props: BubbleChartProps) { return {ticks}; }, - [displayYTicks, formatYTick, transform] + [displayYTicks, formatYTick, transform], ); const renderChart = (width: number) => { @@ -406,7 +406,7 @@ function Bubble(props: BubbleProps) { event.preventDefault(); onClick?.(data); }, - [data, onClick] + [data, onClick], ); const circle = ( diff --git a/server/sonar-web/design-system/src/components/CodeSnippet.tsx b/server/sonar-web/design-system/src/components/CodeSnippet.tsx index fcb8532c487..8281a1242f9 100644 --- a/server/sonar-web/design-system/src/components/CodeSnippet.tsx +++ b/server/sonar-web/design-system/src/components/CodeSnippet.tsx @@ -70,7 +70,7 @@ export function CodeSnippet(props: Props) { 'code-snippet-simple-oneline': isSimpleOneLine, }, className, - 'fs-mask' + 'fs-mask', )} > {!noCopy && copyButton} diff --git a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx index f00a59a6f64..6f5d5e418bb 100644 --- a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx +++ b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx @@ -107,7 +107,10 @@ const buttonIconStyle = (props: ThemedProps & { size: InteractiveIconSize }) => text-decoration: none; color: var(--color); background-color: var(--background); - transition: background-color 0.2s ease, outline 0.2s ease, color 0.2s ease; + transition: + background-color 0.2s ease, + outline 0.2s ease, + color 0.2s ease; ${tw`sw-inline-flex sw-items-center sw-justify-center`} ${tw`sw-cursor-pointer`} @@ -158,11 +161,10 @@ export const InteractiveIcon: React.FC -> = styled(InteractiveIcon)` - --color: ${themeColor('discreetInteractiveIcon')}; -`; +export const DiscreetInteractiveIcon: React.FC> = + styled(InteractiveIcon)` + --color: ${themeColor('discreetInteractiveIcon')}; + `; export const DestructiveIcon: React.FC> = styled( InteractiveIconBase, @@ -174,14 +176,13 @@ export const DestructiveIcon: React.FC -> = styled(InteractiveIcon)` - --background: ${themeColor('productNews')}; - --backgroundHover: ${themeColor('productNewsHover')}; - --color: ${themeContrast('productNews')}; - --colorHover: ${themeContrast('productNewsHover')}; - --focus: ${themeColor('interactiveIconFocus', OPACITY_20_PERCENT)}; +export const DismissProductNewsIcon: React.FC> = + styled(InteractiveIcon)` + --background: ${themeColor('productNews')}; + --backgroundHover: ${themeColor('productNewsHover')}; + --color: ${themeContrast('productNews')}; + --colorHover: ${themeContrast('productNewsHover')}; + --focus: ${themeColor('interactiveIconFocus', OPACITY_20_PERCENT)}; - height: 28px; -`; + height: 28px; + `; diff --git a/server/sonar-web/design-system/src/components/LocationMarker.tsx b/server/sonar-web/design-system/src/components/LocationMarker.tsx index 1ce611447ea..c02a366d037 100644 --- a/server/sonar-web/design-system/src/components/LocationMarker.tsx +++ b/server/sonar-web/design-system/src/components/LocationMarker.tsx @@ -34,7 +34,7 @@ interface Props { function InternalLocationMarker( { className, onClick, text, selected }: Props, - ref: LegacyRef + ref: LegacyRef, ) { return ( { // position (which is no longer correct). this.positionTooltip(); } - } + }, ); } } @@ -195,7 +195,7 @@ export class TooltipInner extends React.Component { adjustArrowPosition = ( placement: PopupPlacement, - { leftFix, topFix, height, width }: Measurements + { leftFix, topFix, height, width }: Measurements, ) => { switch (placement) { case PopupPlacement.Left: @@ -223,7 +223,7 @@ export class TooltipInner extends React.Component { const { height, left, leftFix, top, topFix, width } = popupPositioning( toggleNode, this.tooltipNode, - this.getPlacement() + this.getPlacement(), ); // save width and height (and later set in `render`) to avoid resizing the popup element, @@ -253,18 +253,21 @@ export class TooltipInner extends React.Component { }; handlePointerEnter = () => { - this.mouseEnterTimeout = window.setTimeout(() => { - // for some reason even after the `this.mouseEnterTimeout` is cleared, it still triggers - // to workaround this issue, check that its value is not `undefined` - // (if it's `undefined`, it means the timer has been reset) - if ( - this.mounted && - this.props.visible === undefined && - this.mouseEnterTimeout !== undefined - ) { - this.setState({ visible: true }); - } - }, (this.props.mouseEnterDelay ?? 0) * MILLISECONDS_IN_A_SECOND); + this.mouseEnterTimeout = window.setTimeout( + () => { + // for some reason even after the `this.mouseEnterTimeout` is cleared, it still triggers + // to workaround this issue, check that its value is not `undefined` + // (if it's `undefined`, it means the timer has been reset) + if ( + this.mounted && + this.props.visible === undefined && + this.mouseEnterTimeout !== undefined + ) { + this.setState({ visible: true }); + } + }, + (this.props.mouseEnterDelay ?? 0) * MILLISECONDS_IN_A_SECOND, + ); if (this.props.onShow) { this.props.onShow(); @@ -278,11 +281,14 @@ export class TooltipInner extends React.Component { } if (!this.mouseIn) { - this.mouseLeaveTimeout = window.setTimeout(() => { - if (this.mounted && this.props.visible === undefined && !this.mouseIn) { - this.setState({ visible: false }); - } - }, (this.props.mouseLeaveDelay ?? 0) * MILLISECONDS_IN_A_SECOND); + this.mouseLeaveTimeout = window.setTimeout( + () => { + if (this.mounted && this.props.visible === undefined && !this.mouseIn) { + this.setState({ visible: false }); + } + }, + (this.props.mouseLeaveDelay ?? 0) * MILLISECONDS_IN_A_SECOND, + ); if (this.props.onHide) { this.props.onHide(); diff --git a/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx index 7f8acf474b5..94d4ce8c9cd 100644 --- a/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx @@ -29,13 +29,13 @@ it('should render with close button', async () => { expect( screen.getByRole('button', { name: 'dismiss', - }) + }), ).toBeVisible(); await user.click( screen.getByRole('button', { name: 'dismiss', - }) + }), ); expect(onDismiss).toHaveBeenCalledTimes(1); @@ -45,6 +45,6 @@ function setupWithProps(props: Partial> = {}) { return renderWithContext( {props.children ?? 'Test Message'} - + , ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/BarChart-test.tsx b/server/sonar-web/design-system/src/components/__tests__/BarChart-test.tsx index 128eb11fe33..86c4edd1e75 100644 --- a/server/sonar-web/design-system/src/components/__tests__/BarChart-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/BarChart-test.tsx @@ -58,6 +58,6 @@ function renderChart(overrides: Partial> = {}) { onBarClick={jest.fn()} width={200} {...overrides} - /> + />, ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/Breadcrumbs-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Breadcrumbs-test.tsx index ed6ab344447..86fc3ec40e6 100644 --- a/server/sonar-web/design-system/src/components/__tests__/Breadcrumbs-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/Breadcrumbs-test.tsx @@ -33,7 +33,7 @@ it('should display three breadcrumbs correctly', () => { first second third - + , ); expect(screen.getAllByRole('link').length).toBe(3); diff --git a/server/sonar-web/design-system/src/components/__tests__/BubbleChart-test.tsx b/server/sonar-web/design-system/src/components/__tests__/BubbleChart-test.tsx index cdbe8cb2686..441617c7856 100644 --- a/server/sonar-web/design-system/src/components/__tests__/BubbleChart-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/BubbleChart-test.tsx @@ -86,6 +86,6 @@ function renderBubbleChart(props: Partial> = {}) { ]} padding={[0, 0, 0, 0]} {...props} - /> + />, ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/Card-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Card-test.tsx index c71f6e9a833..eb2c4c216ee 100644 --- a/server/sonar-web/design-system/src/components/__tests__/Card-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/Card-test.tsx @@ -35,7 +35,7 @@ it('renders card correctly with classNames', () => { render( Hello - + , ); const cardContent = screen.getByText('Hello'); expect(cardContent).toHaveClass('sw-bg-black sw-border-8'); @@ -46,7 +46,7 @@ it('renders grey card correctly with classNames', () => { render( Hello - + , ); const cardContent = screen.getByText('Hello'); expect(cardContent).toHaveClass('sw-bg-black sw-border-8'); diff --git a/server/sonar-web/design-system/src/components/__tests__/CodeSnippet-test.tsx b/server/sonar-web/design-system/src/components/__tests__/CodeSnippet-test.tsx index 13d0a5bde57..42f4702db3e 100644 --- a/server/sonar-web/design-system/src/components/__tests__/CodeSnippet-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/CodeSnippet-test.tsx @@ -46,6 +46,6 @@ function setupWithProps(props: Partial> = {}) { return renderWithContext( - + , ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/CodeSyntaxHighlighter-test.tsx b/server/sonar-web/design-system/src/components/__tests__/CodeSyntaxHighlighter-test.tsx index 5728f784a4d..5b496640d2d 100644 --- a/server/sonar-web/design-system/src/components/__tests__/CodeSyntaxHighlighter-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/CodeSyntaxHighlighter-test.tsx @@ -29,7 +29,7 @@ it('renders correctly with no code', () => {

There's no code here.

`} - /> + />, ); // eslint-disable-next-line testing-library/no-node-access @@ -45,7 +45,7 @@ it('renders correctly with code', () => {

There's some "code" here.

`} language="typescript" - /> + />, ); // eslint-disable-next-line testing-library/no-node-access @@ -61,7 +61,7 @@ it('handles html code snippets', () => { htmlAsString={ '\u003ch4\u003eNoncompliant code example\u003c/h4\u003e\n\u003cpre data-diff-id\u003d"1" data-diff-type\u003d"noncompliant"\u003e\npublic void Method(MyObject myObject)\n{\n if (myObject is null)\n {\n new MyObject(); // Noncompliant\n }\n\n if (myObject.IsCorrupted)\n {\n new ArgumentException($"{nameof(myObject)} is corrupted"); // Noncompliant\n }\n\n // ...\n}\n\u003c/pre\u003e\n\u003ch4\u003eCompliant solution\u003c/h4\u003e\n\u003cpre data-diff-id\u003d"1" data-diff-type\u003d"compliant"\u003e\npublic void Method(MyObject myObject)\n{\n if (myObject is null)\n {\n myObject \u003d new MyObject(); // Compliant\n }\n\n if (myObject.IsCorrupted)\n {\n throw new ArgumentException($"{nameof(myObject)} is corrupted"); // Compliant\n }\n\n // ...\n}\n\u003c/pre\u003e' } - /> + />, ); expect(container.querySelectorAll('pre')).toHaveLength(2); diff --git a/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx b/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx index 131e881e4e6..8406825e956 100644 --- a/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx @@ -57,7 +57,7 @@ it('menu items should work with tooltips', async () => { button , {}, - { delay: null } + { delay: null }, ); expect(screen.queryByRole('tooltip')).not.toBeInTheDocument(); @@ -103,6 +103,6 @@ function renderDropdownMenu() { Radio item - + , ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/DuplicationsIndicator-test.tsx b/server/sonar-web/design-system/src/components/__tests__/DuplicationsIndicator-test.tsx index c491f942829..c295b9b847d 100644 --- a/server/sonar-web/design-system/src/components/__tests__/DuplicationsIndicator-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/DuplicationsIndicator-test.tsx @@ -35,7 +35,7 @@ it.each(['A', 'B', 'C', 'D', 'E', 'F'])( (variant: DuplicationLabel) => { setupWithProps({ rating: variant }); expect(screen.getByRole('img', { hidden: true })).toMatchSnapshot(); - } + }, ); function setupWithProps(props: Partial> = {}) { diff --git a/server/sonar-web/design-system/src/components/__tests__/ExecutionFlowAccordion-test.tsx b/server/sonar-web/design-system/src/components/__tests__/ExecutionFlowAccordion-test.tsx index e17f074e579..dce2aadc8d7 100644 --- a/server/sonar-web/design-system/src/components/__tests__/ExecutionFlowAccordion-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/ExecutionFlowAccordion-test.tsx @@ -33,11 +33,11 @@ it('should render correctly expanded', () => { function renderExecutionFlowAccordion( props: Partial> = {}, - children?: React.ReactNode + children?: React.ReactNode, ) { return render( {children} - + , ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/FacetBox-test.tsx b/server/sonar-web/design-system/src/components/__tests__/FacetBox-test.tsx index 9d8981cc02b..a39245c209d 100644 --- a/server/sonar-web/design-system/src/components/__tests__/FacetBox-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/FacetBox-test.tsx @@ -69,6 +69,6 @@ function renderComponent({ children, ...props }: Partial = {}) { return renderWithContext( {children} - + , ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/FacetItem-test.tsx b/server/sonar-web/design-system/src/components/__tests__/FacetItem-test.tsx index a6f69d720d9..8feb189168e 100644 --- a/server/sonar-web/design-system/src/components/__tests__/FacetItem-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/FacetItem-test.tsx @@ -70,6 +70,6 @@ it('should not add an aria label if the name is not a string', () => { function renderComponent(props: Partial = {}) { return render( - + , ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/FavoriteButton-test.tsx b/server/sonar-web/design-system/src/components/__tests__/FavoriteButton-test.tsx index 20c45fae6f3..71fac4629fc 100644 --- a/server/sonar-web/design-system/src/components/__tests__/FavoriteButton-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/FavoriteButton-test.tsx @@ -45,6 +45,6 @@ it('should toggle favorite', async () => { function renderFavoriteButton(props: Partial> = {}) { return render( - + , ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/HotspotRating-test.tsx b/server/sonar-web/design-system/src/components/__tests__/HotspotRating-test.tsx index e3cd43931b5..42ff311c0b8 100644 --- a/server/sonar-web/design-system/src/components/__tests__/HotspotRating-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/HotspotRating-test.tsx @@ -32,7 +32,7 @@ it.each(Object.values(HotspotRatingEnum))( (rating) => { renderHotspotRating(rating, 'label'); expect(screen.getByLabelText('label')).toMatchSnapshot(); - } + }, ); function renderHotspotRating(rating?: HotspotRatingEnum, label?: string) { diff --git a/server/sonar-web/design-system/src/components/__tests__/LineCoverage-test.tsx b/server/sonar-web/design-system/src/components/__tests__/LineCoverage-test.tsx index 5fa1bc69eb4..d1388bea090 100644 --- a/server/sonar-web/design-system/src/components/__tests__/LineCoverage-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/LineCoverage-test.tsx @@ -27,7 +27,7 @@ it('should render correctly when covered', () => { it('should render correctly when uncovered', () => { expect( - setupWithProps({ lineNumber: 16, coverageStatus: 'uncovered' }).container + setupWithProps({ lineNumber: 16, coverageStatus: 'uncovered' }).container, ).toMatchSnapshot(); }); @@ -36,7 +36,7 @@ it('should render correctly when partially covered without conditions', () => { setupWithProps({ lineNumber: 16, coverageStatus: 'partially-covered', - }).container + }).container, ).toMatchSnapshot(); }); @@ -45,7 +45,7 @@ it('should render correctly when partially covered with 5/10 conditions', () => setupWithProps({ lineNumber: 16, coverageStatus: 'partially-covered', - }).container + }).container, ).toMatchSnapshot(); }); diff --git a/server/sonar-web/design-system/src/components/__tests__/LineFinding-test.tsx b/server/sonar-web/design-system/src/components/__tests__/LineFinding-test.tsx index 2d05bd33cd6..400f9671bb8 100644 --- a/server/sonar-web/design-system/src/components/__tests__/LineFinding-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/LineFinding-test.tsx @@ -41,6 +41,6 @@ it('should be clickable when onIssueSelect is provided', async () => { function setupWithProps(props?: Partial>) { return render( - + , ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/LineNumber-test.tsx b/server/sonar-web/design-system/src/components/__tests__/LineNumber-test.tsx index 510934f46f4..e5ea779d44f 100644 --- a/server/sonar-web/design-system/src/components/__tests__/LineNumber-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/LineNumber-test.tsx @@ -40,6 +40,6 @@ function setupWithProps(props: Partial> = {}) { lineNumber={16} popup={
Popup
} {...props} - /> + />, ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/LineWrapper-test.tsx b/server/sonar-web/design-system/src/components/__tests__/LineWrapper-test.tsx index d994e0c0918..efefc2b476c 100644 --- a/server/sonar-web/design-system/src/components/__tests__/LineWrapper-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/LineWrapper-test.tsx @@ -34,7 +34,7 @@ it('should properly setup css grid columns', () => { }); expect( setupWithProps({ displayCoverage: false, displaySCM: false, duplicationsCount: 0 }).container - .firstChild + .firstChild, ).toHaveStyle({ '--columns': '44px 26px 1fr' }); }); @@ -45,12 +45,6 @@ it('should set a highlighted background color in css props', () => { function setupWithProps(props: Partial> = {}) { return render( - + , ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/MainAppBar-test.tsx b/server/sonar-web/design-system/src/components/__tests__/MainAppBar-test.tsx index 7a867284462..d1d8f799fea 100644 --- a/server/sonar-web/design-system/src/components/__tests__/MainAppBar-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/MainAppBar-test.tsx @@ -49,13 +49,13 @@ it('should render the logo', () => { function setupWithProps( props: FCProps = { Logo: () => logo, - } + }, ) { return render( } path="/" /> - + , ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/MenuItem-test.tsx b/server/sonar-web/design-system/src/components/__tests__/MenuItem-test.tsx index 562613e9ea8..bfdbed93150 100644 --- a/server/sonar-web/design-system/src/components/__tests__/MenuItem-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/MenuItem-test.tsx @@ -28,7 +28,7 @@ it('should render default', () => { render( Hi - + , ); expect(screen.getByText('Hi')).toHaveStyle({ @@ -41,7 +41,7 @@ it('should render active link', () => { render( Hi - + , ); expect(screen.getByText('Hi')).toHaveStyle({ @@ -54,7 +54,7 @@ it('should render hovered link', () => { render( Hi - + , ); expect(screen.getByText('Hi')).toHaveStyle({ diff --git a/server/sonar-web/design-system/src/components/__tests__/NavBarTabs-test.tsx b/server/sonar-web/design-system/src/components/__tests__/NavBarTabs-test.tsx index 0c2a64c124d..a8bf405d655 100644 --- a/server/sonar-web/design-system/src/components/__tests__/NavBarTabs-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/NavBarTabs-test.tsx @@ -37,7 +37,7 @@ describe('NewNavBarTabs', () => { return renderWithRouter( - + , ); } }); diff --git a/server/sonar-web/design-system/src/components/__tests__/NavLink-test.tsx b/server/sonar-web/design-system/src/components/__tests__/NavLink-test.tsx index 16e69510b56..40691c9a565 100644 --- a/server/sonar-web/design-system/src/components/__tests__/NavLink-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/NavLink-test.tsx @@ -60,7 +60,7 @@ it('should stop propagation when stopPropagation is true', async () => { const { user } = setupWithMemoryRouter( + , ); await user.click(screen.getByRole('link')); @@ -71,7 +71,7 @@ it('should stop propagation when stopPropagation is true', async () => { it('should call onClick when one is passed', async () => { const onClick = jest.fn(); const { user } = setupWithMemoryRouter( - + , ); await user.click(screen.getByRole('link')); @@ -108,6 +108,6 @@ const setupWithMemoryRouter = (component: JSX.Element, initialEntries = ['/initi /> } path="/second" /> - + , ); }; diff --git a/server/sonar-web/design-system/src/components/__tests__/QualityGateIndicator-test.tsx b/server/sonar-web/design-system/src/components/__tests__/QualityGateIndicator-test.tsx index 4dfa80ac5af..c4e7bdaad2b 100644 --- a/server/sonar-web/design-system/src/components/__tests__/QualityGateIndicator-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/QualityGateIndicator-test.tsx @@ -44,7 +44,7 @@ it.each([ setupWithProps({ status, size }); expect(screen.getByRole('status')).toHaveAttribute('width', SIZE_VS_WIDTH[size]); - } + }, ); it('should display tooltip', () => { diff --git a/server/sonar-web/design-system/src/components/__tests__/SelectionCard-test.tsx b/server/sonar-web/design-system/src/components/__tests__/SelectionCard-test.tsx index 9a48c7fbe72..b98747653e4 100644 --- a/server/sonar-web/design-system/src/components/__tests__/SelectionCard-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/SelectionCard-test.tsx @@ -74,6 +74,6 @@ function renderSelectionCard(props: Partial> = {}) title="Selection Card" titleInfo="info" {...props} - /> + />, ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/Table-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Table-test.tsx index ecf8c99712c..0febc0afbaa 100644 --- a/server/sonar-web/design-system/src/components/__tests__/Table-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/Table-test.tsx @@ -68,38 +68,38 @@ it('check that the html structure and style is correct for a regular table', () // Rows should have accessible attributes expect( - screen.getByRole('row', { name: 'ContentCellHeader NumericalCellHeader CheckboxCellHeader' }) + screen.getByRole('row', { name: 'ContentCellHeader NumericalCellHeader CheckboxCellHeader' }), ).toBeInTheDocument(); expect( screen.getByRole('row', { name: 'ContentCell 1 NumericalCell 1 CheckboxCell 1', - }) + }), ).toBeInTheDocument(); expect( screen.getByRole('row', { name: 'ContentCell 1 NumericalCell 1 CheckboxCell 1', - }) + }), ).not.toHaveAttribute('aria-selected'); expect( screen.getByRole('row', { selected: true, name: 'ContentCell 2 NumericalCell 2 CheckboxCell 2', - }) + }), ).toBeInTheDocument(); expect( screen.getByRole('row', { name: 'NumericalCell 4 CheckboxCell 4', - }) + }), ).toBeInTheDocument(); // Cells should have accessible attributes expect(screen.getByRole('cell', { name: 'NumericalCell 4' })).toHaveAttribute( 'aria-colindex', - '2' + '2', ); expect(screen.getByRole('cell', { name: 'CheckboxCell 4' })).toHaveAttribute( 'aria-colindex', - '3' + '3', ); }); diff --git a/server/sonar-web/design-system/src/components/__tests__/ToggleButton-test.tsx b/server/sonar-web/design-system/src/components/__tests__/ToggleButton-test.tsx index b34ae78d4b8..709d8792b43 100644 --- a/server/sonar-web/design-system/src/components/__tests__/ToggleButton-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/ToggleButton-test.tsx @@ -57,7 +57,7 @@ it('should work in tablist mode', () => { expect(screen.getAllByRole('tab')).toHaveLength(3); expect(screen.getByRole('tab', { name: 'second' })).toHaveAttribute( 'aria-controls', - getTabPanelId(2) + getTabPanelId(2), ); }); diff --git a/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx index 72b493f6cc6..dc592398efb 100644 --- a/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx @@ -49,7 +49,7 @@ describe('TooltipInner', () => { const onPointerLeave = jest.fn(); const { user } = setupWithProps( { onHide, onShow }, -
+
, ); await user.hover(screen.getByRole('note')); @@ -93,12 +93,12 @@ describe('TooltipInner', () => { function setupWithProps( props: Partial = {}, - children =
+ children =
, ) { return render( } {...props}> {children} - + , ); } }); @@ -124,12 +124,12 @@ describe('Tooltip', () => { function setupWithProps( props: Partial> = {}, - children =
+ children =
, ) { return render( } {...props}> {children} - + , ); } }); diff --git a/server/sonar-web/design-system/src/components/__tests__/TreeMap-test.tsx b/server/sonar-web/design-system/src/components/__tests__/TreeMap-test.tsx index 1f0121c3b18..dc22d6e729f 100644 --- a/server/sonar-web/design-system/src/components/__tests__/TreeMap-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/TreeMap-test.tsx @@ -60,6 +60,6 @@ it('should render correctly and forward click event', async () => { function renderTreeMap(props: Partial>) { return render( - + , ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/TutorialStep-test.tsx b/server/sonar-web/design-system/src/components/__tests__/TutorialStep-test.tsx index 23e3f8e3f92..9036e36e02c 100644 --- a/server/sonar-web/design-system/src/components/__tests__/TutorialStep-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/TutorialStep-test.tsx @@ -33,6 +33,6 @@ function renderTutorialStep() { return render( These are children - + , ); } diff --git a/server/sonar-web/design-system/src/components/avatar/__tests__/Avatar-test.tsx b/server/sonar-web/design-system/src/components/avatar/__tests__/Avatar-test.tsx index 2d845c0e752..139c2a49864 100644 --- a/server/sonar-web/design-system/src/components/avatar/__tests__/Avatar-test.tsx +++ b/server/sonar-web/design-system/src/components/avatar/__tests__/Avatar-test.tsx @@ -36,7 +36,7 @@ it('should be able to render with hash only', () => { setupWithProps({ hash: '7daf6c79d4802916d83f6266e24850af' }); expect(screen.getByRole('img')).toHaveAttribute( 'src', - 'http://example.com/7daf6c79d4802916d83f6266e24850af.jpg?s=48' + 'http://example.com/7daf6c79d4802916d83f6266e24850af.jpg?s=48', ); }); @@ -64,6 +64,6 @@ it('should display organization avatar correctly', () => { function setupWithProps(props: Partial> = {}) { return render( - + , ); } diff --git a/server/sonar-web/design-system/src/components/buttons/Button.tsx b/server/sonar-web/design-system/src/components/buttons/Button.tsx index bfcf1788f66..7177717e0fd 100644 --- a/server/sonar-web/design-system/src/components/buttons/Button.tsx +++ b/server/sonar-web/design-system/src/components/buttons/Button.tsx @@ -112,7 +112,9 @@ export const buttonStyle = (props: ThemedProps) => css` border: var(--border); color: var(--color); background-color: var(--background); - transition: background-color 0.2s ease, outline 0.2s ease; + transition: + background-color 0.2s ease, + outline 0.2s ease; ${tw`sw-inline-flex sw-items-center`} ${tw`sw-h-control`} diff --git a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx index 742c478b197..dbd0bf9af46 100644 --- a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx +++ b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx @@ -33,7 +33,7 @@ interface Props { function LineFindingFunc( { message, issueKey, selected = true, className, onIssueSelect }: Props, - ref: Ref + ref: Ref, ) { return ( + ref: Ref, ) { const element = useRef(null); const elementMessage = useRef(null); diff --git a/server/sonar-web/design-system/src/components/icons/__tests__/Icon-test.tsx b/server/sonar-web/design-system/src/components/icons/__tests__/Icon-test.tsx index 4d25af63048..484a40e95c5 100644 --- a/server/sonar-web/design-system/src/components/icons/__tests__/Icon-test.tsx +++ b/server/sonar-web/design-system/src/components/icons/__tests__/Icon-test.tsx @@ -26,7 +26,7 @@ it('should render custom icon correctly', () => { render( - + , ); expect(screen.queryByRole('img')).not.toBeInTheDocument(); @@ -37,7 +37,7 @@ it('should not be hidden when aria-label is set', () => { render( - + , ); expect(screen.getByRole('img')).toBeVisible(); diff --git a/server/sonar-web/design-system/src/components/input/SearchSelect.tsx b/server/sonar-web/design-system/src/components/input/SearchSelect.tsx index 7ed1c6fd88a..8f3ccd78d7a 100644 --- a/server/sonar-web/design-system/src/components/input/SearchSelect.tsx +++ b/server/sonar-web/design-system/src/components/input/SearchSelect.tsx @@ -32,14 +32,14 @@ type SearchSelectProps< V, Option extends LabelValueSelectOption, IsMulti extends boolean = false, - Group extends GroupBase