feat(playground): improve persist message

contember · Mar 13, 2024 · 86600c3 · 86600c3
1 parent 1b6eac9
commit 86600c3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/packages/playground/admin/lib/components/binding/persist.tsx b/packages/playground/admin/lib/components/binding/persist.tsx
@@ -38,6 +38,7 @@ export const usePersistErrorHandler = () => {
 				<ToastContent
 					title={dict.persist.invalidInputError}
 					description={<ul>{errorList.map((it, i) => <li key={i}>{it}</li>)}</ul>}
+					details={result.response?.errorMessage}
 				/>, {
 					type: 'error',
 				})

diff --git a/packages/playground/admin/lib/components/ui/toast/toast.tsx b/packages/playground/admin/lib/components/ui/toast/toast.tsx
@@ -4,17 +4,29 @@ import { X } from 'lucide-react'
 import { uic } from '../../../../lib/utils/uic'
 import { ReactNode } from 'react'
 import { ToasterProvider, useToasts } from './toaster'
+import { dict } from '../../../dict'
 
-export const ToastContent = ({ title, description, action }: {
+export const ToastContent = ({ title, description, action, details }: {
 	title?: ReactNode
 	description?: ReactNode
 	action?: ReactNode
+	details?: ReactNode
 }) => {
+	const [open, setOpen] = React.useState(false)
 
 	return <>
 		<div className="grid gap-1">
 			{title && <ToastTitle>{title}</ToastTitle>}
 			{description && <ToastDescription>{description}</ToastDescription>}
+			{details ? (
+				open ? (
+					<code className="p-1 bg-gray-50 border rounded font-mono text-xs">{details}</code>
+				) : (
+					<div>
+						<button onClick={() => setOpen(true)} className="text-sm text-gray-400 underline">{dict.toast.showDetails}</button>
+					</div>
+				)
+			) : null}
 		</div>
 		{action}
 	</>
@@ -49,6 +61,11 @@ const Toast = uic(ToastPrimitives.Root, {
 		variant: 'info',
 	},
 	displayName: 'Toast',
+	defaultProps: {
+		style: {
+			userSelect: 'auto',
+		},
+	},
 })
 
 const ToastClose = uic(ToastPrimitives.Close, {

diff --git a/packages/playground/admin/lib/dict.ts b/packages/playground/admin/lib/dict.ts
@@ -13,12 +13,15 @@ export const dict = {
 	},
 	persist: {
 		persistButton: 'Save data',
-		invalidInputError: 'Invalid input',
+		invalidInputError: 'Failed to save data',
 		invalidResponseError: 'Invalid response',
 		invalidResponseErrorDetails: 'The server returned an invalid response. Please try again later.',
 		success: 'Successfully saved',
 		afterPersistError: 'Something wrong has happened after the data were persisted. Please refresh the page.',
 	},
+	toast: {
+		showDetails: 'Show details',
+	},
 	datagrid: {
 		na: 'N/A',
 		dateStart: 'Start',