From: David Cho-Lerat Date: Wed, 22 May 2024 16:30:27 +0000 (+0200) Subject: SONAR-22261 Upgrade to echoes-react 0.3.0 and update deprecation notice X-Git-Tag: 10.6.0.92116~95 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=9a31def6857bcf996941613ddf8711c14a9bfdde;p=sonarqube.git SONAR-22261 Upgrade to echoes-react 0.3.0 and update deprecation notice --- diff --git a/server/sonar-web/design-system/package.json b/server/sonar-web/design-system/package.json index fcb250ff299..bd3570e047b 100644 --- a/server/sonar-web/design-system/package.json +++ b/server/sonar-web/design-system/package.json @@ -23,7 +23,7 @@ "@babel/preset-typescript": "7.23.3", "@emotion/babel-plugin": "11.11.0", "@emotion/babel-plugin-jsx-pragmatic": "0.2.1", - "@sonarsource/echoes-react": "0.2.2", + "@sonarsource/echoes-react": "0.3.0", "@testing-library/dom": "9.3.4", "@testing-library/jest-dom": "6.4.2", "@testing-library/react": "14.2.1", diff --git a/server/sonar-web/design-system/src/components/icons/Icon.tsx b/server/sonar-web/design-system/src/components/icons/Icon.tsx index dd86a89e647..17d1b67d3d1 100644 --- a/server/sonar-web/design-system/src/components/icons/Icon.tsx +++ b/server/sonar-web/design-system/src/components/icons/Icon.tsx @@ -39,10 +39,9 @@ interface Props { * - ~`aria-hidden`~ is now inferred from the absence of an `aria-label` * - ~`data-guiding-id`~ is no longer passed down to the DOM, put it on a wrapper instead * - ~`description`~ doesn't exist anymore - * - ~`fill`~ doesn't exist anymore, icon colors cannot be overrriden anymore, they take the color - * of their surroundings (currentColor) or have an intrinsic color. If you need to change the - * color, either make sure the wrapper has a color, or define a styled(MyIcon). Those cases should - * be rare and happen only during the transition to Echoes icons. + * - ~`fill`~ is now `color`. You can use "echoes-colors-icons-*" design tokens for the `color` + * prop. Without a specific `color`, icons take the color of their surroundings (currentColor) + * or have an intrinsic color. * - ~`height`~ doesn't exist anymore, icons are sized based on the font-size of their parent * - ~`transform`~ doesn't exist anymore * - ~`viewbox`~ doesn't exist anymore, icons are sized based on the font-size of their parent diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json index 145641edd45..ec3dcbf01f3 100644 --- a/server/sonar-web/package.json +++ b/server/sonar-web/package.json @@ -13,7 +13,7 @@ "@primer/octicons-react": "19.8.0", "@react-spring/rafz": "9.7.3", "@react-spring/web": "9.7.3", - "@sonarsource/echoes-react": "0.2.2", + "@sonarsource/echoes-react": "0.3.0", "@tanstack/react-query": "5.18.1", "axios": "1.6.8", "classnames": "2.5.1", diff --git a/server/sonar-web/src/main/js/components/icon-mappers/BranchLikeIcon.tsx b/server/sonar-web/src/main/js/components/icon-mappers/BranchLikeIcon.tsx index 79c0684213d..ba2e719fc8d 100644 --- a/server/sonar-web/src/main/js/components/icon-mappers/BranchLikeIcon.tsx +++ b/server/sonar-web/src/main/js/components/icon-mappers/BranchLikeIcon.tsx @@ -28,15 +28,27 @@ export interface BranchLikeIconProps extends IconProps { branchLike: BranchLike; } +function BranchIcon(props: Readonly) { + return ; +} + +function MainBranchIcon(props: Readonly) { + return ; +} + +function PullRequestIcon(props: Readonly) { + return ; +} + export default function BranchLikeIcon({ branchLike, ...props }: Readonly) { let Icon; if (isPullRequest(branchLike)) { - Icon = IconPullrequest; + Icon = PullRequestIcon; } else if (isMainBranch(branchLike)) { - Icon = IconBranch; + Icon = MainBranchIcon; } else { - Icon = IconGitBranch; + Icon = BranchIcon; } return ( diff --git a/server/sonar-web/src/main/js/components/icon-mappers/__tests__/BranchLikeIcon-test.tsx b/server/sonar-web/src/main/js/components/icon-mappers/__tests__/BranchLikeIcon-test.tsx index f8a372fca84..ca0f9e94792 100644 --- a/server/sonar-web/src/main/js/components/icon-mappers/__tests__/BranchLikeIcon-test.tsx +++ b/server/sonar-web/src/main/js/components/icon-mappers/__tests__/BranchLikeIcon-test.tsx @@ -17,19 +17,25 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { render } from '@testing-library/react'; + +import { render, screen } from '@testing-library/react'; import * as React from 'react'; -import { mockBranch, mockPullRequest } from '../../../helpers/mocks/branch-like'; +import { mockBranch, mockMainBranch, mockPullRequest } from '../../../helpers/mocks/branch-like'; import BranchLikeIcon, { BranchLikeIconProps } from '../../icon-mappers/BranchLikeIcon'; -it('should render branch icon correctly', () => { +it('should render the branch icon correctly', () => { renderBranchLikeIcon({ branchLike: mockBranch() }); - expect(document.body.innerHTML).toMatchSnapshot(); + expect(screen.getByTestId('branch-like-icon-branch')).toBeInTheDocument(); +}); + +it('should render the main branch icon correctly', () => { + renderBranchLikeIcon({ branchLike: mockMainBranch() }); + expect(screen.getByTestId('branch-like-icon-main-branch')).toBeInTheDocument(); }); -it('should render pull request icon correctly', () => { +it('should render the pull request icon correctly', () => { renderBranchLikeIcon({ branchLike: mockPullRequest() }); - expect(document.body.innerHTML).toMatchSnapshot(); + expect(screen.getByTestId('branch-like-icon-pull-request')).toBeInTheDocument(); }); function renderBranchLikeIcon(props: BranchLikeIconProps) { diff --git a/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap b/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap deleted file mode 100644 index 132266b92c9..00000000000 --- a/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap +++ /dev/null @@ -1,5 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`should render branch icon correctly 1`] = `"
"`; - -exports[`should render pull request icon correctly 1`] = `"
"`; diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock index d832635ff5d..a63a10564b4 100644 --- a/server/sonar-web/yarn.lock +++ b/server/sonar-web/yarn.lock @@ -3249,6 +3249,15 @@ __metadata: languageName: node linkType: hard +"@floating-ui/core@npm:^1.0.0": + version: 1.6.2 + resolution: "@floating-ui/core@npm:1.6.2" + dependencies: + "@floating-ui/utils": "npm:^0.2.0" + checksum: 10/5c940ef3d397aa23f859ecb033bda408dde20820af3f82090a889c35a99826cfaa7864e8131b9906a26b2c04f31fa468538a28d0715b34de541e0776e0f82d03 + languageName: node + linkType: hard + "@floating-ui/core@npm:^1.1.0": version: 1.1.1 resolution: "@floating-ui/core@npm:1.1.1" @@ -3256,6 +3265,16 @@ __metadata: languageName: node linkType: hard +"@floating-ui/dom@npm:^1.0.0": + version: 1.6.5 + resolution: "@floating-ui/dom@npm:1.6.5" + dependencies: + "@floating-ui/core": "npm:^1.0.0" + "@floating-ui/utils": "npm:^0.2.0" + checksum: 10/d421e7f239e9af5a2a4c7a560c29b8ce1f29398c411c8e3bd0c33a2ce800e13a378749a1606e4f6b460830f4007c459792534821013262d24d1385476b1ba48d + languageName: node + linkType: hard + "@floating-ui/dom@npm:^1.0.1": version: 1.1.1 resolution: "@floating-ui/dom@npm:1.1.1" @@ -3265,6 +3284,25 @@ __metadata: languageName: node linkType: hard +"@floating-ui/react-dom@npm:^2.0.0": + version: 2.1.0 + resolution: "@floating-ui/react-dom@npm:2.1.0" + dependencies: + "@floating-ui/dom": "npm:^1.0.0" + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + checksum: 10/15be0714379c271ff01347e7c9bcdba96d6b39f3960697380e23de9b9d59fb91ba07bc75b8bdb12d72da7a9272191a9ce73f843a0d5f89939caa9f3137acd8ec + languageName: node + linkType: hard + +"@floating-ui/utils@npm:^0.2.0": + version: 0.2.2 + resolution: "@floating-ui/utils@npm:0.2.2" + checksum: 10/28d900d2f0876b40c7090f55724700eeac608862e59110b7b14731223218cf7ce125b2091f34103edf4b0f779166151bbca21256b856236235a2be996548ed38 + languageName: node + linkType: hard + "@formatjs/ecma402-abstract@npm:1.18.2": version: 1.18.2 resolution: "@formatjs/ecma402-abstract@npm:1.18.2" @@ -4050,6 +4088,26 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-arrow@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-arrow@npm:1.0.3" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-primitive": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/8cca086f0dbb33360e3c0142adf72f99fc96352d7086d6c2356dbb2ea5944cfb720a87d526fc48087741c602cd8162ca02b0af5e6fdf5f56d20fddb44db8b4c3 + languageName: node + linkType: hard + "@radix-ui/react-checkbox@npm:1.0.4": version: 1.0.4 resolution: "@radix-ui/react-checkbox@npm:1.0.4" @@ -4145,6 +4203,30 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-dismissable-layer@npm:1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/primitive": "npm:1.0.1" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + "@radix-ui/react-use-escape-keydown": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/f1626d69bb50ec226032bb7d8c5abaaf7359c2d7660309b0ed3daaedd91f30717573aac1a1cb82d589b7f915cf464b95a12da0a3b91b6acfefb6fbbc62b992de + languageName: node + linkType: hard + "@radix-ui/react-id@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-id@npm:1.0.1" @@ -4161,6 +4243,55 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-popper@npm:1.1.3": + version: 1.1.3 + resolution: "@radix-ui/react-popper@npm:1.1.3" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@floating-ui/react-dom": "npm:^2.0.0" + "@radix-ui/react-arrow": "npm:1.0.3" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-context": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + "@radix-ui/react-use-layout-effect": "npm:1.0.1" + "@radix-ui/react-use-rect": "npm:1.0.1" + "@radix-ui/react-use-size": "npm:1.0.1" + "@radix-ui/rect": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/1f70ca09b609122058a58f57fa6bce7e528d96552c9db1a1d214e8e4a9dd305e473dfa0ac7dd400d3d215e54b5cf31020199aca3c2728dc1a716f4c7510838a5 + languageName: node + linkType: hard + +"@radix-ui/react-portal@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-portal@npm:1.0.4" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-primitive": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/c4cf35e2f26a89703189d0eef3ceeeb706ae0832e98e558730a5e929ca7c72c7cb510413a24eca94c7732f8d659a1e81942bec7b90540cb73ce9e4885d040b64 + languageName: node + linkType: hard + "@radix-ui/react-presence@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-presence@npm:1.0.1" @@ -4275,6 +4406,37 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-tooltip@npm:1.0.7": + version: 1.0.7 + resolution: "@radix-ui/react-tooltip@npm:1.0.7" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/primitive": "npm:1.0.1" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-context": "npm:1.0.1" + "@radix-ui/react-dismissable-layer": "npm:1.0.5" + "@radix-ui/react-id": "npm:1.0.1" + "@radix-ui/react-popper": "npm:1.1.3" + "@radix-ui/react-portal": "npm:1.0.4" + "@radix-ui/react-presence": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-slot": "npm:1.0.2" + "@radix-ui/react-use-controllable-state": "npm:1.0.1" + "@radix-ui/react-visually-hidden": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/8f075a78db9bfe3dac251266feeb771923176d388c3232f9bad8d85417b5d80d2470697e1c7cae6765d3af16e48552ab9810137c2db193bc37e61b97388e92e8 + languageName: node + linkType: hard + "@radix-ui/react-use-callback-ref@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1" @@ -4306,6 +4468,22 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-escape-keydown@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/c6ed0d9ce780f67f924980eb305af1f6cce2a8acbaf043a58abe0aa3cc551d9aa76ccee14531df89bbee302ead7ecc7fce330886f82d4672c5eda52f357ef9b8 + languageName: node + linkType: hard + "@radix-ui/react-use-layout-effect@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1" @@ -4336,6 +4514,22 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-rect@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-rect@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/rect": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/433f07e61e04eb222349825bb05f3591fca131313a1d03709565d6226d8660bd1d0423635553f95ee4fcc25c8f2050972d848808d753c388e2a9ae191ebf17f3 + languageName: node + linkType: hard + "@radix-ui/react-use-size@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-use-size@npm:1.0.1" @@ -4372,6 +4566,15 @@ __metadata: languageName: node linkType: hard +"@radix-ui/rect@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/rect@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + checksum: 10/e25492cb8a683246161d781f0f3205f79507280a60f50eb763f06e8b6fa211b940b784aa581131ed76695bd5df5d1033a6246b43a6996cf8959a326fe4d3eb00 + languageName: node + linkType: hard + "@react-spring/animated@npm:~9.7.3": version: 9.7.3 resolution: "@react-spring/animated@npm:9.7.3" @@ -4541,13 +4744,15 @@ __metadata: languageName: node linkType: hard -"@sonarsource/echoes-react@npm:0.2.2": - version: 0.2.2 - resolution: "@sonarsource/echoes-react@npm:0.2.2" +"@sonarsource/echoes-react@npm:0.3.0": + version: 0.3.0 + resolution: "@sonarsource/echoes-react@npm:0.3.0" dependencies: "@material-symbols/font-400": "npm:0.17.2" "@radix-ui/react-checkbox": "npm:1.0.4" "@radix-ui/react-radio-group": "npm:1.1.3" + "@radix-ui/react-slot": "npm:1.0.2" + "@radix-ui/react-tooltip": "npm:1.0.7" "@radix-ui/react-visually-hidden": "npm:1.0.3" peerDependencies: "@emotion/react": ^11.0.0 @@ -4556,7 +4761,7 @@ __metadata: react-dom: ^17.0.0 || ^18.0.0 react-intl: ^6.0.0 react-router-dom: ^6.0.0 - checksum: 10/ec5fed2ac473028ca489a8445190c5585ff7e41d9cad0221b315260647307c1c91d59efe0f7b708d099ca24d7a9005dcde49d91f1408d26d7c33ad6a8a80578a + checksum: 10/fbe01bb045e784938cbf430e9acd58e3d32ba22b857078436ea6d054cdb325d2bf4a52f5f6f8ac88d723821e8c7b129bcbaa0c07685396906c518be7f00e4079 languageName: node linkType: hard @@ -5758,7 +5963,7 @@ __metadata: "@primer/octicons-react": "npm:19.8.0" "@react-spring/rafz": "npm:9.7.3" "@react-spring/web": "npm:9.7.3" - "@sonarsource/echoes-react": "npm:0.2.2" + "@sonarsource/echoes-react": "npm:0.3.0" "@swc/core": "npm:1.4.0" "@swc/jest": "npm:0.2.36" "@tanstack/react-query": "npm:5.18.1" @@ -7686,7 +7891,7 @@ __metadata: "@babel/preset-typescript": "npm:7.23.3" "@emotion/babel-plugin": "npm:11.11.0" "@emotion/babel-plugin-jsx-pragmatic": "npm:0.2.1" - "@sonarsource/echoes-react": "npm:0.2.2" + "@sonarsource/echoes-react": "npm:0.3.0" "@testing-library/dom": "npm:9.3.4" "@testing-library/jest-dom": "npm:6.4.2" "@testing-library/react": "npm:14.2.1"