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/album/AlbumDetails.jsx

@@ -106,7 +106,7 @@ const useStyles = makeStyles(
   },
 )
 
-export const useGetHandleGenreClick = (width) => {
+const useGetHandleGenreClick = (width) => {
   const [perPage] = useAlbumsPerPage(width)
 
   return (id) => {
@@ -244,6 +244,7 @@ const AlbumDetails = (props) => {
         }
       })
       .catch((e) => {
+        // eslint-disable-next-line no-console
         console.error('error on album page', e)
       })
   }, [record])

ui/src/album/AlbumGridView.jsx

@@ -210,4 +210,6 @@ const AlbumGridView = ({ albumListType, loaded, loading, ...props }) => {
   return hide ? <Loading /> : <LoadedAlbumGrid {...props} />
 }
 
-export default withWidth()(AlbumGridView)
+const AlbumGridViewWithWidth = withWidth()(AlbumGridView)
+
+export default AlbumGridViewWithWidth

ui/src/album/AlbumList.jsx

@@ -152,4 +152,6 @@ const AlbumList = (props) => {
   )
 }
 
-export default withWidth()(AlbumList)
+const AlbumListWithWidth = withWidth()(AlbumList)
+
+export default AlbumListWithWidth

ui/src/album/AlbumListActions.jsx

@@ -67,6 +67,8 @@ const AlbumViewToggler = React.forwardRef(
   },
 )
 
+AlbumViewToggler.displayName = 'AlbumViewToggler'
+
 const AlbumListActions = ({
   currentSort,
   className,

ui/src/album/AlbumSongs.jsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react'
 import {
   BulkActionsToolbar,
-  ListToolbar,
-  TextField,
-  NumberField,
-  useVersion,
-  useListContext,
   FunctionField,
+  ListToolbar,
+  NumberField,
+  TextField,
+  useListContext,
+  useVersion,
 } from 'react-admin'
 import clsx from 'clsx'
 import { useDispatch } from 'react-redux'
@@ -15,22 +15,23 @@ import { makeStyles } from '@material-ui/core/styles'
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import { playTracks } from '../actions'
 import {
+  ArtistLinkField,
+  DateField,
   DurationField,
+  QualityInfo,
+  RatingField,
+  SizeField,
   SongBulkActions,
   SongContextMenu,
   SongDatagrid,
   SongInfo,
   SongTitleField,
-  RatingField,
-  QualityInfo,
-  useSelectedFields,
   useResourceRefresh,
-  DateField,
-  SizeField,
-  ArtistLinkField,
+  useSelectedFields,
 } from '../common'
 import config from '../config'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
+import { removeAlbumCommentsFromSongs } from './utils.js'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -193,14 +194,6 @@ const AlbumSongs = (props) => {
   )
 }
 
-export const removeAlbumCommentsFromSongs = ({ album, data }) => {
-  if (album?.comment && data) {
-    Object.values(data).forEach((song) => {
-      song.comment = ''
-    })
-  }
-}
-
 const SanitizedAlbumSongs = (props) => {
   removeAlbumCommentsFromSongs(props)
   const { loaded, loading, total, ...rest } = useListContext(props)

ui/src/album/utils.js

@@ -0,0 +1,7 @@
+export const removeAlbumCommentsFromSongs = ({ album, data }) => {
+  if (album?.comment && data) {
+    Object.values(data).forEach((song) => {
+      song.comment = ''
+    })
+  }
+}

ui/src/album/utils.test.js

@@ -1,4 +1,4 @@
-import { removeAlbumCommentsFromSongs } from './AlbumSongs'
+import { removeAlbumCommentsFromSongs } from './utils.js'
 
 describe('removeAlbumCommentsFromSongs', () => {
   const data = { 1: { comment: 'one' }, 2: { comment: 'two' } }