From a0b27570f75d090f792f649d0b662849e51d53e8 Mon Sep 17 00:00:00 2001 From: Adam Gough Date: Sat, 17 May 2025 20:07:40 -0400 Subject: [PATCH] fix: added remaining subblock isPreview tag --- .../sub-block/components/checkbox-list.tsx | 33 ++++- .../components/sub-block/components/code.tsx | 17 ++- .../sub-block/components/condition-input.tsx | 17 ++- .../sub-block/components/date-input.tsx | 20 ++- .../sub-block/components/eval-input.tsx | 18 ++- .../file-selector/file-selector-input.tsx | 60 ++++++-- .../sub-block/components/file-upload.tsx | 24 +++- .../components/folder-selector-input.tsx | 49 +++++-- .../project-selector-input.tsx | 31 +++- .../components/schedule/schedule-config.tsx | 28 +++- .../sub-block/components/slider-input.tsx | 20 ++- .../components/starter/input-format.tsx | 21 ++- .../sub-block/components/switch.tsx | 27 +++- .../components/sub-block/components/table.tsx | 20 ++- .../sub-block/components/time-input.tsx | 27 +++- .../components/tool-input/tool-input.tsx | 8 +- .../sub-block/components/webhook/webhook.tsx | 33 ++++- .../sub-block/hooks/use-sub-block-value.ts | 7 - .../components/sub-block/sub-block.tsx | 133 +++++++++++++----- 19 files changed, 488 insertions(+), 105 deletions(-) diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/checkbox-list.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/checkbox-list.tsx index 41c0e4e99d..bd00e8235a 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/checkbox-list.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/checkbox-list.tsx @@ -1,21 +1,50 @@ import { Checkbox } from '@/components/ui/checkbox' import { Label } from '@/components/ui/label' import { cn } from '@/lib/utils' +import { createLogger } from '@/lib/logs/console-logger' import { useSubBlockValue } from '../hooks/use-sub-block-value' +const logger = createLogger('CheckboxList') + interface CheckboxListProps { blockId: string subBlockId: string title: string options: { label: string; id: string }[] layout?: 'full' | 'half' + isPreview?: boolean + value?: Record } -export function CheckboxList({ blockId, subBlockId, title, options, layout }: CheckboxListProps) { +export function CheckboxList({ + blockId, + subBlockId, + title, + options, + layout, + isPreview = false, + value: propValues +}: CheckboxListProps) { return (
{options.map((option) => { - const [value, setValue] = useSubBlockValue(blockId, option.id) + const [value, setValue] = useSubBlockValue( + blockId, + option.id, + false, + isPreview, + propValues?.[option.id] + ) + + // Log when in preview mode to verify it's working + if (isPreview) { + logger.info(`[PREVIEW] CheckboxList option ${option.id} for ${blockId}`, { + isPreview, + propValue: propValues?.[option.id], + value + }); + } + return (
('') const [_lineCount, setLineCount] = useState(1) const [showTags, setShowTags] = useState(false) @@ -199,6 +203,17 @@ export function Code({ } }, [code]) + // Log when in preview mode to verify it's working + useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] Code for ${blockId}:${subBlockId}`, { + isPreview, + propValue, + storeValue + }); + } + }, [isPreview, propValue, storeValue, blockId, subBlockId]); + // Handlers const handleDrop = (e: React.DragEvent) => { e.preventDefault() diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx index f2e070b2ae..8a00659a12 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/condition-input.tsx @@ -33,6 +33,8 @@ interface ConditionInputProps { blockId: string subBlockId: string isConnecting: boolean + isPreview?: boolean + value?: string } // Generate a stable ID based on the blockId and a suffix @@ -40,8 +42,8 @@ const generateStableId = (blockId: string, suffix: string): string => { return `${blockId}-${suffix}` } -export function ConditionInput({ blockId, subBlockId, isConnecting }: ConditionInputProps) { - const [storeValue, setStoreValue] = useSubBlockValue(blockId, subBlockId) +export function ConditionInput({ blockId, subBlockId, isConnecting, isPreview = false, value: propValue }: ConditionInputProps) { + const [storeValue, setStoreValue] = useSubBlockValue(blockId, subBlockId, false, isPreview, propValue) const editorRef = useRef(null) const [visualLineHeights, setVisualLineHeights] = useState<{ [key: string]: number[] @@ -509,6 +511,17 @@ export function ConditionInput({ blockId, subBlockId, isConnecting }: ConditionI }) }, [conditionalBlocks.length]) + // Log when in preview mode to verify it's working + useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] ConditionInput for ${blockId}:${subBlockId}`, { + isPreview, + propValue, + storeValue + }); + } + }, [isPreview, propValue, storeValue, blockId, subBlockId]); + // Show loading or empty state if not ready or no blocks if (!isReady || conditionalBlocks.length === 0) { return ( diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/date-input.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/date-input.tsx index a55ab0f6ba..b66be5537d 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/date-input.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/date-input.tsx @@ -7,20 +7,36 @@ import { Button } from '@/components/ui/button' import { Calendar } from '@/components/ui/calendar' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' import { cn } from '@/lib/utils' +import { createLogger } from '@/lib/logs/console-logger' import { useNotificationStore } from '@/stores/notifications/store' import { useSubBlockValue } from '../hooks/use-sub-block-value' +const logger = createLogger('DateInput') + interface DateInputProps { blockId: string subBlockId: string placeholder?: string + isPreview?: boolean + value?: string } -export function DateInput({ blockId, subBlockId, placeholder }: DateInputProps) { - const [value, setValue] = useSubBlockValue(blockId, subBlockId, true) +export function DateInput({ blockId, subBlockId, placeholder, isPreview = false, value: propValue }: DateInputProps) { + const [value, setValue] = useSubBlockValue(blockId, subBlockId, true, isPreview, propValue) const addNotification = useNotificationStore((state) => state.addNotification) const date = value ? new Date(value) : undefined + // Log when in preview mode to verify it's working + React.useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] DateInput for ${blockId}:${subBlockId}`, { + isPreview, + propValue, + value + }); + } + }, [isPreview, propValue, value, blockId, subBlockId]); + const isPastDate = React.useMemo(() => { if (!date) return false const today = new Date() diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/eval-input.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/eval-input.tsx index 36ae83e4f8..c05aa1c681 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/eval-input.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/eval-input.tsx @@ -3,8 +3,11 @@ import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' +import { createLogger } from '@/lib/logs/console-logger' import { useSubBlockValue } from '../hooks/use-sub-block-value' +const logger = createLogger('EvalInput') + interface EvalMetric { id: string name: string @@ -18,6 +21,8 @@ interface EvalMetric { interface EvalInputProps { blockId: string subBlockId: string + isPreview?: boolean + value?: EvalMetric[] } // Default values @@ -28,11 +33,20 @@ const DEFAULT_METRIC: EvalMetric = { range: { min: 0, max: 1 }, } -export function EvalInput({ blockId, subBlockId }: EvalInputProps) { +export function EvalInput({ blockId, subBlockId, isPreview = false, value: propValue }: EvalInputProps) { // State hooks - const [value, setValue] = useSubBlockValue(blockId, subBlockId) + const [value, setValue] = useSubBlockValue(blockId, subBlockId, false, isPreview, propValue) const metrics = value || [DEFAULT_METRIC] + // Log when in preview mode to verify it's working + if (isPreview) { + logger.info(`[PREVIEW] EvalInput for ${blockId}:${subBlockId}`, { + isPreview, + propValue, + value + }); + } + // Metric operations const addMetric = () => { const newMetric: EvalMetric = { diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/file-selector/file-selector-input.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/file-selector/file-selector-input.tsx index 9f42f5c63b..03406d2cab 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/file-selector/file-selector-input.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/file-selector/file-selector-input.tsx @@ -5,6 +5,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp import { env } from '@/lib/env' import type { SubBlockConfig } from '@/blocks/types' import { useWorkflowRegistry } from '@/stores/workflows/registry/store' +import { createLogger } from '@/lib/logs/console-logger' import { useSubBlockStore } from '@/stores/workflows/subblock/store' import type { ConfluenceFileInfo } from './components/confluence-file-selector' import { ConfluenceFileSelector } from './components/confluence-file-selector' @@ -19,13 +20,23 @@ import { MicrosoftFileSelector } from './components/microsoft-file-selector' import type { TeamsMessageInfo } from './components/teams-message-selector' import { TeamsMessageSelector } from './components/teams-message-selector' +const logger = createLogger('FileSelectorInput') + interface FileSelectorInputProps { blockId: string subBlock: SubBlockConfig disabled?: boolean + isPreview?: boolean + value?: string } -export function FileSelectorInput({ blockId, subBlock, disabled = false }: FileSelectorInputProps) { +export function FileSelectorInput({ + blockId, + subBlock, + disabled = false, + isPreview = false, + value: propValue +}: FileSelectorInputProps) { const { getValue, setValue } = useSubBlockStore() const { activeWorkflowId } = useWorkflowRegistry() const [selectedFileId, setSelectedFileId] = useState('') @@ -37,6 +48,16 @@ export function FileSelectorInput({ blockId, subBlock, disabled = false }: FileS const [selectedMessageId, setSelectedMessageId] = useState('') const [messageInfo, setMessageInfo] = useState(null) + // Log when in preview mode to verify it's working + useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] FileSelectorInput for ${blockId}:${subBlock.id}`, { + isPreview, + propValue + }); + } + }, [isPreview, propValue, blockId, subBlock.id]); + // Get provider-specific values const provider = subBlock.provider || 'google-drive' const isConfluence = provider === 'confluence' @@ -50,21 +71,34 @@ export function FileSelectorInput({ blockId, subBlock, disabled = false }: FileS const botToken = isDiscord ? (getValue(blockId, 'botToken') as string) || '' : '' const serverId = isDiscord ? (getValue(blockId, 'serverId') as string) || '' : '' - // Get the current value from the store + // 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') { - if (isJira) { - setSelectedIssueId(value) - } else if (isDiscord) { - setSelectedChannelId(value) - } else if (isMicrosoftTeams) { - setSelectedMessageId(value) - } else { - setSelectedFileId(value) + if (isPreview && propValue !== undefined) { + const value = propValue; + if (value && typeof value === 'string') { + if (isJira) { + setSelectedIssueId(value); + } else if (isDiscord) { + setSelectedChannelId(value); + } else { + setSelectedFileId(value); + } + } + } else { + const value = getValue(blockId, subBlock.id); + if (value && typeof value === 'string') { + if (isJira) { + setSelectedIssueId(value); + } else if (isDiscord) { + setSelectedChannelId(value); + } else if (isMicrosoftTeams) { + setSelectedMessageId(value); + } else { + setSelectedFileId(value); + } } } - }, [blockId, subBlock.id, getValue, isJira, isDiscord, isMicrosoftTeams]) + }, [blockId, subBlock.id, getValue, isJira, isDiscord, isMicrosoftTeams, isPreview, propValue]); // Handle file selection const handleFileChange = (fileId: string, info?: any) => { diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/file-upload.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/file-upload.tsx index 846250414e..028da7e74a 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/file-upload.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/file-upload.tsx @@ -1,21 +1,26 @@ 'use client' -import { useRef, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import { X } from 'lucide-react' import { Button } from '@/components/ui/button' import { Progress } from '@/components/ui/progress' +import { createLogger } from '@/lib/logs/console-logger' import { useNotificationStore } from '@/stores/notifications/store' import { useWorkflowRegistry } from '@/stores/workflows/registry/store' import { useSubBlockStore } from '@/stores/workflows/subblock/store' import { useWorkflowStore } from '@/stores/workflows/workflow/store' import { useSubBlockValue } from '../hooks/use-sub-block-value' +const logger = createLogger('FileUpload') + interface FileUploadProps { blockId: string subBlockId: string maxSize?: number // in MB acceptedTypes?: string // comma separated MIME types multiple?: boolean // whether to allow multiple file uploads + isPreview?: boolean + value?: UploadedFile | UploadedFile[] | null } interface UploadedFile { @@ -37,12 +42,16 @@ export function FileUpload({ maxSize = 10, // Default 10MB acceptedTypes = '*', multiple = false, // Default to single file for backward compatibility + isPreview = false, + value: propValue }: FileUploadProps) { // State management - handle both single file and array of files const [value, setValue] = useSubBlockValue( blockId, subBlockId, - true + true, + isPreview, + propValue ) const [uploadingFiles, setUploadingFiles] = useState([]) const [uploadProgress, setUploadProgress] = useState(0) @@ -57,6 +66,17 @@ export function FileUpload({ const { addNotification } = useNotificationStore() const { activeWorkflowId } = useWorkflowRegistry() + // Log when in preview mode to verify it's working + useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] FileUpload for ${blockId}:${subBlockId}`, { + isPreview, + propValue, + value + }); + } + }, [isPreview, propValue, value, blockId, subBlockId]); + /** * Opens file dialog * Prevents event propagation to avoid ReactFlow capturing the event diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/folder-selector/components/folder-selector-input.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/folder-selector/components/folder-selector-input.tsx index 499dbc9084..fab35f5a3d 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/folder-selector/components/folder-selector-input.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/folder-selector/components/folder-selector-input.tsx @@ -2,41 +2,66 @@ import { useEffect, useState } from 'react' import type { SubBlockConfig } from '@/blocks/types' +import { createLogger } from '@/lib/logs/console-logger' import { useSubBlockStore } from '@/stores/workflows/subblock/store' import { type FolderInfo, FolderSelector } from '../folder-selector' +const logger = createLogger('FolderSelectorInput') + interface FolderSelectorInputProps { blockId: string subBlock: SubBlockConfig disabled?: boolean + isPreview?: boolean + value?: string } export function FolderSelectorInput({ blockId, subBlock, disabled = false, + isPreview = false, + value: propValue }: FolderSelectorInputProps) { const { getValue, setValue } = useSubBlockStore() const [selectedFolderId, setSelectedFolderId] = useState('') const [_folderInfo, setFolderInfo] = useState(null) - // Get the current value from the store + // Log when in preview mode to verify it's working useEffect(() => { - const value = getValue(blockId, subBlock.id) - if (value && typeof value === 'string') { - setSelectedFolderId(value) - } else { - const defaultValue = 'INBOX' - setSelectedFolderId(defaultValue) - setValue(blockId, subBlock.id, defaultValue) + if (isPreview) { + logger.info(`[PREVIEW] FolderSelectorInput for ${blockId}:${subBlock.id}`, { + isPreview, + propValue + }); } - }, [blockId, subBlock.id, getValue, setValue]) + }, [isPreview, propValue, blockId, subBlock.id]); + + // Get the current value from the store or prop value if in preview mode + useEffect(() => { + if (isPreview && propValue !== undefined) { + setSelectedFolderId(propValue); + } else { + const value = getValue(blockId, subBlock.id); + if (value && typeof value === 'string') { + setSelectedFolderId(value); + } else { + const defaultValue = 'INBOX'; + setSelectedFolderId(defaultValue); + if (!isPreview) { + setValue(blockId, subBlock.id, defaultValue); + } + } + } + }, [blockId, subBlock.id, getValue, setValue, isPreview, propValue]); // Handle folder selection const handleFolderChange = (folderId: string, info?: FolderInfo) => { - setSelectedFolderId(folderId) - setFolderInfo(info || null) - setValue(blockId, subBlock.id, folderId) + setSelectedFolderId(folderId); + setFolderInfo(info || null); + if (!isPreview) { + setValue(blockId, subBlock.id, folderId); + } } return ( diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/project-selector/project-selector-input.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/project-selector/project-selector-input.tsx index 59dcabaa11..efd6e5c3de 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/project-selector/project-selector-input.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/project-selector/project-selector-input.tsx @@ -3,17 +3,22 @@ import { useEffect, useState } from 'react' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' import type { SubBlockConfig } from '@/blocks/types' +import { createLogger } from '@/lib/logs/console-logger' import { useSubBlockStore } from '@/stores/workflows/subblock/store' import { type DiscordServerInfo, DiscordServerSelector } from './components/discord-server-selector' import { type JiraProjectInfo, JiraProjectSelector } from './components/jira-project-selector' import { type LinearProjectInfo, LinearProjectSelector } from './components/linear-project-selector' import { type LinearTeamInfo, LinearTeamSelector } from './components/linear-team-selector' +const logger = createLogger('ProjectSelectorInput') + interface ProjectSelectorInputProps { blockId: string subBlock: SubBlockConfig disabled?: boolean onProjectSelect?: (projectId: string) => void + isPreview?: boolean + value?: string } export function ProjectSelectorInput({ @@ -21,11 +26,23 @@ export function ProjectSelectorInput({ subBlock, disabled = false, onProjectSelect, + isPreview = false, + value: propValue }: ProjectSelectorInputProps) { const { getValue, setValue } = useSubBlockStore() const [selectedProjectId, setSelectedProjectId] = useState('') const [_projectInfo, setProjectInfo] = useState(null) + // Log when in preview mode to verify it's working + useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] ProjectSelectorInput for ${blockId}:${subBlock.id}`, { + isPreview, + propValue + }); + } + }, [isPreview, propValue, blockId, subBlock.id]); + // Get provider-specific values const provider = subBlock.provider || 'jira' const isDiscord = provider === 'discord' @@ -35,13 +52,17 @@ export function ProjectSelectorInput({ const domain = !isDiscord ? (getValue(blockId, 'domain') as string) || '' : '' const botToken = isDiscord ? (getValue(blockId, 'botToken') as string) || '' : '' - // Get the current value from the store + // 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') { - setSelectedProjectId(value) + if (isPreview && propValue !== undefined) { + setSelectedProjectId(propValue); + } else { + const value = getValue(blockId, subBlock.id); + if (value && typeof value === 'string') { + setSelectedProjectId(value); + } } - }, [blockId, subBlock.id, getValue]) + }, [blockId, subBlock.id, getValue, isPreview, propValue]); // Handle project selection const handleProjectChange = ( diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/schedule/schedule-config.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/schedule/schedule-config.tsx index 24d389d3eb..3bdbbe8f26 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/schedule/schedule-config.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/schedule/schedule-config.tsx @@ -19,9 +19,17 @@ interface ScheduleConfigProps { blockId: string subBlockId?: string isConnecting: boolean + isPreview?: boolean + value?: any } -export function ScheduleConfig({ blockId, subBlockId, isConnecting }: ScheduleConfigProps) { +export function ScheduleConfig({ + blockId, + subBlockId, + isConnecting, + isPreview = false, + value: propValue +}: ScheduleConfigProps) { const [error, setError] = useState(null) const [scheduleId, setScheduleId] = useState(null) const [nextRunAt, setNextRunAt] = useState(null) @@ -42,12 +50,24 @@ export function ScheduleConfig({ blockId, subBlockId, isConnecting }: ScheduleCo const setScheduleStatus = useWorkflowStore((state) => state.setScheduleStatus) // Get the schedule type from the block state - const [scheduleType] = useSubBlockValue(blockId, 'scheduleType') + const [scheduleType] = useSubBlockValue(blockId, 'scheduleType', false, isPreview, propValue?.scheduleType) // Get the startWorkflow value to determine if scheduling is enabled // and expose the setter so we can update it - const [startWorkflow, setStartWorkflow] = useSubBlockValue(blockId, 'startWorkflow') - const _isScheduleEnabled = startWorkflow === 'schedule' + const [startWorkflow, setStartWorkflow] = useSubBlockValue(blockId, 'startWorkflow', false, isPreview, propValue?.startWorkflow) + const isScheduleEnabled = startWorkflow === 'schedule' + + // Log when in preview mode to verify it's working + useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] ScheduleConfig for ${blockId}`, { + isPreview, + propValue, + scheduleType, + startWorkflow + }); + } + }, [isPreview, propValue, scheduleType, startWorkflow, blockId]); // Function to check if schedule exists in the database const checkSchedule = async () => { diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/slider-input.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/slider-input.tsx index af943b6d41..9047738482 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/slider-input.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/slider-input.tsx @@ -1,7 +1,10 @@ import { useEffect, useMemo } from 'react' import { Slider } from '@/components/ui/slider' +import { createLogger } from '@/lib/logs/console-logger' import { useSubBlockValue } from '../hooks/use-sub-block-value' +const logger = createLogger('SliderInput') + interface SliderInputProps { min?: number max?: number @@ -10,6 +13,8 @@ interface SliderInputProps { subBlockId: string step?: number integer?: boolean + isPreview?: boolean + value?: number } export function SliderInput({ @@ -20,8 +25,21 @@ export function SliderInput({ subBlockId, step = 0.1, integer = false, + isPreview = false, + value: propValue }: SliderInputProps) { - const [value, setValue] = useSubBlockValue(blockId, subBlockId) + const [value, setValue] = useSubBlockValue(blockId, subBlockId, false, isPreview, propValue) + + // Log when in preview mode to verify it's working + useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] SliderInput for ${blockId}:${subBlockId}`, { + isPreview, + propValue, + value + }); + } + }, [isPreview, propValue, value, blockId, subBlockId]); // Clamp the value within bounds while preserving relative position when possible const normalizedValue = useMemo(() => { diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/starter/input-format.tsx index f1f5a9e61b..740b59cb9e 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/starter/input-format.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/starter/input-format.tsx @@ -1,3 +1,4 @@ +import { useEffect } from 'react' import { ChevronDown, Plus, Trash } from 'lucide-react' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' @@ -10,8 +11,11 @@ import { import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { cn } from '@/lib/utils' +import { createLogger } from '@/lib/logs/console-logger' import { useSubBlockValue } from '../../hooks/use-sub-block-value' +const logger = createLogger('InputFormat') + interface InputField { id: string name: string @@ -22,6 +26,8 @@ interface InputField { interface InputFormatProps { blockId: string subBlockId: string + isPreview?: boolean + value?: InputField[] } // Default values @@ -32,11 +38,22 @@ const DEFAULT_FIELD: InputField = { collapsed: true, } -export function InputFormat({ blockId, subBlockId }: InputFormatProps) { +export function InputFormat({ blockId, subBlockId, isPreview = false, value: propValue }: InputFormatProps) { // State hooks - const [value, setValue] = useSubBlockValue(blockId, subBlockId) + const [value, setValue] = useSubBlockValue(blockId, subBlockId, false, isPreview, propValue) const fields = value || [DEFAULT_FIELD] + // Log when in preview mode to verify it's working + useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] InputFormat for ${blockId}:${subBlockId}`, { + isPreview, + propValue, + value + }); + } + }, [isPreview, propValue, value, blockId, subBlockId]); + // Field operations const addField = () => { const newField: InputField = { diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/switch.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/switch.tsx index 0f7c5725d7..3120bef461 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/switch.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/switch.tsx @@ -1,15 +1,38 @@ +import { useEffect } from 'react' import { Label } from '@/components/ui/label' import { Switch as UISwitch } from '@/components/ui/switch' +import { createLogger } from '@/lib/logs/console-logger' import { useSubBlockValue } from '../hooks/use-sub-block-value' +const logger = createLogger('Switch') + interface SwitchProps { blockId: string subBlockId: string title: string + isPreview?: boolean + value?: boolean } -export function Switch({ blockId, subBlockId, title }: SwitchProps) { - const [value, setValue] = useSubBlockValue(blockId, subBlockId) +export function Switch({ + blockId, + subBlockId, + title, + isPreview = false, + value: propValue +}: SwitchProps) { + const [value, setValue] = useSubBlockValue(blockId, subBlockId, false, isPreview, propValue) + + // Log when in preview mode to verify it's working + useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] Switch for ${blockId}:${subBlockId}`, { + isPreview, + propValue, + value + }); + } + }, [isPreview, propValue, value, blockId, subBlockId]); return (
diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/table.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/table.tsx index 75f16054e5..f28ea47a2b 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/table.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/table.tsx @@ -5,13 +5,18 @@ import { checkEnvVarTrigger, EnvVarDropdown } from '@/components/ui/env-var-drop import { formatDisplayText } from '@/components/ui/formatted-text' import { Input } from '@/components/ui/input' import { checkTagTrigger, TagDropdown } from '@/components/ui/tag-dropdown' +import { createLogger } from '@/lib/logs/console-logger' import { cn } from '@/lib/utils' import { useSubBlockValue } from '../hooks/use-sub-block-value' +const logger = createLogger('Table') + interface TableProps { columns: string[] blockId: string subBlockId: string + isPreview?: boolean + value?: TableRow[] } interface TableRow { @@ -19,8 +24,19 @@ interface TableRow { cells: Record } -export function Table({ columns, blockId, subBlockId }: TableProps) { - const [value, setValue] = useSubBlockValue(blockId, subBlockId) +export function Table({ columns, blockId, subBlockId, isPreview = false, value: propValue }: TableProps) { + const [value, setValue] = useSubBlockValue(blockId, subBlockId, false, isPreview, propValue) + + // Log when in preview mode to verify it's working + useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] Table for ${blockId}:${subBlockId}`, { + isPreview, + propValue, + value + }); + } + }, [isPreview, propValue, value, blockId, subBlockId]); // Create refs for input elements const inputRefs = useRef>(new Map()) diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/time-input.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/time-input.tsx index de0b8e70e4..4c61fb2dff 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/time-input.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/time-input.tsx @@ -5,20 +5,43 @@ import { Clock } from 'lucide-react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' +import { createLogger } from '@/lib/logs/console-logger' import { cn } from '@/lib/utils' import { useSubBlockValue } from '../hooks/use-sub-block-value' +const logger = createLogger('TimeInput') + interface TimeInputProps { blockId: string subBlockId: string placeholder?: string className?: string + isPreview?: boolean + value?: string } -export function TimeInput({ blockId, subBlockId, placeholder, className }: TimeInputProps) { - const [value, setValue] = useSubBlockValue(blockId, subBlockId, true) +export function TimeInput({ + blockId, + subBlockId, + placeholder, + className, + isPreview = false, + value: propValue +}: TimeInputProps) { + const [value, setValue] = useSubBlockValue(blockId, subBlockId, true, isPreview, propValue) const [isOpen, setIsOpen] = React.useState(false) + // Log when in preview mode to verify it's working + React.useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] TimeInput for ${blockId}:${subBlockId}`, { + isPreview, + propValue, + value + }); + } + }, [isPreview, propValue, value, blockId, subBlockId]); + // Convert 24h time string to display format (12h with AM/PM) const formatDisplayTime = (time: string) => { if (!time) return '' diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/tool-input/tool-input.tsx index 78bce6d2f8..be08186576 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/tool-input/tool-input.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/tool-input/tool-input.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from 'react' +import { useCallback, useEffect, useState } from 'react' import { PlusIcon, WrenchIcon, XIcon } from 'lucide-react' import { Button } from '@/components/ui/button' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' @@ -31,6 +31,8 @@ import { ToolCommand } from './components/tool-command/tool-command' interface ToolInputProps { blockId: string subBlockId: string + isPreview?: boolean + value?: StoredTool[] } interface StoredTool { @@ -270,8 +272,8 @@ const shouldBePasswordField = (blockType: string, paramId: string): boolean => { return false } -export function ToolInput({ blockId, subBlockId }: ToolInputProps) { - const [value, setValue] = useSubBlockValue(blockId, subBlockId) +export function ToolInput({ blockId, subBlockId, isPreview = false, value: propValue }: ToolInputProps) { + const [value, setValue] = useSubBlockValue(blockId, subBlockId, false, isPreview, propValue) const [open, setOpen] = useState(false) const [customToolModalOpen, setCustomToolModalOpen] = useState(false) const [editingToolIndex, setEditingToolIndex] = useState(null) diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/webhook.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/webhook.tsx index 29da007cee..0c28abe665 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/webhook.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/webhook.tsx @@ -287,9 +287,17 @@ interface WebhookConfigProps { blockId: string subBlockId?: string isConnecting: boolean + isPreview?: boolean + value?: any } -export function WebhookConfig({ blockId, subBlockId, isConnecting }: WebhookConfigProps) { +export function WebhookConfig({ + blockId, + subBlockId, + isConnecting, + isPreview = false, + value: propValue +}: WebhookConfigProps) { const [isModalOpen, setIsModalOpen] = useState(false) const [isSaving, setIsSaving] = useState(false) const [isDeleting, setIsDeleting] = useState(false) @@ -304,21 +312,34 @@ export function WebhookConfig({ blockId, subBlockId, isConnecting }: WebhookConf const setWebhookStatus = useWorkflowStore((state) => state.setWebhookStatus) // Get the webhook provider from the block state - const [webhookProvider, setWebhookProvider] = useSubBlockValue(blockId, 'webhookProvider') + const [webhookProvider, setWebhookProvider] = useSubBlockValue(blockId, 'webhookProvider', false, isPreview, propValue?.webhookProvider) // Store the webhook path - const [webhookPath, setWebhookPath] = useSubBlockValue(blockId, 'webhookPath') + const [webhookPath, setWebhookPath] = useSubBlockValue(blockId, 'webhookPath', false, isPreview, propValue?.webhookPath) // Store provider-specific configuration - const [_providerConfig, setProviderConfig] = useSubBlockValue(blockId, 'providerConfig') + const [providerConfig, setProviderConfig] = useSubBlockValue(blockId, 'providerConfig', false, isPreview, propValue?.providerConfig) + // Log when in preview mode to verify it's working + useEffect(() => { + if (isPreview) { + logger.info(`[PREVIEW] WebhookConfig for ${blockId}`, { + isPreview, + propValue, + webhookProvider, + webhookPath, + providerConfig + }); + } + }, [isPreview, propValue, webhookProvider, webhookPath, providerConfig, blockId]); + // Reset provider config when provider changes useEffect(() => { - if (webhookProvider) { + if (webhookProvider && !isPreview) { // Reset the provider config when the provider changes setProviderConfig({}) } - }, [webhookProvider, setProviderConfig]) + }, [webhookProvider, setProviderConfig, isPreview]) // Store the actual provider from the database const [actualProvider, setActualProvider] = useState(null) diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/hooks/use-sub-block-value.ts b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/hooks/use-sub-block-value.ts index 7d230d9a52..98b3e1a6e6 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/hooks/use-sub-block-value.ts +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/hooks/use-sub-block-value.ts @@ -1,10 +1,7 @@ import { useCallback, useEffect, useRef } from 'react' import { isEqual } from 'lodash' -<<<<<<< HEAD import { getProviderFromModel } from '@/providers/utils' -======= import { createLogger } from '@/lib/logs/console-logger' ->>>>>>> 6f129dfc (fix: subblock rerender fixed) import { useGeneralStore } from '@/stores/settings/general/store' import { useSubBlockStore } from '@/stores/workflows/subblock/store' import { useWorkflowStore } from '@/stores/workflows/workflow/store' @@ -162,13 +159,9 @@ function storeApiKeyValue( export function useSubBlockValue( blockId: string, subBlockId: string, -<<<<<<< HEAD - triggerWorkflowUpdate = false -======= triggerWorkflowUpdate: boolean = false, isPreview: boolean = false, directValue?: T ->>>>>>> 6f129dfc (fix: subblock rerender fixed) ): readonly [T | null, (value: T) => void] { const blockType = useWorkflowStore( useCallback((state) => state.blocks?.[blockId]?.type, [blockId]) diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx index 5c84fa013c..9ad0b09c4d 100644 --- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx +++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx @@ -2,11 +2,6 @@ import { useEffect } from 'react' import { Info } from 'lucide-react' import { Label } from '@/components/ui/label' import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' -<<<<<<< HEAD -======= -import { useWorkflowStore } from '@/stores/workflows/workflow/store' -import { createLogger } from '@/lib/logs/console-logger' ->>>>>>> 6f129dfc (fix: subblock rerender fixed) import { getBlock } from '@/blocks/index' import type { SubBlockConfig } from '@/blocks/types' import { useSubBlockStore } from '@/stores/workflows/subblock/store' @@ -34,8 +29,6 @@ import { TimeInput } from './components/time-input' import { ToolInput } from './components/tool-input/tool-input' import { WebhookConfig } from './components/webhook/webhook' -// Add logger -const logger = createLogger('SubBlock') interface SubBlockProps { blockId: string @@ -52,18 +45,7 @@ export function SubBlock({ isPreview = false, previewValue = undefined }: SubBlockProps) { - // Add debugging logs to trace parent context - useEffect(() => { - logger.info(`[TRACE] SubBlock ${config.id} for block ${blockId}`, { - blockId, - subBlockId: config.id, - subBlockTitle: config.title, - isPreview: isPreview, - previewValue: previewValue, - usingGlobalStore: !isPreview - }); - }, [blockId, config.id, config.title, isPreview, previewValue]); - + const handleMouseDown = (e: React.MouseEvent) => { e.stopPropagation() } @@ -131,10 +113,18 @@ export function SubBlock({ defaultValue={(config.min || 0) + ((config.max || 100) - (config.min || 0)) / 2} step={config.step} integer={config.integer} + isPreview={isPreview} + value={directValue} /> ) case 'table': - return + return
case 'code': return ( ) case 'switch': - return + return case 'tool-input': - return + return case 'checkbox-list': return ( ) case 'condition-input': return ( - + ) case 'eval-input': - return + return case 'date-input': return ( - + ) case 'time-input': return ( - + ) case 'file-upload': return ( @@ -182,20 +210,34 @@ export function SubBlock({ acceptedTypes={config.acceptedTypes || '*'} multiple={config.multiple === true} maxSize={config.maxSize} + isPreview={isPreview} + value={directValue} /> ) case 'webhook-config': return ( - + ) case 'schedule-config': return ( - + ) case 'oauth-input': return ( { // Use the workflow store to update the value const event = new CustomEvent('update-subblock-value', { @@ -214,15 +256,36 @@ export function SubBlock({ /> ) case 'file-selector': - return + return case 'project-selector': - return - case 'channel-selector': - return + return case 'folder-selector': - return + return case 'input-format': - return + return default: return
Unknown input type: {config.type}
}