Add impersonate banner #14734
Add impersonate banner #14734
Conversation
![seer-by-sentry[bot]](https://avatars.githubusercontent.com/in/801464?s=60&v=4){kind=small}
packages/twenty-front/src/modules/auth/states/isImpersonatingState.ts
Outdated
Show resolved
Hide resolved
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
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
isImpersonatingStateselector that decodes JWT tokens to detect impersonation status - Visual Banner: Added
InformationBannerIsImpersonatingcomponent 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
4 files reviewed, 1 comment
...t/src/modules/information-banner/components/impersonate/InformationBannerIsImpersonating.tsx
Show resolved
Hide resolved
|
🚀 Preview Environment Ready! Your preview environment is available at: http://bore.pub:51493 This environment will automatically shut down when the PR is closed or after 5 hours. |
| get: ({ get }) => { | ||
| const tokenPair = get(tokenPairState); | ||
|
|
||
| if (!isDefined(tokenPair?.accessOrWorkspaceAgnosticToken?.token)) |
| const { closeDropdown } = useCloseDropdown(); | ||
| const canImpersonate = useHasPermissionFlag(PermissionFlagType.IMPERSONATE); | ||
| const isImpersonating = useRecoilValue(isImpersonatingState); | ||
| const canImpersonate = |
There was a problem hiding this comment.
Are we not looking at canImpersonate from user state as well?
There was a problem hiding this comment.
It has been approved in previous PR like that. And I think I'm ok with it because impersonation can be done at two levels, workspace and server.
Workspace impersonation is enabled via permission and can be started from settings/member page (here).
Server impersonation is enabled via 'canImpersonate from user' and can be started from admin panel.
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