build(ui): migrate from CRA/Jest to Vite/Vitest (#3311)

* feat: create vite project

* feat: it's alive!

* feat: `make dev` working!

* feat: replace custom serviceWorker with vite plugin

* test: replace Jest with Vitest

* fix: run prettier

* fix: skip eslint for now.

* chore: remove ui.old folder

* refactor: replace lodash.pick with simple destructuring

* fix: eslint errors (wip)

* fix: eslint errors (wip)

* fix: display-name eslint errors (wip)

* fix: no-console eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: build

* fix: pwa manifest

* refactor: pwa manifest

* refactor: simplify PORT configuration

* refactor: rename simple JS files

* test: cover playlistUtils

* fix: react-image-lightbox

* feat(ui): add sourcemaps to help debug issues

ui/src/layout/AppBar.jsx

@@ -60,6 +60,8 @@ const AboutMenuItem = forwardRef(({ onClick, ...rest }, ref) => {
   )
 })
 
+AboutMenuItem.displayName = 'AboutMenuItem'
+
 const settingsResources = (resource) =>
   resource.name !== 'user' &&
   resource.hasList &&

ui/src/layout/Menu.jsx

@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux'
 import { Divider, makeStyles } from '@material-ui/core'
 import clsx from 'clsx'
 import { useTranslate, MenuItemLink, getResources } from 'react-admin'
-import { withRouter } from 'react-router-dom'
 import ViewListIcon from '@material-ui/icons/ViewList'
 import AlbumIcon from '@material-ui/icons/Album'
 import SubMenu from './SubMenu'
@@ -142,4 +141,4 @@ const Menu = ({ dense = false }) => {
   )
 }
 
-export default withRouter(Menu)
+export default Menu

ui/src/layout/PersonalMenu.jsx

@@ -26,4 +26,6 @@ const PersonalMenu = forwardRef(({ onClick, sidebarIsOpen, dense }, ref) => {
   )
 })
 
+PersonalMenu.displayName = 'PersonalMenu'
+
 export default PersonalMenu