fix(workflow): address code preview review feedback

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx

@@ -289,6 +289,9 @@ const areSubBlockRowPropsEqual = (
   const prevValue = subBlockId ? prevProps.allSubBlockValues?.[subBlockId]?.value : undefined
   const nextValue = subBlockId ? nextProps.allSubBlockValues?.[subBlockId]?.value : undefined
   const valueEqual = prevValue === nextValue || isEqual(prevValue, nextValue)
+  const codeLanguageEqual =
+    prevProps.subBlock?.type !== 'code' ||
+    prevProps.allSubBlockValues?.language?.value === nextProps.allSubBlockValues?.language?.value
 
   return (
     prevProps.title === nextProps.title &&
@@ -299,6 +302,7 @@ const areSubBlockRowPropsEqual = (
     prevProps.workflowId === nextProps.workflowId &&
     prevProps.blockId === nextProps.blockId &&
     valueEqual &&
+    codeLanguageEqual &&
     prevProps.displayAdvancedOptions === nextProps.displayAdvancedOptions &&
     prevProps.canonicalIndex === nextProps.canonicalIndex &&
     prevProps.canonicalModeOverrides === nextProps.canonicalModeOverrides &&

apps/sim/blocks/blocks/api.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { ApiBlock } from '@/blocks/blocks/api'
 
-describe('API block redirect policy', () => {
+describe('API block', () => {
   it('uses a versioned safe default without changing legacy blocks', () => {
     const version = ApiBlock.subBlocks.find((subBlock) => subBlock.id === 'redirectPolicyVersion')
     const sendCredentials = ApiBlock.subBlocks.find(
@@ -14,4 +14,11 @@ describe('API block redirect policy', () => {
     expect(sendCredentials?.mode).toBe('advanced')
     expect(sendCredentials?.defaultValue).toBe(true)
   })
+
+  it('marks the request body as JSON for code previews', () => {
+    const body = ApiBlock.subBlocks.find((subBlock) => subBlock.id === 'body')
+
+    expect(body?.type).toBe('code')
+    expect(body?.language).toBe('json')
+  })
 })

apps/sim/blocks/blocks/api.ts

@@ -66,6 +66,7 @@ export const ApiBlock: BlockConfig<RequestResponse> = {
       id: 'body',
       title: 'Body',
       type: 'code',
+      language: 'json',
       placeholder: 'Enter JSON...',
       wandConfig: {
         enabled: true,

packages/emcn/src/components/popover/popover.tsx

@@ -536,7 +536,11 @@ const PopoverContent = React.forwardRef<
     // and the component's custom navigation state.
 
     const effectiveMaxWidth =
-      maxWidth ?? (appearance === 'tooltip' ? TOOLTIP_MAX_WIDTH_PX : undefined)
+      maxWidth !== undefined
+        ? `${maxWidth}px`
+        : appearance === 'tooltip'
+          ? `min(${TOOLTIP_MAX_WIDTH_PX}px, calc(100vw - 2rem))`
+          : undefined
     const hasUserWidthConstraint =
       effectiveMaxWidth !== undefined ||
       minWidth !== undefined ||
@@ -607,8 +611,7 @@ const PopoverContent = React.forwardRef<
         )}
         style={{
           maxHeight: `${maxHeight || 400}px`,
-          maxWidth:
-            effectiveMaxWidth !== undefined ? `${effectiveMaxWidth}px` : 'calc(100vw - 16px)',
+          maxWidth: effectiveMaxWidth ?? 'calc(100vw - 16px)',
           minWidth:
             minWidth !== undefined
               ? `${minWidth}px`

packages/workflow-renderer/src/lib/code-hover-card.tsx

@@ -1,10 +1,12 @@
 'use client'
 
 import {
+  type KeyboardEvent as ReactKeyboardEvent,
   type ReactNode,
   type PointerEvent as ReactPointerEvent,
   useCallback,
   useEffect,
+  useId,
   useRef,
   useState,
 } from 'react'
@@ -25,6 +27,8 @@ interface CodeHoverCardProps {
 /** Interactive, two-axis-scrollable source preview anchored to a canvas code chip. */
 export function CodeHoverCard({ preview, className, children }: CodeHoverCardProps) {
   const [open, setOpen] = useState(false)
+  const contentId = useId()
+  const triggerRef = useRef<HTMLSpanElement>(null)
   const openTimerRef = useRef<number | null>(null)
   const closeTimerRef = useRef<number | null>(null)
 
@@ -59,6 +63,13 @@ export function CodeHoverCard({ preview, className, children }: CodeHoverCardPro
     }, delay)
   }
 
+  const openImmediatelyIfClipped = (trigger: HTMLSpanElement) => {
+    if (!isTextClipped(trigger)) return
+    clearOpenTimer()
+    clearCloseTimer()
+    setOpen(true)
+  }
+
   const handleOpenChange = useCallback(
     (nextOpen: boolean) => {
       if (!nextOpen) {
@@ -78,19 +89,73 @@ export function CodeHoverCard({ preview, className, children }: CodeHoverCardPro
     [clearCloseTimer, clearOpenTimer]
   )
 
+  const handleTriggerPointerDown = (event: ReactPointerEvent<HTMLSpanElement>) => {
+    event.preventDefault()
+    if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+      event.stopPropagation()
+      if (open) {
+        handleOpenChange(false)
+      } else {
+        openImmediatelyIfClipped(event.currentTarget)
+      }
+      return
+    }
+    handleOpenChange(false)
+  }
+
+  const handleTriggerKeyDown = (event: ReactKeyboardEvent<HTMLSpanElement>) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation()
+      handleOpenChange(false)
+      return
+    }
+    if (event.key !== 'Enter' && event.key !== ' ') return
+
+    event.preventDefault()
+    event.stopPropagation()
+    if (open) {
+      handleOpenChange(false)
+    } else {
+      openImmediatelyIfClipped(event.currentTarget)
+    }
+  }
+
+  const handleContentKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'Escape') return
+    event.stopPropagation()
+    handleOpenChange(false)
+    triggerRef.current?.focus()
+  }
+
   return (
     <Popover open={open} onOpenChange={handleOpenChange}>
       <PopoverAnchor asChild>
         <span
+          ref={triggerRef}
+          role='button'
+          tabIndex={0}
+          aria-haspopup='dialog'
+          aria-expanded={open}
+          aria-controls={open ? contentId : undefined}
           className={className}
           onPointerEnter={handleTriggerPointerEnter}
-          onPointerLeave={() => scheduleClose(TRIGGER_EXIT_GRACE_MS)}
-          onPointerDown={() => handleOpenChange(false)}
+          onPointerLeave={() => {
+            if (document.activeElement !== triggerRef.current) {
+              scheduleClose(TRIGGER_EXIT_GRACE_MS)
+            }
+          }}
+          onPointerDown={handleTriggerPointerDown}
+          onFocus={(event) => openImmediatelyIfClipped(event.currentTarget)}
+          onBlur={() => scheduleClose(TRIGGER_EXIT_GRACE_MS)}
+          onKeyDown={handleTriggerKeyDown}
         >
           {children}
         </span>
       </PopoverAnchor>
       <PopoverContent
+        id={contentId}
+        role='dialog'
+        tabIndex={0}
         aria-label='Code preview'
         data-code-hover-card=''
         align='start'
@@ -101,6 +166,9 @@ export function CodeHoverCard({ preview, className, children }: CodeHoverCardPro
         maxHeight={CODE_TOOLTIP_MAX_HEIGHT_PX}
         onPointerEnter={clearCloseTimer}
         onPointerLeave={() => scheduleClose(CONTENT_EXIT_GRACE_MS)}
+        onFocus={clearCloseTimer}
+        onBlur={() => scheduleClose(CONTENT_EXIT_GRACE_MS)}
+        onKeyDown={handleContentKeyDown}
         className='nodrag nowheel overflow-hidden overscroll-contain p-0'
       >
         <Code.Viewer

packages/workflow-renderer/src/lib/overflow-span-mount.test.tsx

@@ -68,6 +68,7 @@ describe('OverflowSpan code preview', () => {
     const preview = document.querySelector('[data-code-hover-card]')
     expect(preview).toHaveTextContent('line 20')
     expect(preview).toHaveClass('w-fit', 'max-w-[min(16rem,calc(100vw-2rem))]', 'shadow-sm')
+    expect(preview).toHaveStyle({ maxWidth: 'min(256px, calc(100vw - 2rem))' })
     expect(preview?.querySelector('.overflow-x-auto')).toHaveClass('overflow-y-auto')
     expect(preview?.querySelector('.tabular-nums')).toBeNull()
     expect(preview?.querySelector('pre')).toHaveClass('px-2', 'py-1.5', 'text-caption', 'leading-5')
@@ -119,4 +120,67 @@ describe('OverflowSpan code preview', () => {
     })
     expect(document.querySelector('[data-code-hover-card]')).toBeNull()
   })
+
+  it('opens from the keyboard and keeps the preview available while it is focused', () => {
+    act(() => {
+      root?.render(
+        <OverflowSpan
+          value='const value = 1'
+          className='truncate'
+          codePreview={{ code: 'const value = 1', language: 'javascript' }}
+        />
+      )
+    })
+
+    const trigger = host?.querySelector<HTMLElement>('span[role="button"]')
+    if (!trigger) throw new Error('Overflow trigger did not render')
+    Object.defineProperties(trigger, {
+      clientWidth: { configurable: true, value: 50 },
+      scrollWidth: { configurable: true, value: 200 },
+    })
+
+    act(() => trigger.focus())
+    const preview = document.querySelector<HTMLElement>('[data-code-hover-card]')
+    expect(preview).not.toBeNull()
+    expect(trigger).toHaveAttribute('aria-expanded', 'true')
+
+    act(() => preview?.focus())
+    act(() => vi.advanceTimersByTime(600))
+    expect(document.querySelector('[data-code-hover-card]')).not.toBeNull()
+
+    act(() =>
+      preview?.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Escape' }))
+    )
+    expect(document.querySelector('[data-code-hover-card]')).toBeNull()
+    expect(trigger).toHaveFocus()
+  })
+
+  it('toggles the clipped preview on touch', () => {
+    act(() => {
+      root?.render(
+        <OverflowSpan
+          value='const value = 1'
+          className='truncate'
+          codePreview={{ code: 'const value = 1', language: 'javascript' }}
+        />
+      )
+    })
+
+    const trigger = host?.querySelector<HTMLElement>('span[role="button"]')
+    if (!trigger) throw new Error('Overflow trigger did not render')
+    Object.defineProperties(trigger, {
+      clientWidth: { configurable: true, value: 50 },
+      scrollWidth: { configurable: true, value: 200 },
+    })
+    const pointerDown = () => {
+      const event = new MouseEvent('pointerdown', { bubbles: true, cancelable: true })
+      Object.defineProperty(event, 'pointerType', { value: 'touch' })
+      trigger.dispatchEvent(event)
+    }
+
+    act(pointerDown)
+    expect(document.querySelector('[data-code-hover-card]')).not.toBeNull()
+    act(pointerDown)
+    expect(document.querySelector('[data-code-hover-card]')).toBeNull()
+  })
 })