Upgrade Web UI to Create-React-App 4 and React 17 (#1105)

* Upgrade to CRA 4.0.3

* Try to fix tests. No lucky

* Fix new ESLint errors

* Fix JS tests and remove unwanted dependency. (#1106)

* Fix tests

* Fix lint

* Remove React v16 workaround (fixed in v17)

* Force eslint to break on warnings

* Lint now needs to be called explicitly in the pipeline

Co-authored-by: Yash Jipkate <34203227+YashJipkate@users.noreply.github.com>

ui/src/layout/Layout.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Layout, toggleSidebar } from 'react-admin'
+import { Layout as RALayout, toggleSidebar } from 'react-admin'
 import { makeStyles } from '@material-ui/core/styles'
 import { HotKeys } from 'react-hotkeys'
 import Menu from './Menu'
@@ -12,7 +12,7 @@ const useStyles = makeStyles({
   root: { paddingBottom: (props) => (props.addPadding ? '80px' : 0) },
 })
 
-export default (props) => {
+const Layout = (props) => {
   const theme = useCurrentTheme()
   const queue = useSelector((state) => state.queue)
   const classes = useStyles({ addPadding: queue.queue.length > 0 })
@@ -24,7 +24,7 @@ export default (props) => {
 
   return (
     <HotKeys handlers={keyHandlers}>
-      <Layout
+      <RALayout
         {...props}
         className={classes.root}
         menu={Menu}
@@ -35,3 +35,5 @@ export default (props) => {
     </HotKeys>
   )
 }
+
+export default Layout

ui/src/layout/Logout.js

@@ -1,15 +1,17 @@
 import React, { useCallback } from 'react'
 import { useDispatch } from 'react-redux'
-import { Logout } from 'react-admin'
+import { Logout as RALogout } from 'react-admin'
 import { clearQueue } from '../actions'
 
-export default (props) => {
+const Logout = (props) => {
   const dispatch = useDispatch()
   const handleClick = useCallback(() => dispatch(clearQueue()), [dispatch])
 
   return (
     <span onClick={handleClick}>
-      <Logout {...props} />
+      <RALogout {...props} />
     </span>
   )
 }
+
+export default Logout