Greptile Summary

This PR fixes a bug where Manual Task integrations weren't displaying any tabs on their detail page. The root cause was in the tab rendering logic that returned an empty array when enabledFeatures was falsy, preventing default tab selection.

The solution involves three key changes:

1. Type Safety Enhancement: Made the enabledFeatures field optional in IntegrationTypeInfo and set it to undefined in the fallback EMPTY_TYPE constant
2. Logic Extraction: Created a new custom hook useFeatureBasedTabs that consolidates complex tab generation logic previously scattered across components
3. Proper Loading State Handling: The hook now properly handles cases where integration features haven't loaded yet by returning an empty array initially

For Manual Task integrations specifically, this ensures they show their correct tab structure (Details + Manual tasks tabs) instead of the standard Connection-based tabs used by other integration types. The refactoring also improves code maintainability by centralizing tab configuration logic.

PR Description Notes:

• The PR description is incomplete with placeholder text ("Write some things here", "list your code changes here", etc.)
• Missing specific issue reference (shows "[]" placeholder)
• Steps to confirm and code changes sections are not filled out

Important Files Changed

Confidence score: 3/5

• This PR addresses a specific UI bug but has some implementation concerns that could cause issues
• Score reflects the console.log statement in production code and potential race condition with empty tab arrays
• Pay close attention to the integration detail page component for proper tab initialization

Sequence Diagram

sequenceDiagram
    participant User
    participant Router
    participant IntegrationDetailView
    participant useGetDatastoreConnectionByKeyQuery
    participant getIntegrationTypeInfo
    participant useFeatureBasedTabs
    participant useURLHashedTabs
    participant Tabs

    User->>Router: "Navigate to /integrations/[id]"
    Router->>IntegrationDetailView: "Load page with integration ID"
    IntegrationDetailView->>useGetDatastoreConnectionByKeyQuery: "Fetch connection data by ID"
    useGetDatastoreConnectionByKeyQuery->>IntegrationDetailView: "Return connection data"
    
    IntegrationDetailView->>getIntegrationTypeInfo: "Get integration type info with connection_type and saas_config.type"
    getIntegrationTypeInfo->>IntegrationDetailView: "Return enabledFeatures, overview, instructions, description"
    
    IntegrationDetailView->>useFeatureBasedTabs: "Generate tabs based on enabledFeatures"
    Note over useFeatureBasedTabs: Check if enabledFeatures exists before creating tabs
    useFeatureBasedTabs->>useFeatureBasedTabs: "Create tabs array based on enabled features"
    alt enabledFeatures includes WITHOUT_CONNECTION
        useFeatureBasedTabs->>useFeatureBasedTabs: "Add Details tab"
    else
        useFeatureBasedTabs->>useFeatureBasedTabs: "Add Connection tab"
    end
    
    alt enabledFeatures includes DATA_SYNC
        useFeatureBasedTabs->>useFeatureBasedTabs: "Add Data sync tab"
    end
    
    alt enabledFeatures includes DATA_DISCOVERY
        useFeatureBasedTabs->>useFeatureBasedTabs: "Add Data discovery tab"
    end
    
    alt enabledFeatures includes TASKS
        useFeatureBasedTabs->>useFeatureBasedTabs: "Add Manual tasks tab"
    end
    
    useFeatureBasedTabs->>IntegrationDetailView: "Return tabs array"
    
    IntegrationDetailView->>useURLHashedTabs: "Initialize with tab keys from generated tabs"
    useURLHashedTabs->>IntegrationDetailView: "Return activeTab and onTabChange handler"
    
    IntegrationDetailView->>Tabs: "Render Tabs component with items, activeKey, and onChange"
    Tabs->>User: "Display tabs with default tab selected"

_{3 files reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

Looking at this PR, the fix addresses a specific issue with Manual Task integrations where the default tab wasn't loading properly. The solution is well-structured and addresses the root cause effectively.

Key Changes Analysis

Problem: The issue occurred because during loading, EMPTY_TYPE returned an empty array for enabledFeatures, which caused the "Connection" tab to be shown initially. After loading the real integration data, Manual Task integrations should show a "Details" tab instead, but the state was already initialized with the wrong tab.

Solution: The fix has three main parts:

1. Changed EMPTY_TYPE.enabledFeatures from [] to undefined
2. Added logic to not render tabs until enabledFeatures is fully loaded
3. Extracted tab logic into a reusable useFeatureBasedTabs hook

Code Quality Assessment

The refactoring is excellent:

• Separation of concerns: Moving complex tab logic into a dedicated hook improves maintainability
• Type safety: The optional enabledFeatures type change is consistent across the codebase
• Loading state handling: The guard clause if (!enabledFeatures) return [] prevents premature tab rendering

Potential Considerations

The hook has quite a few parameters (12), which might indicate high coupling. However, given that this is UI-specific logic that needs access to various pieces of state, this seems reasonable for this use case.

The solution correctly maintains backward compatibility - other integration types will continue working as expected since they don't rely on the loading state behavior that was problematic for Manual Tasks.

Verification

The fix should resolve:

1. ✅ Manual Task integrations will show "Details" tab as active by default with content
2. ✅ Other integrations will continue showing "Connection" tab as active by default
3. ✅ No tabs will render during the initial loading state, preventing the race condition

This is a solid fix that addresses the root cause while improving code organization. The approach of waiting for the real data to load before rendering tabs is the correct solution for this timing issue.

Code looks good-- tested in Vercel environment, confirming working as intended. Nice fix!