ui(frontend): refine error message cell (#581)

pingcap · Jan 8, 2025 · ae2b633 · ae2b633
1 parent 3d47ddf
commit ae2b633
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 8 deletions.
diff --git a/frontend/app/src/components/cells/error-message.tsx b/frontend/app/src/components/cells/error-message.tsx
@@ -1,4 +1,5 @@
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+import { PythonViewer } from '@/components/py-viewer';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import type { CellContext } from '@tanstack/react-table';
 
 export function errorMessageCell<Row> (trimLength = 25) {
@@ -15,18 +16,24 @@ export function AutoErrorMessagePopper ({ trimLength = 25, children }: { trimLen
   const shortcut = children.slice(0, trimLength);
 
   return (
-    <HoverCard>
-      <HoverCardTrigger>
+    <Dialog>
+      <DialogTrigger>
         {shortcut}{'... '}
         <span className="text-muted-foreground">
           ({children.length + ' characters'})
         </span>
-      </HoverCardTrigger>
-      <HoverCardContent className="w-96 h-48">
+      </DialogTrigger>
+      <DialogContent className="max-w-screen-lg h-[80vh]">
+        <DialogHeader>
+          <DialogTitle>
+            Error Message
+          </DialogTitle>
+          <DialogDescription className="sr-only" />
+        </DialogHeader>
         <div className="size-full overflow-scroll">
-          <pre className="whitespace-pre">{children}</pre>
+          <PythonViewer value={children} />
         </div>
-      </HoverCardContent>
-    </HoverCard>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/frontend/app/src/components/py-viewer.tsx b/frontend/app/src/components/py-viewer.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import Highlight from 'highlight.js/lib/core';
+import python from 'highlight.js/lib/languages/python';
+import { useEffect, useState } from 'react';
+import './code-theme.scss';
+
+Highlight.registerLanguage('python', python);
+
+export function PythonViewer ({ value: propValue }: { value: string }) {
+  const [value, setValue] = useState(() => propValue.replaceAll('<', '&lt;'));
+
+  useEffect(() => {
+    setValue(propValue);
+    try {
+      const { value: result } = Highlight.highlight(propValue, { language: 'python' });
+      setValue(result);
+    } catch {
+    }
+  }, [propValue]);
+
+  return (
+    <code>
+      <pre className="whitespace-pre-wrap text-xs font-mono" dangerouslySetInnerHTML={{ __html: value }} />
+    </code>
+  );
+}