improvement(ux): optimistic updates for envvars, custom tools, folder operations, workflow deletions. shared hook for connection tags & tag dropdown, fix for triggers not re-rendering on trigger selected

[waleedlatif1]

Summary

• optimistic updates for envvars, custom tools, folder operations, workflow deletions
• shared hook for connection tags & tag dropdown to get available blocks
• fix for triggers not re-rendering on trigger selectedTriggerId

Type of Change

• Bug fix
• Other: Performance

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]

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

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 8, 2025 11:23pm

[greptile-apps]

Greptile Overview

Greptile Summary

This PR implements optimistic UI updates across multiple stores (environment variables, custom tools, folders, workflows) and introduces a shared useBlockOutputFields hook to eliminate code duplication between connection-blocks and tag-dropdown components.

Key Changes

• Optimistic Updates: Added withOptimisticUpdate helper in lib/utils.ts that standardizes the pattern of immediate UI updates with automatic rollback on API errors. This pattern is now used in:

  • Environment variables store (saveEnvironmentVariables)
  • Custom tools store (updateTool, deleteTool)
  • Folders store (updateFolderAPI, deleteFolder)
  • Workflows registry store (removeWorkflow, updateWorkflow)
  • General settings store (all toggle operations)

• Shared Hook for Block Outputs: Extracted block output field logic into useBlockOutputFields hook that both connection-blocks.tsx and tag-dropdown.tsx now use via getBlockOutputPaths, ensuring consistent behavior across components

• Trigger Mode Fix: Fixed use-editor-subblock-layout.ts logic to correctly filter blocks when in trigger mode - now properly shows only trigger mode blocks and handles conditional visibility correctly

Impact

These changes significantly improve perceived performance by providing instant UI feedback while API calls complete in the background. The shared hook eliminates ~140 lines of duplicate code and ensures consistency between the connection blocks panel and tag dropdown.

Confidence Score: 5/5

• This PR is safe to merge with no identified issues
• The implementation follows a consistent pattern with proper error handling and rollback mechanisms. The optimistic update helper is well-designed with clear separation of concerns. Code refactoring reduces duplication and improves maintainability. The trigger mode fix addresses a real bug with clear logic improvements.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/lib/utils.ts	5/5	Added withOptimisticUpdate helper function to standardize optimistic UI update pattern across stores
apps/sim/stores/settings/environment/store.ts	5/5	Implemented optimistic updates for saveEnvironmentVariables using the new helper function
apps/sim/stores/custom-tools/store.ts	5/5	Added optimistic updates to updateTool and deleteTool operations for instant UI feedback
apps/sim/stores/folders/store.ts	5/5	Implemented optimistic updates for updateFolderAPI and deleteFolder with proper rollback handling
apps/sim/stores/workflows/registry/store.ts	5/5	Added optimistic updates to removeWorkflow and updateWorkflow operations for better UX
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-output-fields.ts	5/5	New hook extracting block output field logic from connection-blocks component for shared use with tag-dropdown
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/hooks/use-editor-subblock-layout.ts	4/5	Fixed trigger mode block filtering logic - now correctly shows only trigger mode blocks when in trigger mode and properly handles conditional visibility

Sequence Diagram

sequenceDiagram
participant User
participant UI Component
participant Store
participant withOptimisticUpdate
participant API
participant Database
User->>UI Component: Triggers action (e.g., delete folder)
UI Component->>Store: Call action (e.g., deleteFolder)
Store->>withOptimisticUpdate: Execute with config
Note over withOptimisticUpdate: 1. Save current state
withOptimisticUpdate->>Store: getCurrentState()
Store-->>withOptimisticUpdate: Original state
Note over withOptimisticUpdate: 2. Apply optimistic update
withOptimisticUpdate->>Store: optimisticUpdate()
Store->>UI Component: State updated
UI Component->>User: Instant UI feedback
Note over withOptimisticUpdate: 3. Make API call
withOptimisticUpdate->>API: apiCall()
API->>Database: Persist changes
alt Success
Database-->>API: Success
API-->>withOptimisticUpdate: Success
withOptimisticUpdate->>Store: onComplete()
Note over Store,User: Optimistic state becomes real
else Error
Database-->>API: Error
API-->>withOptimisticUpdate: Error
Note over withOptimisticUpdate: 4. Rollback on error
withOptimisticUpdate->>Store: rollback(originalState)
Store->>UI Component: State reverted
UI Component->>User: Show error + reverted UI
end

Loading

_{12 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}