fix(picker): fix picker files disappearing on refresh

Author: waleedlatif1

sim/app/w/[id]/components/workflow-block/components/sub-block/components/file-selector/components/confluence-file-selector.tsx

@@ -330,23 +330,19 @@ export function ConfluenceFileSelector({
     }
   }
 
-  // Update selected file when value changes externally
+  // Fetch the selected page metadata once credentials and domain are ready or changed
+  useEffect(() => {
+    if (value && selectedCredentialId && !selectedFile && domain && domain.includes('.')) {
+      fetchPageInfo(value)
+    }
+  }, [value, selectedCredentialId, selectedFile, domain, fetchPageInfo])
+
+  // Keep internal selectedFileId in sync with the value prop
   useEffect(() => {
     if (value !== selectedFileId) {
       setSelectedFileId(value)
-
-      // Find file info if we have files loaded
-      if (files.length > 0) {
-        const fileInfo = files.find((file) => file.id === value) || null
-        setSelectedFile(fileInfo)
-        onFileInfoChange?.(fileInfo)
-      } else if (value && !selectedFile && selectedCredentialId && domain && domain.includes('.')) {
-        // If we don't have files loaded yet but have a value, try to fetch the file info
-        // Only make the API call if we have everything we need and a proper domain
-        fetchPageInfo(value)
-      }
     }
-  }, [value, files, selectedFile, selectedCredentialId, domain, onFileInfoChange, fetchPageInfo])
+  }, [value])
 
   // Handle file selection
   const handleSelectFile = (file: ConfluenceFileInfo) => {

sim/app/w/[id]/components/workflow-block/components/sub-block/components/file-selector/components/google-drive-picker.tsx

@@ -176,17 +176,20 @@ export function GoogleDrivePicker({
     }
   }, [fetchCredentials])
 
-  // Update selected file when value changes externally
+  // Fetch the selected file metadata once credentials are loaded or changed
+  useEffect(() => {
+    // If we have a file ID selected and credentials are ready but we still don't have the file info, fetch it
+    if (value && selectedCredentialId && !selectedFile) {
+      fetchFileById(value)
+    }
+  }, [value, selectedCredentialId, selectedFile, fetchFileById])
+
+  // Keep internal selectedFileId in sync with the value prop
   useEffect(() => {
     if (value !== selectedFileId) {
       setSelectedFileId(value)
-
-      // If we have a value but no file info, try to fetch it
-      if (value && selectedCredentialId && !selectedFile) {
-        fetchFileById(value)
-      }
     }
-  }, [value, selectedCredentialId, selectedFile, fetchFileById])
+  }, [value])
 
   // Fetch the access token for the selected credential
   const fetchAccessToken = async (): Promise<string | null> => {

sim/app/w/[id]/components/workflow-block/components/sub-block/components/file-selector/components/jira-issue-selector.tsx

@@ -373,29 +373,19 @@ export function JiraIssueSelector({
     }
   }
 
-  // Update selected issue when value changes externally 
+  // Fetch selected issue metadata once credentials are ready or changed
+  useEffect(() => {
+    if (value && selectedCredentialId && !selectedIssue && domain && domain.includes('.')) {
+      fetchIssueInfo(value)
+    }
+  }, [value, selectedCredentialId, selectedIssue, domain, fetchIssueInfo])
+
+  // Keep internal selectedIssueId in sync with the value prop
   useEffect(() => {
     if (value !== selectedIssueId) {
       setSelectedIssueId(value)
-
-      // Only fetch issue info if we have a valid value
-      if (value && value.trim() !== '') {
-        // Find issue info if we have issues loaded
-        if (issues.length > 0) {
-          const issueInfo = issues.find((issue) => issue.id === value) || null
-          setSelectedIssue(issueInfo)
-          onIssueInfoChange?.(issueInfo)
-        } else if (!selectedIssue && selectedCredentialId && domain && domain.includes('.')) {
-          // If we don't have issues loaded yet but have a value, try to fetch the issue info
-          fetchIssueInfo(value)
-        }
-      } else {
-        // If value is empty or undefined, clear the selection without triggering API calls
-        setSelectedIssue(null)
-        onIssueInfoChange?.(null)
-      }
     }
-  }, [value, issues, selectedIssue, selectedCredentialId, domain, onIssueInfoChange, fetchIssueInfo])
+  }, [value])
 
   // Handle issue selection
   const handleSelectIssue = (issue: JiraIssueInfo) => {

sim/app/w/[id]/components/workflow-block/components/sub-block/components/folder-selector/folder-selector.tsx

@@ -214,29 +214,19 @@ export function FolderSelector({
     }
   }, [selectedCredentialId, fetchFolders])
 
