From 79d8dcb198f2b26f5dbd07bc43fc61272bac9aa7 Mon Sep 17 00:00:00 2001 From: Adam Gough Date: Mon, 2 Jun 2025 14:45:30 -0700 Subject: [PATCH] added isPreview to other subBlock types --- .../channel-selector-input.tsx | 30 ++++++++++---- .../credential-selector.tsx | 24 +++++++++-- .../folder-selector/folder-selector.tsx | 41 +++++++++++++++---- 3 files changed, 76 insertions(+), 19 deletions(-) diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/channel-selector/channel-selector-input.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/channel-selector/channel-selector-input.tsx index 8b57f287bb..63481121f7 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/channel-selector/channel-selector-input.tsx +++ b/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('') @@ -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) } diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/credential-selector/credential-selector.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/credential-selector/credential-selector.tsx index 0420835b42..717dbacd07 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/credential-selector/credential-selector.tsx +++ b/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([]) 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) } diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/folder-selector/folder-selector.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/folder-selector/folder-selector.tsx index 59db6b1113..2a0d9990ea 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/folder-selector/folder-selector.tsx +++ b/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([]) const [folders, setFolders] = useState([]) const [selectedCredentialId, setSelectedCredentialId] = useState('') - const [selectedFolderId, setSelectedFolderId] = useState(value) + const [selectedFolderId, setSelectedFolderId] = useState('') const [selectedFolder, setSelectedFolder] = useState(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) }