improvement(preview): added trigger mode context for deploy preview (#3177)

* improvement(preview): added trigger mode context for deploy preview

* use existing helper

* enhance disabled mode for subblocks

* update

* update all subblocks to allow scrolling in read only mode

* updated short and long input to match others, reverted triggerutils change
This commit is contained in:
Waleed
2026-02-09 20:32:30 -08:00
committed by GitHub
parent 8b4b3af120
commit e321f883b0
10 changed files with 52 additions and 15 deletions

View File

@@ -324,7 +324,10 @@ export function DocumentTagEntry({
ref={(el) => {
if (el) overlayRefs.current[cellKey] = el
}}
className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
className={cn(
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
!isReadOnly && 'pointer-events-none'
)}
>
<div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
{formatDisplayText(

View File

@@ -226,7 +226,10 @@ export function EvalInput({
ref={(el) => {
if (el) descriptionOverlayRefs.current[metric.id] = el
}}
className='pointer-events-none absolute inset-0 overflow-auto bg-transparent px-[8px] py-[8px] font-medium font-sans text-[#eeeeee] text-sm'
className={cn(
'absolute inset-0 overflow-auto bg-transparent px-[8px] py-[8px] font-medium font-sans text-[#eeeeee] text-sm',
!(isPreview || disabled) && 'pointer-events-none'
)}
>
<div className='whitespace-pre-wrap'>
{formatDisplayText(metric.description || '', {

View File

@@ -273,7 +273,10 @@ function InputMappingField({
ref={(el) => {
if (el) overlayRefs.current.set(fieldId, el)
}}
className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
className={cn(
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
!disabled && 'pointer-events-none'
)}
style={{ overflowX: 'auto' }}
>
<div

View File

@@ -312,7 +312,10 @@ export function KnowledgeTagFilters({
ref={(el) => {
if (el) overlayRefs.current[cellKey] = el
}}
className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
className={cn(
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
!isReadOnly && 'pointer-events-none'
)}
>
<div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
{formatDisplayText(

View File

@@ -353,8 +353,9 @@ export function LongInput({
<div
ref={overlayRef}
className={cn(
'pointer-events-none absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-[8px] py-[8px] font-medium font-sans text-sm',
(isPreview || disabled) && 'opacity-50'
'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-[8px] py-[8px] font-medium font-sans text-sm',
(isPreview || disabled) && 'opacity-50',
!(isPreview || disabled) && 'pointer-events-none'
)}
style={{
fontFamily: 'inherit',

View File

@@ -719,7 +719,10 @@ export function MessagesInput({
ref={(el) => {
overlayRefs.current[fieldId] = el
}}
className='pointer-events-none absolute top-0 left-0 z-[1] m-0 box-border w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent px-[8px] py-[8px] font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.5] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
className={cn(
'absolute top-0 left-0 z-[1] m-0 box-border w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent px-[8px] py-[8px] font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.5] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
!(isPreview || disabled) && 'pointer-events-none'
)}
>
{formatDisplayText(message.content, {
accessiblePrefixes,

View File

@@ -372,8 +372,9 @@ export const ShortInput = memo(function ShortInput({
<div
ref={overlayRef}
className={cn(
'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] pr-3 font-medium font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
(isPreview || disabled) && 'opacity-50'
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] pr-3 font-medium font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
(isPreview || disabled) && 'opacity-50',
!(isPreview || disabled) && 'pointer-events-none'
)}
>
<div className='min-w-fit whitespace-pre'>{formattedText}</div>

View File

@@ -269,7 +269,10 @@ export function FieldFormat({
ref={(el) => {
if (el) nameOverlayRefs.current[field.id] = el
}}
className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
className={cn(
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
!isReadOnly && 'pointer-events-none'
)}
style={{ scrollbarWidth: 'none' }}
>
<div
@@ -514,7 +517,10 @@ export function FieldFormat({
ref={(el) => {
if (el) overlayRefs.current[field.id] = el
}}
className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
className={cn(
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
!isReadOnly && 'pointer-events-none'
)}
style={{ scrollbarWidth: 'none' }}
>
<div

View File

@@ -452,7 +452,10 @@ export function VariablesInput({
ref={(el) => {
if (el) overlayRefs.current[assignment.id] = el
}}
className='pointer-events-none absolute inset-0 flex items-start overflow-auto bg-transparent px-3 py-2 font-mono text-sm'
className={cn(
'absolute inset-0 flex items-start overflow-auto bg-transparent px-3 py-2 font-mono text-sm',
!isReadOnly && 'pointer-events-none'
)}
style={{ scrollbarWidth: 'none' }}
>
<div className='w-full whitespace-pre-wrap break-words'>
@@ -514,7 +517,10 @@ export function VariablesInput({
ref={(el) => {
if (el) overlayRefs.current[assignment.id] = el
}}
className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
className={cn(
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
!isReadOnly && 'pointer-events-none'
)}
style={{ scrollbarWidth: 'none' }}
>
<div

View File

@@ -43,7 +43,7 @@ import { PreviewContextMenu } from '@/app/workspace/[workspaceId]/w/components/p
import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow'
import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
import { getBlock } from '@/blocks'
import type { BlockConfig, BlockIcon, SubBlockConfig } from '@/blocks/types'
import type { BlockConfig, BlockIcon, SubBlockConfig, SubBlockType } from '@/blocks/types'
import { normalizeName } from '@/executor/constants'
import { navigatePath } from '@/executor/variables/resolvers/reference'
import { useWorkflowState } from '@/hooks/queries/workflows'
@@ -1140,9 +1140,17 @@ function PreviewEditorContent({
(block.advancedMode ?? false) ||
hasAdvancedValues(blockConfig.subBlocks, rawValues, canonicalIndex)
const isPureTriggerBlock = blockConfig.triggers?.enabled && blockConfig.category === 'triggers'
const effectiveTrigger = block.triggerMode === true
const visibleSubBlocks = blockConfig.subBlocks.filter((subBlock) => {
if (subBlock.hidden || subBlock.hideFromPreview) return false
if (subBlock.mode === 'trigger' && blockConfig.category !== 'triggers') return false
if (subBlock.type === ('trigger-config' as SubBlockType)) {
return effectiveTrigger || isPureTriggerBlock
}
if (subBlock.mode === 'trigger' && !effectiveTrigger) return false
if (effectiveTrigger && subBlock.mode !== 'trigger') return false
if (!isSubBlockFeatureEnabled(subBlock)) return false
if (
!isSubBlockVisibleForMode(