Skip to content

Conversation

@icecrasher321
Copy link
Collaborator

Summary

Consolidate all integration selectors and remove display names cache to migrate to tanstack based access pattern.

Type of Change

  • Other: Improvement

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 Nov 16, 2025

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

1 Skipped Deployment
Project Deployment Preview Comments Updated (UTC)
docs Skipped Skipped Nov 18, 2025 4:59am

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Nov 16, 2025

Greptile Overview

Greptile Summary

This PR consolidates all integration selectors into a unified architecture, removing over 6,000 lines of duplicated code while improving maintainability and caching.

Key Changes

  • New Selector Registry System: Centralized registry (apps/sim/hooks/selectors/registry.ts) defining 20+ selector types with standardized fetch logic, query keys, and caching strategies
  • Unified SelectorCombobox Component: Single reusable component replaces 15+ provider-specific selector implementations
  • TanStack Query Migration: Replaces manual Zustand-based display name caching with TanStack Query's built-in caching and invalidation
  • Resolver Pattern: New resolution layer (resolution.ts) maps sub-block types and providers to appropriate selector keys
  • Specialized Display Name Hooks: Splits monolithic useDisplayName into focused hooks (useSelectorDisplayName, useCredentialName, useKnowledgeBaseName)

Architecture Improvements

  • Query-based data fetching with automatic cache management and stale-time handling
  • Consistent error handling and loading states across all selectors
  • Search support for applicable selectors (Jira, Confluence, Google Drive, etc.)
  • Detail fetching with fetchById for hydrating selected values
  • Proper handling of foreign credentials in collaborative workflows

Code Quality

The refactoring follows established architectural patterns from the codebase and properly uses memoization, TypeScript interfaces, and error handling throughout.

Confidence Score: 5/5

  • This PR is safe to merge with minimal risk - it's a well-executed refactoring with no logical errors detected
  • The refactoring consolidates duplicated code into a clean, registry-based architecture while maintaining all existing functionality. The new system uses established patterns (TanStack Query, resolution pattern, unified components) and removes significant technical debt. No logical errors, security issues, or breaking changes were found in the implementation.
  • No files require special attention - all implementations follow consistent patterns and proper error handling

Important Files Changed

File Analysis

Filename Score Overview
apps/sim/hooks/selectors/registry.ts 5/5 New centralized selector registry consolidating 20+ selector definitions with standardized query patterns, error handling, and caching - clean implementation
apps/sim/hooks/selectors/types.ts 5/5 Type definitions for selector system with clear interfaces for context, options, and definitions - well-structured
apps/sim/hooks/selectors/use-selector-query.ts 5/5 TanStack Query hooks for fetching selector options and details with proper caching, memoization, and error handling
apps/sim/hooks/selectors/resolution.ts 5/5 Resolver logic mapping sub-block types to selector keys with provider-specific logic - handles all selector types correctly
apps/sim/hooks/use-selector-display-name.ts 5/5 Hook for fetching display names using new selector system, replaces old cache-based approach with query-based fetching
apps/sim/hooks/queries/oauth-credentials.ts 5/5 TanStack Query hooks for OAuth credentials with proper caching and foreign credential support - clean separation of concerns
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx 5/5 New unified combobox component for all selectors with search support, proper state management, and drag-drop integration
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/file-selector/file-selector-input.tsx 5/5 Simplified from 570 lines to ~140 lines by replacing provider-specific components with SelectorCombobox and resolution logic
apps/sim/stores/display-names/store.ts 5/5 Removed entirely - old Zustand-based caching system replaced by TanStack Query caching in selector hooks
apps/sim/hooks/use-display-name.ts 5/5 Removed - replaced by specialized hooks (useSelectorDisplayName, useCredentialName, useKnowledgeBaseName)

Sequence Diagram

sequenceDiagram
    participant UI as UI Component<br/>(file-selector-input)
    participant Resolution as Resolver<br/>(resolution.ts)
    participant Combobox as SelectorCombobox
    participant Query as useSelector<br/>Query Hooks
    participant Registry as Selector<br/>Registry
    participant API as Backend APIs
    participant Cache as TanStack<br/>Query Cache

    UI->>Resolution: resolveSelectorForSubBlock(subBlock, context)
    Resolution->>Resolution: Analyze subBlock type and provider
    Resolution-->>UI: selectorKey and context object
    
    UI->>Combobox: Render with selectorKey and context
    Combobox->>Query: useSelectorOptions(selectorKey, context, search)
    Query->>Registry: getSelectorDefinition(selectorKey)
    Registry-->>Query: Definition with fetchList and getQueryKey
    
    Query->>Cache: Check cache with queryKey
    alt Cache Hit
        Cache-->>Query: Cached options array
    else Cache Miss
        Query->>Registry: fetchList with context and search
        Registry->>API: fetchJson to integration endpoint
        API-->>Registry: Raw data from integration
        Registry->>Registry: Transform to SelectorOption array
        Registry-->>Query: Normalized options
        Query->>Cache: Store with staleTime
    end
    
    Query-->>Combobox: options data and loading state
    
    alt User has existing value
        Combobox->>Query: useSelectorOptionDetail(selectorKey, detailId)
        Query->>Cache: Check detail cache
        alt Detail Cache Miss
            Query->>Registry: fetchById with context and detailId
            Registry->>API: POST to detail endpoint
            API-->>Registry: Detailed option data
            Registry-->>Query: SelectorOption object
            Query->>Cache: Store detail
        end
        Query-->>Combobox: detailOption
    end
    
    Combobox->>Combobox: Merge list and detail with useSelectorOptionMap
    Combobox-->>UI: Render options with EditableCombobox
    
    alt User selects option
        UI->>Combobox: User selects value
        Combobox->>Combobox: handleSelection with value
        Combobox->>UI: setStoreValue updates store
        Combobox->>UI: onOptionChange callback fires
    end
Loading

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

34 files reviewed, no comments

Edit Code Review Agent Settings | Greptile

@icecrasher321 icecrasher321 merged commit 620ce97 into staging Nov 18, 2025
9 checks passed
@waleedlatif1 waleedlatif1 deleted the improvement/consolidate-selectors branch November 19, 2025 05:17
Sign up for free to 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.

3 participants