added isPreview to other subBlock types

Author: Adam Gough

apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/channel-selector/channel-selector-input.tsx

@@ -11,7 +11,9 @@ interface ChannelSelectorInputProps {
   subBlock: SubBlockConfig
   disabled?: boolean
   onChannelSelect?: (channelId: string) => void
-  credential?: string // Optional credential override
+  credential?: string
+  isPreview?: boolean
+  previewValue?: any | null
 }
 
 export function ChannelSelectorInput({
@@ -20,6 +22,8 @@ export function ChannelSelectorInput({
   disabled = false,
   onChannelSelect,
   credential: providedCredential,
+  isPreview = false,
+  previewValue,
 }: ChannelSelectorInputProps) {
   const { getValue, setValue } = useSubBlockStore()
   const [selectedChannelId, setSelectedChannelId] = useState<string>('')
@@ -42,19 +46,31 @@ export function ChannelSelectorInput({
     credential = (getValue(blockId, 'credential') as string) || ''
   }
 
-  // Get the current value from the store
+  // Use preview value when in preview mode, otherwise use store value
+  const value = isPreview ? previewValue : getValue(blockId, subBlock.id)
+
+  // Get the current value from the store or prop value if in preview mode
   useEffect(() => {
-    const value = getValue(blockId, subBlock.id)
-    if (value && typeof value === 'string') {
-      setSelectedChannelId(value)
+    if (isPreview && previewValue !== undefined) {
+      const value = previewValue
+      if (value && typeof value === 'string') {
+        setSelectedChannelId(value)
+      }
+    } else {
+      const value = getValue(blockId, subBlock.id)
+      if (value && typeof value === 'string') {
+        setSelectedChannelId(value)
+      }
     }
-  }, [blockId, subBlock.id, getValue])
+  }, [blockId, subBlock.id, getValue, isPreview, previewValue])
 
   // Handle channel selection
   const handleChannelChange = (channelId: string, info?: SlackChannelInfo) => {
     setSelectedChannelId(channelId)
     setChannelInfo(info || null)
-    setValue(blockId, subBlock.id, channelId)
+    if (!isPreview) {
+      setValue(blockId, subBlock.id, channelId)
+    }
     onChannelSelect?.(channelId)
   }
 

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

@@ -34,6 +34,8 @@ interface CredentialSelectorProps {
   label?: string
   disabled?: boolean
   serviceId?: string
+  isPreview?: boolean
+  previewValue?: any | null
 }
 
 export function CredentialSelector({
@@ -44,12 +46,23 @@ export function CredentialSelector({
   label = 'Select credential',
   disabled = false,
   serviceId,
+  isPreview = false,
+  previewValue,
 }: CredentialSelectorProps) {
   const [open, setOpen] = useState(false)
   const [credentials, setCredentials] = useState<Credential[]>([])
   const [isLoading, setIsLoading] = useState(false)
   const [showOAuthModal, setShowOAuthModal] = useState(false)
-  const [selectedId, setSelectedId] = useState(value)
+  const [selectedId, setSelectedId] = useState('')
+
+  // Initialize selectedId with the effective value
+  useEffect(() => {
+    if (isPreview && previewValue !== undefined) {
+      setSelectedId(previewValue || '')
+    } else {
+      setSelectedId(value)
+    }
+  }, [value, isPreview, previewValue])
 
   // Derive service and provider IDs using useMemo
   const effectiveServiceId = useMemo(() => {
@@ -110,8 +123,9 @@ export function CredentialSelector({
 
   // Update local state when external value changes
   useEffect(() => {
-    setSelectedId(value)
-  }, [value])
+    const currentValue = isPreview ? previewValue : value
+    setSelectedId(currentValue || '')
+  }, [value, isPreview, previewValue])
 
   // Listen for visibility changes to update credentials when user returns from settings
   useEffect(() => {
@@ -143,7 +157,9 @@ export function CredentialSelector({
   // Handle selection
   const handleSelect = (credentialId: string) => {
     setSelectedId(credentialId)
-    onChange(credentialId)
+    if (!isPreview) {
+      onChange(credentialId)
+    }
     setOpen(false)
   }
 

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

@@ -37,6 +37,8 @@ interface FolderSelectorProps {
   disabled?: boolean
   serviceId?: string
   onFolderInfoChange?: (folderInfo: FolderInfo | null) => void
+  isPreview?: boolean
+  previewValue?: any | null
 }
 
 export function FolderSelector({
@@ -48,18 +50,29 @@ export function FolderSelector({
   disabled = false,
   serviceId,
   onFolderInfoChange,
+  isPreview = false,
+  previewValue,
 }: FolderSelectorProps) {
   const [open, setOpen] = useState(false)
   const [credentials, setCredentials] = useState<Credential[]>([])
   const [folders, setFolders] = useState<FolderInfo[]>([])
   const [selectedCredentialId, setSelectedCredentialId] = useState<string>('')
-  const [selectedFolderId, setSelectedFolderId] = useState(value)
+  const [selectedFolderId, setSelectedFolderId] = useState('')
   const [selectedFolder, setSelectedFolder] = useState<FolderInfo | null>(null)
   const [isLoading, setIsLoading] = useState(false)
   const [isLoadingSelectedFolder, setIsLoadingSelectedFolder] = useState(false)
   const [showOAuthModal, setShowOAuthModal] = useState(false)
   const initialFetchRef = useRef(false)
 
+  // Initialize selectedFolderId with the effective value
+  useEffect(() => {
+    if (isPreview && previewValue !== undefined) {
+      setSelectedFolderId(previewValue || '')
+    } else {
+      setSelectedFolderId(value)
+    }
+  }, [value, isPreview, previewValue])
+
   // Determine the appropriate service ID based on provider and scopes
   const getServiceId = (): string => {
     if (serviceId) return serviceId
@@ -226,23 +239,35 @@ export function FolderSelector({
 
   // Keep internal selectedFolderId in sync with the value prop
   useEffect(() => {
-    if (value !== selectedFolderId) {
-      setSelectedFolderId(value)
+    const currentValue = isPreview ? previewValue : value
+    if (currentValue !== selectedFolderId) {
+      setSelectedFolderId(currentValue || '')
     }
-  }, [value])
+  }, [value, isPreview, previewValue])
 
   // Fetch the selected folder metadata once credentials are ready (Gmail only)
   useEffect(() => {
-    if (value && selectedCredentialId && !selectedFolder && provider !== 'outlook') {
-      fetchFolderById(value)
+    const currentValue = isPreview ? previewValue : value
+    if (currentValue && selectedCredentialId && !selectedFolder && provider !== 'outlook') {
+      fetchFolderById(currentValue)
     }
-  }, [value, selectedCredentialId, selectedFolder, fetchFolderById, provider])
+  }, [
+    value,
+    selectedCredentialId,
+    selectedFolder,
+    fetchFolderById,
+    provider,
+    isPreview,
+    previewValue,
+  ])
 
   // Handle folder selection
   const handleSelectFolder = (folder: FolderInfo) => {
     setSelectedFolderId(folder.id)
     setSelectedFolder(folder)
-    onChange(folder.id, folder)
+    if (!isPreview) {
+      onChange(folder.id, folder)
+    }
     onFolderInfoChange?.(folder)
     setOpen(false)
   }