fix: wire up empty-state Add Device button to open dialog

The FleetTable empty state navigated with ?add=true but the devices page
never read that param. Now it opens the AddDeviceForm when add=true is
in the search params.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-09 21:12:01 -05:00
parent 2605a97331
commit 32965857e7

View File

@@ -1,5 +1,5 @@
import { createFileRoute, Link } from '@tanstack/react-router'
import { useState } from 'react'
import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
import { useState, useEffect } from 'react'
import { Plus, Scan, ChevronRight } from 'lucide-react'
import { useQuery } from '@tanstack/react-query'
import { z } from 'zod'
@@ -17,6 +17,7 @@ const searchSchema = z.object({
sort_dir: z.enum(['asc', 'desc']).optional(),
page: z.number().int().positive().optional(),
page_size: z.number().int().positive().optional(),
add: z.string().optional(),
})
export const Route = createFileRoute('/_authenticated/tenants/$tenantId/devices/')({
@@ -28,7 +29,22 @@ function DevicesPage() {
const { tenantId } = Route.useParams()
const search = Route.useSearch()
const { user } = useAuth()
const [addOpen, setAddOpen] = useState(false)
const navigate = useNavigate()
const [addOpen, setAddOpen] = useState(search.add === 'true')
// Open dialog when ?add=true is set (e.g. from empty state button)
useEffect(() => {
if (search.add === 'true') {
setAddOpen(true)
// Clear the search param so it doesn't re-open on navigation
void navigate({
to: '/tenants/$tenantId/devices',
params: { tenantId },
search: { ...search, add: undefined },
replace: true,
})
}
}, [search.add])
const { data: tenant } = useQuery({
queryKey: ['tenants', tenantId],