{renderLabel(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index 8b027c4c74a..2ff99fef801 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -43,6 +43,7 @@ import {
import { DELETED_WORKFLOW_LABEL } from '@/lib/workflows/workflow-labels'
import { SubBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components'
import { PreviewContextMenu } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-context-menu'
+import { READONLY_PREVIEW_STYLES } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles'
import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow'
import { getBlock } from '@/blocks'
import { BlockTile } from '@/blocks/block-tile'
@@ -54,31 +55,6 @@ import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
import { useContextMenu } from '@/hooks/use-context-menu'
import type { BlockState, Loop, Parallel, WorkflowState } from '@/stores/workflows/workflow/types'
-/**
- * CSS override to show full opacity and prevent interaction in readonly preview mode.
- * Extracted to avoid duplicating the style block in multiple places.
- */
-const READONLY_PREVIEW_STYLES = `
- .readonly-preview,
- .readonly-preview * {
- cursor: default !important;
- }
- .readonly-preview [disabled],
- .readonly-preview [data-disabled],
- .readonly-preview input,
- .readonly-preview textarea,
- .readonly-preview [role="combobox"],
- .readonly-preview [role="slider"],
- .readonly-preview [role="switch"],
- .readonly-preview [role="checkbox"] {
- opacity: 1 !important;
- pointer-events: none;
- }
- .readonly-preview .opacity-50 {
- opacity: 1 !important;
- }
-`
-
/**
* Format a value for display as JSON string
*/
@@ -606,7 +582,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
return (
{/* Type Selection - matches SubflowEditor */}
-
+
@@ -629,7 +605,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
{isCountMode ? (
-
+
{index < visibleSubBlocks.length - 1 && (
({ useParams: () => ({ workspaceId: 'workspace-1' }) }))
+vi.mock('@/hooks/use-webhook-management', () => ({
+ useWebhookManagement: () => ({ webhookUrl: null }),
+}))
+vi.mock(
+ '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value',
+ () => ({ useSubBlockValue: () => [undefined, vi.fn()] })
+)
+
+import { SubBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block'
+import { READONLY_PREVIEW_STYLES } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-readonly-styles'
+import type { SubBlockConfig } from '@/blocks/types'
+
+const config: SubBlockConfig = { id: 'enabled', type: 'switch', title: 'Enabled' }
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+ ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+ container = document.createElement('div')
+ document.body.appendChild(container)
+ root = createRoot(container)
+})
+
+afterEach(() => {
+ act(() => root.unmount())
+ container.remove()
+})
+
+describe('workflow preview read-only appearance', () => {
+ it('shows a preview value at full opacity while retaining the disabled interaction state', () => {
+ act(() =>
+ root.render(
+ <>
+
+
+
+
+
+
+
+
+
+
+
+