-  // Update selected folder when value changes externally
+  // Keep internal selectedFolderId in sync with the value prop
   useEffect(() => {
     if (value !== selectedFolderId) {
       setSelectedFolderId(value)
-
-      // Find folder info if we have folders loaded
-      if (folders.length > 0) {
-        const folderInfo = folders.find((folder) => folder.id === value) || null
-        setSelectedFolder(folderInfo)
-        onFolderInfoChange?.(folderInfo)
-      } else if (value && selectedCredentialId) {
-        // If we have a value but no folders loaded yet, try to fetch the folder by ID
-        fetchFolderById(value)
-      }
     }
-  }, [value, folders, onFolderInfoChange, selectedCredentialId, fetchFolderById])
+  }, [value])
 
-  // Try to fetch the folder by ID when credentials become available
+  // Fetch the selected folder metadata once credentials are ready
   useEffect(() => {
-    if (selectedCredentialId && selectedFolderId && !selectedFolder) {
-      fetchFolderById(selectedFolderId)
+    if (value && selectedCredentialId && !selectedFolder) {
+      fetchFolderById(value)
     }
-  }, [selectedCredentialId, selectedFolderId, selectedFolder, fetchFolderById])
+  }, [value, selectedCredentialId, selectedFolder, fetchFolderById])
 
   // Handle folder selection
   const handleSelectFolder = (folder: FolderInfo) => {

sim/app/w/[id]/components/workflow-block/components/sub-block/components/project-selector/components/jira-project-selector.tsx

@@ -331,29 +331,19 @@ export function JiraProjectSelector({
     }
   }, [fetchCredentials])
 
-  // Update selected project when value changes externally 
+  // Fetch the selected project metadata once credentials are ready or changed
+  useEffect(() => {
+    if (value && selectedCredentialId && !selectedProject && domain && domain.includes('.')) {
+      fetchProjectInfo(value)
+    }
+  }, [value, selectedCredentialId, selectedProject, domain, fetchProjectInfo])
+
+  // Keep internal selectedProjectId in sync with the value prop
   useEffect(() => {
     if (value !== selectedProjectId) {
       setSelectedProjectId(value)
-
-      // Only fetch project info if we have a valid value
-      if (value && value.trim() !== '') {
-        // Find project info if we have projects loaded
-        if (projects.length > 0) {
-          const projectInfo = projects.find((project) => project.id === value) || null
-          setSelectedProject(projectInfo)
-          onProjectInfoChange?.(projectInfo)
-        } else if (!selectedProject && selectedCredentialId && domain && domain.includes('.')) {
-          // If we don't have projects loaded yet but have a value, try to fetch the project info
-          fetchProjectInfo(value)
-        }
-      } else {
-        // If value is empty or undefined, clear the selection without triggering API calls
-        setSelectedProject(null)
-        onProjectInfoChange?.(null)
-      }
     }
-  }, [value, projects, selectedProject, selectedCredentialId, domain, onProjectInfoChange, fetchProjectInfo])
+  }, [value])
 
   // Handle open change
   const handleOpenChange = (isOpen: boolean) => {