Closes https://github.com/microsoft/playwright/issues/32159. I
originally set out to enable Strict Mode for our React UI, but found a
way better thing: Enabling the lint rules we had already installed!
`eslint-plugin-react` is already in of our `package.json`, and this PR
enables it and fixes some of the reported issues. Most of them are
around the `key` prop which is mostly about performance, but there's
also fixes for misspelled `data-testid` props.
Addresses https://github.com/microsoft/playwright/issues/31863. This PR
is chonky, but the individual commits should be easy to review. If
they're not, i'm happy to break them out into individual PRs.
There's two main things this does:
1. Remove some unused imports
2. Add a `clsx`-inspired helper function for classname templating
I wasn't able to replace `ReactDOM.render` with `ReactDOM.createRoot`.
This is the new recommended way starting with React 18, and the existing
one is going to be deprecated at some point. But it somehow breaks our
tests, i'll have to investigate that separately.
This moves the fix in #27095 from `modernize` to `appendEvent`. The
reason is that `trace V4` is used both for older traces that do not have
`consoleMessage.args` and the new ones with `args`. Since we do not call
`modernize` for traces of the same version, the original fix does not
help in this case.
Fixes#27144.
