From 74ddaad551b3438c1c9eb3ab4bed0b658d3b42bb Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Sat, 21 Mar 2026 19:59:24 -0500
Subject: [PATCH] feat(19-02): redesign Add Device dialog with RouterOS, SNMP,
 and VPN tabs

- Always show three-tab layout (RouterOS, SNMP, VPN) instead of conditional two-tab
- RouterOS tab: credential profile toggle (profile mode vs manual credentials)
- SNMP tab: version selector (v2c/v3), credential profile, device profile, port
- Both tabs have "Add Multiple" toggle to switch to BulkAddForm
- VPN tab renders existing VpnOnboardingWizard unchanged
- All form state resets on dialog close

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/fleet/AddDeviceForm.tsx    | 559 ++++++++++++++----
 1 file changed, 459 insertions(+), 100 deletions(-)

diff --git a/frontend/src/components/fleet/AddDeviceForm.tsx b/frontend/src/components/fleet/AddDeviceForm.tsx
index 8c20eb0..3d98104 100644
--- a/frontend/src/components/fleet/AddDeviceForm.tsx
+++ b/frontend/src/components/fleet/AddDeviceForm.tsx
@@ -1,7 +1,14 @@
 import { useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { CheckCircle2, XCircle } from 'lucide-react'
-import { devicesApi, vpnApi } from '@/lib/api'
+import { CheckCircle2, XCircle, List } from 'lucide-react'
+import {
+  devicesApi,
+  vpnApi,
+  credentialProfilesApi,
+  snmpProfilesApi,
+  type CredentialProfileResponse,
+  type SNMPProfileResponse,
+} from '@/lib/api'
 import { toast } from '@/components/ui/toast'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -13,8 +20,16 @@ import {
   DialogTitle,
   DialogFooter,
 } from '@/components/ui/dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
 import { VpnOnboardingWizard } from '@/components/vpn/VpnOnboardingWizard'
+import { BulkAddForm } from '@/components/fleet/BulkAddForm'
 
 interface Props {
   tenantId: string
@@ -26,6 +41,11 @@ type ConnectionStatus = 'idle' | 'success' | 'error'
 
 export function AddDeviceForm({ tenantId, open, onClose }: Props) {
   const queryClient = useQueryClient()
+
+  // RouterOS state
+  const [useProfile, setUseProfile] = useState(false)
+  const [showBulk, setShowBulk] = useState(false)
+  const [rosProfileId, setRosProfileId] = useState('')
   const [form, setForm] = useState({
     hostname: '',
     ip_address: '',
@@ -34,6 +54,19 @@ export function AddDeviceForm({ tenantId, open, onClose }: Props) {
     username: '',
     password: '',
   })
+
+  // SNMP state
+  const [snmpVersion, setSnmpVersion] = useState<'v2c' | 'v3'>('v2c')
+  const [showSnmpBulk, setShowSnmpBulk] = useState(false)
+  const [snmpForm, setSnmpForm] = useState({
+    ip_address: '',
+    hostname: '',
+    snmp_port: '161',
+    credential_profile_id: '',
+    snmp_profile_id: '',
+  })
+
+  // Shared state
   const [error, setError] = useState<string | null>(null)
   const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('idle')
 
@@ -46,16 +79,51 @@ export function AddDeviceForm({ tenantId, open, onClose }: Props) {
 
   const vpnEnabled = vpnConfig?.is_enabled ?? false
 
-  const mutation = useMutation({
-    mutationFn: () =>
-      devicesApi.create(tenantId, {
+  // RouterOS credential profiles
+  const { data: rosProfiles } = useQuery({
+    queryKey: ['credential-profiles', tenantId, 'routeros'],
+    queryFn: () => credentialProfilesApi.list(tenantId, 'routeros'),
+    enabled: open && !!tenantId,
+  })
+
+  // SNMP credential profiles (filtered by version)
+  const snmpCredType = snmpVersion === 'v2c' ? 'snmp_v2c' : 'snmp_v3'
+  const { data: snmpCredProfiles } = useQuery({
+    queryKey: ['credential-profiles', tenantId, snmpCredType],
+    queryFn: () => credentialProfilesApi.list(tenantId, snmpCredType),
+    enabled: open && !!tenantId,
+  })
+
+  // SNMP device profiles
+  const { data: snmpDeviceProfiles } = useQuery({
+    queryKey: ['snmp-profiles', tenantId],
+    queryFn: () => snmpProfilesApi.list(tenantId),
+    enabled: open && !!tenantId,
+  })
+
+  // RouterOS single-add mutation
+  const rosMutation = useMutation({
+    mutationFn: () => {
+      if (useProfile) {
+        return devicesApi.create(tenantId, {
+          hostname: form.hostname || form.ip_address,
+          ip_address: form.ip_address,
+          device_type: 'routeros',
+          credential_profile_id: rosProfileId,
+          api_port: parseInt(form.api_port) || 8728,
+          api_ssl_port: parseInt(form.api_ssl_port) || 8729,
+        })
+      }
+      return devicesApi.create(tenantId, {
         hostname: form.hostname || form.ip_address,
         ip_address: form.ip_address,
+        device_type: 'routeros',
         api_port: parseInt(form.api_port) || 8728,
         api_ssl_port: parseInt(form.api_ssl_port) || 8729,
         username: form.username,
         password: form.password,
-      }),
+      })
+    },
     onSuccess: (device) => {
       setConnectionStatus('success')
       void queryClient.invalidateQueries({ queryKey: ['devices', tenantId] })
@@ -66,8 +134,36 @@ export function AddDeviceForm({ tenantId, open, onClose }: Props) {
     onError: (err: unknown) => {
       setConnectionStatus('error')
       const detail =
-        (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail
-        ?? 'Connection failed. Check the IP address, port, and credentials.'
+        (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail ??
+        'Connection failed. Check the IP address, port, and credentials.'
+      setError(detail)
+    },
+  })
+
+  // SNMP single-add mutation
+  const snmpMutation = useMutation({
+    mutationFn: () =>
+      devicesApi.create(tenantId, {
+        hostname: snmpForm.hostname || snmpForm.ip_address,
+        ip_address: snmpForm.ip_address,
+        device_type: 'snmp',
+        snmp_port: parseInt(snmpForm.snmp_port) || 161,
+        snmp_version: snmpVersion,
+        credential_profile_id: snmpForm.credential_profile_id || undefined,
+        snmp_profile_id: snmpForm.snmp_profile_id || undefined,
+      }),
+    onSuccess: (device) => {
+      setConnectionStatus('success')
+      void queryClient.invalidateQueries({ queryKey: ['devices', tenantId] })
+      void queryClient.invalidateQueries({ queryKey: ['tenants'] })
+      toast({ title: `SNMP device "${device.hostname}" added successfully` })
+      setTimeout(() => handleClose(), 1000)
+    },
+    onError: (err: unknown) => {
+      setConnectionStatus('error')
+      const detail =
+        (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail ??
+        'Failed to add SNMP device. Check IP and credentials.'
       setError(detail)
     },
   })
@@ -81,6 +177,18 @@ export function AddDeviceForm({ tenantId, open, onClose }: Props) {
       username: '',
       password: '',
     })
+    setSnmpForm({
+      ip_address: '',
+      hostname: '',
+      snmp_port: '161',
+      credential_profile_id: '',
+      snmp_profile_id: '',
+    })
+    setRosProfileId('')
+    setUseProfile(false)
+    setShowBulk(false)
+    setShowSnmpBulk(false)
+    setSnmpVersion('v2c')
     setError(null)
     setConnectionStatus('idle')
     onClose()
@@ -92,92 +200,60 @@ export function AddDeviceForm({ tenantId, open, onClose }: Props) {
     handleClose()
   }
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleRosSubmit = (e: React.FormEvent) => {
     e.preventDefault()
-    if (!form.ip_address.trim() || !form.username.trim() || !form.password.trim()) {
-      setError('IP address, username, and password are required')
+    if (!form.ip_address.trim()) {
+      setError('IP address is required')
+      return
+    }
+    if (useProfile && !rosProfileId) {
+      setError('Select a credential profile')
+      return
+    }
+    if (!useProfile && (!form.username.trim() || !form.password.trim())) {
+      setError('Username and password are required')
       return
     }
     setError(null)
     setConnectionStatus('idle')
-    mutation.mutate()
+    rosMutation.mutate()
   }
 
-  const update = (field: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    setForm((f) => ({ ...f, [field]: e.target.value }))
-    if (error) setError(null)
+  const handleSnmpSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!snmpForm.ip_address.trim()) {
+      setError('IP address is required')
+      return
+    }
+    if (!snmpForm.credential_profile_id) {
+      setError('Select a credential profile')
+      return
+    }
+    setError(null)
     setConnectionStatus('idle')
+    snmpMutation.mutate()
   }
 
-  const directConnectionForm = (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <div className="grid grid-cols-2 gap-3">
-        <div className="col-span-2 space-y-1.5">
-          <Label htmlFor="device-ip">IP Address / Hostname *</Label>
-          <Input
-            id="device-ip"
-            value={form.ip_address}
-            onChange={update('ip_address')}
-            placeholder="192.168.1.1"
-            autoFocus={!vpnEnabled}
-          />
-        </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="device-hostname">Display Name</Label>
-          <Input
-            id="device-hostname"
-            value={form.hostname}
-            onChange={update('hostname')}
-            placeholder="router-01 (optional)"
-          />
-        </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="device-api-port">API Port</Label>
-          <Input
-            id="device-api-port"
-            value={form.api_port}
-            onChange={update('api_port')}
-            placeholder="8728"
-            type="number"
-          />
-        </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="device-ssl-port">TLS API Port</Label>
-          <Input
-            id="device-ssl-port"
-            value={form.api_ssl_port}
-            onChange={update('api_ssl_port')}
-            placeholder="8729"
-            type="number"
-          />
-        </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="device-username">Username *</Label>
-          <Input
-            id="device-username"
-            value={form.username}
-            onChange={update('username')}
-            placeholder="admin"
-            autoComplete="off"
-          />
-        </div>
-        <div className="col-span-2 space-y-1.5">
-          <Label htmlFor="device-password">Password *</Label>
-          <Input
-            id="device-password"
-            type="password"
-            value={form.password}
-            onChange={update('password')}
-            placeholder="••••••••"
-            autoComplete="new-password"
-          />
-        </div>
-      </div>
+  const updateRos =
+    (field: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      setForm((f) => ({ ...f, [field]: e.target.value }))
+      if (error) setError(null)
+      setConnectionStatus('idle')
+    }
 
+  const updateSnmp =
+    (field: keyof typeof snmpForm) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSnmpForm((f) => ({ ...f, [field]: e.target.value }))
+      if (error) setError(null)
+      setConnectionStatus('idle')
+    }
+
+  const statusBanner = (
+    <>
       {connectionStatus === 'success' && (
         <div className="flex items-center gap-2 rounded-md bg-success/10 border border-success/50 px-3 py-2">
           <CheckCircle2 className="h-4 w-4 text-success flex-shrink-0" />
-          <p className="text-xs text-success">Device connected and added successfully</p>
+          <p className="text-xs text-success">Device added successfully</p>
         </div>
       )}
       {connectionStatus === 'error' && error && (
@@ -186,14 +262,287 @@ export function AddDeviceForm({ tenantId, open, onClose }: Props) {
           <p className="text-xs text-error">{error}</p>
         </div>
       )}
+    </>
+  )
 
-      <DialogFooter>
-        <Button type="button" variant="ghost" onClick={handleClose} size="sm">
-          Cancel
-        </Button>
-        <Button type="submit" size="sm" disabled={mutation.isPending}>
-          {mutation.isPending ? 'Connecting...' : 'Add Device'}
-        </Button>
+  // Helper to get profile list as array
+  const rosProfileList: CredentialProfileResponse[] =
+    rosProfiles?.profiles ?? []
+  const snmpCredProfileList: CredentialProfileResponse[] =
+    snmpCredProfiles?.profiles ?? []
+  const snmpDeviceProfileList: SNMPProfileResponse[] = Array.isArray(snmpDeviceProfiles)
+    ? snmpDeviceProfiles
+    : snmpDeviceProfiles?.profiles ?? []
+
+  // ─── RouterOS Tab ───────────────────────────────────────────────────────────
+
+  const routerosTab = showBulk ? (
+    <BulkAddForm
+      tenantId={tenantId}
+      deviceType="routeros"
+      onClose={handleClose}
+      onBack={() => setShowBulk(false)}
+    />
+  ) : (
+    <form onSubmit={handleRosSubmit} className="space-y-4">
+      <div className="flex justify-end">
+        <button
+          type="button"
+          onClick={() => setUseProfile(!useProfile)}
+          className="text-xs text-accent hover:text-accent-hover transition-colors"
+        >
+          {useProfile ? 'Enter credentials manually' : 'Use credential profile'}
+        </button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        {useProfile && (
+          <div className="col-span-2 space-y-1.5">
+            <Label>Credential Profile *</Label>
+            <Select value={rosProfileId} onValueChange={setRosProfileId}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select profile..." />
+              </SelectTrigger>
+              <SelectContent>
+                {rosProfileList.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>
+                    {p.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        <div className="col-span-2 space-y-1.5">
+          <Label htmlFor="ros-ip">IP Address *</Label>
+          <Input
+            id="ros-ip"
+            value={form.ip_address}
+            onChange={updateRos('ip_address')}
+            placeholder="192.168.1.1"
+            autoFocus
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="ros-hostname">Display Name</Label>
+          <Input
+            id="ros-hostname"
+            value={form.hostname}
+            onChange={updateRos('hostname')}
+            placeholder="router-01 (optional)"
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="ros-api-port">API Port</Label>
+          <Input
+            id="ros-api-port"
+            value={form.api_port}
+            onChange={updateRos('api_port')}
+            placeholder="8728"
+            type="number"
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="ros-ssl-port">TLS API Port</Label>
+          <Input
+            id="ros-ssl-port"
+            value={form.api_ssl_port}
+            onChange={updateRos('api_ssl_port')}
+            placeholder="8729"
+            type="number"
+          />
+        </div>
+
+        {!useProfile && (
+          <>
+            <div className="space-y-1.5">
+              <Label htmlFor="ros-username">Username *</Label>
+              <Input
+                id="ros-username"
+                value={form.username}
+                onChange={updateRos('username')}
+                placeholder="admin"
+                autoComplete="off"
+              />
+            </div>
+
+            <div className="col-span-2 space-y-1.5">
+              <Label htmlFor="ros-password">Password *</Label>
+              <Input
+                id="ros-password"
+                type="password"
+                value={form.password}
+                onChange={updateRos('password')}
+                placeholder="••••••••"
+                autoComplete="new-password"
+              />
+            </div>
+          </>
+        )}
+      </div>
+
+      {statusBanner}
+
+      <DialogFooter className="flex items-center justify-between">
+        <button
+          type="button"
+          onClick={() => setShowBulk(true)}
+          className="flex items-center gap-1.5 text-xs text-text-secondary hover:text-text-primary transition-colors"
+        >
+          <List className="h-3.5 w-3.5" />
+          Add Multiple
+        </button>
+        <div className="flex gap-2">
+          <Button type="button" variant="ghost" onClick={handleClose} size="sm">
+            Cancel
+          </Button>
+          <Button type="submit" size="sm" disabled={rosMutation.isPending}>
+            {rosMutation.isPending ? 'Connecting...' : 'Add Device'}
+          </Button>
+        </div>
+      </DialogFooter>
+    </form>
+  )
+
+  // ─── SNMP Tab ─────────────────────────────────────────────────────────────
+
+  const snmpTab = showSnmpBulk ? (
+    <BulkAddForm
+      tenantId={tenantId}
+      deviceType="snmp"
+      onClose={handleClose}
+      onBack={() => setShowSnmpBulk(false)}
+    />
+  ) : (
+    <form onSubmit={handleSnmpSubmit} className="space-y-4">
+      <div className="grid grid-cols-2 gap-3">
+        <div className="col-span-2 space-y-1.5">
+          <Label>SNMP Version</Label>
+          <div className="flex gap-1">
+            <Button
+              type="button"
+              size="sm"
+              variant={snmpVersion === 'v2c' ? 'default' : 'outline'}
+              onClick={() => {
+                setSnmpVersion('v2c')
+                setSnmpForm((f) => ({ ...f, credential_profile_id: '' }))
+              }}
+              className="flex-1"
+            >
+              v2c
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              variant={snmpVersion === 'v3' ? 'default' : 'outline'}
+              onClick={() => {
+                setSnmpVersion('v3')
+                setSnmpForm((f) => ({ ...f, credential_profile_id: '' }))
+              }}
+              className="flex-1"
+            >
+              v3
+            </Button>
+          </div>
+        </div>
+
+        <div className="col-span-2 space-y-1.5">
+          <Label>Credential Profile *</Label>
+          <Select
+            value={snmpForm.credential_profile_id}
+            onValueChange={(v) =>
+              setSnmpForm((f) => ({ ...f, credential_profile_id: v }))
+            }
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Select SNMP credential profile..." />
+            </SelectTrigger>
+            <SelectContent>
+              {snmpCredProfileList.map((p) => (
+                <SelectItem key={p.id} value={p.id}>
+                  {p.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="snmp-ip">IP Address *</Label>
+          <Input
+            id="snmp-ip"
+            value={snmpForm.ip_address}
+            onChange={updateSnmp('ip_address')}
+            placeholder="192.168.1.1"
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="snmp-port">SNMP Port</Label>
+          <Input
+            id="snmp-port"
+            value={snmpForm.snmp_port}
+            onChange={updateSnmp('snmp_port')}
+            placeholder="161"
+            type="number"
+          />
+        </div>
+
+        <div className="col-span-2 space-y-1.5">
+          <Label>Device Profile</Label>
+          <Select
+            value={snmpForm.snmp_profile_id}
+            onValueChange={(v) =>
+              setSnmpForm((f) => ({ ...f, snmp_profile_id: v }))
+            }
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Auto-detect (optional)" />
+            </SelectTrigger>
+            <SelectContent>
+              {snmpDeviceProfileList.map((p) => (
+                <SelectItem key={p.id} value={p.id}>
+                  {p.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="col-span-2 space-y-1.5">
+          <Label htmlFor="snmp-hostname">Display Name</Label>
+          <Input
+            id="snmp-hostname"
+            value={snmpForm.hostname}
+            onChange={updateSnmp('hostname')}
+            placeholder="switch-01 (optional)"
+          />
+        </div>
+      </div>
+
+      {statusBanner}
+
+      <DialogFooter className="flex items-center justify-between">
+        <button
+          type="button"
+          onClick={() => setShowSnmpBulk(true)}
+          className="flex items-center gap-1.5 text-xs text-text-secondary hover:text-text-primary transition-colors"
+        >
+          <List className="h-3.5 w-3.5" />
+          Add Multiple
+        </button>
+        <div className="flex gap-2">
+          <Button type="button" variant="ghost" onClick={handleClose} size="sm">
+            Cancel
+          </Button>
+          <Button type="submit" size="sm" disabled={snmpMutation.isPending}>
+            {snmpMutation.isPending ? 'Adding...' : 'Add Device'}
+          </Button>
+        </div>
       </DialogFooter>
     </form>
   )
@@ -204,12 +553,27 @@ export function AddDeviceForm({ tenantId, open, onClose }: Props) {
         <DialogHeader>
           <DialogTitle>Add Device</DialogTitle>
         </DialogHeader>
-        {vpnEnabled ? (
-          <Tabs defaultValue="vpn" className="mt-2">
-            <TabsList className="w-full">
-              <TabsTrigger value="vpn" className="flex-1">VPN Onboarding</TabsTrigger>
-              <TabsTrigger value="direct" className="flex-1">Direct Connection</TabsTrigger>
-            </TabsList>
+        <Tabs defaultValue="routeros" className="mt-2">
+          <TabsList className="w-full">
+            <TabsTrigger value="routeros" className="flex-1">
+              RouterOS
+            </TabsTrigger>
+            <TabsTrigger value="snmp" className="flex-1">
+              SNMP
+            </TabsTrigger>
+            {vpnEnabled && (
+              <TabsTrigger value="vpn" className="flex-1">
+                VPN
+              </TabsTrigger>
+            )}
+          </TabsList>
+          <TabsContent value="routeros" className="mt-4">
+            {routerosTab}
+          </TabsContent>
+          <TabsContent value="snmp" className="mt-4">
+            {snmpTab}
+          </TabsContent>
+          {vpnEnabled && (
             <TabsContent value="vpn" className="mt-4">
               <VpnOnboardingWizard
                 tenantId={tenantId}
@@ -217,13 +581,8 @@ export function AddDeviceForm({ tenantId, open, onClose }: Props) {
                 onCancel={handleClose}
               />
             </TabsContent>
-            <TabsContent value="direct" className="mt-4">
-              {directConnectionForm}
-            </TabsContent>
-          </Tabs>
-        ) : (
-          directConnectionForm
-        )}
+          )}
+        </Tabs>
       </DialogContent>
     </Dialog>
   )