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 fcb250ff299ccaf12845160abf1f68ecf296748f..bd3570e047b416f55b1b2eafee232dcc68bd0586 100644 (file)
--- 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 dd86a89e6475865049cab218822b8ee2f87896c6..17d1b67d3d19077b0f282df409cf85b3f24a0afd 100644 (file)
--- 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 145641edd454f946673889d37168a3d33881f463..ec3dcbf01f3a743d7eed14aa670d5977c117f7d5 100644 (file)
--- 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 79c0684213de3fd7505cc7607950b6161a940cc9..ba2e719fc8dea8c9b30b2de5255949699c6e14b7 100644 (file)
--- 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<IconProps>) {
+  return <IconGitBranch data-testid="branch-like-icon-branch" {...props} />;
+}
+
+function MainBranchIcon(props: Readonly<IconProps>) {
+  return <IconBranch data-testid="branch-like-icon-main-branch" {...props} />;
+}
+
+function PullRequestIcon(props: Readonly<IconProps>) {
+  return <IconPullrequest data-testid="branch-like-icon-pull-request" {...props} />;
+}
+
 export default function BranchLikeIcon({ branchLike, ...props }: Readonly<BranchLikeIconProps>) {
   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 f8a372fca843d37851f2f3604543a816924ed74c..ca0f9e9479264fec109c927657247bc2cff43a31 100644 (file)
--- 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 (file)
index 132266b..0000000
--- 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`] = `"<div><span class="css-nk2far-StyledText-StyledMutedText en0eo949"><span aria-hidden="true" class="css-lr6nas" role="img">&amp;</span></span></div>"`;
-
-exports[`should render pull request icon correctly 1`] = `"<div><span class="css-nk2far-StyledText-StyledMutedText en0eo949"><span aria-hidden="true" class="css-lr6nas" role="img">)</span></span></div>"`;

diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock
index d832635ff5d419934727527f70990ffb6ab32e10..a63a10564b43ecac1abbf5e97b08efcfa9b1a818 100644 (file)
--- 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"