Upgrade to React 18

[vrigal]

The migration of React itself is rather straightforward.
The application seems to work as usal (tested with a new frontend build using BACKEND=https://treeherder.allizom.org/).

However dependencies would require a much larger effort to remain maintainable:

• Upgrades that need more work
  • react-router-dom
    • We can probably use https://www.npmjs.com/package/react-router-dom-v5-compat
• Unmaintained but may work (build's warnings because they do not officially support React 18)
  • react-date
    • React 18 support react-dates/react-dates#2199
  • connected-react-router
  • react-helmet does not seems compatible with the new root API
    • Not properly working with new React18 root-api nfl/react-helmet#669
  • react-hot-loader
    • Not planed to be maintained: React 18 upgrade gaearon/react-hot-loader#1808
  • react-lazylog
  • react-split-pane (may produce errors)
  • react-table-6
  • ... some more (e.g. related to eslint) visible when runing frontend's build
• Deprecations
  • reactstrap cannot be upgraded to version 9 as it breaks some existing components (CustomInput, InputGroupAddon, InputGroupButtonDropdown and so on).

[vrigal]

@Archaeopteryx I replaced react-hot-loader by @pmmmwh/react-refresh-webpack-plugin to test the dev server. I'm not sure if we need to keep the hot loading, it could probably be removed afterwards.

I also had issues with routes (connected-react-router is not compatible).
I can build, but cannot run the dev server for now (no route match).
I'll look at ESlint and the CI jobs later on.

[vrigal]

I finally decided not to upgrade webpack-dev-server for now (nor react-hot-loader which is not maitained anymore).
Upgrading those is a real topic and is not essential to test react upgrade yet.
This causes a deprecation warning because of a dependecy to webpack-dev-server during build, and a lot of warnings in the console (e.g. Support for defaultProps will be removed from function components in a future major release).

To make ESLint work, I upgraded to 9.x (with configuration file), but had to drop support for eslint-config-airbnb and eslint-plugin-extensions plugins. It works and is sync with pre-commit hook (note that this hook is archived too).

I hope the build works as expected.

[vrigal]

@Archaeopteryx I updated the tests to pass with React 18. It was quite a while, but all CI jobs should be green now.
Please note that tests currently use the legacyRoot rendering option, which is deprecated and will not work with React >18. Updating the tests to use render could either be a follow up.

Next step on my side is to look at console warnings I suppose.

[Archaeopteryx]

Thank you. During testing, no issues have been noticed.

The upgrade to ESLint 9 and the removal of the airbnb js style guide causes some reformatting, e.g. puts multiple function arguments into a single line which makes history annotation per line ('blame') noisy. On the other hand it's unknown when then the style guide will support ESLint 9.

Is it a dependency on a different package (which depends on React 18) which ties the upgrade to ESLint 9? Could ESLint 8 and packages which depend on it be kept?

[vrigal]

I'm not sure why I upgraded ESLint initially, probably because eslint-config-airbnb depends on eslint-plugin-react.
However it seems to work fine keeping it at version 8.21.0. I moved all the changes related to ESLint on a new PR: #8119.