fix(tickets): fix permissions toast, board fallback, assignment search, remove load more
All checks were successful
Mirror to GitHub / mirror (push) Successful in 2s
All checks were successful
Mirror to GitHub / mirror (push) Successful in 2s
- list_resources: return [] on PSAError instead of 502 — stops global interceptor toast when CW API key lacks ticket members permission (Lesson 111) - list_boards/list_priorities: add warning logging so Railway logs reveal the root cause when CW permissions are missing - TicketsPage: derive board options from ticket search results when listBoards returns empty (CW permissions fallback) - TicketFilterBar: replace assignment <select> with searchable member picker — fixed options (All/Mine/Unassigned) + text-filtered member dropdown - TicketQueue: remove Load More / infinite scroll; page now exists at /tickets Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -376,8 +376,9 @@ async def list_boards(
|
|||||||
provider = await get_provider_for_account(current_user.account_id, db)
|
provider = await get_provider_for_account(current_user.account_id, db)
|
||||||
boards = await provider.list_boards()
|
boards = await provider.list_boards()
|
||||||
return [PSABoardResponse(id=b.id, name=b.name) for b in boards]
|
return [PSABoardResponse(id=b.id, name=b.name) for b in boards]
|
||||||
except PSAError:
|
except PSAError as e:
|
||||||
# Boards are optional UI chrome — degrade gracefully rather than surfacing a toast
|
# Boards are optional UI chrome — degrade gracefully rather than surfacing a toast
|
||||||
|
logger.warning("list_boards failed: %s", e)
|
||||||
return []
|
return []
|
||||||
|
|
||||||
|
|
||||||
@@ -630,7 +631,9 @@ async def list_ticket_resources(
|
|||||||
try:
|
try:
|
||||||
return await ticket_svc.list_resources(current_user.account_id, ticket_id, db)
|
return await ticket_svc.list_resources(current_user.account_id, ticket_id, db)
|
||||||
except PSAError as e:
|
except PSAError as e:
|
||||||
raise HTTPException(status_code=502, detail=str(e))
|
# Resources are optional display data — degrade gracefully rather than surfacing a toast
|
||||||
|
logger.warning("list_resources(%s) failed: %s", ticket_id, e)
|
||||||
|
return []
|
||||||
|
|
||||||
|
|
||||||
@router.post("/tickets/{ticket_id}/resources", response_model=PSAResourceSchema, status_code=201)
|
@router.post("/tickets/{ticket_id}/resources", response_model=PSAResourceSchema, status_code=201)
|
||||||
@@ -679,7 +682,8 @@ async def list_priorities(
|
|||||||
provider = await get_provider_for_account(current_user.account_id, db)
|
provider = await get_provider_for_account(current_user.account_id, db)
|
||||||
raw = await provider.list_priorities()
|
raw = await provider.list_priorities()
|
||||||
return [PSAPrioritySchema(id=p["id"], name=p["name"]) for p in raw if p.get("id")]
|
return [PSAPrioritySchema(id=p["id"], name=p["name"]) for p in raw if p.get("id")]
|
||||||
except PSAError:
|
except PSAError as e:
|
||||||
|
logger.warning("list_priorities failed: %s", e)
|
||||||
return []
|
return []
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||||
import { useNavigate, Link } from 'react-router-dom'
|
import { useNavigate, Link } from 'react-router-dom'
|
||||||
import { Ticket, ChevronDown, Check, Loader2, AlertCircle } from 'lucide-react'
|
import { Ticket, ChevronDown, Check, AlertCircle } from 'lucide-react'
|
||||||
import { integrationsApi } from '@/api/integrations'
|
import { integrationsApi } from '@/api/integrations'
|
||||||
import type { PSABoard, PSATicketSearchResult } from '@/types/integrations'
|
import type { PSABoard, PSATicketSearchResult } from '@/types/integrations'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
@@ -193,10 +193,7 @@ export function TicketQueue() {
|
|||||||
const [selectedBoardIds, setSelectedBoardIds] = useState<number[]>([])
|
const [selectedBoardIds, setSelectedBoardIds] = useState<number[]>([])
|
||||||
const [activeTab, setActiveTab] = useState<Tab>('mine')
|
const [activeTab, setActiveTab] = useState<Tab>('mine')
|
||||||
const [tickets, setTickets] = useState<PSATicketSearchResult[]>([])
|
const [tickets, setTickets] = useState<PSATicketSearchResult[]>([])
|
||||||
const [page, setPage] = useState(1)
|
|
||||||
const [hasMore, setHasMore] = useState(false)
|
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
const [loadingMore, setLoadingMore] = useState(false)
|
|
||||||
const [error, setError] = useState<string | null>(null)
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
// Check connection on mount
|
// Check connection on mount
|
||||||
@@ -227,9 +224,9 @@ export function TicketQueue() {
|
|||||||
}, [hasConnection])
|
}, [hasConnection])
|
||||||
|
|
||||||
const fetchTickets = useCallback(
|
const fetchTickets = useCallback(
|
||||||
async (tab: Tab, boardIds: number[], pageNum: number, append: boolean) => {
|
async (tab: Tab, boardIds: number[]) => {
|
||||||
const params: Parameters<typeof integrationsApi.searchTicketsQueue>[0] = {
|
const params: Parameters<typeof integrationsApi.searchTicketsQueue>[0] = {
|
||||||
page: pageNum,
|
page: 1,
|
||||||
page_size: PAGE_SIZE,
|
page_size: PAGE_SIZE,
|
||||||
}
|
}
|
||||||
if (tab === 'mine') {
|
if (tab === 'mine') {
|
||||||
@@ -243,12 +240,7 @@ export function TicketQueue() {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const results = await integrationsApi.searchTicketsQueue(params)
|
const results = await integrationsApi.searchTicketsQueue(params)
|
||||||
if (append) {
|
setTickets(results.items)
|
||||||
setTickets((prev) => [...prev, ...results.items])
|
|
||||||
} else {
|
|
||||||
setTickets(results.items)
|
|
||||||
}
|
|
||||||
setHasMore(results.items.length === PAGE_SIZE)
|
|
||||||
setError(null)
|
setError(null)
|
||||||
} catch {
|
} catch {
|
||||||
setError('Failed to load tickets. Check your PSA connection.')
|
setError('Failed to load tickets. Check your PSA connection.')
|
||||||
@@ -261,21 +253,11 @@ export function TicketQueue() {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!hasConnection) return
|
if (!hasConnection) return
|
||||||
if (activeTab === 'mine' && hasMemberMapping !== true) return
|
if (activeTab === 'mine' && hasMemberMapping !== true) return
|
||||||
setPage(1)
|
|
||||||
setTickets([])
|
setTickets([])
|
||||||
setHasMore(false)
|
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
fetchTickets(activeTab, selectedBoardIds, 1, false).finally(() => setLoading(false))
|
fetchTickets(activeTab, selectedBoardIds).finally(() => setLoading(false))
|
||||||
}, [activeTab, selectedBoardIds, hasConnection, hasMemberMapping, fetchTickets])
|
}, [activeTab, selectedBoardIds, hasConnection, hasMemberMapping, fetchTickets])
|
||||||
|
|
||||||
const handleLoadMore = async () => {
|
|
||||||
const nextPage = page + 1
|
|
||||||
setPage(nextPage)
|
|
||||||
setLoadingMore(true)
|
|
||||||
await fetchTickets(activeTab, selectedBoardIds, nextPage, true)
|
|
||||||
setLoadingMore(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleStartSession = (ticket: PSATicketSearchResult) => {
|
const handleStartSession = (ticket: PSATicketSearchResult) => {
|
||||||
navigate('/pilot', {
|
navigate('/pilot', {
|
||||||
state: {
|
state: {
|
||||||
@@ -368,7 +350,7 @@ export function TicketQueue() {
|
|||||||
<TicketRow
|
<TicketRow
|
||||||
key={ticket.id}
|
key={ticket.id}
|
||||||
ticket={ticket}
|
ticket={ticket}
|
||||||
isLast={i === tickets.length - 1 && !hasMore}
|
isLast={i === tickets.length - 1}
|
||||||
onStartSession={handleStartSession}
|
onStartSession={handleStartSession}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
@@ -404,28 +386,6 @@ export function TicketQueue() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Load more */}
|
|
||||||
{!error && !loading && hasMore && (
|
|
||||||
<div
|
|
||||||
className="px-5 py-3"
|
|
||||||
style={{ borderTop: '1px solid var(--color-border-default)' }}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
onClick={handleLoadMore}
|
|
||||||
disabled={loadingMore}
|
|
||||||
className="flex w-full items-center justify-center gap-2 rounded-lg border border-[rgba(255,255,255,0.08)] bg-transparent py-2 text-xs text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.14)] disabled:opacity-50 transition-colors"
|
|
||||||
>
|
|
||||||
{loadingMore ? (
|
|
||||||
<>
|
|
||||||
<Loader2 size={12} className="animate-spin" />
|
|
||||||
Loading...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
'Load more'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
// frontend/src/components/tickets/TicketFilterBar.tsx
|
// frontend/src/components/tickets/TicketFilterBar.tsx
|
||||||
import { Search, X } from 'lucide-react'
|
import { useState } from 'react'
|
||||||
|
import { Search, X, User } from 'lucide-react'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import type { TicketFilters, PSAPriority } from '@/types/tickets'
|
import type { TicketFilters, PSAPriority } from '@/types/tickets'
|
||||||
import type { PSABoard, PSATicketStatusItem } from '@/types/integrations'
|
import type { PSABoard, PSATicketStatusItem } from '@/types/integrations'
|
||||||
@@ -27,6 +28,24 @@ export function TicketFilterBar({
|
|||||||
const hasNext = page * pageSize < total
|
const hasNext = page * pageSize < total
|
||||||
const hasPrev = page > 1
|
const hasPrev = page > 1
|
||||||
|
|
||||||
|
// Member search state — text filter over the member list
|
||||||
|
const [memberSearch, setMemberSearch] = useState('')
|
||||||
|
const [memberDropdownOpen, setMemberDropdownOpen] = useState(false)
|
||||||
|
|
||||||
|
const currentMemberName = typeof filters.assigned === 'number'
|
||||||
|
? (members.find(m => m.id === filters.assigned)?.name ?? `Member ${filters.assigned}`)
|
||||||
|
: null
|
||||||
|
|
||||||
|
const filteredMembers = members.filter(m =>
|
||||||
|
m.name.toLowerCase().includes(memberSearch.toLowerCase())
|
||||||
|
)
|
||||||
|
|
||||||
|
function handleMemberSelect(memberId: number | 'all' | 'me' | 'unassigned') {
|
||||||
|
onChange({ assigned: memberId })
|
||||||
|
setMemberDropdownOpen(false)
|
||||||
|
setMemberSearch('')
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{/* Filter row */}
|
{/* Filter row */}
|
||||||
@@ -42,22 +61,60 @@ export function TicketFilterBar({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Assignment */}
|
{/* Assignment — searchable member picker */}
|
||||||
<select
|
<div className="relative">
|
||||||
className="bg-input border border-default rounded-[5px] px-3 py-1.5 text-sm text-primary focus:border-accent focus:outline-none"
|
<button
|
||||||
value={typeof filters.assigned === 'number' ? String(filters.assigned) : filters.assigned}
|
onClick={() => { setMemberDropdownOpen(v => !v); setMemberSearch('') }}
|
||||||
onChange={e => {
|
className={cn(
|
||||||
const v = e.target.value
|
'flex items-center gap-1.5 bg-input border rounded-[5px] px-3 py-1.5 text-sm focus:border-accent focus:outline-none',
|
||||||
onChange({ assigned: v === 'me' || v === 'unassigned' || v === 'all' ? v : Number(v) })
|
filters.assigned === 'all' ? 'text-muted-foreground border-default' : 'text-primary border-accent'
|
||||||
}}
|
)}
|
||||||
>
|
>
|
||||||
<option value="all">All Tickets</option>
|
<User className="w-3.5 h-3.5" />
|
||||||
<option value="me">My Tickets</option>
|
{filters.assigned === 'all' && 'All Tickets'}
|
||||||
<option value="unassigned">Unassigned</option>
|
{filters.assigned === 'me' && 'My Tickets'}
|
||||||
{members.map(m => (
|
{filters.assigned === 'unassigned' && 'Unassigned'}
|
||||||
<option key={m.id} value={String(m.id)}>{m.name}</option>
|
{currentMemberName}
|
||||||
))}
|
</button>
|
||||||
</select>
|
{memberDropdownOpen && (
|
||||||
|
<>
|
||||||
|
<div className="fixed inset-0 z-10" onClick={() => setMemberDropdownOpen(false)} />
|
||||||
|
<div className="absolute left-0 top-full mt-1 z-20 w-52 bg-card border border-default rounded-[5px] shadow-lg overflow-hidden">
|
||||||
|
<div className="p-2 border-b border-default">
|
||||||
|
<input
|
||||||
|
autoFocus
|
||||||
|
className="w-full bg-input border border-default rounded-[5px] px-2 py-1 text-xs text-primary placeholder:text-muted-foreground focus:border-accent focus:outline-none"
|
||||||
|
placeholder="Search member..."
|
||||||
|
value={memberSearch}
|
||||||
|
onChange={e => setMemberSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="max-h-48 overflow-y-auto py-1">
|
||||||
|
{!memberSearch && (
|
||||||
|
<>
|
||||||
|
<button onClick={() => handleMemberSelect('all')} className={cn('w-full text-left px-3 py-1.5 text-xs hover:bg-elevated transition-colors', filters.assigned === 'all' && 'text-accent')}>All Tickets</button>
|
||||||
|
<button onClick={() => handleMemberSelect('me')} className={cn('w-full text-left px-3 py-1.5 text-xs hover:bg-elevated transition-colors', filters.assigned === 'me' && 'text-accent')}>My Tickets</button>
|
||||||
|
<button onClick={() => handleMemberSelect('unassigned')} className={cn('w-full text-left px-3 py-1.5 text-xs hover:bg-elevated transition-colors', filters.assigned === 'unassigned' && 'text-accent')}>Unassigned</button>
|
||||||
|
{members.length > 0 && <div className="border-t border-default mx-2 my-1" />}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{filteredMembers.map(m => (
|
||||||
|
<button
|
||||||
|
key={m.id}
|
||||||
|
onClick={() => handleMemberSelect(m.id)}
|
||||||
|
className={cn('w-full text-left px-3 py-1.5 text-xs hover:bg-elevated transition-colors truncate', filters.assigned === m.id && 'text-accent')}
|
||||||
|
>
|
||||||
|
{m.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
{memberSearch && filteredMembers.length === 0 && (
|
||||||
|
<p className="px-3 py-2 text-xs text-muted-foreground">No members found</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Board */}
|
{/* Board */}
|
||||||
<select
|
<select
|
||||||
|
|||||||
@@ -81,6 +81,15 @@ export default function TicketsPage() {
|
|||||||
})
|
})
|
||||||
setTickets(result.items)
|
setTickets(result.items)
|
||||||
setTotal(result.total)
|
setTotal(result.total)
|
||||||
|
// If the boards API returned empty (CW permissions), derive available boards from ticket data
|
||||||
|
setBoards(prev => {
|
||||||
|
if (prev.length > 0) return prev
|
||||||
|
const seen = new Map<number, string>()
|
||||||
|
result.items.forEach(t => {
|
||||||
|
if (t.board_id && t.board_name) seen.set(t.board_id, t.board_name)
|
||||||
|
})
|
||||||
|
return seen.size > 0 ? Array.from(seen, ([id, name]) => ({ id, name })) : prev
|
||||||
|
})
|
||||||
} catch {
|
} catch {
|
||||||
setTickets([])
|
setTickets([])
|
||||||
setTotal(0)
|
setTotal(0)
|
||||||
|
|||||||
Reference in New Issue
Block a user