diff --git a/frontend/src/components/network/DiagramHeader.tsx b/frontend/src/components/network/DiagramHeader.tsx index ab3d83f8..f4f3b397 100644 --- a/frontend/src/components/network/DiagramHeader.tsx +++ b/frontend/src/components/network/DiagramHeader.tsx @@ -1,6 +1,6 @@ import { useState, useCallback, useRef, useEffect } from 'react' import { useNavigate } from 'react-router-dom' -import { ChevronLeft, Save, Download, FileJson, FileCode, Image, FileText, Undo2, Redo2, MousePointer2, Hand, Share2 } from 'lucide-react' +import { ChevronLeft, Save, Download, FileJson, FileCode, Image, FileText, Undo2, Redo2, MousePointer2, Hand, Share2, Upload } from 'lucide-react' import { cn } from '@/lib/utils' export type InteractionMode = 'select' | 'pan' @@ -19,6 +19,7 @@ interface DiagramHeaderProps { onExportPdf: () => void onExportJson: () => void onExportDrawio: () => void + onImportDrawio: () => void onUndo: () => void onRedo: () => void canUndo: boolean @@ -41,6 +42,7 @@ export function DiagramHeader({ onExportPdf, onExportJson, onExportDrawio, + onImportDrawio, onUndo, onRedo, canUndo, @@ -199,6 +201,14 @@ export function DiagramHeader({ {isSaving ? 'Saving...' : 'Save'} + +
)} + ) } diff --git a/frontend/src/pages/NetworkDiagrams/index.tsx b/frontend/src/pages/NetworkDiagrams/index.tsx index c62483f6..4ef87e27 100644 --- a/frontend/src/pages/NetworkDiagrams/index.tsx +++ b/frontend/src/pages/NetworkDiagrams/index.tsx @@ -40,6 +40,7 @@ export default function NetworkDiagramsPage() { const [menuOpenId, setMenuOpenId] = useState(null) const [confirmArchiveId, setConfirmArchiveId] = useState(null) const clientDropdownRef = useRef(null) + const drawioListImportRef = useRef(null) useEffect(() => { if (!clientDropdownOpen) return @@ -129,6 +130,35 @@ export default function NetworkDiagramsPage() { input.click() }, [navigate]) + const handleListDrawioImport = useCallback(async (e: React.ChangeEvent) => { + const file = e.target.files?.[0] + if (!file) return + e.target.value = '' + try { + const { parseDrawioXml } = await import('@/lib/drawio-import') + const text = await file.text() + const { nodes: importedNodes, edges: importedEdges, warnings } = parseDrawioXml(text) + const result = await networkDiagramsApi.importJson({ + schemaVersion: 1, + name: file.name.replace(/\.drawio$/i, '') || 'Imported Diagram', + client_name: null, + description: null, + nodes: importedNodes, + edges: importedEdges, + }) + const allWarnings = [...warnings, ...result.warnings] + if (allWarnings.length > 0) { + toast.warning(`Imported with ${allWarnings.length} warning(s)`) + } else { + toast.success('Imported successfully') + } + navigate(`/network-diagrams/${result.diagram.id}`) + } catch (err) { + const msg = err instanceof Error ? err.message : 'Unknown error' + toast.error(`Import failed: ${msg}`) + } + }, [navigate]) + const formatDate = (dateStr: string) => { return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) } @@ -148,6 +178,20 @@ export default function NetworkDiagramsPage() { Import + +