Add unwrapServiceError helper

Author: brendan-kellam

packages/web/src/app/[domain]/components/connectionCreationForms/secretCombobox.tsx

@@ -10,7 +10,7 @@ import {
     CommandList,
 } from "@/components/ui/command"
 import { Button } from "@/components/ui/button";
-import { cn, isServiceError } from "@/lib/utils";
+import { cn, isServiceError, unwrapServiceError } from "@/lib/utils";
 import { ChevronsUpDown, Check, PlusCircleIcon, Loader2, Eye, EyeOff, TriangleAlert } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 import { Separator } from "@/components/ui/separator";
@@ -49,26 +49,16 @@ export const SecretCombobox = ({
     const [isCreateSecretDialogOpen, setIsCreateSecretDialogOpen] = useState(false);
     const captureEvent = useCaptureEvent();
 
-    const { data: secrets, isLoading, refetch } = useQuery({
+    const { data: secrets, isPending, isError, refetch } = useQuery({
         queryKey: ["secrets"],
-        queryFn: () => getSecrets(domain),
+        queryFn: () => unwrapServiceError(getSecrets(domain)),
     });
 
     const onSecretCreated = useCallback((key: string) => {
         onSecretChange(key);
         refetch();
     }, [onSecretChange, refetch]);
 
-    const isSecretNotFoundWarningVisible = useMemo(() => {
-        if (!isDefined(secretKey)) {
-            return false;
-        }
-        if (isServiceError(secrets)) {
-            return false;
-        }
-        return !secrets?.some(({ key }) => key === secretKey);
-    }, [secretKey, secrets]);
-
     return (
         <>
             <Popover>
@@ -83,7 +73,7 @@ export const SecretCombobox = ({
                         )}
                         disabled={isDisabled}
                     >
-                        {isSecretNotFoundWarningVisible && (
+                        {!(isPending || isError) && isDefined(secretKey) && !secrets.some(({ key }) => key === secretKey) && (
                             <TooltipProvider>
 
                                 <Tooltip
@@ -105,12 +95,13 @@ export const SecretCombobox = ({
                     </Button>
                 </PopoverTrigger>
                 <PopoverContent className="p-0.5">
-                    {isLoading && (
+                    {isPending ? (
                         <div className="flex items-center justify-center p-8">
                             <Loader2 className="h-4 w-4 animate-spin" />
                         </div>
-                    )}
-                    {secrets && !isServiceError(secrets) && secrets.length > 0 && (
+                    ) : isError ? (
+                        <p className="p-2 text-sm text-destructive">Failed to load secrets</p>
+                    ) : secrets.length > 0 && (
                         <>
                             <Command className="mb-2">
                                 <CommandInput

packages/web/src/app/[domain]/components/errorNavIndicator.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card";
 import { CircleXIcon } from "lucide-react";
 import { useDomain } from "@/hooks/useDomain";
-import { isServiceError } from "@/lib/utils";
+import { unwrapServiceError } from "@/lib/utils";
 import useCaptureEvent from "@/hooks/useCaptureEvent";
 import { NEXT_PUBLIC_POLLING_INTERVAL_MS } from "@/lib/environment.client";
 import { useQuery } from "@tanstack/react-query";
@@ -16,49 +16,43 @@ export const ErrorNavIndicator = () => {
     const domain = useDomain();
     const captureEvent = useCaptureEvent();
 
-    const { data: failedRepos } = useQuery({
+    const { data: repos, isPending: isPendingRepos, isError: isErrorRepos } = useQuery({
         queryKey: ['repos', domain],
-        queryFn: () => getRepos(domain),
-        select: (data) => {
-            if (isServiceError(data)) {
-                return data;
-            }
-            return data.filter(repo => repo.repoIndexingStatus === RepoIndexingStatus.FAILED);
-        },
+        queryFn: () => unwrapServiceError(getRepos(domain)),
+        select: (data) => data.filter(repo => repo.repoIndexingStatus === RepoIndexingStatus.FAILED),
         refetchInterval: NEXT_PUBLIC_POLLING_INTERVAL_MS,
-        initialData: [],
     });
 
-    const { data: failedConnections } = useQuery({
+    const { data: connections, isPending: isPendingConnections, isError: isErrorConnections } = useQuery({
         queryKey: ['connections', domain],
-        queryFn: () => getConnections(domain),
-        select: (data) => {
-            if (isServiceError(data)) {
-                return data;
-            }
-            return data.filter(connection => connection.syncStatus === ConnectionSyncStatus.FAILED)
-        },
+        queryFn: () => unwrapServiceError(getConnections(domain)),
+        select: (data) => data.filter(connection => connection.syncStatus === ConnectionSyncStatus.FAILED),
         refetchInterval: NEXT_PUBLIC_POLLING_INTERVAL_MS,
-        initialData: [],
     });
 
-    if (isServiceError(failedRepos) || isServiceError(failedConnections) || (failedRepos.length === 0 && failedConnections.length === 0)) return null;
+    if (isPendingRepos || isErrorRepos || isPendingConnections || isErrorConnections) {
+        return null;
+    }
+
+    if (repos.length === 0 && connections.length === 0) {
+        return null;
+    }
 
     return (
         <HoverCard openDelay={50}>
             <HoverCardTrigger asChild onMouseEnter={() => captureEvent('wa_error_nav_hover', {})}>
                 <Link href={`/${domain}/connections`} onClick={() => captureEvent('wa_error_nav_pressed', {})}>
                     <div className="flex items-center gap-2 px-3 py-1.5 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 rounded-full text-red-700 dark:text-red-400 text-xs font-medium hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors cursor-pointer">
                         <CircleXIcon className="h-4 w-4" />
-                        {failedRepos.length + failedConnections.length > 0 && (
-                            <span>{failedRepos.length + failedConnections.length}</span>
+                        {repos.length + connections.length > 0 && (
+                            <span>{repos.length + connections.length}</span>
                         )}
                     </div>
                 </Link>
             </HoverCardTrigger>
             <HoverCardContent className="w-80 border border-red-200 dark:border-red-800 rounded-lg">
                 <div className="flex flex-col gap-6 p-5">
-                    {failedConnections.length > 0 && (
+                    {connections.length > 0 && (
                         <div className="flex flex-col gap-4 pb-6">
                             <div className="flex items-center gap-2">
                                 <div className="h-2 w-2 rounded-full bg-red-500"></div>
@@ -68,7 +62,7 @@ export const ErrorNavIndicator = () => {
                                 The following connections have failed to sync:
                             </p>
                             <div className="flex flex-col gap-2">
-                                {failedConnections
+                                {connections
                                     .slice(0, 10)
                                     .map(connection => (
                                         <Link key={connection.name} href={`/${domain}/connections/${connection.id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
@@ -80,16 +74,16 @@ export const ErrorNavIndicator = () => {
                                             </div>
                                         </Link>
                                     ))}
-                                {failedConnections.length > 10 && (
+                                {connections.length > 10 && (
                                     <div className="text-sm text-red-600/90 dark:text-red-300/90 pl-3 pt-1">
-                                        And {failedConnections.length - 10} more...
+                                        And {connections.length - 10} more...
                                     </div>
                                 )}
                             </div>
                         </div>
                     )}
 
-                    {failedRepos.length > 0 && (
+                    {repos.length > 0 && (
                         <div className="flex flex-col gap-4">
                             <div className="flex items-center gap-2">
                                 <div className="h-2 w-2 rounded-full bg-red-500"></div>
@@ -99,7 +93,7 @@ export const ErrorNavIndicator = () => {
                                 The following repositories failed to index:
                             </p>
                             <div className="flex flex-col gap-2">
-                                {failedRepos
+                                {repos
                                     .slice(0, 10)
                                     .map(repo => (
                                         // Link to the first connection for the repo
@@ -115,9 +109,9 @@ export const ErrorNavIndicator = () => {
                                             </div>
                                         </Link>
                                     ))}
-                                {failedRepos.length > 10 && (
+                                {repos.length > 10 && (
                                     <div className="text-sm text-red-600/90 dark:text-red-300/90 pl-3 pt-1">
-                                        And {failedRepos.length - 10} more...
+                                        And {repos.length - 10} more...
                                     </div>
                                 )}
                             </div>

packages/web/src/app/[domain]/components/progressNavIndicator.tsx

@@ -5,7 +5,7 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/h
 import useCaptureEvent from "@/hooks/useCaptureEvent";
 import { useDomain } from "@/hooks/useDomain";
 import { NEXT_PUBLIC_POLLING_INTERVAL_MS } from "@/lib/environment.client";
-import { isServiceError } from "@/lib/utils";
+import { unwrapServiceError } from "@/lib/utils";
 import { RepoIndexingStatus } from "@prisma/client";
 import { useQuery } from "@tanstack/react-query";
 import { Loader2Icon } from "lucide-react";
@@ -15,20 +15,14 @@ export const ProgressNavIndicator = () => {
     const domain = useDomain();
     const captureEvent = useCaptureEvent();
 
-    const { data: inProgressRepos } = useQuery({
+    const { data: inProgressRepos, isPending, isError } = useQuery({
         queryKey: ['repos', domain],
-        queryFn: () => getRepos(domain),
-        select: (data) => {
-            if (isServiceError(data)) {
-                return data;
-            }
-            return data.filter(repo => repo.repoIndexingStatus === RepoIndexingStatus.IN_INDEX_QUEUE || repo.repoIndexingStatus === RepoIndexingStatus.INDEXING);
-        },
+        queryFn: () => unwrapServiceError(getRepos(domain)),
+        select: (data) => data.filter(repo => repo.repoIndexingStatus === RepoIndexingStatus.IN_INDEX_QUEUE || repo.repoIndexingStatus === RepoIndexingStatus.INDEXING),
         refetchInterval: NEXT_PUBLIC_POLLING_INTERVAL_MS,
-        initialData: [],
     });
 
-    if (isServiceError(inProgressRepos) || inProgressRepos.length === 0) {
+    if (isPending || isError || inProgressRepos.length === 0) {
         return null;
     }
 

packages/web/src/app/[domain]/components/warningNavIndicator.tsx

@@ -5,7 +5,7 @@ import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/h
 import { AlertTriangleIcon } from "lucide-react";
 import { useDomain } from "@/hooks/useDomain";
 import { getConnections } from "@/actions";
-import { isServiceError } from "@/lib/utils";
+import { unwrapServiceError } from "@/lib/utils";
 import useCaptureEvent from "@/hooks/useCaptureEvent";
 import { NEXT_PUBLIC_POLLING_INTERVAL_MS } from "@/lib/environment.client";
 import { useQuery } from "@tanstack/react-query";
@@ -15,20 +15,14 @@ export const WarningNavIndicator = () => {
     const domain = useDomain();
     const captureEvent = useCaptureEvent();
 
-    const { data: connections } = useQuery({
+    const { data: connections, isPending, isError } = useQuery({
         queryKey: ['connections', domain],
-        queryFn: () => getConnections(domain),
-        select: (data) => {
-            if (isServiceError(data)) {
-                return data;
-            }
-            return data.filter(connection => connection.syncStatus === ConnectionSyncStatus.SYNCED_WITH_WARNINGS);
-        },
+        queryFn: () => unwrapServiceError(getConnections(domain)),
+        select: (data) => data.filter(connection => connection.syncStatus === ConnectionSyncStatus.SYNCED_WITH_WARNINGS),
         refetchInterval: NEXT_PUBLIC_POLLING_INTERVAL_MS,
-        initialData: [],
     });
 
-    if (isServiceError(connections) || connections.length === 0) {
+    if (isPending || isError || connections.length === 0) {
         return null;
     }   
 

packages/web/src/app/[domain]/connections/[id]/components/notFoundWarning.tsx

@@ -2,20 +2,20 @@
 
 import { AlertTriangle } from "lucide-react"
 import { Prisma, ConnectionSyncStatus } from "@sourcebot/db"
-import { RetrySyncButton } from "./retrySyncButton"
 import { SyncStatusMetadataSchema } from "@/lib/syncStatusMetadataSchema"
 import useCaptureEvent from "@/hooks/useCaptureEvent";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { Button } from "@/components/ui/button";
 
 interface NotFoundWarningProps {
     syncStatus: ConnectionSyncStatus
     syncStatusMetadata: Prisma.JsonValue
     onSecretsClick: () => void
-    connectionId: number
-    domain: string
     connectionType: string
+    onRetrySync: () => void
 }
 
-export const NotFoundWarning = ({ syncStatus, syncStatusMetadata, onSecretsClick, connectionId, domain, connectionType }: NotFoundWarningProps) => {
+export const NotFoundWarning = ({ syncStatus, syncStatusMetadata, onSecretsClick, connectionType, onRetrySync }: NotFoundWarningProps) => {
     const captureEvent = useCaptureEvent();
 
     const parseResult = SyncStatusMetadataSchema.safeParse(syncStatusMetadata);
@@ -65,7 +65,15 @@ export const NotFoundWarning = ({ syncStatus, syncStatusMetadata, onSecretsClick
                 )}
             </ul>
             <div className="w-full flex justify-center">
-                <RetrySyncButton connectionId={connectionId} domain={domain} />
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="ml-2"
+                    onClick={onRetrySync}
+                >
+                    <ReloadIcon className="h-4 w-4 mr-2" />
+                    Retry Sync
+                </Button>
             </div>
         </div>
     )