fix rest of cases

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/channel-selector/components/slack-channel-selector.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { Check, ChevronDown, Hash, Lock, RefreshCw } from 'lucide-react'
 import { SlackIcon } from '@/components/icons'
 import { Button } from '@/components/ui/button'
@@ -42,9 +42,19 @@ export function SlackChannelSelector({
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [open, setOpen] = useState(false)
-  const [selectedChannel, setSelectedChannel] = useState<SlackChannelInfo | null>(null)
   const [initialFetchDone, setInitialFetchDone] = useState(false)
 
+  // Get cached display name
+  const cachedChannelName = useDisplayNamesStore(
+    useCallback(
+      (state) => {
+        if (!credential || !value) return null
+        return state.cache.channels[credential]?.[value] || null
+      },
+      [credential, value]
+    )
+  )
+
   // Fetch channels from Slack API
   const fetchChannels = useCallback(async () => {
     if (!credential) return
@@ -110,27 +120,7 @@ export function SlackChannelSelector({
     }
   }
 
-  // Sync selected channel with value prop
-  useEffect(() => {
-    if (value && channels.length > 0) {
-      const channelInfo = channels.find((c) => c.id === value)
-      setSelectedChannel(channelInfo || null)
-    } else if (!value) {
-      setSelectedChannel(null)
-    }
-  }, [value, channels])
-
-  // If we have a value but no channel info and haven't fetched yet, get just that channel
-  useEffect(() => {
-    if (value && !selectedChannel && !loading && !initialFetchDone && credential) {
-      // For now, we'll fetch all channels when needed
-      // In the future, we could optimize to fetch just the selected channel
-      fetchChannels()
-    }
-  }, [value, selectedChannel, loading, initialFetchDone, credential, fetchChannels])
-
   const handleSelectChannel = (channel: SlackChannelInfo) => {
-    setSelectedChannel(channel)
     onChange(channel.id, channel)
     setOpen(false)
   }
@@ -156,15 +146,10 @@ export function SlackChannelSelector({
         >
           <div className='flex max-w-[calc(100%-20px)] items-center gap-2 overflow-hidden'>
             <SlackIcon className='h-4 w-4 text-[#611f69]' />
-            {selectedChannel ? (
-              <>
-                {getChannelIcon(selectedChannel)}
-                <span className='truncate font-normal'>{formatChannelName(selectedChannel)}</span>
-              </>
-            ) : value ? (
+            {cachedChannelName ? (
               <>
                 <Hash className='h-1.5 w-1.5' />
-                <span className='truncate font-normal'>{value}</span>
+                <span className='truncate font-normal'>{cachedChannelName}</span>
               </>
             ) : (
               <span className='truncate text-muted-foreground'>{label}</span>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/document-selector/document-selector.tsx

@@ -122,26 +122,6 @@ export function DocumentSelector({
     setError(null)
   }, [normalizedKnowledgeBaseId])
 
-  useEffect(() => {
-    if (normalizedKnowledgeBaseId && !isPreview && !isDisabled) {
-      if (
-        !documentsCache ||
-        !documentsCache.documents.length ||
-        (value && !documents.find((doc) => doc.id === value))
-      ) {
-        void loadDocuments()
-      }
-    }
-  }, [
-    normalizedKnowledgeBaseId,
-    isPreview,
-    isDisabled,
-    documentsCache,
-    documents,
-    value,
-    loadDocuments,
-  ])
-
   useEffect(() => {
     if (!normalizedKnowledgeBaseId || documents.length === 0) return
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/file-selector/components/confluence-file-selector.tsx

@@ -71,11 +71,22 @@ export function ConfluenceFileSelector({
   const [files, setFiles] = useState<ConfluenceFileInfo[]>([])
   const [selectedCredentialId, setSelectedCredentialId] = useState<string>(credentialId || '')
   const [selectedFileId, setSelectedFileId] = useState(value)
-  const [selectedFile, setSelectedFile] = useState<ConfluenceFileInfo | null>(null)
   const [isLoading, setIsLoading] = useState(false)
   const [showOAuthModal, setShowOAuthModal] = useState(false)
   const initialFetchRef = useRef(false)
   const [error, setError] = useState<string | null>(null)
+
+  // Get cached display name
+  const cachedFileName = useDisplayNamesStore(
+    useCallback(
+      (state) => {
+        const effectiveCredentialId = credentialId || selectedCredentialId
+        if (!effectiveCredentialId || !value) return null
+        return state.cache.files[effectiveCredentialId]?.[value] || null
+      },
+      [credentialId, selectedCredentialId, value]
+    )
+  )
   // Keep internal credential in sync with prop (handles late arrival and BFCache restores)
   useEffect(() => {
     if (credentialId && credentialId !== selectedCredentialId) {
@@ -199,7 +210,6 @@ export function ConfluenceFileSelector({
 
         const data = await response.json()
         if (data.file) {
-          setSelectedFile(data.file)
           onFileInfoChange?.(data.file)
         } else {
           const fileInfo: ConfluenceFileInfo = {
@@ -211,7 +221,6 @@ export function ConfluenceFileSelector({
             spaceId: undefined,
             url: undefined,
           }
-          setSelectedFile(fileInfo)
           onFileInfoChange?.(fileInfo)
         }
       } catch (error) {
@@ -319,12 +328,11 @@ export function ConfluenceFileSelector({
           useDisplayNamesStore.getState().setDisplayNames('files', selectedCredentialId, fileMap)
         }
 
-        // If we have a selected file ID, find the file info
-        if (selectedFileId) {
+        // If we have a selected file ID, notify parent if callback exists
+        if (selectedFileId && onFileInfoChange) {
           const fileInfo = data.files.find((file: ConfluenceFileInfo) => file.id === selectedFileId)
           if (fileInfo) {
-            setSelectedFile(fileInfo)
-            onFileInfoChange?.(fileInfo)
+            onFileInfoChange(fileInfo)
           } else if (!searchQuery && selectedFileId) {
             // If we can't find the file in the list, try to fetch it directly
             fetchPageInfo(selectedFileId)
@@ -389,18 +397,16 @@ export function ConfluenceFileSelector({
     }
   }, [value])
 
-  // Clear preview when value is cleared (e.g., collaborator cleared or domain change cascade)
+  // Clear callback when value is cleared
   useEffect(() => {
     if (!value) {
-      setSelectedFile(null)
       onFileInfoChange?.(null)
     }
   }, [value, onFileInfoChange])
 
   // Handle file selection
   const handleSelectFile = (file: ConfluenceFileInfo) => {
     setSelectedFileId(file.id)
-    setSelectedFile(file)
     onChange(file.id, file)
     onFileInfoChange?.(file)
     setOpen(false)
@@ -416,7 +422,6 @@ export function ConfluenceFileSelector({
   // Clear selection
   const handleClearSelection = () => {
     setSelectedFileId('')
-    setSelectedFile(null)
     onChange('', undefined)
     onFileInfoChange?.(null)
   }
@@ -434,10 +439,10 @@ export function ConfluenceFileSelector({
               disabled={disabled || !domain || isForeignCredential}
             >
               <div className='flex min-w-0 items-center gap-2 overflow-hidden'>
-                {selectedFile ? (
+                {cachedFileName ? (
                   <>
                     <ConfluenceIcon className='h-4 w-4' />
-                    <span className='truncate font-normal'>{selectedFile.name}</span>
+                    <span className='truncate font-normal'>{cachedFileName}</span>
                   </>
                 ) : (
                   <>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/file-selector/components/google-calendar-selector.tsx

@@ -14,6 +14,7 @@ import {
 } from '@/components/ui/command'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { createLogger } from '@/lib/logs/console/logger'
+import { useDisplayNamesStore } from '@/stores/display-names/store'
 
 const logger = createLogger('GoogleCalendarSelector')
 
@@ -51,11 +52,21 @@ export function GoogleCalendarSelector({
   const [open, setOpen] = useState(false)
   const [calendars, setCalendars] = useState<GoogleCalendarInfo[]>([])
   const [selectedCalendarId, setSelectedCalendarId] = useState(value)
-  const [selectedCalendar, setSelectedCalendar] = useState<GoogleCalendarInfo | null>(null)
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [initialFetchDone, setInitialFetchDone] = useState(false)
 
+  // Get cached display name
+  const cachedCalendarName = useDisplayNamesStore(
+    useCallback(
+      (state) => {
+        if (!credentialId || !value) return null
+        return state.cache.files[credentialId]?.[value] || null
+      },
+      [credentialId, value]
+    )
+  )
+
   const fetchCalendarsFromAPI = useCallback(async (): Promise<GoogleCalendarInfo[]> => {
     if (!credentialId) {
       throw new Error('Google Calendar account is required')
@@ -87,15 +98,13 @@ export function GoogleCalendarSelector({
       const calendars = await fetchCalendarsFromAPI()
       setCalendars(calendars)
 
-      const currentSelectedId = selectedCalendarId
-      if (currentSelectedId) {
-        const calendarInfo = calendars.find(
-          (calendar: GoogleCalendarInfo) => calendar.id === currentSelectedId
-        )
-        if (calendarInfo) {
-          setSelectedCalendar(calendarInfo)
-          onCalendarInfoChange?.(calendarInfo)
-        }
+      // Cache calendar names
+      if (credentialId && calendars.length > 0) {
+        const calendarMap = calendars.reduce<Record<string, string>>((acc, cal) => {
+          acc[cal.id] = cal.summary
+          return acc
+        }, {})
+        useDisplayNamesStore.getState().setDisplayNames('files', credentialId, calendarMap)
       }
     } catch (error) {
       logger.error('Error fetching calendars:', error)
@@ -105,7 +114,7 @@ export function GoogleCalendarSelector({
       setIsLoading(false)
       setInitialFetchDone(true)
     }
-  }, [fetchCalendarsFromAPI, selectedCalendarId, onCalendarInfoChange])
+  }, [fetchCalendarsFromAPI, credentialId])
 
   const handleOpenChange = (isOpen: boolean) => {
     setOpen(isOpen)
@@ -115,72 +124,16 @@ export function GoogleCalendarSelector({
     }
   }
 
-  const fetchSelectedCalendarInfo = useCallback(async () => {
-    if (!selectedCalendarId) return
-
-    setIsLoading(true)
-    setError(null)
-
-    try {
-      const calendars = await fetchCalendarsFromAPI()
-
-      if (calendars.length > 0) {
-        const calendarInfo = calendars.find(
-          (calendar: GoogleCalendarInfo) => calendar.id === selectedCalendarId
-        )
-        if (calendarInfo) {
-          setSelectedCalendar(calendarInfo)
-          onCalendarInfoChange?.(calendarInfo)
-        }
-      }
-    } catch (error) {
-      logger.error('Error fetching calendar info:', error)
-      setError((error as Error).message)
-    } finally {
-      setIsLoading(false)
-    }
-  }, [fetchCalendarsFromAPI, selectedCalendarId, onCalendarInfoChange])
-
-  // Fetch selected calendar info when component mounts or dependencies change
-  useEffect(() => {
-    if (value && credentialId && (!selectedCalendar || selectedCalendar.id !== value)) {
-      fetchSelectedCalendarInfo()
-    }
-  }, [value, credentialId, selectedCalendar, fetchSelectedCalendarInfo])
-
-  // Sync with external value
+  // Sync selected ID with external value
   useEffect(() => {
     if (value !== selectedCalendarId) {
       setSelectedCalendarId(value)
-
-      // Find calendar info for the new value
-      if (value && calendars.length > 0) {
-        const calendarInfo = calendars.find((calendar) => calendar.id === value)
-        setSelectedCalendar(calendarInfo || null)
-        onCalendarInfoChange?.(calendarInfo || null)
-      } else if (value) {
-        // If we have a value but no calendar info, we might need to fetch it
-        if (!selectedCalendar || selectedCalendar.id !== value) {
-          fetchSelectedCalendarInfo()
-        }
-      } else {
-        setSelectedCalendar(null)
-        onCalendarInfoChange?.(null)
-      }
     }
-  }, [
-    value,
-    calendars,
-    selectedCalendarId,
-    selectedCalendar,
-    fetchSelectedCalendarInfo,
-    onCalendarInfoChange,
-  ])
+  }, [value, selectedCalendarId])
 
   // Handle calendar selection
   const handleSelectCalendar = (calendar: GoogleCalendarInfo) => {
     setSelectedCalendarId(calendar.id)
-    setSelectedCalendar(calendar)
     onChange(calendar.id, calendar)
     onCalendarInfoChange?.(calendar)
     setOpen(false)
@@ -189,7 +142,6 @@ export function GoogleCalendarSelector({
   // Clear selection
   const handleClearSelection = () => {
     setSelectedCalendarId('')
-    setSelectedCalendar(null)
     onChange('', undefined)
     onCalendarInfoChange?.(null)
     setError(null)
@@ -215,17 +167,10 @@ export function GoogleCalendarSelector({
             disabled={disabled || !credentialId}
           >
             <div className='flex min-w-0 items-center gap-2 overflow-hidden'>
-              {selectedCalendar ? (
+              {cachedCalendarName ? (
                 <>
-                  <div
-                    className='h-3 w-3 flex-shrink-0 rounded-full'
-                    style={{
-                      backgroundColor: selectedCalendar.backgroundColor || '#4285f4',
-                    }}
-                  />
-                  <span className='truncate font-normal'>
-                    {getCalendarDisplayName(selectedCalendar)}
-                  </span>
+                  <GoogleCalendarIcon className='h-4 w-4' />
+                  <span className='truncate font-normal'>{cachedCalendarName}</span>
                 </>
               ) : (
                 <>