feat(settings): added reactquery for settings, removed zustand stores, added apollo, added workflow block selector dropdown search, added add environment variable option to empty env var dropdown

[waleedlatif1]

Summary

• added reactquery for settings, removed zustand stores
• added 25 apollo tools
• added workflow block selector dropdown search,
• added add environment variable option to empty env var dropdown

Type of Change

• Bug fix
• 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]

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

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Ready	Preview	Comment	Nov 14, 2025 1:34am

[waleedlatif1]

@greptile

[greptile-apps]

Greptile Overview

Greptile Summary

This PR migrates settings management from Zustand to React Query, adds 25 Apollo.io CRM tools, enhances the workflow block selector with searchable dropdowns, and improves the environment variable UX.

Key Changes

• Settings Migration: Replaced Zustand stores (useOrganizationStore, useSubscriptionStore) with React Query hooks, improving data freshness and reducing boilerplate. The migration follows proper patterns with cache invalidation on mutations.

• Apollo.io Integration: Added comprehensive Apollo.io support with 25 tools covering people search, company enrichment, contact management, opportunities, sequences, and tasks. Block configuration is well-structured with conditional fields.

• Dropdown Search: Enhanced combobox to filter by human-readable labels rather than IDs, improving discoverability. Implementation maps labels to IDs internally while displaying labels to users.

• Environment Variables: Added "Create environment variable" option when dropdown is empty, improving discoverability of settings.

• Conditional Required Fields: Extended SubBlockConfig to support conditional required validation, enabling more flexible form validation based on other field values.

Issues Found

• Duplicate API calls in apps/sim/hooks/queries/subscription.ts:63 where useUsageData and useUsageLimitData fetch from the same endpoint with different cache keys

Confidence Score: 4/5

• Safe to merge with one optimization opportunity
• The refactoring is well-executed with proper migration from Zustand to React Query, comprehensive Apollo integration, and UX improvements. One logical issue with duplicate API calls should be addressed but won't cause runtime errors.
• Pay attention to apps/sim/hooks/queries/subscription.ts for the duplicate API call optimization

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/hooks/queries/subscription.ts	3/5	Duplicate API calls - useUsageData and useUsageLimitData both fetch from same endpoint with different cache keys
apps/sim/hooks/queries/organization.ts	5/5	Well-structured React Query hooks replacing Zustand store, proper cache invalidation patterns
apps/sim/blocks/blocks/apollo.ts	5/5	Comprehensive Apollo.io integration with 25 operations, well-structured block configuration
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/combobox/combobox.tsx	4/5	Added search by label functionality, complex value mapping logic between labels and IDs
apps/sim/serializer/index.ts	5/5	Enhanced conditional field validation to support conditional required fields

Sequence Diagram

sequenceDiagram
    participant User
    participant Component
    participant ReactQuery
    participant API
    participant DB

    Note over User,DB: Settings Migration: Zustand → React Query
    
    User->>Component: Opens Settings Modal
    Component->>ReactQuery: useOrganizations()
    ReactQuery->>API: GET /api/organizations
    ReactQuery->>API: GET /api/billing?context=user
    API->>DB: Fetch org & billing data
    DB-->>API: Return data
    API-->>ReactQuery: Organization & billing data
    ReactQuery-->>Component: Cached data with state
    Component->>Component: Render settings UI
    
    Note over User,DB: Apollo Tools Integration
    
    User->>Component: Selects Apollo block
    Component->>Component: Load Apollo operations
    User->>Component: Selects "Search People"
    Component->>Component: Render people_search fields
    User->>Component: Configures search params
    User->>Component: Executes workflow
    Component->>API: POST apollo/people_search
    API->>API: Call Apollo.io API
    API-->>Component: Return search results
    
    Note over User,DB: Dropdown Search Enhancement
    
    User->>Component: Opens workflow block selector
    Component->>Component: Render combobox with options
    User->>Component: Types search term
    Component->>Component: Filter by label (not ID)
    Component->>Component: Display filtered results
    User->>Component: Selects option
    Component->>Component: Map label → ID
    Component->>ReactQuery: Update block value
    
    Note over User,DB: Environment Variable Creation
    
    User->>Component: Types {{ in input
    Component->>ReactQuery: usePersonalEnvironment()
    ReactQuery->>API: GET /api/environment
    API->>DB: Fetch env vars
    DB-->>API: Return vars
    API-->>ReactQuery: Environment data
    ReactQuery-->>Component: Env vars list
    Component->>Component: Show env dropdown
    alt No matching vars
        Component->>Component: Show "Create env var" option
        User->>Component: Clicks create option
        Component->>Component: Dispatch open-settings event
        Component->>Component: Open settings (environment tab)
    end

Loading

[greptile-apps]

_{110 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}