Skip to content

Conversation

@aadamgough
Copy link
Collaborator

Summary

Expanded live state for more visibility.

Type of Change

  • New feature

Testing

Tested manually

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)
@vercel
Copy link

vercel bot commented Dec 30, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Review Updated (UTC)
docs Skipped Skipped Dec 30, 2025 3:40am
@greptile-apps
Copy link
Contributor

greptile-apps bot commented Dec 30, 2025

Greptile Summary

This PR adds an expanded preview feature to the deploy modal, allowing users to view their live or selected deployment workflow in a larger full-screen modal.

  • Added expand button with Maximize2 icon to the workflow preview in the deploy modal
  • Created ExpandedWorkflowPreview component that displays the workflow in a 90vh modal with interactive node selection
  • Created PinnedSubBlocks component that shows block configuration details when a node is clicked, with support for expandable values and conditional field visibility
  • Proper barrel exports added via index files for clean imports
  • State management correctly resets selectedBlockId when closing the modal

Confidence Score: 5/5

  • This PR is safe to merge - straightforward UI enhancement with no security concerns or breaking changes.
  • Clean implementation of a new UI feature. Follows existing patterns in the codebase, proper TypeScript types used throughout, no logical errors detected, and state management is handled correctly.
  • No files require special attention.

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx Added expand button to workflow preview that opens ExpandedWorkflowPreview modal; properly handles conditional rendering and state management.
apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/components/expanded-preview/expanded-preview.tsx New component implementing full-screen workflow preview modal with click-to-select block functionality and side panel for block details.
apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/components/pinned-sub-blocks/pinned-sub-blocks.tsx New component showing block configuration details in a floating panel with expandable values and conditional field visibility logic.

Sequence Diagram

sequenceDiagram
    participant U as User
    participant G as GeneralDeploy
    participant EP as ExpandedWorkflowPreview
    participant WP as WorkflowPreview
    participant PS as PinnedSubBlocks

    U->>G: Click expand button
    G->>G: setShowExpandedPreview(true)
    G->>EP: Render with workflowState
    EP->>WP: Render workflow canvas
    U->>WP: Click on block node
    WP->>EP: onNodeClick(blockId)
    EP->>EP: setSelectedBlockId(blockId)
    EP->>PS: Render with selected block
    PS->>PS: getBlock(block.type)
    PS->>PS: evaluateCondition for visible subBlocks
    PS-->>U: Display block configuration
    U->>PS: Click close button
    PS->>EP: onClose()
    EP->>EP: setSelectedBlockId(null)
    U->>EP: Close modal
    EP->>G: onClose()
    G->>G: setShowExpandedPreview(false)
Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants