Skip to content

feat(export): added the ability to export workflow #2777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 7 commits into from
Jan 12, 2026
Merged

feat(export): added the ability to export workflow #2777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d0c0983
feat(export): added the ability to export workflow
waleedlatif1 Jan 12, 2026
f0f9c91
improvement(import): loading animation
emir-karabeg Jan 12, 2026
e34a28c
fixed flicker on importing multiple workflows
waleedlatif1 Jan 12, 2026
56616ef
ack pr comments
waleedlatif1 Jan 12, 2026
29031f6
standardized import/export hooks
waleedlatif1 Jan 12, 2026
9994ae4
upgraded turborepo
waleedlatif1 Jan 12, 2026
c541d20
cleaned up
waleedlatif1 Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export function Panel() {
// Delete workflow hook
const { isDeleting, handleDeleteWorkflow } = useDeleteWorkflow({
workspaceId,
getWorkflowIds: () => activeWorkflowId || '',
workflowIds: activeWorkflowId || '',
isActive: true,
onSuccess: () => setIsDeleteModalOpen(false),
})
Expand Down
2 changes: 1 addition & 1 deletion ...d]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,7 @@ export function ContextMenu({
onKeyDown={handleHexKeyDown}
onFocus={handleHexFocus}
onClick={(e) => e.stopPropagation()}
className='h-[20px] min-w-0 flex-1 rounded-[4px] bg-[#363636] px-[6px] text-[11px] text-white uppercase focus:outline-none'
className='h-[20px] min-w-0 flex-1 rounded-[4px] bg-[#363636] px-[6px] text-[11px] text-white uppercase caret-white focus:outline-none'
/>
<button
type='button'
Expand Down
30 changes: 12 additions & 18 deletions ...eId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
useCanDelete,
useDeleteFolder,
useDuplicateFolder,
useExportFolder,
} from '@/app/workspace/[workspaceId]/w/hooks'
import { useCreateFolder, useUpdateFolder } from '@/hooks/queries/folders'
import { useCreateWorkflow } from '@/hooks/queries/workflows'
Expand Down Expand Up @@ -57,23 +58,24 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
const { canDeleteFolder } = useCanDelete({ workspaceId })
const canDelete = useMemo(() => canDeleteFolder(folder.id), [canDeleteFolder, folder.id])

// Delete modal state
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)

// Delete folder hook
const { isDeleting, handleDeleteFolder } = useDeleteFolder({
workspaceId,
getFolderIds: () => folder.id,
folderIds: folder.id,
onSuccess: () => setIsDeleteModalOpen(false),
})

// Duplicate folder hook
const { handleDuplicateFolder } = useDuplicateFolder({
workspaceId,
getFolderIds: () => folder.id,
folderIds: folder.id,
})

const { isExporting, hasWorkflows, handleExportFolder } = useExportFolder({
workspaceId,
folderId: folder.id,
})

