Skip to content

fix(dropdown): add dependsOn to dropdown component to dynamically fetch options predicated on another subblock - #1886

Merged
waleedlatif1 merged 1 commit into
stagingfrom
fix/dropdown
Nov 11, 2025
Merged

fix(dropdown): add dependsOn to dropdown component to dynamically fetch options predicated on another subblock#1886
waleedlatif1 merged 1 commit into
stagingfrom
fix/dropdown

Conversation

@waleedlatif1

Copy link
Copy Markdown
Collaborator

Summary

  • add dependsOn to dropdown component to dynamically fetch options predicated on another subblock

Type of Change

  • Bug fix

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

vercelBot commented Nov 11, 2025

Copy link
Copy Markdown

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

1 Skipped Deployment
ProjectDeploymentPreviewCommentsUpdated (UTC)
docsSkippedSkippedNov 11, 2025 7:35am

@greptile-apps

Copy link
Copy Markdown
Contributor

Greptile Overview

Greptile Summary

Added dependsOn support to the Dropdown component to enable dynamic option refetching when dependent fields change, specifically when credentials are updated in Gmail and Outlook triggers.

  • Implemented dependency tracking in dropdown.tsx using useSubBlockStore to monitor changes in dependent field values
  • Added a new effect (lines 303-317) that clears fetched options when dependency values change, triggering a refetch
  • Passed dependencyValues to the fetch effect (line 339) to ensure options are refetched when dependencies update
  • Applied dependsOn: ['triggerCredentials'] to Gmail labels and Outlook folders dropdowns so they refetch when credentials change

The implementation follows a clean pattern: when a user selects new credentials, the dependency tracking detects the change, clears the existing options, and automatically fetches fresh options using the new credential.

Confidence Score: 4/5

  • This PR is safe to merge with minor considerations around edge case handling
  • The implementation is sound and follows React best practices with proper use of useEffect, useCallback, and dependency arrays. The change is well-contained and adds important functionality for dynamic option fetching. Score of 4 (not 5) due to one consideration: the dependency tracking initializes previousDependencyValuesRef with an empty string, which means the first render comparison (line 309) will always detect a change if there are dependencies, potentially causing an unnecessary clear of options on mount
  • The dropdown component (dropdown.tsx) should be tested thoroughly with different dependency scenarios to ensure the refetch behavior works correctly in all cases

Important Files Changed

File Analysis

FilenameScoreOverview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/dropdown/dropdown.tsx4/5Added dependsOn functionality to track dependency changes and refetch dropdown options when dependencies (like credentials) change
apps/sim/triggers/gmail/poller.ts5/5Added dependsOn: ['triggerCredentials'] to the labelIds dropdown to ensure labels refetch when credentials change
apps/sim/triggers/outlook/poller.ts5/5Added dependsOn: ['triggerCredentials'] to the folderIds dropdown to ensure folders refetch when credentials change

Sequence Diagram

sequenceDiagram
participant User
participant Dropdown
participant SubBlockStore
participant API
User->>Dropdown: Select credential (triggerCredentials)
Dropdown->>SubBlockStore: Update credential value
SubBlockStore-->>Dropdown: Notify value change
Note over Dropdown: dependencyValues changes detected
Dropdown->>Dropdown: Clear fetchedOptions (line 312)
Dropdown->>Dropdown: Trigger refetch useEffect (line 322-340)
Dropdown->>API: fetchOptions(blockId, subBlockId)
Note over API: Uses credentialId from store<br/>(line 37-42 in poller.ts)
API-->>Dropdown: Return new options (labels/folders)
Dropdown->>Dropdown: Update fetchedOptions state
Dropdown->>User: Display updated options
Loading

@greptile-appsgreptile-appsBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

4 files reviewed, no comments

Edit Code Review Agent Settings | Greptile

@waleedlatif1
waleedlatif1 merged commit 68aaede into stagingNov 11, 2025
9 checks passed
@waleedlatif1
waleedlatif1 deleted the fix/dropdown branch November 11, 2025 07:45
waleedlatif1 added a commit that referenced this pull request Nov 12, 2025
waleedlatif1 added a commit that referenced this pull request Nov 12, 2025
@waleedlatif1waleedlatif1 mentioned this pull request Nov 12, 2025
10 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@waleedlatif1