refactor(data-drains): tighten query keys and small UI cleanups

Add runsList factory to avoid bypassing the query-key factory, drop
keepPreviousData on the near-static drains list, invalidate the drain
detail on run-now/delete, remove the orphaned detail/runs caches on
delete, add an aria-label on the row actions trigger, and use cn() for
the conditional run-status class.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: waleedlatif1

apps/sim/ee/data-drains/components/data-drains-settings.tsx

@@ -33,6 +33,7 @@ import {
 import type { CreateDataDrainBody, DataDrain, DataDrainRun } from '@/lib/api/contracts/data-drains'
 import { useSession } from '@/lib/auth/auth-client'
 import { CADENCE_TYPES, DESTINATION_TYPES, SOURCE_TYPES } from '@/lib/data-drains/types'
+import { cn } from '@/lib/utils'
 import { getUserRole } from '@/lib/workspaces/organization/utils'
 import { DataDrainsSkeleton } from '@/ee/data-drains/components/data-drains-skeleton'
 import { DESTINATION_FORM_REGISTRY } from '@/ee/data-drains/destinations/registry'
@@ -251,7 +252,7 @@ function DrainRow({ drain, organizationId, expanded, onToggleExpand }: DrainRowP
         <TableCell onClick={(e) => e.stopPropagation()}>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant='ghost' size='sm'>
+              <Button variant='ghost' size='sm' aria-label='Drain actions'>
                 <MoreHorizontal className='h-4 w-4' />
               </Button>
             </DropdownMenuTrigger>
@@ -314,7 +315,7 @@ function RunRow({ run }: { run: DataDrainRun }) {
     <div className='flex items-start justify-between gap-4 rounded border border-[var(--border)] px-3 py-2 text-[12px]'>
       <div className='flex flex-col gap-0.5'>
         <div className='flex items-center gap-2'>
-          <span className={`font-medium ${statusColor}`}>{run.status}</span>
+          <span className={cn('font-medium', statusColor)}>{run.status}</span>
           <span className='text-[var(--text-muted)]'>{run.trigger}</span>
           <span className='text-[var(--text-muted)]'>
             {new Date(run.startedAt).toLocaleString()}

apps/sim/ee/data-drains/hooks/data-drains.ts

@@ -25,6 +25,8 @@ export const dataDrainKeys = {
   detail: (drainId?: string) => [...dataDrainKeys.details(), drainId ?? ''] as const,
   runsAll: () => [...dataDrainKeys.all, 'runs'] as const,
   runs: (drainId?: string) => [...dataDrainKeys.runsAll(), drainId ?? ''] as const,
+  runsList: (drainId?: string, limit?: number) =>
+    [...dataDrainKeys.runs(drainId), limit ?? 10] as const,
 }
 
 async function fetchDataDrains(organizationId: string, signal?: AbortSignal): Promise<DataDrain[]> {
@@ -55,13 +57,12 @@ export function useDataDrains(organizationId?: string) {
     queryFn: ({ signal }) => fetchDataDrains(organizationId as string, signal),
     enabled: Boolean(organizationId),
     staleTime: 60 * 1000,
-    placeholderData: keepPreviousData,
   })
 }
 
 export function useDataDrainRuns(organizationId?: string, drainId?: string, limit = 10) {
   return useQuery<DataDrainRun[]>({
-    queryKey: [...dataDrainKeys.runs(drainId), limit] as const,
+    queryKey: dataDrainKeys.runsList(drainId, limit),
     queryFn: ({ signal }) =>
       fetchDataDrainRuns(organizationId as string, drainId as string, limit, signal),
     enabled: Boolean(organizationId && drainId),
@@ -132,7 +133,8 @@ export function useDeleteDataDrain() {
     },
     onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: dataDrainKeys.list(variables.organizationId) })
-      queryClient.invalidateQueries({ queryKey: dataDrainKeys.detail(variables.drainId) })
+      queryClient.removeQueries({ queryKey: dataDrainKeys.detail(variables.drainId) })
+      queryClient.removeQueries({ queryKey: dataDrainKeys.runs(variables.drainId) })
     },
   })
 }
@@ -154,6 +156,7 @@ export function useRunDataDrainNow() {
     },
     onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: dataDrainKeys.runs(variables.drainId) })
+      queryClient.invalidateQueries({ queryKey: dataDrainKeys.detail(variables.drainId) })
       queryClient.invalidateQueries({ queryKey: dataDrainKeys.list(variables.organizationId) })
     },
   })