improvement: required permissions, oauth modal badge

[emir-karabeg]

Summary

Fixed styling for the required permissions beneath credential selector in editor and tool input.

Adjusted oauth modal to use EMCN badge.

Type of Change

• New feature

Testing

Solo.

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		Dec 27, 2025 11:14pm

[greptile-apps]

Greptile Summary

Updated styling for OAuth permission notifications and badge components. The changes improve visual consistency by:

• Replaced custom inline-styled "New" badge with EMCN Badge component (variant='amber', size='sm') in the OAuth modal
• Redesigned "Additional permissions required" notification in credential selectors with improved layout: amber dot indicator, stacked layout with full-width "Update access" button
• Changed wrapper elements from fragments to divs to properly contain the styled notifications
• Applied consistent styling across both CredentialSelector and ToolCredentialSelector components

All changes follow EMCN component library patterns and Tailwind styling conventions.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• These are purely visual/styling improvements with no logic changes. The EMCN Badge component is properly used with correct props, and the notification styling follows established design patterns. The changes are isolated to UI presentation without affecting functionality.
• No files require special attention

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx	Replaced inline styled badge with EMCN Badge component using variant='amber' and size='sm'
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx	Changed wrapper from fragment to div, redesigned "Additional permissions required" notification with new styling and layout
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-credential-selector.tsx	Applied identical styling changes to permissions notification as credential-selector.tsx

Sequence Diagram

sequenceDiagram
    participant User
    participant CredentialSelector
    participant OAuthModal
    participant Badge
    
    User->>CredentialSelector: Selects credential with missing scopes
    CredentialSelector->>CredentialSelector: Check needsUpdate (missing scopes detected)
    CredentialSelector->>User: Display "Additional permissions required" notification
    Note over CredentialSelector: New styling: amber dot indicator,<br/>stacked layout with full-width button
    
    User->>CredentialSelector: Click "Update access" button
    CredentialSelector->>OAuthModal: Open modal (setShowOAuthModal(true))
    OAuthModal->>User: Display permissions list
    
    loop For each scope
        OAuthModal->>OAuthModal: Check if scope is new (newScopesSet.has(scope))
        alt Scope is new
            OAuthModal->>Badge: Render Badge with variant='amber', size='sm'
            Badge->>User: Show "New" badge
        end
    end
    
    User->>OAuthModal: Click "Connect"
    OAuthModal->>OAuthModal: handleConnectDirectly()
    OAuthModal->>User: Redirect to OAuth provider

Loading