@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/cloud-arch/components/FragmentImporter.tsx

@@ -1,277 +1,277 @@
-import React, { useState, useCallback } from 'react';
-import {
-  Box,
-  Button,
-  Typography,
-  Alert,
-  Chip,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  List,
-  ListItem,
-  ListItemText,
-  ListItemIcon,
-  CircularProgress,
-  Divider,
-  Paper,
-} from '@mui/material';
-import {
-  Upload as UploadIcon,
-  CheckCircle as CheckIcon,
-  Warning as WarningIcon,
-  Error as ErrorIcon,
-  Info as InfoIcon,
-  Description as FileIcon,
-} from '@mui/icons-material';
-// Simplified diagram importer - only imports basic diagram JSON
-import { Node } from 'reactflow';
-
-interface FragmentImporterProps {
-  onImport: (data: { nodes: Node[]; edges: any[] }) => void;
-  onClose: () => void;
-  isOpen: boolean;
-}
-
-interface ImportFile {
-  name: string;
-  content: any;
-  error?: string;
-}
-
-const FragmentImporter: React.FC<FragmentImporterProps> = ({
-  onImport,
-  onClose,
-  isOpen,
-}) => {
-  const [files, setFiles] = useState<ImportFile[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [importError, setImportError] = useState<string | null>(null);
-  const [importSuccess, setImportSuccess] = useState<string | null>(null);
-
-  const handleFileUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFiles = event.target.files;
-    if (!selectedFiles || selectedFiles.length === 0) return;
-
-    setIsLoading(true);
-    setImportError(null);
-    setImportSuccess(null);
-
-    const filePromises = Array.from(selectedFiles).map((file) => {
-      return new Promise<ImportFile>((resolve) => {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          try {
-            const content = JSON.parse(e.target?.result as string);
-            
-            // Basic validation - check if it has nodes/edges or diagram structure
-            if (!content.nodes && !content.diagram?.nodes) {
-              throw new Error('Invalid diagram format - missing nodes');
-            }
-
-            resolve({
-              name: file.name,
-              content,
-            });
-          } catch (error) {
-            resolve({
-              name: file.name,
-              content: null,
-              error: `Failed to parse JSON: ${error instanceof Error ? error.message : 'Unknown error'}`,
-            });
-          }
-        };
-        reader.readAsText(file);
-      });
-    });
-
-    Promise.all(filePromises).then((importFiles) => {
-      setFiles(importFiles);
-      setIsLoading(false);
-    });
-  }, []);
-
-  const handleImport = useCallback(() => {
-    try {
-      setImportError(null);
-      setImportSuccess(null);
-
-      const validFiles = files.filter(f => !f.error && f.content);
-      
-      if (validFiles.length === 0) {
-        setImportError('No valid files to import');
-        return;
-      }
-
-      if (validFiles.length > 1) {
-        setImportError('Please import one diagram file at a time');
-        return;
-      }
-
-      const file = validFiles[0];
-      const content = file.content;
-      
-      // Extract nodes and edges from different possible formats
-      let nodes: Node[] = [];
-      let edges: any[] = [];
-      
-      if (content.nodes) {
-        // Direct format
-        nodes = content.nodes;
-        edges = content.edges || [];
-      } else if (content.diagram?.nodes) {
-        // Nested diagram format
-        nodes = content.diagram.nodes;
-        edges = content.diagram.edges || [];
-      } else if (content.data?.nodes) {
-        // Data wrapper format
-        nodes = content.data.nodes;
-        edges = content.data.edges || [];
-      }
-
-      const result = { nodes, edges };
-      setImportSuccess(`Successfully imported diagram from ${file.name} (${nodes.length} nodes, ${edges.length} edges)`);
-
-      onImport(result);
-      
-      // Reset state
-      setFiles([]);
-      
-    } catch (error) {
-      setImportError(error instanceof Error ? error.message : 'Import failed');
-    }
-  }, [files, onImport]);
-
-  const getFileIcon = (file: ImportFile) => {
-    return file.error ? <ErrorIcon color="error" /> : <CheckIcon color="success" />;
-  };
-
-  const getFileDescription = (file: ImportFile) => {
-    if (file.error) return file.error;
-    return 'Valid diagram JSON file';
-  };
-
-  const canImport = files.length > 0 && files.every(f => !f.error) && !isLoading;
-
-  return (
-    <Dialog open={isOpen} onClose={onClose} maxWidth="md" fullWidth>
-      <DialogTitle>
-        <Box display="flex" alignItems="center" gap={1}>
-          <UploadIcon />
-          <Typography variant="h6">
-            Import Diagram
-          </Typography>
-        </Box>
-      </DialogTitle>
-      
-      <DialogContent>
-        <Box mb={2}>
-          <Typography variant="body2" color="textSecondary" gutterBottom>
-            Import cloud architecture diagrams from JSON files containing nodes and edges.
-          </Typography>
-        </Box>
-
-        <Box mb={3}>
-          <input
-            type="file"
-            accept=".json"
-            multiple
-            onChange={handleFileUpload}
-            style={{ display: 'none' }}
-            id="file-upload"
-          />
-          <label htmlFor="file-upload">
-            <Button
-              variant="outlined"
-              component="span"
-              startIcon={<UploadIcon />}
-              disabled={isLoading}
-              sx={{
-                borderColor: '#61dafb',
-                color: '#61dafb',
-                '&:hover': {
-                  borderColor: '#4fa8c5',
-                  bgcolor: 'rgba(97, 218, 251, 0.1)',
-                },
-              }}
-            >
-              {isLoading ? 'Loading...' : 'Select JSON Files'}
-            </Button>
-          </label>
-          {isLoading && <CircularProgress size={20} sx={{ ml: 2 }} />}
-        </Box>
-
-        {files.length > 0 && (
-          <Paper elevation={1} sx={{ p: 2, mb: 2 }}>
-            <Typography variant="subtitle2" gutterBottom>
-              Selected Files ({files.length})
-            </Typography>
-            <List dense>
-              {files.map((file, index) => (
-                <ListItem key={index} divider={index < files.length - 1}>
-                  <ListItemIcon>
-                    {getFileIcon(file)}
-                  </ListItemIcon>
-                  <ListItemText
-                    primary={
-                      <Box display="flex" alignItems="center" gap={1}>
-                        <FileIcon fontSize="small" />
-                        <Typography variant="body2" fontWeight="medium">
-                          {file.name}
-                        </Typography>
-                        <Chip 
-                          label="diagram" 
-                          size="small" 
-                          color="success"
-                        />
-                      </Box>
-                    }
-                    secondary={getFileDescription(file)}
-                  />
-                </ListItem>
-              ))}
-            </List>
-          </Paper>
-        )}
-
-        {importError && (
-          <Alert severity="error" sx={{ mb: 2 }}>
-            {importError}
-          </Alert>
-        )}
-
-        {importSuccess && (
-          <Alert severity="success" sx={{ mb: 2 }}>
-            {importSuccess}
-          </Alert>
-        )}
-
-        <Box>
-          <Typography variant="caption" color="textSecondary">
-            <strong>Supported format:</strong> JSON files with diagram nodes and edges
-          </Typography>
-        </Box>
-      </DialogContent>
-
-      <DialogActions>
-        <Button onClick={onClose} color="inherit">
-          Cancel
-        </Button>
-        <Button
-          onClick={handleImport}
-          variant="contained"
-          disabled={!canImport}
-          sx={{
-            bgcolor: '#61dafb',
-            '&:hover': { bgcolor: '#4fa8c5' },
-          }}
-        >
-          Import Diagram
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
+import React, { useState, useCallback } from 'react';
+import {
+  Box,
+  Button,
+  Typography,
+  Alert,
+  Chip,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemIcon,
+  CircularProgress,
+  Divider,
+  Paper,
+} from '@mui/material';
+import {
+  Upload as UploadIcon,
+  CheckCircle as CheckIcon,
+  Warning as WarningIcon,
+  Error as ErrorIcon,
+  Info as InfoIcon,
+  Description as FileIcon,
+} from '@mui/icons-material';
+// Simplified diagram importer - only imports basic diagram JSON
+import { Node } from 'reactflow';
+
+interface FragmentImporterProps {
+  onImport: (data: { nodes: Node[]; edges: any[] }) => void;
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+interface ImportFile {
+  name: string;
+  content: any;
+  error?: string;
+}
+
+const FragmentImporter: React.FC<FragmentImporterProps> = ({
+  onImport,
+  onClose,
+  isOpen,
+}) => {
+  const [files, setFiles] = useState<ImportFile[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [importError, setImportError] = useState<string | null>(null);
+  const [importSuccess, setImportSuccess] = useState<string | null>(null);
+
+  const handleFileUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = event.target.files;
+    if (!selectedFiles || selectedFiles.length === 0) return;
+
+    setIsLoading(true);
+    setImportError(null);
+    setImportSuccess(null);
+
+    const filePromises = Array.from(selectedFiles).map((file) => {
+      return new Promise<ImportFile>((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          try {
+            const content = JSON.parse(e.target?.result as string);
+            
+            // Basic validation - check if it has nodes/edges or diagram structure
+            if (!content.nodes && !content.diagram?.nodes) {
+              throw new Error('Invalid diagram format - missing nodes');
+            }
+
+            resolve({
+              name: file.name,
+              content,
+            });
+          } catch (error) {
+            resolve({
+              name: file.name,
+              content: null,
+              error: `Failed to parse JSON: ${error instanceof Error ? error.message : 'Unknown error'}`,
+            });
+          }
+        };
+        reader.readAsText(file);
+      });
+    });
+
+    Promise.all(filePromises).then((importFiles) => {
+      setFiles(importFiles);
+      setIsLoading(false);
+    });
+  }, []);
+
+  const handleImport = useCallback(() => {
+    try {
+      setImportError(null);
+      setImportSuccess(null);
+
+      const validFiles = files.filter(f => !f.error && f.content);
+      
+      if (validFiles.length === 0) {
+        setImportError('No valid files to import');
+        return;
+      }
+
+      if (validFiles.length > 1) {
+        setImportError('Please import one diagram file at a time');
+        return;
+      }
+
+      const file = validFiles[0];
+      const content = file.content;
+      
+      // Extract nodes and edges from different possible formats
+      let nodes: Node[] = [];
+      let edges: any[] = [];
+      
+      if (content.nodes) {
+        // Direct format
+        nodes = content.nodes;
+        edges = content.edges || [];
+      } else if (content.diagram?.nodes) {
+        // Nested diagram format
+        nodes = content.diagram.nodes;
+        edges = content.diagram.edges || [];
+      } else if (content.data?.nodes) {
+        // Data wrapper format
+        nodes = content.data.nodes;
+        edges = content.data.edges || [];
+      }
+
+      const result = { nodes, edges };
+      setImportSuccess(`Successfully imported diagram from ${file.name} (${nodes.length} nodes, ${edges.length} edges)`);
+
+      onImport(result);
+      
+      // Reset state
+      setFiles([]);
+      
+    } catch (error) {
+      setImportError(error instanceof Error ? error.message : 'Import failed');
+    }
+  }, [files, onImport]);
+
+  const getFileIcon = (file: ImportFile) => {
+    return file.error ? <ErrorIcon color="error" /> : <CheckIcon color="success" />;
+  };
+
+  const getFileDescription = (file: ImportFile) => {
+    if (file.error) return file.error;
+    return 'Valid diagram JSON file';
+  };
+
+  const canImport = files.length > 0 && files.every(f => !f.error) && !isLoading;
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} maxWidth="md" fullWidth>
+      <DialogTitle>
+        <Box display="flex" alignItems="center" gap={1}>
+          <UploadIcon />
+          <Typography variant="h6">
+            Import Diagram
+          </Typography>
+        </Box>
+      </DialogTitle>
+      
+      <DialogContent>
+        <Box mb={2}>
+          <Typography variant="body2" color="textSecondary" gutterBottom>
+            Import cloud architecture diagrams from JSON files containing nodes and edges.
+          </Typography>
+        </Box>
+
+        <Box mb={3}>
+          <input
+            type="file"
+            accept=".json"
+            multiple
+            onChange={handleFileUpload}
+            style={{ display: 'none' }}
+            id="file-upload"
+          />
+          <label htmlFor="file-upload">
+            <Button
+              variant="outlined"
+              component="span"
+              startIcon={<UploadIcon />}
+              disabled={isLoading}
+              sx={{
+                borderColor: '#61dafb',
+                color: '#61dafb',
+                '&:hover': {
+                  borderColor: '#4fa8c5',
+                  bgcolor: 'rgba(97, 218, 251, 0.1)',
+                },
+              }}
+            >
+              {isLoading ? 'Loading...' : 'Select JSON Files'}
+            </Button>
+          </label>
+          {isLoading && <CircularProgress size={20} sx={{ ml: 2 }} />}
+        </Box>
+
+        {files.length > 0 && (
+          <Paper elevation={1} sx={{ p: 2, mb: 2 }}>
+            <Typography variant="subtitle2" gutterBottom>
+              Selected Files ({files.length})
+            </Typography>
+            <List dense>
+              {files.map((file, index) => (
+                <ListItem key={index} divider={index < files.length - 1}>
+                  <ListItemIcon>
+                    {getFileIcon(file)}
+                  </ListItemIcon>
+                  <ListItemText
+                    primary={
+                      <Box display="flex" alignItems="center" gap={1}>
+                        <FileIcon fontSize="small" />
+                        <Typography variant="body2" fontWeight="medium">
+                          {file.name}
+                        </Typography>
+                        <Chip 
+                          label="diagram" 
+                          size="small" 
+                          color="success"
+                        />
+                      </Box>
+                    }
+                    secondary={getFileDescription(file)}
+                  />
+                </ListItem>
+              ))}
+            </List>
+          </Paper>
+        )}
+
+        {importError && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {importError}
+          </Alert>
+        )}
+
+        {importSuccess && (
+          <Alert severity="success" sx={{ mb: 2 }}>
+            {importSuccess}
+          </Alert>
+        )}
+
+        <Box>
+          <Typography variant="caption" color="textSecondary">
+            <strong>Supported format:</strong> JSON files with diagram nodes and edges
+          </Typography>
+        </Box>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose} color="inherit">
+          Cancel
+        </Button>
+        <Button
+          onClick={handleImport}
+          variant="contained"
+          disabled={!canImport}
+          sx={{
+            bgcolor: '#61dafb',
+            '&:hover': { bgcolor: '#4fa8c5' },
+          }}
+        >
+          Import Diagram
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
 export default FragmentImporter;