DH-5518 add error box to add db form dialog

Dataherald · May 7, 2024 · 599d93d · 599d93d
1 parent 35d7477
commit 599d93d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/apps/ai/clients/admin-console/src/components/databases/database-connection-form-dialog.tsx b/apps/ai/clients/admin-console/src/components/databases/database-connection-form-dialog.tsx
@@ -86,10 +86,13 @@ const DatabaseConnectionFormDialog: FC<DatabaseConnectionFormDialogProps> = ({
 
   const [databaseConnected, setDatabaseConnected] = useState(false)
 
+  const [dbError, setDbError] = useState<ErrorResponse | null>(null)
+
   const connectDatabase = usePostDatabaseConnection()
 
   const onSubmit = async () => {
     try {
+      setDbError(null)
       const formFieldsValues = form.getValues()
       const { file, ...dbConnectionFields } = formFieldsValues
       await connectDatabase(
@@ -101,6 +104,7 @@ const DatabaseConnectionFormDialog: FC<DatabaseConnectionFormDialogProps> = ({
     } catch (e) {
       console.error(e)
       const { message: title, trace_id: description } = e as ErrorResponse
+      setDbError(e as ErrorResponse)
       toast({
         variant: 'destructive',
         title,
@@ -189,25 +193,36 @@ const DatabaseConnectionFormDialog: FC<DatabaseConnectionFormDialogProps> = ({
                 </DialogTitle>
                 <DialogDescription>
                   {isFirstConnection
-                    ? 'Connect your database to start using the platform.'
-                    : 'Connect another database to the platform.'}
-                </DialogDescription>
-              </DialogHeader>
-              <div className="grow flex flex-col overflow-auto p-1">
-                <div className="grow">
-                  <DatabaseConnectionForm form={form} />
-                </div>
-                <DialogFooter className="mt-5 w-full flex items-center sm:justify-between gap-3">
+                    ? 'Connect your database to start using the platform. '
+                    : 'Connect another database to the platform. '}
                   <Link
                     href="https://docs.dataherald.com/database-connection/add-database-connection"
                     target="_blank"
                     rel="noreferrer noopener"
                   >
-                    <Button variant="external-link" size="sm" className="p-0">
+                    <Button
+                      variant="external-link"
+                      size="sm"
+                      className="p-0 h-fit"
+                    >
                       Learn more about adding a database
                       <ArrowUpRight size={14} className="mr-2" />
                     </Button>
                   </Link>
+                </DialogDescription>
+              </DialogHeader>
+              <div className="grow flex flex-col overflow-auto p-1">
+                <div className="grow flex flex-col gap-3">
+                  <DatabaseConnectionForm form={form} />
+                  {dbError && (
+                    <Alert variant="destructive" className="my-5">
+                      <AlertDescription className="break-words">
+                        {dbError.description || dbError.message}
+                      </AlertDescription>
+                    </Alert>
+                  )}
+                </div>
+                <DialogFooter className="mt-3">
                   <Button
                     onClick={form.handleSubmit(onSubmit)}
                     type="button"

diff --git a/apps/ai/clients/admin-console/src/components/ui/toast.tsx b/apps/ai/clients/admin-console/src/components/ui/toast.tsx
@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      'fixed top-0 z-[100] flex max-h-screen w-fit flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[600px]',
       className,
     )}
     {...props}

diff --git a/apps/ai/clients/admin-console/src/hooks/api/generics/useApiFetcher.ts b/apps/ai/clients/admin-console/src/hooks/api/generics/useApiFetcher.ts
@@ -2,6 +2,7 @@ import { API_URL } from '@/config'
 import { useAuth } from '@/contexts/auth-context'
 import { useSubscription } from '@/contexts/subscription-context'
 import { isErrorResponse, isSubscriptionErrorCode } from '@/lib/domain/error'
+import { ErrorResponse } from '@/models/api'
 import { useRouter } from 'next/navigation'
 import { useCallback, useState } from 'react'
 
@@ -52,6 +53,13 @@ const useApiFetcher = () => {
             }
 
             throw errorResponse
+          } else {
+            const unhandledError: ErrorResponse = {
+              error_code: 'UNHANDLED_ERROR',
+              message: 'Unhandled server error',
+              trace_id: '',
+            }
+            throw unhandledError
           }
         }
       }

diff --git a/apps/ai/clients/admin-console/src/models/api.ts b/apps/ai/clients/admin-console/src/models/api.ts
@@ -4,6 +4,7 @@ export interface ErrorResponse {
   trace_id: string
   message: string
   error_code: string
+  description?: string
   detail?: Record<string, string>
 }