Update to React 18

[hotzenklotz]

Update React to v18 and bump other libs as needed.

Dependency upgrades:

react

• upgraded to from 17.0.x to 18.3.1 (latest / April 26, 2024)
• version 18.3.x is the latest version before React
• upgraded corresponding Typesscript types
• Upgrade guide

react-router-dom

• upgrade from 5.1.x --> 5.3.4
• 5.3.3 is mentioned as compatible with React 18
• this is last version of the 5.x-branch before the complete react-router redesign/reconfig/crazyiness in v6
• no changelog available only release notes

redux & react-redux

• Upgraded react-redux from 7.1.x --> 8.0.x.
  • Changelog list v8+ as React 18 compatible
  • "Our performance benchmarks show parity with React-Redux v7.2.5 for both connect and useSelector, so we do not anticipate any meaningful performance regressions."
  • complete rewrite in Typescript
• upgraded redux from 3.6.0 to 4.1.2
  • react-redux v8 requires requires redux 4.x
  • 4.0.0 Changelog mentions very little issues: "If you're a React user, this is going to be a lot like going from 15 to 16. Not a lot of user-facing changes, but some interesting improvements under the hood."
  • 4.1.0 Changelog mentions mostly smaller bundle sizes
  • version 4.2. starts deprecating "regular" redux in favor for redux-toolkit and in preparation for version 5.

antd

• upgraded from 5.16.x to 5.17.4
• 5.17.4 mentions several compatibility fixes for the depreacted React findDomNode API in Changelog

react-virtualized

• replaced react-virtualized by react-virtualized-auto-sizer from the same author
• the lib is a newer standalone, smaller, TS-version of <AutoSizer> component

react-sortable-hoc / dnd-kit

• replace deprecated, incompatible react-sortable-hoc with dnd-kit

react-debounce-render

• No update available. left unchanged.
• Lib has not updated peer dependencies yet. Open, stale Issue for React 18 support
• Only used mappings_settings.tsx component, so not very critical if we want to refactor

@tanstack/query

• upgraded from 4.14.1 to 4.36.1, latest v4-version before v5

flexlayout-react

• upgrade from 0.5.5 to 0.7.15(latest)
• Changelog indicates that version 0.7.x brings React 18 support

react-json-tree

• upgraded from 0.17.0 --> 0.19.0
• while already compatible with React 18, React reported several deprecation warnings, e.g. Support for defaultProps will be removed. According to Changelog these were fixed in version 0.18 and 0.19

URL of deployed dev instance (used for testing):

• https://react.webknossos.xyz/

Steps to test:

• Try out dev deployment
• Run Typecheck

TODOs:

• Try react-redux v8.1.x
• Try redux v4.1

Issues:

• fixes Update React to v18 #5795

---

(Please delete unneeded items, merge only when none are left open)

• Updated changelog
• Updated migration guide if applicable
• Updated documentation if applicable
• Adapted wk-libs python client if relevant API parts change
• Removed dev-only changes like prints and application.conf edits
• Considered common edge cases
• Needs datastore update after deployment

[hotzenklotz]

There is still a React API deprecation warning for ReactDom.findDomNode which is caused by antd, more specially resize-observer & rc-component/util. The issues there have been open for quite some time now :-/
Not sure what to do.

See react-component/resize-observer#208

[philippotto]

Looks great 👍

I only found one thing during testing:

• the drag marker is not visible in dark mode

[philippotto]

There is still a React API deprecation warning for ReactDom.findDomNode which is caused by antd, more specially resize-observer & rc-component/util. The issues there have been open for quite some time now :-/

I think, going ahead with this PR and hoping for a fix in the future is acceptable.

[hotzenklotz]

Looks great 👍

I only found one thing during testing: the drag marker is not visible in dark mode

Great find. This is already the case on master 😶‍🌫️ I included a fix.

[philippotto]