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/common/MultiLineTextField.jsx

@@ -0,0 +1,54 @@
+import React, { memo } from 'react'
+import Typography from '@material-ui/core/Typography'
+import sanitizeFieldRestProps from './sanitizeFieldRestProps'
+import md5 from 'blueimp-md5'
+import { useRecordContext } from 'react-admin'
+
+export const MultiLineTextField = memo(
+  ({
+    className,
+    emptyText,
+    source,
+    firstLine,
+    maxLines,
+    addLabel,
+    ...rest
+  }) => {
+    const record = useRecordContext(rest)
+    const value = record && record[source]
+    let lines = value ? value.split('\n') : []
+    if (maxLines || firstLine) {
+      lines = lines.slice(firstLine, maxLines)
+    }
+
+    return (
+      <Typography
+        className={className}
+        variant="body2"
+        component="span"
+        {...sanitizeFieldRestProps(rest)}
+      >
+        {lines.length === 0 && emptyText
+          ? emptyText
+          : lines.map((line, idx) =>
+              line === '' ? (
+                <br key={md5(line + idx)} />
+              ) : (
+                <div
+                  data-testid={`${source}.${idx}`}
+                  key={md5(line + idx)}
+                  dangerouslySetInnerHTML={{ __html: line }}
+                />
+              ),
+            )}
+      </Typography>
+    )
+  },
+)
+
+MultiLineTextField.displayName = 'MultiLineTextField'
+
+MultiLineTextField.defaultProps = {
+  addLabel: true,
+  firstLine: 0,
+}