Add impersonate banner

[etiennejouan]

Related to #14360

@Bonapara, let you tell me if wording and banner color are ok. This banner is displayed when a user is impersonating an other user

[greptile-apps]

Greptile Overview

Summary

This PR adds an impersonation banner feature to provide visual feedback when administrators are viewing the application as another user. The implementation introduces a new Recoil selector that detects impersonation status from JWT tokens and displays a banner with user context and an option to stop impersonating.

Key Changes:

• New State Management: Created isImpersonatingState selector that decodes JWT tokens to detect impersonation status
• Visual Banner: Added InformationBannerIsImpersonating component that shows current impersonated user details
• UX Improvements: Modified dropdown menu to prevent nested impersonation by disabling the option when already impersonating
• Integration: Properly integrated banner into existing information banner system

Technical Implementation:

• Uses Recoil for reactive state management tied to JWT token changes
• Follows existing codebase patterns for information banners
• Includes proper internationalization with Lingui
• Implements null safety checks and error handling

The code is well-structured and follows the project's architectural patterns. One minor style improvement was suggested regarding string interpolation within translation templates.

Confidence Score: 4/5

• This PR is safe to merge with minimal risk - implements a defensive security feature with proper state management
• Score reflects well-structured code following project patterns with one minor style suggestion. The feature enhances security by providing clear visual feedback during impersonation sessions.
• No files require special attention - all changes follow established patterns and include proper error handling

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/auth/states/isImpersonatingState.ts	5/5	New Recoil selector to detect impersonation status from JWT token - clean implementation with proper error handling
packages/twenty-front/src/modules/information-banner/components/impersonate/InformationBannerIsImpersonating.tsx	4/5	New impersonation banner component with proper null checking and i18n support - potential string concatenation issue
packages/twenty-front/src/modules/information-banner/components/InformationBannerWrapper.tsx	5/5	Integrates impersonation banner into wrapper component - clean addition following existing patterns
packages/twenty-front/src/modules/settings/members/ManageMembersDropdownMenu.tsx	5/5	Prevents impersonation when already impersonating by updating permission logic - good UX improvement

Sequence Diagram

sequenceDiagram
    participant User as Admin User
    participant Dropdown as ManageMembersDropdownMenu
    participant Auth as Auth System
    participant JWT as JWT Token
    participant State as isImpersonatingState
    participant Banner as InformationBannerWrapper
    participant ImpBanner as InformationBannerIsImpersonating

    User->>Dropdown: Click impersonate option
    Dropdown->>State: Check isImpersonating
    State->>JWT: Decode JWT token
    JWT-->>State: Return isImpersonating flag
    State-->>Dropdown: Return current status
    alt If not already impersonating
        Dropdown->>Auth: Start impersonation
        Auth->>JWT: Update token with isImpersonating: true
        JWT-->>State: Token change triggers recomputation
        State-->>Banner: New impersonation status
        Banner->>ImpBanner: Render impersonation banner
        ImpBanner-->>User: Show "View as [User]" banner
    else If already impersonating
        Note over Dropdown: Impersonate option disabled
    end

    User->>ImpBanner: Click "Stop impersonating"
    ImpBanner->>Auth: Call signOut()
    Auth->>JWT: Clear impersonation token
    JWT-->>State: Token change triggers recomputation
    State-->>Banner: Impersonation ended
    Banner-->>User: Hide impersonation banner

Loading

_{4 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:16893

This environment will automatically shut down when the PR is closed or after 5 hours.