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
2024-09-28 11:54:36 -04:00
parent dd48a23f92
commit fcdd30ba8f
212 changed files with 6231 additions and 31060 deletions
@@ -0,0 +1,77 @@
+import React from 'react'
+import DeleteIcon from '@material-ui/icons/Delete'
+import { makeStyles } from '@material-ui/core/styles'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import clsx from 'clsx'
+import {
+  useDeleteWithConfirmController,
+  Button,
+  Confirm,
+  useNotify,
+  useRedirect,
+} from 'react-admin'
+
+const useStyles = makeStyles(
+  (theme) => ({
+    deleteButton: {
+      color: theme.palette.error.main,
+      '&:hover': {
+        backgroundColor: fade(theme.palette.error.main, 0.12),
+        // Reset on mouse devices
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+  }),
+  { name: 'RaDeleteWithConfirmButton' },
+)
+
+const DeleteUserButton = (props) => {
+  const { resource, record, basePath, className, onClick, ...rest } = props
+
+  const notify = useNotify()
+  const redirect = useRedirect()
+
+  const onSuccess = () => {
+    notify('resources.user.notifications.deleted')
+    redirect('/user')
+  }
+
+  const { open, loading, handleDialogOpen, handleDialogClose, handleDelete } =
+    useDeleteWithConfirmController({
+      resource,
+      record,
+      basePath,
+      onClick,
+      onSuccess,
+    })
+
+  const classes = useStyles(props)
+  return (
+    <>
+      <Button
+        onClick={handleDialogOpen}
+        label="ra.action.delete"
+        className={clsx('ra-delete-button', classes.deleteButton, className)}
+        key="button"
+        {...rest}
+      >
+        <DeleteIcon />
+      </Button>
+      <Confirm
+        isOpen={open}
+        loading={loading}
+        title="message.delete_user_title"
+        content="message.delete_user_content"
+        translateOptions={{
+          name: record.name,
+        }}
+        onConfirm={handleDelete}
+        onClose={handleDialogClose}
+      />
+    </>
+  )
+}
+
+export default DeleteUserButton