feat(psa): upgrade ticket picker with search and fix lookup/link separation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-14 23:14:56 -04:00
parent 88495b10f0
commit dcf8bce2bf
3 changed files with 356 additions and 83 deletions
--- a/frontend/src/api/integrations.ts
+++ b/frontend/src/api/integrations.ts
@@ -1,6 +1,6 @@
 import { apiClient } from './client'
 import type { PsaConnectionResponse, PsaConnectionCreate, PsaConnectionUpdate, PsaConnectionTestResponse } from '@/types'
-import type { TicketLinkResponse } from '@/types/integrations'
+import type { TicketLinkResponse, PSATicketSearchResult, PSATicketInfo, PSATicketStatusItem } from '@/types/integrations'

 export const integrationsApi = {
  getConnection: () =>
@@ -13,6 +13,12 @@ export const integrationsApi = {
    apiClient.delete(`/integrations/psa/connections/${id}`),
  testConnection: (id: string) =>
    apiClient.post<PsaConnectionTestResponse>(`/integrations/psa/connections/${id}/test`).then(r => r.data),
+  searchTickets: (params: { query?: string; board_id?: number; include_closed?: boolean }) =>
+    apiClient.get<PSATicketSearchResult[]>('/integrations/psa/tickets/search', { params }).then(r => r.data),
+  getTicket: (id: string) =>
+    apiClient.get<PSATicketInfo>(`/integrations/psa/tickets/${id}`).then(r => r.data),
+  getTicketStatuses: (ticketId: string) =>
+    apiClient.get<PSATicketStatusItem[]>(`/integrations/psa/tickets/${ticketId}/statuses`).then(r => r.data),
 }

 export const sessionPsaApi = {
--- a/frontend/src/components/session/TicketPickerModal.tsx
+++ b/frontend/src/components/session/TicketPickerModal.tsx
@@ -1,11 +1,13 @@
-import { useState } from 'react'
-import { Ticket, Search, AlertCircle, CheckCircle2 } from 'lucide-react'
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Ticket, Search, AlertCircle, CheckCircle2, Hash, Loader2 } from 'lucide-react'
 import { Modal } from '@/components/common/Modal'
 import { Input } from '@/components/ui/Input'
 import { Button } from '@/components/ui/Button'
 import { cn } from '@/lib/utils'
-import { sessionPsaApi } from '@/api/integrations'
-import type { PSATicketInfo } from '@/types/integrations'
+import { integrationsApi, sessionPsaApi } from '@/api/integrations'
+import type { PSATicketInfo, PSATicketSearchResult } from '@/types/integrations'
+
+type Mode = 'search' | 'manual'

 interface Props {
  open: boolean
@@ -15,103 +17,341 @@ interface Props {
 }

 export function TicketPickerModal({ open, onClose, sessionId, onLinked }: Props) {
-  const [ticketId, setTicketId] = useState('')
+  const [mode, setMode] = useState<Mode>('search')
+
+  // Search mode state
+  const [searchQuery, setSearchQuery] = useState('')
+  const [includeClosed, setIncludeClosed] = useState(false)
+  const [searchResults, setSearchResults] = useState<PSATicketSearchResult[]>([])
+  const [isSearching, setIsSearching] = useState(false)
+  const [hasSearched, setHasSearched] = useState(false)
+
+  // Manual mode state
+  const [manualId, setManualId] = useState('')
+
+  // Shared state
+  const [selectedTicket, setSelectedTicket] = useState<PSATicketInfo | null>(null)
+  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null)
  const [isLooking, setIsLooking] = useState(false)
  const [isLinking, setIsLinking] = useState(false)
-  const [ticketInfo, setTicketInfo] = useState<PSATicketInfo | null>(null)
  const [error, setError] = useState<string | null>(null)

-  const handleLookup = async () => {
-    const trimmed = ticketId.trim()
-    if (!trimmed) return
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)

-    setIsLooking(true)
+  // Debounced search
+  const performSearch = useCallback(async (query: string, closed: boolean) => {
+    if (!query.trim()) {
+      setSearchResults([])
+      setHasSearched(false)
+      return
+    }
+
+    setIsSearching(true)
    setError(null)
-    setTicketInfo(null)
-
    try {
-      const result = await sessionPsaApi.linkTicket(sessionId, trimmed)
-      if (result.ticket) {
-        setTicketInfo(result.ticket)
-      } else {
-        setError('Ticket not found in ConnectWise')
-      }
+      const results = await integrationsApi.searchTickets({
+        query: query.trim(),
+        include_closed: closed,
+      })
+      setSearchResults(results)
+      setHasSearched(true)
    } catch (err: unknown) {
      const message =
        err && typeof err === 'object' && 'response' in err
          ? (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
          : null
-      setError(message || 'Failed to look up ticket. Please check the ticket number and try again.')
+      setError(message || 'Failed to search tickets.')
+      setSearchResults([])
+      setHasSearched(true)
+    } finally {
+      setIsSearching(false)
+    }
+  }, [])
+
+  // Trigger debounced search when query or includeClosed changes
+  useEffect(() => {
+    if (mode !== 'search') return
+
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current)
+    }
+
+    if (!searchQuery.trim()) {
+      setSearchResults([])
+      setHasSearched(false)
+      return
+    }
+
+    debounceRef.current = setTimeout(() => {
+      performSearch(searchQuery, includeClosed)
+    }, 300)
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current)
+      }
+    }
+  }, [searchQuery, includeClosed, mode, performSearch])
+
+  const handleSelectSearchResult = async (result: PSATicketSearchResult) => {
+    setIsLooking(true)
+    setError(null)
+    try {
+      const ticket = await integrationsApi.getTicket(result.id)
+      setSelectedTicket(ticket)
+      setSelectedTicketId(result.id)
+    } catch (err: unknown) {
+      const message =
+        err && typeof err === 'object' && 'response' in err
+          ? (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
+          : null
+      setError(message || 'Failed to load ticket details.')
    } finally {
      setIsLooking(false)
    }
  }

-  const handleLink = () => {
-    if (!ticketInfo) return
-    onLinked(ticketId.trim(), ticketInfo)
-    handleReset()
+  const handleManualLookup = async () => {
+    const trimmed = manualId.trim()
+    if (!trimmed) return
+
+    setIsLooking(true)
+    setError(null)
+    setSelectedTicket(null)
+    setSelectedTicketId(null)
+
+    try {
+      const ticket = await integrationsApi.getTicket(trimmed)
+      setSelectedTicket(ticket)
+      setSelectedTicketId(trimmed)
+    } catch (err: unknown) {
+      const message =
+        err && typeof err === 'object' && 'response' in err
+          ? (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
+          : null
+      setError(message || 'Ticket not found. Please check the ticket number and try again.')
+    } finally {
+      setIsLooking(false)
+    }
+  }
+
+  const handleLink = async () => {
+    if (!selectedTicket || !selectedTicketId) return
+
+    setIsLinking(true)
+    setError(null)
+    try {
+      await sessionPsaApi.linkTicket(sessionId, selectedTicketId)
+      onLinked(selectedTicketId, selectedTicket)
+      handleReset()
+    } catch (err: unknown) {
+      const message =
+        err && typeof err === 'object' && 'response' in err
+          ? (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
+          : null
+      setError(message || 'Failed to link ticket.')
+    } finally {
+      setIsLinking(false)
+    }
  }

  const handleReset = () => {
-    setTicketId('')
-    setTicketInfo(null)
+    setSearchQuery('')
+    setSearchResults([])
+    setHasSearched(false)
+    setManualId('')
+    setSelectedTicket(null)
+    setSelectedTicketId(null)
    setError(null)
    setIsLooking(false)
    setIsLinking(false)
+    setIsSearching(false)
+    setIncludeClosed(false)
  }

  const handleClose = () => {
    handleReset()
+    setMode('search')
    onClose()
  }

-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && ticketId.trim() && !isLooking && !ticketInfo) {
-      handleLookup()
+  const handleClearSelection = () => {
+    setSelectedTicket(null)
+    setSelectedTicketId(null)
+    setError(null)
+  }
+
+  const handleManualKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && manualId.trim() && !isLooking && !selectedTicket) {
+      handleManualLookup()
    }
  }

+  const switchMode = (newMode: Mode) => {
+    setMode(newMode)
+    setSelectedTicket(null)
+    setSelectedTicketId(null)
+    setError(null)
+  }
+
  return (
    <Modal isOpen={open} onClose={handleClose} title="Link ConnectWise Ticket" size="sm">
      <div className="space-y-4">
-        {/* Ticket ID input */}
-        <div>
-          <label className="mb-1.5 block text-sm font-medium text-foreground">
-            Ticket Number
-          </label>
-          <div className="flex gap-2">
-            <Input
-              type="text"
-              inputMode="numeric"
-              placeholder="Enter ticket number..."
-              value={ticketId}
-              onChange={(e) => {
-                setTicketId(e.target.value)
-                if (ticketInfo) {
-                  setTicketInfo(null)
-                }
-                if (error) {
-                  setError(null)
-                }
-              }}
-              onKeyDown={handleKeyDown}
-              disabled={isLooking || isLinking}
-              className="flex-1"
-            />
-            <Button
-              variant="secondary"
-              size="md"
-              onClick={handleLookup}
-              disabled={!ticketId.trim() || isLooking || !!ticketInfo}
-              loading={isLooking}
-            >
-              {!isLooking && <Search className="h-4 w-4" />}
-              Look Up
-            </Button>
-          </div>
+        {/* Mode tabs */}
+        <div className="flex gap-1 rounded-lg bg-white/[0.03] p-1">
+          <button
+            type="button"
+            onClick={() => switchMode('search')}
+            className={cn(
+              'flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all',
+              mode === 'search'
+                ? 'bg-white/[0.08] text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            <Search className="h-3.5 w-3.5" />
+            Search
+          </button>
+          <button
+            type="button"
+            onClick={() => switchMode('manual')}
+            className={cn(
+              'flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all',
+              mode === 'manual'
+                ? 'bg-white/[0.08] text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            <Hash className="h-3.5 w-3.5" />
+            Ticket #
+          </button>
        </div>

+        {/* Search mode */}
+        {mode === 'search' && !selectedTicket && (
+          <div className="space-y-3">
+            <div>
+              <Input
+                type="text"
+                placeholder="Search tickets by summary, company, or #..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                disabled={isLooking}
+                className="w-full"
+                autoFocus
+              />
+            </div>
+
+            {/* Include closed toggle */}
+            <label className="flex cursor-pointer items-center gap-2 text-xs text-muted-foreground">
+              <input
+                type="checkbox"
+                checked={includeClosed}
+                onChange={(e) => setIncludeClosed(e.target.checked)}
+                className="rounded border-border bg-card accent-primary"
+              />
+              Include closed tickets
+            </label>
+
+            {/* Search results */}
+            {isSearching && (
+              <div className="flex items-center justify-center py-6">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+              </div>
+            )}
+
+            {!isSearching && hasSearched && searchResults.length === 0 && (
+              <div className="py-6 text-center text-sm text-muted-foreground">
+                No tickets found
+              </div>
+            )}
+
+            {!isSearching && searchResults.length > 0 && (
+              <div className="max-h-64 space-y-1 overflow-y-auto">
+                {searchResults.map((result) => (
+                  <button
+                    key={result.id}
+                    type="button"
+                    onClick={() => handleSelectSearchResult(result)}
+                    disabled={isLooking}
+                    className={cn(
+                      'w-full rounded-lg border border-transparent px-3 py-2.5 text-left transition-all',
+                      'hover:border-border hover:bg-white/[0.04]',
+                      'disabled:opacity-50',
+                      result.closed && 'opacity-60'
+                    )}
+                  >
+                    <p className="truncate text-sm font-medium text-foreground">
+                      <span className="text-muted-foreground">#{result.id}</span>
+                      {' — '}
+                      {result.summary}
+                    </p>
+                    <div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground">
+                      {result.company_name && <span>{result.company_name}</span>}
+                      {result.board_name && (
+                        <>
+                          <span className="text-[#5a6170]">&bull;</span>
+                          <span>{result.board_name}</span>
+                        </>
+                      )}
+                      {result.status_name && (
+                        <>
+                          <span className="text-[#5a6170]">&bull;</span>
+                          <span className={result.closed ? 'text-[#5a6170]' : ''}>
+                            {result.status_name}
+                          </span>
+                        </>
+                      )}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {isLooking && (
+              <div className="flex items-center justify-center py-3">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                <span className="ml-2 text-sm text-muted-foreground">Loading ticket details...</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Manual mode */}
+        {mode === 'manual' && !selectedTicket && (
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-foreground">
+              Ticket Number
+            </label>
+            <div className="flex gap-2">
+              <Input
+                type="text"
+                inputMode="numeric"
+                placeholder="Enter ticket number..."
+                value={manualId}
+                onChange={(e) => {
+                  setManualId(e.target.value)
+                  if (error) setError(null)
+                }}
+                onKeyDown={handleManualKeyDown}
+                disabled={isLooking}
+                className="flex-1"
+                autoFocus
+              />
+              <Button
+                variant="secondary"
+                size="md"
+                onClick={handleManualLookup}
+                disabled={!manualId.trim() || isLooking}
+                loading={isLooking}
+              >
+                {!isLooking && <Search className="h-4 w-4" />}
+                Look Up
+              </Button>
+            </div>
+          </div>
+        )}
+
        {/* Error */}
        {error && (
          <div className="flex items-start gap-2 rounded-lg border border-red-400/20 bg-red-400/10 px-3 py-2.5">
@@ -120,49 +360,60 @@ export function TicketPickerModal({ open, onClose, sessionId, onLinked }: Props)
          </div>
        )}

-        {/* Ticket info card */}
-        {ticketInfo && (
+        {/* Selected ticket confirmation card */}
+        {selectedTicket && selectedTicketId && (
          <div className="glass-card-static space-y-3 rounded-xl border border-border p-4">
            <div className="flex items-start gap-2">
              <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
              <div className="min-w-0">
                <p className="text-sm font-semibold text-foreground">
-                  CW #{ticketId.trim()} — {ticketInfo.summary}
+                  CW #{selectedTicketId} — {selectedTicket.summary}
                </p>
                <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
-                  {ticketInfo.company_name && (
-                    <span>{ticketInfo.company_name}</span>
+                  {selectedTicket.company_name && (
+                    <span>{selectedTicket.company_name}</span>
                  )}
-                  {ticketInfo.board_name && (
+                  {selectedTicket.board_name && (
                    <>
                      <span className="text-[#5a6170]">&bull;</span>
-                      <span>{ticketInfo.board_name}</span>
+                      <span>{selectedTicket.board_name}</span>
                    </>
                  )}
-                  {ticketInfo.status_name && (
+                  {selectedTicket.status_name && (
                    <>
                      <span className="text-[#5a6170]">&bull;</span>
-                      <span>{ticketInfo.status_name}</span>
+                      <span>{selectedTicket.status_name}</span>
                    </>
                  )}
-                  {ticketInfo.priority_name && (
+                  {selectedTicket.priority_name && (
                    <>
                      <span className="text-[#5a6170]">&bull;</span>
-                      <span>{ticketInfo.priority_name}</span>
+                      <span>{selectedTicket.priority_name}</span>
                    </>
                  )}
                </div>
              </div>
            </div>

-            <Button
-              className="w-full"
-              onClick={handleLink}
-              loading={isLinking}
-            >
-              <Ticket className="h-4 w-4" />
-              Link This Ticket
-            </Button>
+            <div className="flex gap-2">
+              <Button
+                variant="secondary"
+                size="md"
+                onClick={handleClearSelection}
+                disabled={isLinking}
+                className="flex-1"
+              >
+                Back
+              </Button>
+              <Button
+                className="flex-1"
+                onClick={handleLink}
+                loading={isLinking}
+              >
+                <Ticket className="h-4 w-4" />
+                Link This Ticket
+              </Button>
+            </div>
          </div>
        )}

--- a/frontend/src/types/integrations.ts
+++ b/frontend/src/types/integrations.ts
@@ -52,3 +52,19 @@ export interface TicketLinkResponse {
  psa_ticket_id: string | null
  ticket: PSATicketInfo | null
 }
+
+export interface PSATicketSearchResult {
+  id: string
+  summary: string
+  company_name: string | null
+  board_name: string | null
+  status_name: string | null
+  priority_name: string | null
+  closed: boolean
+}
+
+export interface PSATicketStatusItem {
+  id: number
+  name: string
+  is_closed: boolean
+}