// Folder expand hook - must be declared before callbacks that use expandFolder
const {
isExpanded,
handleToggleExpanded,
Expand All @@ -90,7 +92,6 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
*/
const handleCreateWorkflowInFolder = useCallback(async () => {
try {
// Generate name and color upfront for optimistic updates
const name = generateCreativeWorkflowName()
const color = getNextWorkflowColor()

Expand All @@ -103,15 +104,12 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {

if (result.id) {
router.push(`/workspace/${workspaceId}/w/${result.id}`)
// Expand the parent folder so the new workflow is visible
expandFolder()
// Scroll to the newly created workflow
window.dispatchEvent(
new CustomEvent(SIDEBAR_SCROLL_EVENT, { detail: { itemId: result.id } })
)
}
} catch (error) {
// Error already handled by mutation's onError callback
logger.error('Failed to create workflow in folder:', error)
}
}, [createWorkflowMutation, workspaceId, folder.id, router, expandFolder])
Expand All @@ -128,9 +126,7 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
parentId: folder.id,
})
if (result.id) {
// Expand the parent folder so the new folder is visible
expandFolder()
// Scroll to the newly created folder
window.dispatchEvent(
new CustomEvent(SIDEBAR_SCROLL_EVENT, { detail: { itemId: result.id } })
)
Expand All @@ -147,7 +143,6 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
*/
const onDragStart = useCallback(
(e: React.DragEvent) => {
// Don't start drag if editing
if (isEditing) {
e.preventDefault()
return
Expand All @@ -159,12 +154,10 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
[folder.id]
)

// Item drag hook
const { isDragging, shouldPreventClickRef, handleDragStart, handleDragEnd } = useItemDrag({
onDragStart,
})

// Context menu hook
const {
isOpen: isContextMenuOpen,
position,
Expand All @@ -174,7 +167,6 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
preventDismiss,
} = useContextMenu()

// Rename hook
const {
isEditing,
editValue,
Expand Down Expand Up @@ -258,7 +250,6 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
e.preventDefault()
e.stopPropagation()

// Toggle: close if open, open if closed
if (isContextMenuOpen) {
closeMenu()
return
Expand Down Expand Up @@ -365,13 +356,16 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
onCreate={handleCreateWorkflowInFolder}
onCreateFolder={handleCreateFolderInFolder}
onDuplicate={handleDuplicateFolder}
onExport={handleExportFolder}
onDelete={() => setIsDeleteModalOpen(true)}
showCreate={true}
showCreateFolder={true}
showExport={true}
disableRename={!userPermissions.canEdit}
disableCreate={!userPermissions.canEdit || createWorkflowMutation.isPending}
disableCreateFolder={!userPermissions.canEdit || createFolderMutation.isPending}
disableDuplicate={!userPermissions.canEdit}
disableDuplicate={!userPermissions.canEdit || !hasWorkflows}
disableExport={!userPermissions.canEdit || isExporting || !hasWorkflows}
disableDelete={!userPermissions.canEdit || !canDelete}
/>

Expand Down
51 changes: 14 additions & 37 deletions .../w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,19 +46,15 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
const userPermissions = useUserPermissionsContext()
const isSelected = selectedWorkflows.has(workflow.id)

// Can delete check hook
const { canDeleteWorkflows } = useCanDelete({ workspaceId })

// Delete modal state
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
const [workflowIdsToDelete, setWorkflowIdsToDelete] = useState<string[]>([])
const [deleteModalNames, setDeleteModalNames] = useState<string | string[]>('')
const [canDeleteCaptured, setCanDeleteCaptured] = useState(true)

// Presence avatars state
const [hasAvatars, setHasAvatars] = useState(false)

// Capture selection at right-click time (using ref to persist across renders)
const capturedSelectionRef = useRef<{
workflowIds: string[]
workflowNames: string | string[]
Expand All @@ -68,50 +64,39 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
* Handle opening the delete modal - uses pre-captured selection state
*/
const handleOpenDeleteModal = useCallback(() => {
// Use the selection captured at right-click time
if (capturedSelectionRef.current) {
setWorkflowIdsToDelete(capturedSelectionRef.current.workflowIds)
setDeleteModalNames(capturedSelectionRef.current.workflowNames)
setIsDeleteModalOpen(true)
}
}, [])

// Delete workflow hook
const { isDeleting, handleDeleteWorkflow } = useDeleteWorkflow({
workspaceId,
getWorkflowIds: () => workflowIdsToDelete,
workflowIds: workflowIdsToDelete,
isActive: (workflowIds) => workflowIds.includes(params.workflowId as string),
onSuccess: () => setIsDeleteModalOpen(false),
})

// Duplicate workflow hook
const { handleDuplicateWorkflow } = useDuplicateWorkflow({
workspaceId,
getWorkflowIds: () => {
// Use the selection captured at right-click time
return capturedSelectionRef.current?.workflowIds || []
},
})
const { handleDuplicateWorkflow: duplicateWorkflow } = useDuplicateWorkflow({ workspaceId })

// Export workflow hook
const { handleExportWorkflow } = useExportWorkflow({
workspaceId,
getWorkflowIds: () => {
// Use the selection captured at right-click time
return capturedSelectionRef.current?.workflowIds || []
},
})
const { handleExportWorkflow: exportWorkflow } = useExportWorkflow({ workspaceId })
const handleDuplicateWorkflow = useCallback(() => {
const workflowIds = capturedSelectionRef.current?.workflowIds || []
if (workflowIds.length === 0) return
duplicateWorkflow(workflowIds)
}, [duplicateWorkflow])

const handleExportWorkflow = useCallback(() => {
const workflowIds = capturedSelectionRef.current?.workflowIds || []
if (workflowIds.length === 0) return
exportWorkflow(workflowIds)
}, [exportWorkflow])
Comment on lines +84 to +94
Copy link
Contributor

@greptile-apps greptile-apps bot Jan 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The refactored hooks are being renamed but not passed the required arguments, breaking duplicate and export functionality.

The Bug:

  • Line 81: useDuplicateWorkflow returns handleDuplicateWorkflow but it's renamed to duplicateWorkflow
  • Line 83: useExportWorkflow returns handleExportWorkflow but it's renamed to exportWorkflow
  • Lines 84-94: New wrapper functions handleDuplicateWorkflow and handleExportWorkflow are created
  • CRITICAL: These wrappers call duplicateWorkflow(workflowIds) and exportWorkflow(workflowIds), BUT the hooks now require workflowIds as parameters (not getter functions), so the hooks receive NO workflow IDs

Impact:
When users try to duplicate or export workflows, the operations will silently fail because workflowIds prop passed to the hooks is undefined.

The Fix:
Remove the renaming and pass workflowIds directly when calling the hook functions:

Suggested change
const handleDuplicateWorkflow = useCallback(() => {
const workflowIds = capturedSelectionRef.current?.workflowIds || []
if (workflowIds.length === 0) return
duplicateWorkflow(workflowIds)
}, [duplicateWorkflow])
const handleExportWorkflow = useCallback(() => {
const workflowIds = capturedSelectionRef.current?.workflowIds || []
if (workflowIds.length === 0) return
exportWorkflow(workflowIds)
}, [exportWorkflow])
const { handleDuplicateWorkflow } = useDuplicateWorkflow({ workspaceId })
const { handleExportWorkflow } = useExportWorkflow({ workspaceId })
const handleDuplicateWorkflowClick = useCallback(() => {
const workflowIds = capturedSelectionRef.current?.workflowIds || []
if (workflowIds.length === 0) return
handleDuplicateWorkflow(workflowIds)
}, [handleDuplicateWorkflow])
const handleExportWorkflowClick = useCallback(() => {
const workflowIds = capturedSelectionRef.current?.workflowIds || []
if (workflowIds.length === 0) return
handleExportWorkflow(workflowIds)
}, [handleExportWorkflow])

Then update the ContextMenu calls (lines 359-360) to use the new names.

Prompt To Fix With AI 
This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
Line: 84:94

Comment:
The refactored hooks are being renamed but not passed the required arguments, breaking duplicate and export functionality.

**The Bug:**
- Line 81: `useDuplicateWorkflow` returns `handleDuplicateWorkflow` but it's renamed to `duplicateWorkflow`
- Line 83: `useExportWorkflow` returns `handleExportWorkflow` but it's renamed to `exportWorkflow`
- Lines 84-94: New wrapper functions `handleDuplicateWorkflow` and `handleExportWorkflow` are created
- **CRITICAL**: These wrappers call `duplicateWorkflow(workflowIds)` and `exportWorkflow(workflowIds)`, BUT the hooks now require `workflowIds` as parameters (not getter functions), so the hooks receive NO workflow IDs

**Impact:**
When users try to duplicate or export workflows, the operations will silently fail because `workflowIds` prop passed to the hooks is `undefined`.

**The Fix:**
Remove the renaming and pass workflowIds directly when calling the hook functions:

```suggestion
  const { handleDuplicateWorkflow } = useDuplicateWorkflow({ workspaceId })

  const { handleExportWorkflow } = useExportWorkflow({ workspaceId })

  const handleDuplicateWorkflowClick = useCallback(() => {
    const workflowIds = capturedSelectionRef.current?.workflowIds || []
    if (workflowIds.length === 0) return
    handleDuplicateWorkflow(workflowIds)
  }, [handleDuplicateWorkflow])

  const handleExportWorkflowClick = useCallback(() => {
    const workflowIds = capturedSelectionRef.current?.workflowIds || []
    if (workflowIds.length === 0) return
    handleExportWorkflow(workflowIds)
  }, [handleExportWorkflow])
```

Then update the ContextMenu calls (lines 359-360) to use the new names.

How can I resolve this? If you propose a fix, please make it concise.


/**
* Opens the workflow in a new browser tab
*/
const handleOpenInNewTab = useCallback(() => {
window.open(`/workspace/${workspaceId}/w/${workflow.id}`, '_blank')
}, [workspaceId, workflow.id])

/**
* Changes the workflow color
*/
const handleColorChange = useCallback(
(color: string) => {
updateWorkflow(workflow.id, { color })
Expand All @@ -126,7 +111,6 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
*/
const onDragStart = useCallback(
(e: React.DragEvent) => {
// Don't start drag if editing
if (isEditing) {
e.preventDefault()
return
Expand All @@ -141,12 +125,10 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
[isSelected, selectedWorkflows, workflow.id]
)

// Item drag hook
const { isDragging, shouldPreventClickRef, handleDragStart, handleDragEnd } = useItemDrag({
onDragStart,
})

// Context menu hook
const {
isOpen: isContextMenuOpen,
position,
Expand Down Expand Up @@ -215,14 +197,12 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
e.preventDefault()
e.stopPropagation()

// Toggle: close if open, open if closed
if (isContextMenuOpen) {
closeMenu()
return
}

captureSelectionState()
// Open context menu aligned with the button
const rect = e.currentTarget.getBoundingClientRect()
handleContextMenuBase({
preventDefault: () => {},
Expand All @@ -234,7 +214,6 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
[isContextMenuOpen, closeMenu, captureSelectionState, handleContextMenuBase]
)

// Rename hook
const {
isEditing,
editValue,
Expand Down Expand Up @@ -281,12 +260,10 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf

const isModifierClick = e.shiftKey || e.metaKey || e.ctrlKey

// Prevent default link behavior when using modifier keys
if (isModifierClick) {
e.preventDefault()
}

// Use metaKey (Cmd on Mac) or ctrlKey (Ctrl on Windows/Linux)
onWorkflowClick(workflow.id, e.shiftKey, e.metaKey || e.ctrlKey)
},
[shouldPreventClickRef, workflow.id, onWorkflowClick, isEditing]
Expand Down
11 changes: 2 additions & 9 deletions ...p/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
useDragDrop,
useWorkflowSelection,
} from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
import { useImportWorkflow } from '@/app/workspace/[workspaceId]/w/hooks/use-import-workflow'
import { useFolders } from '@/hooks/queries/folders'
import { useFolderStore } from '@/stores/folders/store'
import type { FolderTreeNode } from '@/stores/folders/types'
Expand All @@ -25,24 +24,21 @@ const TREE_SPACING = {
interface WorkflowListProps {
regularWorkflows: WorkflowMetadata[]
isLoading?: boolean
isImporting: boolean
setIsImporting: (value: boolean) => void
handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void
fileInputRef: React.RefObject<HTMLInputElement | null>
scrollContainerRef: React.RefObject<HTMLDivElement | null>
}

/**
* WorkflowList component displays workflows organized by folders with drag-and-drop support.
* Uses the workflow import hook for handling JSON imports.
*
* @param props - Component props
* @returns Workflow list with folders and drag-drop support
*/
export function WorkflowList({
regularWorkflows,
isLoading = false,
isImporting,
setIsImporting,
handleFileChange,
fileInputRef,
scrollContainerRef,
}: WorkflowListProps) {
Expand All @@ -65,9 +61,6 @@ export function WorkflowList({
createFolderHeaderHoverHandlers,
} = useDragDrop()

// Workflow import hook
const { handleFileChange } = useImportWorkflow({ workspaceId })

// Set scroll container when ref changes
useEffect(() => {
if (scrollContainerRef.current) {
Expand Down
Loading