progress

icecrasher321 · icecrasher321 · commit f0d22246a7e5 · 2026-01-14T10:33:19.000-08:00
diff --git a/apps/sim/app/api/folders/route.ts b/apps/sim/app/api/folders/route.ts
@@ -58,7 +58,7 @@ export async function POST(request: NextRequest) {
     }
 
     const body = await request.json()
-    const { name, workspaceId, parentId, color } = body
+    const { name, workspaceId, parentId, color, sortOrder: providedSortOrder } = body
 
     if (!name || !workspaceId) {
       return NextResponse.json({ error: 'Name and workspace ID are required' }, { status: 400 })
@@ -81,25 +81,26 @@ export async function POST(request: NextRequest) {
     // Generate a new ID
     const id = crypto.randomUUID()
 
-    // Use transaction to ensure sortOrder consistency
     const newFolder = await db.transaction(async (tx) => {
-      // Get the next sort order for the parent (or root level)
-      // Consider all folders in the workspace, not just those created by current user
-      const existingFolders = await tx
-        .select({ sortOrder: workflowFolder.sortOrder })
-        .from(workflowFolder)
-        .where(
-          and(
-            eq(workflowFolder.workspaceId, workspaceId),
-            parentId ? eq(workflowFolder.parentId, parentId) : isNull(workflowFolder.parentId)
+      let sortOrder: number
+      if (providedSortOrder !== undefined) {
+        sortOrder = providedSortOrder
+      } else {
+        const existingFolders = await tx
+          .select({ sortOrder: workflowFolder.sortOrder })
+          .from(workflowFolder)
+          .where(
+            and(
+              eq(workflowFolder.workspaceId, workspaceId),
+              parentId ? eq(workflowFolder.parentId, parentId) : isNull(workflowFolder.parentId)
+            )
           )
-        )
-        .orderBy(desc(workflowFolder.sortOrder))
-        .limit(1)
+          .orderBy(desc(workflowFolder.sortOrder))
+          .limit(1)
 
-      const nextSortOrder = existingFolders.length > 0 ? existingFolders[0].sortOrder + 1 : 0
+        sortOrder = existingFolders.length > 0 ? existingFolders[0].sortOrder + 1 : 0
+      }
 
-      // Insert the new folder within the same transaction
       const [folder] = await tx
         .insert(workflowFolder)
         .values({
@@ -109,7 +110,7 @@ export async function POST(request: NextRequest) {
           workspaceId,
           parentId: parentId || null,
           color: color || '#6B7280',
-          sortOrder: nextSortOrder,
+          sortOrder,
         })
         .returning()
 
diff --git a/apps/sim/app/api/workflows/route.ts b/apps/sim/app/api/workflows/route.ts
@@ -17,6 +17,7 @@ const CreateWorkflowSchema = z.object({
   color: z.string().optional().default('#3972F6'),
   workspaceId: z.string().optional(),
   folderId: z.string().nullable().optional(),
+  sortOrder: z.number().int().optional(),
 })
 
 // GET /api/workflows - Get workflows for user (optionally filtered by workspaceId)
@@ -93,7 +94,14 @@ export async function POST(req: NextRequest) {
 
   try {
     const body = await req.json()
-    const { name, description, color, workspaceId, folderId } = CreateWorkflowSchema.parse(body)
+    const {
+      name,
+      description,
+      color,
+      workspaceId,
+      folderId,
+      sortOrder: providedSortOrder,
+    } = CreateWorkflowSchema.parse(body)
 
     if (workspaceId) {
       const workspacePermission = await getUserEntityPermissions(
@@ -131,16 +139,21 @@ export async function POST(req: NextRequest) {
         // Silently fail
       })
 
-    const folderCondition = folderId ? eq(workflow.folderId, folderId) : isNull(workflow.folderId)
-    const [maxResult] = await db
-      .select({ maxOrder: max(workflow.sortOrder) })
-      .from(workflow)
-      .where(
-        workspaceId
-          ? and(eq(workflow.workspaceId, workspaceId), folderCondition)
-          : and(eq(workflow.userId, session.user.id), folderCondition)
-      )
-    const sortOrder = (maxResult?.maxOrder ?? -1) + 1
+    let sortOrder: number
+    if (providedSortOrder !== undefined) {
+      sortOrder = providedSortOrder
+    } else {
+      const folderCondition = folderId ? eq(workflow.folderId, folderId) : isNull(workflow.folderId)
+      const [maxResult] = await db
+        .select({ maxOrder: max(workflow.sortOrder) })
+        .from(workflow)
+        .where(
+          workspaceId
+            ? and(eq(workflow.workspaceId, workspaceId), folderCondition)
+            : and(eq(workflow.userId, session.user.id), folderCondition)
+        )
+      sortOrder = (maxResult?.maxOrder ?? -1) + 1
+    }
 
     await db.insert(workflow).values({
       id: workflowId,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -113,36 +113,7 @@ export function WorkflowItem({
     [workflow.id, updateWorkflow]
   )
 
-  const onDragStart = useCallback(
-    (e: React.DragEvent) => {
-      if (isEditing) {
-        e.preventDefault()
-        return
-      }
-
-      const workflowIds =
-        isSelected && selectedWorkflows.size > 1 ? Array.from(selectedWorkflows) : [workflow.id]
-
-      e.dataTransfer.setData('workflow-ids', JSON.stringify(workflowIds))
-      e.dataTransfer.effectAllowed = 'move'
-      onDragStartProp?.()
-    },
-    [isSelected, selectedWorkflows, workflow.id, onDragStartProp]
-  )
-
-  const {
-    isDragging,
-    shouldPreventClickRef,
-    handleDragStart,
-    handleDragEnd: handleDragEndBase,
-  } = useItemDrag({
-    onDragStart,
-  })
-
-  const handleDragEnd = useCallback(() => {
-    handleDragEndBase()
-    onDragEndProp?.()
-  }, [handleDragEndBase, onDragEndProp])
+  const isEditingRef = useRef(false)
 
   const {
     isOpen: isContextMenuOpen,
@@ -247,6 +218,43 @@ export function WorkflowItem({
     itemId: workflow.id,
   })
 
+  isEditingRef.current = isEditing
+
+  const onDragStart = useCallback(
+    (e: React.DragEvent) => {
+      if (isEditingRef.current) {
+        e.preventDefault()
+        return
+      }
+
+      const currentSelection = useFolderStore.getState().selectedWorkflows
+      const isCurrentlySelected = currentSelection.has(workflow.id)
+      const workflowIds =
+        isCurrentlySelected && currentSelection.size > 1
+          ? Array.from(currentSelection)
+          : [workflow.id]
+
+      e.dataTransfer.setData('workflow-ids', JSON.stringify(workflowIds))
+      e.dataTransfer.effectAllowed = 'move'
+      onDragStartProp?.()
+    },
+    [workflow.id, onDragStartProp]
+  )
+
+  const {
+    isDragging,
+    shouldPreventClickRef,
+    handleDragStart,
+    handleDragEnd: handleDragEndBase,
+  } = useItemDrag({
+    onDragStart,
+  })
+
+  const handleDragEnd = useCallback(() => {
+    handleDragEndBase()
+    onDragEndProp?.()
+  }, [handleDragEndBase, onDragEndProp])
+
   /**
    * Handle double-click on workflow name to enter rename mode
    */
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
@@ -241,7 +241,7 @@ export function WorkflowList({
           </div>
           <DropIndicatorLine show={showAfter} level={level} />
 
-          {isExpanded && (
+          {isExpanded && (hasChildren || isDragging) && (
             <div className='relative'>
               <div
                 className='pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--border)]'
@@ -253,7 +253,7 @@ export function WorkflowList({
                     ? renderFolderSection(item.data as FolderTreeNode, level + 1, folder.id)
                     : renderWorkflowItem(item.data as WorkflowMetadata, level + 1, folder.id)
                 )}
-                {!hasChildren && (
+                {!hasChildren && isDragging && (
                   <div className='h-[24px]' {...createEmptyFolderDropZone(folder.id)} />
                 )}
               </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts
@@ -158,7 +158,12 @@ export function useDragDrop() {
         const remaining = siblingItems.filter(
           (item) => !(item.type === 'workflow' && movingSet.has(item.id))
         )
-        const moving = workflowIds.map((id) => ({ type: 'workflow' as const, id, sortOrder: 0 }))
+        const moving = workflowIds
+          .map((id) => {
+            const w = currentWorkflows[id]
+            return { type: 'workflow' as const, id, sortOrder: w?.sortOrder ?? 0 }
+          })
+          .sort((a, b) => a.sortOrder - b.sortOrder)
 
         let insertAt: number
         if (indicator.position === 'inside') {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-folder.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-folder.ts
@@ -165,6 +165,7 @@ export function useExportFolder({ workspaceId, folderId, onSuccess }: UseExportF
               name: workflow.name,
               description: workflow.description,
               color: workflow.color,
+              sortOrder: workflow.sortOrder,
               exportedAt: new Date().toISOString(),
             },
             variables: workflowVariables,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-workflow.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-workflow.ts
@@ -113,6 +113,7 @@ export function useExportWorkflow({ workspaceId, onSuccess }: UseExportWorkflowP
                 name: workflow.name,
                 description: workflow.description,
                 color: workflow.color,
+                sortOrder: workflow.sortOrder,
                 exportedAt: new Date().toISOString(),
               },
               variables: workflowVariables,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-workspace.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-workspace.ts
@@ -86,6 +86,7 @@ export function useExportWorkspace({ onSuccess }: UseExportWorkspaceProps = {})
                 description: workflow.description,
                 color: workflow.color,
                 folderId: workflow.folderId,
+                sortOrder: workflow.sortOrder,
               },
               state: workflowData.state,
               variables: workflowVariables,
@@ -100,6 +101,7 @@ export function useExportWorkspace({ onSuccess }: UseExportWorkspaceProps = {})
             id: folder.id,
             name: folder.name,
             parentId: folder.parentId,
+            sortOrder: folder.sortOrder,
           })
         )
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts
@@ -40,7 +40,7 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
    * Import a single workflow
    */
   const importSingleWorkflow = useCallback(
-    async (content: string, filename: string, folderId?: string) => {
+    async (content: string, filename: string, folderId?: string, sortOrder?: number) => {
       const { data: workflowData, errors: parseErrors } = parseWorkflowJson(content)
 
       if (!workflowData || parseErrors.length > 0) {
@@ -60,6 +60,7 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
         description: workflowData.metadata?.description || 'Imported from JSON',
         workspaceId,
         folderId: folderId || undefined,
+        sortOrder,
       })
       const newWorkflowId = result.id
 
@@ -140,6 +141,36 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
           })
           const folderMap = new Map<string, string>()
 
+          const exportedFoldersByPath = new Map<string, { sortOrder?: number }>()
+          if (metadata?.folders) {
+            type ExportedFolder = {
+              id: string
+              name: string
+              parentId: string | null
+              sortOrder?: number
+            }
+            const foldersById = new Map<string, ExportedFolder>(
+              metadata.folders.map((f) => [f.id, f])
+            )
+            const sanitizeName = (name: string) => name.replace(/[^a-z0-9-_]/gi, '-')
+
+            const buildPath = (folderId: string): string => {
+              const pathParts: string[] = []
+              let currentId: string | null = folderId
+              while (currentId && foldersById.has(currentId)) {
+                const folder: ExportedFolder = foldersById.get(currentId)!
+                pathParts.unshift(sanitizeName(folder.name))
+                currentId = folder.parentId
+              }
+              return pathParts.join('/')
+            }
+
+            for (const f of metadata.folders) {
+              const path = buildPath(f.id)
+              exportedFoldersByPath.set(path, { sortOrder: f.sortOrder })
+            }
+          }
+
           for (const workflow of extractedWorkflows) {
             try {
               let targetFolderId = importFolder.id
@@ -152,12 +183,15 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
 
                   for (let i = 0; i < workflow.folderPath.length; i++) {
                     const pathSegment = workflow.folderPath.slice(0, i + 1).join('/')
+                    const folderNameForSegment = workflow.folderPath[i]
 
                     if (!folderMap.has(pathSegment)) {
+                      const exportedFolder = exportedFoldersByPath.get(pathSegment)
                       const subFolder = await createFolderMutation.mutateAsync({
-                        name: workflow.folderPath[i],
+                        name: folderNameForSegment,
                         workspaceId,
                         parentId,
+                        sortOrder: exportedFolder?.sortOrder,
                       })
                       folderMap.set(pathSegment, subFolder.id)
                       parentId = subFolder.id
@@ -173,7 +207,8 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
               const workflowId = await importSingleWorkflow(
                 workflow.content,
                 workflow.name,
-                targetFolderId
+                targetFolderId,
+                workflow.sortOrder
               )
               if (workflowId) importedWorkflowIds.push(workflowId)
             } catch (error) {
diff --git a/apps/sim/hooks/queries/folders.ts b/apps/sim/hooks/queries/folders.ts
@@ -68,6 +68,7 @@ interface CreateFolderVariables {
   name: string
   parentId?: string
   color?: string
+  sortOrder?: number
 }
 
 interface UpdateFolderVariables {
@@ -160,18 +161,20 @@ export function useCreateFolder() {
       parentId: variables.parentId || null,
       color: variables.color || '#808080',
       isExpanded: false,
-      sortOrder: getNextSortOrder(previousFolders, variables.workspaceId, variables.parentId),
+      sortOrder:
+        variables.sortOrder ??
+        getNextSortOrder(previousFolders, variables.workspaceId, variables.parentId),
       createdAt: new Date(),
       updatedAt: new Date(),
     })
   )
 
   return useMutation({
-    mutationFn: async ({ workspaceId, ...payload }: CreateFolderVariables) => {
+    mutationFn: async ({ workspaceId, sortOrder, ...payload }: CreateFolderVariables) => {
       const response = await fetch('/api/folders', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ...payload, workspaceId }),
+        body: JSON.stringify({ ...payload, workspaceId, sortOrder }),
       })
 
       if (!response.ok) {
diff --git a/apps/sim/hooks/queries/workflows.ts b/apps/sim/hooks/queries/workflows.ts
diff --git a/apps/sim/lib/workflows/operations/import-export.ts b/apps/sim/lib/workflows/operations/import-export.ts
diff --git a/apps/sim/lib/workflows/sanitization/json-sanitizer.ts b/apps/sim/lib/workflows/sanitization/json-sanitizer.ts
