Upgrade some packages in the front-end

[nafiz1001]

Migrations

react-redux

https://github.com/reduxjs/react-redux/releases/tag/v8.0.0

In most cases, it's very likely that the only change you will need to make is bumping the package version to "react-redux": "^8.0".

• bumping the package version to "react-redux": "^8.0"

react-router-dom

remix-run/react-router#8753

• Upgrade your app to React 16.8+
• Read from v6 useParams() instead of v5 props.match
• Read from v6 useLocation() instead of v5 props.location
• Use navigate instead of history
• Update links to use relative to values
• [ ] Update nav links (optional)
• Convert <Switch> to <Routes>
• Add splat paths to any with a descendant
• Convert route paths from absolute to relative paths

webpack-cli

• update package.json
  • npm start is missing --mode=development

webpack-dev-server

https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

• webpack-dev-server v3 and webpack-dev-server v4 automatically apply HotModuleReplacementPlugin plugin when you set hot: true, so please check you don't have HotModuleReplacementPlugin in your plugins if you have hot: true/hot: "only"
• [ ] webpack-dev-server v3 and webpack-dev-server v4 automatically inject webpack/hot/dev-server in your entry option when you set hot: true (except when you use injectHot for webpack-dev-server v3), please check you don't have webpack/hot/dev-server in your entry option
• [ ] webpack-dev-server v3 and webpack-dev-server v4 automatically inject webpack-dev-server/client/index.js in your entry option (except when you use injectClient for webpack-dev-server v3), please check you don't have webpack-dev-server/client/index.js in your entry option
• The hotOnly option was removed, if you need hot only mode, use { hot: 'only' } value.
• contentBase/contentBasePublicPath/serveIndex/watchContentBase/watchOptions/staticOptions options were moved to static option
• The rest are clearly not relevant to our code

React/ReactDOM

• Make necessary upgrades to the dependencies of react-d3-graph (fork). Or maybe don't use react-d3-graph 😨.

16 -> 17

https://reactjs.org/blog/2020/10/20/react-v17.html

• [ ] Changes to Event Delegation (hopefully this is not a problem, chris might be more qualified to judge this)
• [ ] The onScroll event no longer bubbles to prevent common confusion.
• [ ] React onFocus and onBlur events have switched to using the native focusin and focusout events under the hood, which more closely match React’s existing behavior and sometimes provide extra information
• [ ] Capture phase events (e.g. onClickCapture) now use real browser capture phase listeners
• [ ] timing of the useEffect cleanup function more consistent (hopefully useEffect is being used properly 😒)

17 -> 18

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

• ReactDOM.render is no longer supported in React 18. Use createRoot instead.
• unmountComponentAtNode to root.unmount

Cypress

• Update Cypress (according to Update webpack for node 18 #273 (comment))

[nafiz1001]

My fork of react-d3-graph: https://github.com/nafiz1001/react-d3-graph

[sebastianballesteros]

There's a problem when accessing the actions routes, i.e. http://localhost:9000/samples/actions/0/ maybe related to path? Let me know if you have the same problem @UlysseFG @ckostiw, maybe it is my local setup.

[ckostiw]

As reported in Slack, there is a routing issue wit the user details page. Whenever we route to the page the page immediately routes back to wherever we routed from. For example, in the Users table, clicking on a user will route to the user details but then immediately route back to the Users table.

[ckostiw]

I pushed a fix for the "expected static flag was missing" react error in a ContainerDetails component, based on this issue: facebook/react#24391
The problem is that we were checking for an undefined container value and bailing before useEffect() was called. The fix is to first call useEffect() and then bail if necessary. Otherwise, when React renders the component, sometimes useEffect is called and sometimes it isn't, and that is not allowed in React.

[ckostiw]

Now we have this error in Container Details

[ckostiw]

Also in Container Details