feat(import-export): improvements to export workspace, maintain file structure, include workflow variables (#1799)

* feat(import-export): improvements to export workspace, maintain file structure

* fix type'

* import/export variables

* fix var ref id bug

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/create-menu/create-menu.tsx

@@ -8,6 +8,11 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { createLogger } from '@/lib/logs/console/logger'
 import { generateFolderName } from '@/lib/naming'
 import { cn } from '@/lib/utils'
+import {
+  extractWorkflowName,
+  extractWorkflowsFromFiles,
+  extractWorkflowsFromZip,
+} from '@/lib/workflows/import-export'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useFolderStore } from '@/stores/folders/store'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
@@ -114,105 +119,202 @@ export function CreateMenu({ onCreateWorkflow, isCreatingWorkflow = false }: Cre
     }
   }, [createFolder, workspaceId, isCreating])
 
-  const handleDirectImport = useCallback(
-    async (content: string, filename?: string) => {
-      if (!content.trim()) {
-        logger.error('JSON content is required')
-        return
-      }
-
-      setIsImporting(true)
-
-      try {
-        // First validate the JSON without importing
-        const { data: workflowData, errors: parseErrors } = parseWorkflowJson(content)
-
-        if (!workflowData || parseErrors.length > 0) {
-          logger.error('Failed to parse JSON:', { errors: parseErrors })
-          return
-        }
-
-        // Generate workflow name from filename or fallback to time-based name
-        const getWorkflowName = () => {
-          if (filename) {
-            // Remove file extension and use the filename
-            const nameWithoutExtension = filename.replace(/\.json$/i, '')
-            return (
-              nameWithoutExtension.trim() || `Imported Workflow - ${new Date().toLocaleString()}`
-            )
-          }
-          return `Imported Workflow - ${new Date().toLocaleString()}`
-        }
-
-        // Clear workflow diff store when creating a new workflow from import
-        const { clearDiff } = useWorkflowDiffStore.getState()
-        clearDiff()
-
-        // Create a new workflow
-        const newWorkflowId = await createWorkflow({
-          name: getWorkflowName(),
-          description: 'Workflow imported from JSON',
-          workspaceId,
-        })
-
-        // Save workflow state to database first
-        const response = await fetch(`/api/workflows/${newWorkflowId}/state`, {
-          method: 'PUT',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(workflowData),
-        })
-
-        if (!response.ok) {
-          logger.error('Failed to persist imported workflow to database')
-          throw new Error('Failed to save workflow')
-        }
-
-        logger.info('Imported workflow persisted to database')
-
-        // Pre-load the workflow state before navigating
-        const { setActiveWorkflow } = useWorkflowRegistry.getState()
-        await setActiveWorkflow(newWorkflowId)
-
-        // Navigate to the new workflow (replace to avoid history entry)
-        router.replace(`/workspace/${workspaceId}/w/${newWorkflowId}`)
-
-        logger.info('Workflow imported successfully from JSON')
-      } catch (error) {
-        logger.error('Failed to import workflow:', { error })
-      } finally {
-        setIsImporting(false)
-      }
-    },
-    [createWorkflow, workspaceId, router]
-  )
-
   const handleImportWorkflow = useCallback(() => {
     setIsOpen(false)
     fileInputRef.current?.click()
   }, [])
 
   const handleFileChange = useCallback(
     async (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0]
-      if (!file) return
+      const files = event.target.files
+      if (!files || files.length === 0) return
+
+      setIsImporting(true)
 
       try {
-        const content = await file.text()
+        const fileArray = Array.from(files)
+        const hasZip = fileArray.some((f) => f.name.toLowerCase().endsWith('.zip'))
+        const jsonFiles = fileArray.filter((f) => f.name.toLowerCase().endsWith('.json'))
+
+        let importedWorkflows: Array<{ content: string; name: string; folderPath: string[] }> = []
+
+        if (hasZip && fileArray.length === 1) {
+          const zipFile = fileArray[0]
+          const { workflows: extractedWorkflows, metadata } = await extractWorkflowsFromZip(zipFile)
+          importedWorkflows = extractedWorkflows
+
+          const { createFolder } = useFolderStore.getState()
+          const folderName = metadata?.workspaceName || zipFile.name.replace(/\.zip$/i, '')
+          const importFolder = await createFolder({
+            name: folderName,
+            workspaceId,
+          })
+
+          const folderMap = new Map<string, string>()
+
+          for (const workflow of importedWorkflows) {
+            try {
+              const { data: workflowData, errors: parseErrors } = parseWorkflowJson(
+                workflow.content
+              )
+
+              if (!workflowData || parseErrors.length > 0) {
+                logger.warn(`Failed to parse ${workflow.name}:`, parseErrors)
+                continue
+              }
+
+              let targetFolderId = importFolder.id
+
+              if (workflow.folderPath.length > 0) {
+                const folderPathKey = workflow.folderPath.join('/')
+
+                if (!folderMap.has(folderPathKey)) {
+                  let parentId = importFolder.id
+
+                  for (let i = 0; i < workflow.folderPath.length; i++) {
+                    const pathSegment = workflow.folderPath.slice(0, i + 1).join('/')
+
+                    if (!folderMap.has(pathSegment)) {
+                      const subFolder = await createFolder({
+                        name: workflow.folderPath[i],
+                        workspaceId,
+                        parentId,
+                      })
+                      folderMap.set(pathSegment, subFolder.id)
+                      parentId = subFolder.id
+                    } else {
+                      parentId = folderMap.get(pathSegment)!
+                    }
+                  }
+                }
+
+                targetFolderId = folderMap.get(folderPathKey)!
+              }
+
+              const workflowName = extractWorkflowName(workflow.content)
+              const { clearDiff } = useWorkflowDiffStore.getState()
+              clearDiff()
+
+              const newWorkflowId = await createWorkflow({
+                name: workflowName,
+                description: 'Imported from workspace export',
+                workspaceId,
+                folderId: targetFolderId,
+              })
+
+              const response = await fetch(`/api/workflows/${newWorkflowId}/state`, {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(workflowData),
+              })
+
+              if (!response.ok) {
+                logger.error(`Failed to save imported workflow ${newWorkflowId}`)
+                continue
+              }
+
+              if (workflowData.variables && workflowData.variables.length > 0) {
+                const variablesPayload = workflowData.variables.map((v: any) => ({
+                  id: typeof v.id === 'string' && v.id.trim() ? v.id : crypto.randomUUID(),
+                  workflowId: newWorkflowId,
+                  name: v.name,
+                  type: v.type,
+                  value: v.value,
+                }))
+
+                await fetch(`/api/workflows/${newWorkflowId}/variables`, {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({ variables: variablesPayload }),
+                })
+              }
+
+              logger.info(`Imported workflow: ${workflowName}`)
+            } catch (error) {
+              logger.error(`Failed to import ${workflow.name}:`, error)
+            }
+          }
+        } else if (jsonFiles.length > 0) {
+          importedWorkflows = await extractWorkflowsFromFiles(jsonFiles)
+
+          for (const workflow of importedWorkflows) {
+            try {
+              const { data: workflowData, errors: parseErrors } = parseWorkflowJson(
+                workflow.content
+              )
+
+              if (!workflowData || parseErrors.length > 0) {
+                logger.warn(`Failed to parse ${workflow.name}:`, parseErrors)
+                continue
+              }
+
+              const workflowName = extractWorkflowName(workflow.content)
+              const { clearDiff } = useWorkflowDiffStore.getState()
+              clearDiff()
+
+              const newWorkflowId = await createWorkflow({
+                name: workflowName,
+                description: 'Imported from JSON',
+                workspaceId,
+              })
+
+              const response = await fetch(`/api/workflows/${newWorkflowId}/state`, {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(workflowData),
+              })
+
+              if (!response.ok) {
+                logger.error(`Failed to save imported workflow ${newWorkflowId}`)
+                continue
+              }
+
+              if (workflowData.variables && workflowData.variables.length > 0) {
+                const variablesPayload = workflowData.variables.map((v: any) => ({
+                  id: typeof v.id === 'string' && v.id.trim() ? v.id : crypto.randomUUID(),
+                  workflowId: newWorkflowId,
+                  name: v.name,
+                  type: v.type,
+                  value: v.value,
+                }))
+
+                await fetch(`/api/workflows/${newWorkflowId}/variables`, {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({ variables: variablesPayload }),
+                })
+              }
+
+              logger.info(`Imported workflow: ${workflowName}`)
+            } catch (error) {
+              logger.error(`Failed to import ${workflow.name}:`, error)
+            }
+          }
+        }
 
-        // Import directly with filename
-        await handleDirectImport(content, file.name)
-      } catch (error) {
-        logger.error('Failed to read file:', { error })
-      }
+        const { loadWorkflows } = useWorkflowRegistry.getState()
+        await loadWorkflows(workspaceId)
 
-      // Reset file input
-      if (fileInputRef.current) {
-        fileInputRef.current.value = ''
+        const { fetchFolders } = useFolderStore.getState()
+        await fetchFolders(workspaceId)
+      } catch (error) {
+        logger.error('Failed to import workflows:', error)
+      } finally {
+        setIsImporting(false)
+        if (fileInputRef.current) {
+          fileInputRef.current.value = ''
+        }
       }
     },
-    [handleDirectImport]
+    [workspaceId, createWorkflow]
   )
 
   // Button event handlers
@@ -360,7 +462,7 @@ export function CreateMenu({ onCreateWorkflow, isCreatingWorkflow = false }: Cre
           >
             <Download className={iconClassName} />
             <span className={textClassName}>
-              {isImporting ? 'Importing...' : 'Import workflow'}
+              {isImporting ? 'Importing...' : 'Import Workflows'}
             </span>
           </button>
         </PopoverContent>
@@ -369,7 +471,8 @@ export function CreateMenu({ onCreateWorkflow, isCreatingWorkflow = false }: Cre
       <input
         ref={fileInputRef}
         type='file'
-        accept='.json'
+        accept='.json,.zip'
+        multiple
         style={{ display: 'none' }}
         onChange={handleFileChange}
       />