Upgrade React version - LFX Mentorship

[yurishkuro]

For the application process please refer to this issue.

• Description: Jaeger UI is built on React. While we are seemingly already on v18.x of React, the upgrade was not done across the board and some other dependencies are still lagging behind, e.g. "@types/react": "16.8.7". It's also blocking upgrades of other dependencies. This project is likely to involve a substantial amount of code contribution, as certain upgrade require fixing the code to use the new APIs, and sometimes we may run into dependencies that are EOL and need to be replaced altogether.
• Expected Outcome: Ideal outcome is to have all dependencies upgraded to the latest versions (with the help of @dependabot) and fix all deprecation warnings during the build. But incremental progress towards that goal is also acceptable.
• Recommended Skills: Javascript, Typescript, NPM, Yarn, Vite.js
• Mentor(s):
  • Yash Sharma (yashrsharma44@meta.com)
  • Yuri Shkuro (@yurishkuro)
• Selected mentee:
  • @anshgoyalevil

[ShaswatPrabhat]

Is this dependent on other upgrades like the ones we have for graph libs ? @yurishkuro

I can analyze the deps to begin with otherwise.

[yurishkuro]

@ShaswatPrabhat I don't know

[yurishkuro]

I think #1173 is only part of the story. A lot of dependabot attempts to upgrade other deps are failing, and among them several are failing due to an indirect upgrade of @types/react (e.g. from "16.8.7" to "16.14.34"), which causes a lot of type compatibility errors. I assume the versioning of @types/react should match that of React itself, i.e. we need to target @types/react@18.x

[mszabo-wikia]

Looks like there's a fun issue... the jaeger-ui subpackage is relying on a transitive dependency on @types/react for its typechecking. This is currently locked to version 16, and yarn by default hoists it to the root. The current TypeScript has no qualms with this, but TypeScript >= 3.7 starts to complain that there are newer React typings in Plexus' dependencies which aren't compatible with typings in some of the older dependencies for jaeger-ui such as antd or react-router-dom. The typings were updated for React 18 on the antd v4 release line, but that one won't work with TypeScript 3.5.3.

I'm thinking we could roll back the react typing versions for now and try to see how far ahead we can get with a TS upgrade.