handle errors better in the ui with an alert component

crawler/frontend/src/components/ActiveQuery.tsx

@@ -1,6 +1,7 @@
 import { getUser } from '@/auth/authService';
 import type { User } from 'oidc-client-ts';
 import React, { useEffect, useState } from 'react';
+import AlertError from './AlertError';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from './ui/hover-card';
 import { Progress } from './ui/progress';
 
@@ -17,7 +18,6 @@ const fetchTaskStatus = async (user: User, taskID: string) => {
             'Content-Type': 'application/json',
         },
     });
-
     if (!response.ok) {
         throw new Error(`Failed to fetch task status: ${response.status}`);
     }
@@ -73,6 +73,8 @@ const ActiveQuery: React.FC<ModalProps> = ({
     const [progressPercentage, setProgressPercentage] = useState<number>(0);
     const [taskStatus, setTaskStatus] = useState<TaskStatus | null>(TaskStatus.QUEUED);
     const [lastUpdateTime, setLastUpdateTime] = useState<Date>(new Date());
+    const [fetchStatusError, setFetchStatusError] = useState<string | null>(null);
+    const [alertDialogIsOpen, setAlertDialogIsOpen] = useState(false);
 
     // fetch status periodically
     // maybe move to ws one day
@@ -88,7 +90,12 @@ const ActiveQuery: React.FC<ModalProps> = ({
                 } catch (error: any) {
                     clearInterval(interval);
                     setTaskStatus(TaskStatus.FAILED)
-                    alert(error)
+                    setAlertDialogIsOpen(true)
+                    if (error instanceof Error) {
+                        setFetchStatusError(error.message)
+                    } else {
+                        setFetchStatusError('Failed to update task status: ' + error.toString())
+                    }
                 }
                 if (!data) {
                     clearInterval(interval);
@@ -120,7 +127,7 @@ const ActiveQuery: React.FC<ModalProps> = ({
             <div>
                 <HoverCard>
                     <HoverCardTrigger>
-                        {taskStatus && <p>Task status: {taskStatus} </p>}
+                        {taskStatus && <>Task status: {taskStatus} </>}
                         <Progress value={progressPercentage} />
                     </HoverCardTrigger>
                     <HoverCardContent>
@@ -130,7 +137,7 @@ const ActiveQuery: React.FC<ModalProps> = ({
                     </HoverCardContent>
                 </HoverCard>
             </div>
-
+            <AlertError message={fetchStatusError} open={alertDialogIsOpen} setIsOpen={setAlertDialogIsOpen} />
         </>
     )
 };

crawler/frontend/src/components/AlertError.tsx

@@ -0,0 +1,26 @@
+import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "./ui/alert-dialog";
+
+export default function AlertError(
+    props: {
+        message: string | null;
+        open: boolean;
+        setIsOpen: (isOpen: boolean) => void;
+    }
+) {
+    return (
+        <AlertDialog open={props.open} onOpenChange={props.setIsOpen}>
+            {/* <AlertDialogTrigger>Open</AlertDialogTrigger> */}
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Error</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        {props.message}
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogAction onClick={() => props.setIsOpen(false)}>Close</AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    )
+}

crawler/frontend/src/components/Parameters.tsx

@@ -36,6 +36,7 @@ export function Parameters(
     props: {
         isOpen: boolean,
         onSubmit: (action: 'fetch-data' | 'visualize', fromValues: ParameterValues) => void,
+        setIsOpen: (isOpen: boolean) => void
     }
 ) {
     const {
@@ -76,10 +77,10 @@ export function Parameters(
 
 
     return <>
-        {/* <Dialog open={props.isOpen} > */}
-        <Dialog >
+        <Dialog open={props.isOpen} onOpenChange={props.setIsOpen} >
+            {/* <Dialog > */}
             <DialogTrigger asChild>
-                <Button variant="outline">Open Parameters</Button>
+                <Button variant="outline" onClick={() => props.setIsOpen(true)}>Open Parameters</Button>
             </DialogTrigger>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogTitle>

crawler/frontend/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,155 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

crawler/frontend/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }