fix(oauth): use createElement for icon components to fix React hooks error

[waleedlatif1]

Summary

• Fix React error Improve(chat): added multiple output option for chat panel & chat deploy #310 (invalid hook call) when opening Integrations tab in settings
• Icon components using hooks were being called as functions instead of rendered properly
• Changed icon({ className }) to createElement(icon, { className }) in 3 files

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]

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

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 29, 2026 7:23am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR fixes React error #310 (invalid hook call) that occurred when opening the Integrations tab in settings. The issue was caused by icon components being called as functions (icon({ className })) instead of being rendered as proper React components.

Changes Made:

• Added createElement import from react in all three affected files
• Changed icon rendering from function calls to createElement(icon, { className }) in credential-selector.tsx and tool-credential-selector.tsx
• In integrations.tsx, removed unnecessary type guard (typeof service.icon === 'function') and standardized to use createElement - this is safe since OAuthServiceConfig type guarantees icon is always a component

Root Cause:
Icon components in the codebase use React hooks internally. Calling them as functions violates React's Rules of Hooks, which require hooks to be called only at the top level of React components. Using createElement ensures they're rendered as proper React elements where hooks can execute correctly.

Impact:
This fix resolves the runtime error and allows users to successfully open and interact with the Integrations settings tab.

Confidence Score: 5/5

• This PR is safe to merge with no risk - it's a straightforward bug fix with correct implementation
• The fix correctly addresses the React hooks violation by using createElement instead of direct function calls. All changes follow React best practices, the type system guarantees icon is always a component, and the solution is minimal and focused
• No files require special attention - all changes are correct and consistent

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx	Fixed React hooks error by using createElement to properly render icon components instead of calling them as functions
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-credential-selector.tsx	Fixed React hooks error by using createElement to properly render icon components instead of calling them as functions
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/integrations/integrations.tsx	Fixed React hooks error by using createElement and removed unnecessary type check since icon is always a component per OAuthServiceConfig type definition

Sequence Diagram

sequenceDiagram
    participant User
    participant IntegrationsTab
    participant CredentialSelector
    participant OAuthProviders
    participant IconComponent

    User->>IntegrationsTab: Opens Integrations tab
    IntegrationsTab->>OAuthProviders: Fetch provider configs
    OAuthProviders-->>IntegrationsTab: Return configs with icon components
    
    alt Before Fix (Invalid Hook Call)
        IntegrationsTab->>IconComponent: icon({ className })
        Note over IntegrationsTab,IconComponent: Direct function call<br/>violates Rules of Hooks
        IconComponent--xIntegrationsTab: Error #310: Invalid hook call
    end
    
    alt After Fix (Proper Rendering)
        IntegrationsTab->>IconComponent: createElement(icon, { className })
        Note over IntegrationsTab,IconComponent: Proper React element creation<br/>hooks work correctly
        IconComponent-->>IntegrationsTab: Rendered icon element
    end
    
    IntegrationsTab-->>User: Display integrations with icons
    
    User->>CredentialSelector: Select credential
    CredentialSelector->>OAuthProviders: Get provider icon
    CredentialSelector->>IconComponent: createElement(icon, { className })
    IconComponent-->>CredentialSelector: Rendered icon element
    CredentialSelector-->>User: Display credential with icon

Loading

[greptile-apps]

_{3 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}