fix(drag): read perms prevent drag (#2834)

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx

@@ -32,6 +32,7 @@ const logger = createLogger('FolderItem')
 interface FolderItemProps {
   folder: FolderTreeNode
   level: number
+  dragDisabled?: boolean
   hoverHandlers?: {
     onDragEnter?: (e: React.DragEvent<HTMLElement>) => void
     onDragLeave?: (e: React.DragEvent<HTMLElement>) => void
@@ -51,6 +52,7 @@ interface FolderItemProps {
 export function FolderItem({
   folder,
   level,
+  dragDisabled = false,
   hoverHandlers,
   onDragStart: onDragStartProp,
   onDragEnd: onDragEndProp,
@@ -294,7 +296,7 @@ export function FolderItem({
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         onContextMenu={handleContextMenu}
-        draggable={!isEditing}
+        draggable={!isEditing && !dragDisabled}
         onDragStart={handleDragStart}
         onDragEnd={handleDragEnd}
         {...hoverHandlers}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx

@@ -28,6 +28,7 @@ interface WorkflowItemProps {
   workflow: WorkflowMetadata
   active: boolean
   level: number
+  dragDisabled?: boolean
   onWorkflowClick: (workflowId: string, shiftKey: boolean, metaKey: boolean) => void
   onDragStart?: () => void
   onDragEnd?: () => void
@@ -44,6 +45,7 @@ export function WorkflowItem({
   workflow,
   active,
   level,
+  dragDisabled = false,
   onWorkflowClick,
   onDragStart: onDragStartProp,
   onDragEnd: onDragEndProp,
@@ -307,7 +309,7 @@ export function WorkflowItem({
             : '',
           isDragging ? 'opacity-50' : ''
         )}
-        draggable={!isEditing}
+        draggable={!isEditing && !dragDisabled}
         onDragStart={handleDragStart}
         onDragEnd={handleDragEnd}
         onClick={handleClick}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx

@@ -32,6 +32,7 @@ function compareByOrder<T extends { sortOrder: number; createdAt?: Date; id: str
 interface WorkflowListProps {
   regularWorkflows: WorkflowMetadata[]
   isLoading?: boolean
+  canReorder?: boolean
   handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void
   fileInputRef: React.RefObject<HTMLInputElement | null>
   scrollContainerRef: React.RefObject<HTMLDivElement | null>
@@ -58,6 +59,7 @@ const DropIndicatorLine = memo(function DropIndicatorLine({
 export function WorkflowList({
   regularWorkflows,
   isLoading = false,
+  canReorder = true,
   handleFileChange,
   fileInputRef,
   scrollContainerRef,
@@ -73,6 +75,7 @@ export function WorkflowList({
   const {
     dropIndicator,
     isDragging,
+    disabled: dragDisabled,
     setScrollContainer,
     createWorkflowDragHandlers,
     createFolderDragHandlers,
@@ -81,7 +84,7 @@ export function WorkflowList({
     createRootDropZone,
     handleDragStart,
     handleDragEnd,
-  } = useDragDrop()
+  } = useDragDrop({ disabled: !canReorder })
 
   useEffect(() => {
     if (scrollContainerRef.current) {
@@ -180,6 +183,7 @@ export function WorkflowList({
               workflow={workflow}
               active={isWorkflowActive(workflow.id)}
               level={level}
+              dragDisabled={dragDisabled}
               onWorkflowClick={handleWorkflowClick}
               onDragStart={() => handleDragStart('workflow', folderId)}
               onDragEnd={handleDragEnd}
@@ -192,6 +196,7 @@ export function WorkflowList({
     [
       dropIndicator,
       isWorkflowActive,
+      dragDisabled,
       createWorkflowDragHandlers,
       handleWorkflowClick,
       handleDragStart,
@@ -259,6 +264,7 @@ export function WorkflowList({
             <FolderItem
               folder={folder}
               level={level}
+              dragDisabled={dragDisabled}
               onDragStart={() => handleDragStart('folder', parentFolderId)}
               onDragEnd={handleDragEnd}
             />
@@ -291,6 +297,7 @@ export function WorkflowList({
       expandedFolders,
       dropIndicator,
       isDragging,
+      dragDisabled,
       createFolderDragHandlers,
       createEmptyFolderDropZone,
       createFolderContentDropZone,

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts

@@ -18,7 +18,12 @@ export interface DropIndicator {
   folderId: string | null
 }
 
-export function useDragDrop() {
+interface UseDragDropOptions {
+  disabled?: boolean
+}
+
+export function useDragDrop(options: UseDragDropOptions = {}) {
+  const { disabled = false } = options
   const [dropIndicator, setDropIndicator] = useState<DropIndicator | null>(null)
   const [isDragging, setIsDragging] = useState(false)
   const [hoverFolderId, setHoverFolderId] = useState<string | null>(null)
@@ -587,9 +592,31 @@ export function useDragDrop() {
     scrollContainerRef.current = element
   }, [])
 
+  const noopDragHandlers = {
+    onDragOver: (e: React.DragEvent<HTMLElement>) => e.preventDefault(),
+    onDrop: (e: React.DragEvent<HTMLElement>) => e.preventDefault(),
+  }
+
+  if (disabled) {
+    return {
+      dropIndicator: null,
+      isDragging: false,
+      disabled: true,
+      setScrollContainer,
+      createWorkflowDragHandlers: () => noopDragHandlers,
+      createFolderDragHandlers: () => ({ ...noopDragHandlers, onDragLeave: () => {} }),
+      createEmptyFolderDropZone: () => noopDragHandlers,
+      createFolderContentDropZone: () => noopDragHandlers,
+      createRootDropZone: () => ({ ...noopDragHandlers, onDragLeave: () => {} }),
+      handleDragStart: () => {},
+      handleDragEnd: () => {},
+    }
+  }
+
   return {
     dropIndicator,
     isDragging,
+    disabled: false,
     setScrollContainer,
     createWorkflowDragHandlers,
     createFolderDragHandlers,

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

@@ -635,6 +635,7 @@ export function Sidebar() {
                   <WorkflowList
                     regularWorkflows={regularWorkflows}
                     isLoading={isLoading}
+                    canReorder={canEdit}
                     handleFileChange={handleImportFileChange}
                     fileInputRef={fileInputRef}
                     scrollContainerRef={scrollContainerRef}