Fix - Multiple banners issue (#15506)

Done : 
- Fix multiple banners issue
- Lift impersonation banner


After 
<img width="800" height="400" alt="Screenshot 2025-10-31 at 18 05 02"
src="https://github.com/user-attachments/assets/7d5949d4-1c8b-4a4f-91c1-c115e53436fb"
/>
This commit is contained in:
Etienne
2025-10-31 19:17:31 +01:00
committed by GitHub
parent 5f0d24798a
commit 3a203040f7
3 changed files with 6 additions and 7 deletions
@@ -1,22 +1,18 @@
import { isImpersonatingState } from '@/auth/states/isImpersonatingState';
import { InformationBannerBillingSubscriptionPaused } from '@/information-banner/components/billing/InformationBannerBillingSubscriptionPaused';
import { InformationBannerEndTrialPeriod } from '@/information-banner/components/billing/InformationBannerEndTrialPeriod';
import { InformationBannerFailPaymentInfo } from '@/information-banner/components/billing/InformationBannerFailPaymentInfo';
import { InformationBannerNoBillingSubscription } from '@/information-banner/components/billing/InformationBannerNoBillingSubscription';
import { InformationBannerIsImpersonating } from '@/information-banner/components/impersonate/InformationBannerIsImpersonating';
import { InformationBannerReconnectAccountEmailAliases } from '@/information-banner/components/reconnect-account/InformationBannerReconnectAccountEmailAliases';
import { InformationBannerReconnectAccountInsufficientPermissions } from '@/information-banner/components/reconnect-account/InformationBannerReconnectAccountInsufficientPermissions';
import { useIsSomeMeteredProductCapReached } from '@/workspace/hooks/useIsSomeMeteredProductCapReached';
import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
import { SubscriptionStatus } from '~/generated-metadata/graphql';
const StyledInformationBannerWrapper = styled.div`
height: 40px;
position: relative;
&:empty {
@@ -30,7 +26,6 @@ export const InformationBannerWrapper = () => {
WorkspaceActivationStatus.SUSPENDED,
);
const isSomeMeteredProductCapReached = useIsSomeMeteredProductCapReached();
const isImpersonating = useRecoilValue(isImpersonatingState);
const displayBillingSubscriptionPausedBanner =
isWorkspaceSuspended && subscriptionStatus === SubscriptionStatus.Paused;
@@ -58,7 +53,6 @@ export const InformationBannerWrapper = () => {
)}
{displayFailPaymentInfoBanner && <InformationBannerFailPaymentInfo />}
{displayEndTrialPeriodBanner && <InformationBannerEndTrialPeriod />}
{isImpersonating && <InformationBannerIsImpersonating />}
</StyledInformationBannerWrapper>
);
};
@@ -1,5 +1,6 @@
import { useAuth } from '@/auth/hooks/useAuth';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { isImpersonatingState } from '@/auth/states/isImpersonatingState';
import { InformationBanner } from '@/information-banner/components/InformationBanner';
import { t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
@@ -8,9 +9,11 @@ import { IconLogout } from 'twenty-ui/display';
export const InformationBannerIsImpersonating = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const isImpersonating = useRecoilValue(isImpersonatingState);
const { signOut } = useAuth();
if (!isDefined(currentWorkspaceMember)) {
if (!isDefined(currentWorkspaceMember) || !isImpersonating) {
return null;
}
@@ -3,6 +3,7 @@ import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter';
import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
import { AppFullScreenErrorFallback } from '@/error-handler/components/AppFullScreenErrorFallback';
import { AppPageErrorFallback } from '@/error-handler/components/AppPageErrorFallback';
import { InformationBannerIsImpersonating } from '@/information-banner/components/impersonate/InformationBannerIsImpersonating';
import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer';
import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar';
@@ -75,6 +76,7 @@ export const DefaultLayout = () => {
/>
<StyledLayout>
<AppErrorBoundary FallbackComponent={AppFullScreenErrorFallback}>
<InformationBannerIsImpersonating />
<StyledPageContainer
animate={{
marginLeft: