Merge branch 'main' into rbac-misc-fixes

frontend/src/AppRoutes/Private.tsx

@@ -1,4 +1,4 @@
-import { ReactChild, useCallback, useMemo } from 'react';
+import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
 import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
@@ -8,10 +8,12 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import history from 'lib/history';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
+import { Organization } from 'types/api/user/getOrganization';
 import { USER_ROLES } from 'types/roles';
 import { routePermission } from 'utils/permission';
 
@@ -23,7 +25,6 @@ import routes, {
 	SUPPORT_ROUTE,
 } from './routes';
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const location = useLocation();
 	const { pathname } = location;
@@ -56,12 +57,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const currentRoute = mapRoutes.get('current');
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
-	const orgData = useMemo(() => {
-		if (org && org.length > 0 && org[0].id !== undefined) {
-			return org[0];
-		}
-		return undefined;
-	}, [org]);
+	const [orgData, setOrgData] = useState<Organization | undefined>(undefined);
 
 	const { data: usersData, isFetching: isFetchingUsers } = useListUsers({
 		query: {
@@ -79,7 +75,214 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return remainingUsers.length === 1;
 	}, [usersData?.data]);
 
-	// Handle old routes - redirect to new routes
+	useEffect(() => {
+		if (
+			isCloudUserVal &&
+			!isFetchingOrgPreferences &&
+			orgPreferences &&
+			!isFetchingUsers &&
+			usersData &&
+			usersData.data
+		) {
+			const isOnboardingComplete = orgPreferences?.find(
+				(preference: OrgPreference) =>
+					preference.name === ORG_PREFERENCES.ORG_ONBOARDING,
+			)?.value;
+
+			// Don't redirect to onboarding if workspace has issues (blocked, suspended, or restricted)
+			// User needs access to settings/billing to fix payment issues
+			const isWorkspaceBlocked = trialInfo?.workSpaceBlock;
+			const isWorkspaceSuspended = activeLicense?.state === LicenseState.DEFAULTED;
+			const isWorkspaceAccessRestricted =
+				activeLicense?.state === LicenseState.TERMINATED ||
+				activeLicense?.state === LicenseState.EXPIRED ||
+				activeLicense?.state === LicenseState.CANCELLED;
+
+			const hasWorkspaceIssue =
+				isWorkspaceBlocked || isWorkspaceSuspended || isWorkspaceAccessRestricted;
+
+			if (hasWorkspaceIssue) {
+				return;
+			}
+
+			const isFirstUser = checkFirstTimeUser();
+			if (
+				isFirstUser &&
+				!isOnboardingComplete &&
+				// if the current route is allowed to be overriden by org onboarding then only do the same
+				!ROUTES_NOT_TO_BE_OVERRIDEN.includes(pathname)
+			) {
+				history.push(ROUTES.ONBOARDING);
+			}
+		}
+	}, [
+		checkFirstTimeUser,
+		isCloudUserVal,
+		isFetchingOrgPreferences,
+		isFetchingUsers,
+		orgPreferences,
+		usersData,
+		pathname,
+		trialInfo?.workSpaceBlock,
+		activeLicense?.state,
+	]);
+
+	const navigateToWorkSpaceBlocked = useCallback((): void => {
+		const isRouteEnabledForWorkspaceBlockedState =
+			isAdmin &&
+			(pathname === ROUTES.SETTINGS ||
+				pathname === ROUTES.ORG_SETTINGS ||
+				pathname === ROUTES.MEMBERS_SETTINGS ||
+				pathname === ROUTES.BILLING ||
+				pathname === ROUTES.MY_SETTINGS);
+
+		if (
+			pathname &&
+			pathname !== ROUTES.WORKSPACE_LOCKED &&
+			!isRouteEnabledForWorkspaceBlockedState
+		) {
+			history.push(ROUTES.WORKSPACE_LOCKED);
+		}
+	}, [isAdmin, pathname]);
+
+	const navigateToWorkSpaceAccessRestricted = useCallback((): void => {
+		if (pathname && pathname !== ROUTES.WORKSPACE_ACCESS_RESTRICTED) {
+			history.push(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+		}
+	}, [pathname]);
+
+	useEffect(() => {
+		if (!isFetchingActiveLicense && activeLicense) {
+			const isTerminated = activeLicense.state === LicenseState.TERMINATED;
+			const isExpired = activeLicense.state === LicenseState.EXPIRED;
+			const isCancelled = activeLicense.state === LicenseState.CANCELLED;
+
+			const isWorkspaceAccessRestricted = isTerminated || isExpired || isCancelled;
+
+			const { platform } = activeLicense;
+
+			if (isWorkspaceAccessRestricted && platform === LicensePlatform.CLOUD) {
+				navigateToWorkSpaceAccessRestricted();
+			}
+		}
+	}, [
+		isFetchingActiveLicense,
+		activeLicense,
+		navigateToWorkSpaceAccessRestricted,
+	]);
+
+	useEffect(() => {
+		if (!isFetchingActiveLicense) {
+			const shouldBlockWorkspace = trialInfo?.workSpaceBlock;
+
+			if (
+				shouldBlockWorkspace &&
+				activeLicense?.platform === LicensePlatform.CLOUD
+			) {
+				navigateToWorkSpaceBlocked();
+			}
+		}
+	}, [
+		isFetchingActiveLicense,
+		trialInfo?.workSpaceBlock,
+		activeLicense?.platform,
+		navigateToWorkSpaceBlocked,
+	]);
+
+	const navigateToWorkSpaceSuspended = useCallback((): void => {
+		if (pathname && pathname !== ROUTES.WORKSPACE_SUSPENDED) {
+			history.push(ROUTES.WORKSPACE_SUSPENDED);
+		}
+	}, [pathname]);
+
+	useEffect(() => {
+		if (!isFetchingActiveLicense && activeLicense) {
+			const shouldSuspendWorkspace =
+				activeLicense.state === LicenseState.DEFAULTED;
+
+			if (
+				shouldSuspendWorkspace &&
+				activeLicense.platform === LicensePlatform.CLOUD
+			) {
+				navigateToWorkSpaceSuspended();
+			}
+		}
+	}, [isFetchingActiveLicense, activeLicense, navigateToWorkSpaceSuspended]);
+
+	useEffect(() => {
+		if (org && org.length > 0 && org[0].id !== undefined) {
+			setOrgData(org[0]);
+		}
+	}, [org]);
+
+	// if the feature flag is enabled and the current route is /get-started then redirect to /get-started-with-signoz-cloud
+	useEffect(() => {
+		if (
+			currentRoute?.path === ROUTES.GET_STARTED &&
+			featureFlags?.find((e) => e.name === FeatureKeys.ONBOARDING_V3)?.active
+		) {
+			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+		}
+	}, [currentRoute, featureFlags]);
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	useEffect(() => {
+		// if it is an old route navigate to the new route
+		if (isOldRoute) {
+			// this will be handled by the redirect component below
+			return;
+		}
+
+		// if the current route is public dashboard then don't redirect to login
+		const isPublicDashboard = currentRoute?.path === ROUTES.PUBLIC_DASHBOARD;
+
+		if (isPublicDashboard) {
+			return;
+		}
+
+		// if the current route
+		if (currentRoute) {
+			const { isPrivate, key } = currentRoute;
+			if (isPrivate) {
+				if (isLoggedInState) {
+					const route = routePermission[key];
+					if (route && route.find((e) => e === user.role) === undefined) {
+						history.push(ROUTES.UN_AUTHORIZED);
+					}
+				} else {
+					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
+					history.push(ROUTES.LOGIN);
+				}
+			} else if (isLoggedInState) {
+				const fromPathname = getLocalStorageApi(
+					LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
+				);
+				if (fromPathname) {
+					history.push(fromPathname);
+					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
+				} else if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
+					history.push(ROUTES.HOME);
+				}
+			} else {
+				// do nothing as the unauthenticated routes are LOGIN and SIGNUP and the LOGIN container takes care of routing to signup if
+				// setup is not completed
+			}
+		} else if (isLoggedInState) {
+			const fromPathname = getLocalStorageApi(
+				LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
+			);
+			if (fromPathname) {
+				history.push(fromPathname);
+				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
+			} else {
+				history.push(ROUTES.HOME);
+			}
+		} else {
+			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
+			history.push(ROUTES.LOGIN);
+		}
+	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);
+
 	if (isOldRoute) {
 		const redirectUrl = oldNewRoutesMapping[pathname];
 		return (
@@ -93,143 +296,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		);
 	}
 
-	// Public dashboard - no redirect needed
-	const isPublicDashboard = currentRoute?.path === ROUTES.PUBLIC_DASHBOARD;
-	if (isPublicDashboard) {
-		return <>{children}</>;
-	}
-
-	// Check for workspace access restriction (cloud only)
-	const isCloudPlatform = activeLicense?.platform === LicensePlatform.CLOUD;
-
-	if (!isFetchingActiveLicense && activeLicense && isCloudPlatform) {
-		const isTerminated = activeLicense.state === LicenseState.TERMINATED;
-		const isExpired = activeLicense.state === LicenseState.EXPIRED;
-		const isCancelled = activeLicense.state === LicenseState.CANCELLED;
-		const isWorkspaceAccessRestricted = isTerminated || isExpired || isCancelled;
-
-		if (
-			isWorkspaceAccessRestricted &&
-			pathname !== ROUTES.WORKSPACE_ACCESS_RESTRICTED
-		) {
-			return <Redirect to={ROUTES.WORKSPACE_ACCESS_RESTRICTED} />;
-		}
-
-		// Check for workspace suspended (DEFAULTED)
-		const shouldSuspendWorkspace = activeLicense.state === LicenseState.DEFAULTED;
-		if (shouldSuspendWorkspace && pathname !== ROUTES.WORKSPACE_SUSPENDED) {
-			return <Redirect to={ROUTES.WORKSPACE_SUSPENDED} />;
-		}
-	}
-
-	// Check for workspace blocked (trial expired)
-	if (!isFetchingActiveLicense && isCloudPlatform && trialInfo?.workSpaceBlock) {
-		const isRouteEnabledForWorkspaceBlockedState =
-			isAdmin &&
-			(pathname === ROUTES.SETTINGS ||
-				pathname === ROUTES.ORG_SETTINGS ||
-				pathname === ROUTES.MEMBERS_SETTINGS ||
-				pathname === ROUTES.BILLING ||
-				pathname === ROUTES.MY_SETTINGS);
-
-		if (
-			pathname !== ROUTES.WORKSPACE_LOCKED &&
-			!isRouteEnabledForWorkspaceBlockedState
-		) {
-			return <Redirect to={ROUTES.WORKSPACE_LOCKED} />;
-		}
-	}
-
-	// Check for onboarding redirect (cloud users, first user, onboarding not complete)
-	if (
-		isCloudUserVal &&
-		!isFetchingOrgPreferences &&
-		orgPreferences &&
-		!isFetchingUsers &&
-		usersData &&
-		usersData.data
-	) {
-		const isOnboardingComplete = orgPreferences?.find(
-			(preference: OrgPreference) =>
-				preference.name === ORG_PREFERENCES.ORG_ONBOARDING,
-		)?.value;
-
-		// Don't redirect to onboarding if workspace has issues
-		const isWorkspaceBlocked = trialInfo?.workSpaceBlock;
-		const isWorkspaceSuspended = activeLicense?.state === LicenseState.DEFAULTED;
-		const isWorkspaceAccessRestricted =
-			activeLicense?.state === LicenseState.TERMINATED ||
-			activeLicense?.state === LicenseState.EXPIRED ||
-			activeLicense?.state === LicenseState.CANCELLED;
-
-		const hasWorkspaceIssue =
-			isWorkspaceBlocked || isWorkspaceSuspended || isWorkspaceAccessRestricted;
-
-		if (!hasWorkspaceIssue) {
-			const isFirstUser = checkFirstTimeUser();
-			if (
-				isFirstUser &&
-				!isOnboardingComplete &&
-				!ROUTES_NOT_TO_BE_OVERRIDEN.includes(pathname) &&
-				pathname !== ROUTES.ONBOARDING
-			) {
-				return <Redirect to={ROUTES.ONBOARDING} />;
-			}
-		}
-	}
-
-	// Check for GET_STARTED → GET_STARTED_WITH_CLOUD redirect (feature flag)
-	if (
-		currentRoute?.path === ROUTES.GET_STARTED &&
-		featureFlags?.find((e) => e.name === FeatureKeys.ONBOARDING_V3)?.active
-	) {
-		return <Redirect to={ROUTES.GET_STARTED_WITH_CLOUD} />;
-	}
-
-	// Main routing logic
-	if (currentRoute) {
-		const { isPrivate, key } = currentRoute;
-		if (isPrivate) {
-			if (isLoggedInState) {
-				const route = routePermission[key];
-				if (route && route.find((e) => e === user.role) === undefined) {
-					return <Redirect to={ROUTES.UN_AUTHORIZED} />;
-				}
-			} else {
-				// Save current path and redirect to login
-				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
-				return <Redirect to={ROUTES.LOGIN} />;
-			}
-		} else if (isLoggedInState) {
-			// Non-private route, but user is logged in
-			const fromPathname = getLocalStorageApi(
-				LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
-			);
-			if (fromPathname) {
-				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-				return <Redirect to={fromPathname} />;
-			}
-			if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
-				return <Redirect to={ROUTES.HOME} />;
-			}
-		}
-		// Non-private route, user not logged in - let login/signup pages handle it
-	} else if (isLoggedInState) {
-		// Unknown route, logged in
-		const fromPathname = getLocalStorageApi(
-			LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
-		);
-		if (fromPathname) {
-			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-			return <Redirect to={fromPathname} />;
-		}
-		return <Redirect to={ROUTES.HOME} />;
-	} else {
-		// Unknown route, not logged in
-		setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
-		return <Redirect to={ROUTES.LOGIN} />;
-	}
-
+	// NOTE: disabling this rule as there is no need to have div
 	return <>{children}</>;
 }
 

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -6,6 +6,7 @@ import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
+import history from 'lib/history';
 import { AppContext } from 'providers/App/App';
 import { IAppContext, IUser } from 'providers/App/types';
 import {
@@ -21,6 +22,19 @@ import { ROLES, USER_ROLES } from 'types/roles';
 
 import PrivateRoute from '../Private';
 
+// Mock history module
+jest.mock('lib/history', () => ({
+	__esModule: true,
+	default: {
+		push: jest.fn(),
+		location: { pathname: '/', search: '', hash: '' },
+		listen: jest.fn(),
+		createHref: jest.fn(),
+	},
+}));
+
+const mockHistoryPush = history.push as jest.Mock;
+
 // Mock localStorage APIs
 const mockLocalStorage: Record<string, string> = {};
 jest.mock('api/browser/localstorage/get', () => ({
@@ -225,18 +239,20 @@ function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
 }
 
 // Generic assertion helpers for navigation behavior
-// Using location-based assertions since Private.tsx now uses Redirect component
+// Using these allows easier refactoring when switching from history.push to Redirect component
 
 async function assertRedirectsTo(targetRoute: string): Promise<void> {
 	await waitFor(() => {
-		expect(screen.getByTestId('location-display')).toHaveTextContent(targetRoute);
+		expect(mockHistoryPush).toHaveBeenCalledWith(targetRoute);
 	});
 }
 
-function assertStaysOnRoute(expectedRoute: string): void {
-	expect(screen.getByTestId('location-display')).toHaveTextContent(
-		expectedRoute,
-	);
+function assertNoRedirect(): void {
+	expect(mockHistoryPush).not.toHaveBeenCalled();
+}
+
+function assertDoesNotRedirectTo(targetRoute: string): void {
+	expect(mockHistoryPush).not.toHaveBeenCalledWith(targetRoute);
 }
 
 function assertRendersChildren(): void {
@@ -334,7 +350,7 @@ describe('PrivateRoute', () => {
 			});
 
 			assertRendersChildren();
-			assertStaysOnRoute('/public/dashboard/abc123');
+			assertNoRedirect();
 		});
 
 		it('should render children for public dashboard route when logged in without redirecting', () => {
@@ -346,7 +362,7 @@ describe('PrivateRoute', () => {
 			assertRendersChildren();
 			// Critical: without the isPublicDashboard early return, logged-in users
 			// would be redirected to HOME due to the non-private route handling
-			assertStaysOnRoute('/public/dashboard/abc123');
+			assertNoRedirect();
 		});
 	});
 
@@ -404,7 +420,7 @@ describe('PrivateRoute', () => {
 			});
 
 			assertRendersChildren();
-			assertStaysOnRoute(ROUTES.HOME);
+			assertNoRedirect();
 		});
 
 		it('should redirect to unauthorized when VIEWER tries to access admin-only route /alerts/new', async () => {
@@ -513,7 +529,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: true },
 			});
 
-			assertStaysOnRoute(ROUTES.SOMETHING_WENT_WRONG);
+			assertDoesNotRedirectTo(ROUTES.HOME);
 		});
 	});
 
@@ -525,7 +541,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should not redirect - login page handles its own routing
-			assertStaysOnRoute(ROUTES.LOGIN);
+			assertNoRedirect();
 		});
 
 		it('should not redirect when not logged in user visits signup page', () => {
@@ -534,7 +550,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});
 
-			assertStaysOnRoute(ROUTES.SIGN_UP);
+			assertNoRedirect();
 		});
 
 		it('should not redirect when not logged in user visits password reset page', () => {
@@ -543,7 +559,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});
 
-			assertStaysOnRoute(ROUTES.PASSWORD_RESET);
+			assertNoRedirect();
 		});
 
 		it('should not redirect when not logged in user visits forgot password page', () => {
@@ -552,7 +568,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});
 
-			assertStaysOnRoute(ROUTES.FORGOT_PASSWORD);
+			assertNoRedirect();
 		});
 	});
 
@@ -641,7 +657,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Admin should be able to access settings even when workspace is blocked
-			assertStaysOnRoute(ROUTES.SETTINGS);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should allow ADMIN to access /settings/billing when workspace is blocked', () => {
@@ -657,7 +673,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.BILLING);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should allow ADMIN to access /settings/org-settings when workspace is blocked', () => {
@@ -673,7 +689,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.ORG_SETTINGS);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should allow ADMIN to access /settings/members when workspace is blocked', () => {
@@ -689,7 +705,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.MEMBERS_SETTINGS);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should allow ADMIN to access /settings/my-settings when workspace is blocked', () => {
@@ -705,7 +721,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.MY_SETTINGS);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should redirect VIEWER to workspace locked even when trying to access settings', async () => {
@@ -816,7 +832,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should not redirect self-hosted users to workspace locked even when workSpaceBlock is true', () => {
@@ -833,7 +849,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 	});
 
@@ -903,7 +919,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 
 		it('should not redirect self-hosted users to workspace access restricted when license is terminated', () => {
@@ -920,7 +936,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 
 		it('should not redirect when license is ACTIVE', () => {
@@ -937,7 +953,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 
 		it('should not redirect when license is EVALUATING', () => {
@@ -954,7 +970,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 	});
 
@@ -990,7 +1006,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
 		});
 
 		it('should not redirect self-hosted users to workspace suspended when license is defaulted', () => {
@@ -1007,7 +1023,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
 		});
 	});
 
@@ -1027,11 +1043,6 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			// Wait for the users query to complete and trigger re-render
-			await act(async () => {
-				await Promise.resolve();
-			});
-
 			await assertRedirectsTo(ROUTES.ONBOARDING);
 		});
 
@@ -1047,7 +1058,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when onboarding is already complete', async () => {
@@ -1073,7 +1084,7 @@ describe('PrivateRoute', () => {
 
 			// Critical: if isOnboardingComplete check is broken (always false),
 			// this test would fail because all other conditions for redirect ARE met
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding for non-cloud users', () => {
@@ -1088,7 +1099,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when on /workspace-locked route', () => {
@@ -1103,7 +1114,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when on /workspace-suspended route', () => {
@@ -1118,7 +1129,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when workspace is blocked and accessing billing', async () => {
@@ -1145,7 +1156,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should NOT redirect to onboarding - user needs to access billing to fix payment
-			assertStaysOnRoute(ROUTES.BILLING);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when workspace is blocked and accessing settings', async () => {
@@ -1169,7 +1180,7 @@ describe('PrivateRoute', () => {
 				await Promise.resolve();
 			});
 
-			assertStaysOnRoute(ROUTES.SETTINGS);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when workspace is suspended (DEFAULTED)', async () => {
@@ -1196,7 +1207,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should redirect to WORKSPACE_SUSPENDED, not ONBOARDING
-			await assertRedirectsTo(ROUTES.WORKSPACE_SUSPENDED);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when workspace is access restricted (TERMINATED)', async () => {
@@ -1223,7 +1234,7 @@ describe('PrivateRoute', () => {
 			});
 
 			// Should redirect to WORKSPACE_ACCESS_RESTRICTED, not ONBOARDING
-			await assertRedirectsTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 
 		it('should not redirect to onboarding when workspace is access restricted (EXPIRED)', async () => {
@@ -1249,7 +1260,7 @@ describe('PrivateRoute', () => {
 				await Promise.resolve();
 			});
 
-			await assertRedirectsTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
 		});
 	});
 
@@ -1291,7 +1302,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.GET_STARTED);
+			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
 		});
 
 		it('should not redirect when on GET_STARTED and ONBOARDING_V3 feature flag is not present', () => {
@@ -1303,7 +1314,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.GET_STARTED);
+			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
 		});
 
 		it('should not redirect when on different route even if ONBOARDING_V3 is active', () => {
@@ -1323,7 +1334,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
 		});
 	});
 
@@ -1339,7 +1350,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should not fetch users when org data is not available', () => {
@@ -1382,7 +1393,9 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.HOME);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
+			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 	});
 
@@ -1423,40 +1436,22 @@ describe('PrivateRoute', () => {
 			await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
 		});
 
-		it('should allow ADMIN to access /services route', () => {
-			renderPrivateRoute({
-				initialRoute: ROUTES.APPLICATION,
-				appContext: {
-					isLoggedIn: true,
-					user: createMockUser({ role: USER_ROLES.ADMIN as ROLES }),
-				},
+		it('should allow all roles to access /services route', () => {
+			const roles = [USER_ROLES.ADMIN, USER_ROLES.EDITOR, USER_ROLES.VIEWER];
+
+			roles.forEach((role) => {
+				jest.clearAllMocks();
+
+				renderPrivateRoute({
+					initialRoute: ROUTES.APPLICATION,
+					appContext: {
+						isLoggedIn: true,
+						user: createMockUser({ role: role as ROLES }),
+					},
+				});
+
+				assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
 			});
-
-			assertStaysOnRoute(ROUTES.APPLICATION);
-		});
-
-		it('should allow EDITOR to access /services route', () => {
-			renderPrivateRoute({
-				initialRoute: ROUTES.APPLICATION,
-				appContext: {
-					isLoggedIn: true,
-					user: createMockUser({ role: USER_ROLES.EDITOR as ROLES }),
-				},
-			});
-
-			assertStaysOnRoute(ROUTES.APPLICATION);
-		});
-
-		it('should allow VIEWER to access /services route', () => {
-			renderPrivateRoute({
-				initialRoute: ROUTES.APPLICATION,
-				appContext: {
-					isLoggedIn: true,
-					user: createMockUser({ role: USER_ROLES.VIEWER as ROLES }),
-				},
-			});
-
-			assertStaysOnRoute(ROUTES.APPLICATION);
 		});
 
 		it('should redirect VIEWER from /onboarding route (admin only)', async () => {
@@ -1486,7 +1481,7 @@ describe('PrivateRoute', () => {
 			});
 
 			assertRendersChildren();
-			assertStaysOnRoute(ROUTES.CHANNELS_NEW);
+			assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
 		});
 
 		it('should allow EDITOR to access /get-started route', () => {
@@ -1498,7 +1493,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			assertStaysOnRoute(ROUTES.GET_STARTED);
+			assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
 		});
 	});
 

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -14,6 +14,8 @@ import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schem
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import { parseAsBoolean, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 
 import './CreateServiceAccountModal.styles.scss';
 
@@ -28,6 +30,8 @@ function CreateServiceAccountModal(): JSX.Element {
 		parseAsBoolean.withDefault(false),
 	);
 
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
+
 	const {
 		control,
 		handleSubmit,
@@ -54,13 +58,10 @@ function CreateServiceAccountModal(): JSX.Element {
 				await invalidateListServiceAccounts(queryClient);
 			},
 			onError: (err) => {
-				const errMessage =
-					convertToApiError(
-						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'An error occurred';
-				toast.error(`Failed to create service account: ${errMessage}`, {
-					richColors: true,
-				});
+				const errMessage = convertToApiError(
+					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				);
+				showErrorModal(errMessage as APIError);
 			},
 		},
 	});
@@ -90,7 +91,7 @@ function CreateServiceAccountModal(): JSX.Element {
 			showCloseButton
 			width="narrow"
 			className="create-sa-modal"
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			<div className="create-sa-modal__content">
 				<form

frontend/src/components/CreateServiceAccountModal/__tests__/CreateServiceAccountModal.test.tsx

@@ -11,6 +11,16 @@ jest.mock('@signozhq/sonner', () => ({
 
 const mockToast = jest.mocked(toast);
 
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	__esModule: true,
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal,
+		isErrorModalVisible: false,
+	})),
+}));
+
 const SERVICE_ACCOUNTS_ENDPOINT = '*/api/v1/service_accounts';
 
 function renderModal(): ReturnType<typeof render> {
@@ -92,10 +102,13 @@ describe('CreateServiceAccountModal', () => {
 		await user.click(submitBtn);
 
 		await waitFor(() => {
-			expect(mockToast.error).toHaveBeenCalledWith(
-				expect.stringMatching(/Failed to create service account/i),
-				expect.anything(),
+			expect(showErrorModal).toHaveBeenCalledWith(
+				expect.objectContaining({
+					getErrorMessage: expect.any(Function),
+				}),
 			);
+			const passedError = showErrorModal.mock.calls[0][0] as any;
+			expect(passedError.getErrorMessage()).toBe('Internal Server Error');
 		});
 
 		expect(

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
@@ -28,6 +28,7 @@ import {
 	useMemberRoleManager,
 } from 'hooks/member/useMemberRoleManager';
 import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';
@@ -90,8 +91,11 @@ function EditMemberDrawer({
 	const [linkType, setLinkType] = useState<'invite' | 'reset' | null>(null);
 
 	const isInvited = member?.status === MemberStatus.Invited;
+	const isDeleted = member?.status === MemberStatus.Deleted;
 	const isSelf = !!member?.id && member.id === currentUser?.id;
 
+	const { showErrorModal } = useErrorModal();
+
 	const {
 		data: fetchedUser,
 		isLoading: isFetchingUser,
@@ -111,26 +115,39 @@ function EditMemberDrawer({
 		refetch: refetchRoles,
 	} = useRoles();
 
-	const { fetchedRoleIds, applyDiff } = useMemberRoleManager(
-		member?.id ?? '',
-		open && !!member?.id,
-	);
+	const {
+		fetchedRoleIds,
+		isLoading: isMemberRolesLoading,
+		applyDiff,
+	} = useMemberRoleManager(member?.id ?? '', open && !!member?.id);
 
 	const fetchedDisplayName =
 		fetchedUser?.data?.displayName ?? member?.name ?? '';
 	const fetchedUserId = fetchedUser?.data?.id;
 	const fetchedUserDisplayName = fetchedUser?.data?.displayName;
 
+	const roleSessionRef = useRef<string | null>(null);
+
 	useEffect(() => {
 		if (fetchedUserId) {
 			setLocalDisplayName(fetchedUserDisplayName ?? member?.name ?? '');
 		}
-		setSaveErrors([]);
 	}, [fetchedUserId, fetchedUserDisplayName, member?.name]);
 
 	useEffect(() => {
-		setLocalRole(fetchedRoleIds[0] ?? '');
-	}, [fetchedRoleIds]);
+		if (fetchedUserId) {
+			setSaveErrors([]);
+		}
+	}, [fetchedUserId]);
+
+	useEffect(() => {
+		if (!member?.id) {
+			roleSessionRef.current = null;
+		} else if (member.id !== roleSessionRef.current && !isMemberRolesLoading) {
+			setLocalRole(fetchedRoleIds[0] ?? '');
+			roleSessionRef.current = member.id;
+		}
+	}, [member?.id, fetchedRoleIds, isMemberRolesLoading]);
 
 	const isDirty =
 		member !== null &&
@@ -153,17 +170,10 @@ function EditMemberDrawer({
 				onClose();
 			},
 			onError: (err): void => {
-				const errMessage =
-					convertToApiError(
-						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'An error occurred';
-				const prefix = isInvited
-					? 'Failed to revoke invite'
-					: 'Failed to delete member';
-				toast.error(`${prefix}: ${errMessage}`, {
-					richColors: true,
-					position: 'top-right',
-				});
+				const errMessage = convertToApiError(
+					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				);
+				showErrorModal(errMessage as APIError);
 			},
 		},
 	});
@@ -344,15 +354,15 @@ function EditMemberDrawer({
 					position: 'top-right',
 				});
 			}
-		} catch {
-			toast.error('Failed to generate password reset link', {
-				richColors: true,
-				position: 'top-right',
-			});
+		} catch (err) {
+			const errMsg = convertToApiError(
+				err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+			);
+			showErrorModal(errMsg as APIError);
 		} finally {
 			setIsGeneratingLink(false);
 		}
-	}, [member, isInvited, onClose]);
+	}, [member, isInvited, onClose, showErrorModal]);
 
 	const [copyState, copyToClipboard] = useCopyToClipboard();
 	const handleCopyResetLink = useCallback((): void => {
@@ -419,7 +429,7 @@ function EditMemberDrawer({
 						}}
 						className="edit-member-drawer__input"
 						placeholder="Enter name"
-						disabled={isRootUser}
+						disabled={isRootUser || isDeleted}
 					/>
 				</Tooltip>
 			</div>
@@ -440,9 +450,15 @@ function EditMemberDrawer({
 				<label className="edit-member-drawer__label" htmlFor="member-role">
 					Roles
 				</label>
-				{isSelf || isRootUser ? (
+				{isSelf || isRootUser || isDeleted ? (
 					<Tooltip
-						title={isRootUser ? ROOT_USER_TOOLTIP : 'You cannot modify your own role'}
+						title={
+							isRootUser
+								? ROOT_USER_TOOLTIP
+								: isDeleted
+								? undefined
+								: 'You cannot modify your own role'
+						}
 					>
 						<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
 							<div className="edit-member-drawer__disabled-roles">
@@ -467,7 +483,7 @@ function EditMemberDrawer({
 						onRefetch={refetchRoles}
 						value={localRole}
 						onChange={(role): void => {
-							setLocalRole(role);
+							setLocalRole(role ?? '');
 							setSaveErrors((prev) =>
 								prev.filter(
 									(err) =>
@@ -476,6 +492,7 @@ function EditMemberDrawer({
 							);
 						}}
 						placeholder="Select role"
+						allowClear={false}
 					/>
 				)}
 			</div>
@@ -487,6 +504,10 @@ function EditMemberDrawer({
 						<Badge color="forest" variant="outline">
 							ACTIVE
 						</Badge>
+					) : member?.status === MemberStatus.Deleted ? (
+						<Badge color="cherry" variant="outline">
+							DELETED
+						</Badge>
 					) : (
 						<Badge color="amber" variant="outline">
 							INVITED
@@ -525,55 +546,57 @@ function EditMemberDrawer({
 		<div className="edit-member-drawer__layout">
 			<div className="edit-member-drawer__body">{drawerBody}</div>
 
-			<div className="edit-member-drawer__footer">
-				<div className="edit-member-drawer__footer-left">
-					<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
-						<span className="edit-member-drawer__tooltip-wrapper">
-							<Button
-								className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
-								onClick={(): void => setShowDeleteConfirm(true)}
-								disabled={isRootUser || isSelf}
-							>
-								<Trash2 size={12} />
-								{isInvited ? 'Revoke Invite' : 'Delete Member'}
-							</Button>
-						</span>
-					</Tooltip>
+			{!isDeleted && (
+				<div className="edit-member-drawer__footer">
+					<div className="edit-member-drawer__footer-left">
+						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
+							<span className="edit-member-drawer__tooltip-wrapper">
+								<Button
+									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
+									onClick={(): void => setShowDeleteConfirm(true)}
+									disabled={isRootUser || isSelf}
+								>
+									<Trash2 size={12} />
+									{isInvited ? 'Revoke Invite' : 'Delete Member'}
+								</Button>
+							</span>
+						</Tooltip>
 
-					<div className="edit-member-drawer__footer-divider" />
-					<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
-						<span className="edit-member-drawer__tooltip-wrapper">
-							<Button
-								className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-								onClick={handleGenerateResetLink}
-								disabled={isGeneratingLink || isRootUser}
-							>
-								<RefreshCw size={12} />
-								{isGeneratingLink && 'Generating...'}
-								{!isGeneratingLink && isInvited && 'Copy Invite Link'}
-								{!isGeneratingLink && !isInvited && 'Generate Password Reset Link'}
-							</Button>
-						</span>
-					</Tooltip>
+						<div className="edit-member-drawer__footer-divider" />
+						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
+							<span className="edit-member-drawer__tooltip-wrapper">
+								<Button
+									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
+									onClick={handleGenerateResetLink}
+									disabled={isGeneratingLink || isRootUser}
+								>
+									<RefreshCw size={12} />
+									{isGeneratingLink && 'Generating...'}
+									{!isGeneratingLink && isInvited && 'Copy Invite Link'}
+									{!isGeneratingLink && !isInvited && 'Generate Password Reset Link'}
+								</Button>
+							</span>
+						</Tooltip>
+					</div>
+
+					<div className="edit-member-drawer__footer-right">
+						<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
+							<X size={14} />
+							Cancel
+						</Button>
+
+						<Button
+							variant="solid"
+							color="primary"
+							size="sm"
+							disabled={!isDirty || isSaving || isRootUser}
+							onClick={handleSave}
+						>
+							{isSaving ? 'Saving...' : 'Save Member Details'}
+						</Button>
+					</div>
 				</div>
-
-				<div className="edit-member-drawer__footer-right">
-					<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
-						<X size={14} />
-						Cancel
-					</Button>
-
-					<Button
-						variant="solid"
-						color="primary"
-						size="sm"
-						disabled={!isDirty || isSaving || isRootUser}
-						onClick={handleSave}
-					>
-						{isSaving ? 'Saving...' : 'Save Member Details'}
-					</Button>
-				</div>
-			</div>
+			)}
 		</div>
 	);
 

frontend/src/components/EditMemberDrawer/__tests__/EditMemberDrawer.test.tsx

@@ -84,6 +84,16 @@ const ROLES_ENDPOINT = '*/api/v1/roles';
 const mockDeleteMutate = jest.fn();
 const mockGetResetPasswordToken = jest.mocked(getResetPasswordToken);
 
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	__esModule: true,
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal,
+		isErrorModalVisible: false,
+	})),
+}));
+
 const mockFetchedUser = {
 	data: {
 		id: 'user-1',
@@ -147,6 +157,7 @@ function renderDrawer(
 describe('EditMemberDrawer', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
+		showErrorModal.mockClear();
 		server.use(
 			rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
@@ -459,7 +470,6 @@ describe('EditMemberDrawer', () => {
 
 		it('shows API error message when deleteUser fails for active member', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const mockToast = jest.mocked(toast);
 
 			(useDeleteUser as jest.Mock).mockImplementation((options) => ({
 				mutate: mockDeleteMutate.mockImplementation(() => {
@@ -477,16 +487,20 @@ describe('EditMemberDrawer', () => {
 			await user.click(confirmBtns[confirmBtns.length - 1]);
 
 			await waitFor(() => {
-				expect(mockToast.error).toHaveBeenCalledWith(
-					'Failed to delete member: Something went wrong on server',
-					expect.anything(),
+				expect(showErrorModal).toHaveBeenCalledWith(
+					expect.objectContaining({
+						getErrorMessage: expect.any(Function),
+					}),
+				);
+				const passedError = showErrorModal.mock.calls[0][0] as any;
+				expect(passedError.getErrorMessage()).toBe(
+					'Something went wrong on server',
 				);
 			});
 		});
 
 		it('shows API error message when deleteUser fails for invited member', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const mockToast = jest.mocked(toast);
 
 			(useDeleteUser as jest.Mock).mockImplementation((options) => ({
 				mutate: mockDeleteMutate.mockImplementation(() => {
@@ -504,9 +518,14 @@ describe('EditMemberDrawer', () => {
 			await user.click(confirmBtns[confirmBtns.length - 1]);
 
 			await waitFor(() => {
-				expect(mockToast.error).toHaveBeenCalledWith(
-					'Failed to revoke invite: Something went wrong on server',
-					expect.anything(),
+				expect(showErrorModal).toHaveBeenCalledWith(
+					expect.objectContaining({
+						getErrorMessage: expect.any(Function),
+					}),
+				);
+				const passedError = showErrorModal.mock.calls[0][0] as any;
+				expect(passedError.getErrorMessage()).toBe(
+					'Something went wrong on server',
 				);
 			});
 		});

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -10,6 +10,7 @@ import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
 import { cloneDeep, debounce } from 'lodash-es';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
@@ -40,6 +41,8 @@ function InviteMembersModal({
 	onClose,
 	onComplete,
 }: InviteMembersModalProps): JSX.Element {
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
+
 	const [rows, setRows] = useState<InviteRow[]>(() => [
 		EMPTY_ROW(),
 		EMPTY_ROW(),
@@ -204,13 +207,11 @@ function InviteMembersModal({
 			resetAndClose();
 			onComplete?.();
 		} catch (err) {
-			const apiErr = err as APIError;
-			const errorMessage = apiErr?.getErrorMessage?.() ?? 'An error occurred';
-			toast.error(errorMessage, { richColors: true, position: 'top-right' });
+			showErrorModal(err as APIError);
 		} finally {
 			setIsSubmitting(false);
 		}
-	}, [rows, onComplete, resetAndClose, validateAllUsers]);
+	}, [validateAllUsers, rows, resetAndClose, onComplete, showErrorModal]);
 
 	const touchedRows = rows.filter(isRowTouched);
 	const isSubmitDisabled = isSubmitting || touchedRows.length === 0;
@@ -227,7 +228,7 @@ function InviteMembersModal({
 			showCloseButton
 			width="wide"
 			className="invite-members-modal"
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			<div className="invite-members-modal__content">
 				<div className="invite-members-modal__table">
@@ -329,6 +330,7 @@ function InviteMembersModal({
 						size="sm"
 						onClick={handleSubmit}
 						disabled={isSubmitDisabled}
+						loading={isSubmitting}
 					>
 						{isSubmitting ? 'Inviting...' : 'Invite Team Members'}
 					</Button>

frontend/src/components/InviteMembersModal/__tests__/InviteMembersModal.test.tsx

@@ -1,4 +1,3 @@
-import { toast } from '@signozhq/sonner';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
 import { StatusCodes } from 'http-status-codes';
@@ -22,6 +21,16 @@ jest.mock('@signozhq/sonner', () => ({
 	},
 }));
 
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	__esModule: true,
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal,
+		isErrorModalVisible: false,
+	})),
+}));
+
 const mockSendInvite = jest.mocked(sendInvite);
 const mockInviteUsers = jest.mocked(inviteUsers);
 
@@ -34,6 +43,7 @@ const defaultProps = {
 describe('InviteMembersModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
+		showErrorModal.mockClear();
 		mockSendInvite.mockResolvedValue({
 			httpStatusCode: 200,
 			data: { data: 'test', status: 'success' },
@@ -154,9 +164,10 @@ describe('InviteMembersModal', () => {
 	describe('error handling', () => {
 		it('shows BE message on single invite 409', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			mockSendInvite.mockRejectedValue(
-				makeApiError('An invite already exists for this email: single@signoz.io'),
+			const error = makeApiError(
+				'An invite already exists for this email: single@signoz.io',
 			);
+			mockSendInvite.mockRejectedValue(error);
 
 			render(<InviteMembersModal {...defaultProps} />);
 
@@ -171,18 +182,16 @@ describe('InviteMembersModal', () => {
 			);
 
 			await waitFor(() => {
-				expect(toast.error).toHaveBeenCalledWith(
-					'An invite already exists for this email: single@signoz.io',
-					expect.anything(),
-				);
+				expect(showErrorModal).toHaveBeenCalledWith(error);
 			});
 		});
 
 		it('shows BE message on bulk invite 409', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			mockInviteUsers.mockRejectedValue(
-				makeApiError('An invite already exists for this email: alice@signoz.io'),
+			const error = makeApiError(
+				'An invite already exists for this email: alice@signoz.io',
 			);
+			mockInviteUsers.mockRejectedValue(error);
 
 			render(<InviteMembersModal {...defaultProps} />);
 
@@ -201,18 +210,17 @@ describe('InviteMembersModal', () => {
 			);
 
 			await waitFor(() => {
-				expect(toast.error).toHaveBeenCalledWith(
-					'An invite already exists for this email: alice@signoz.io',
-					expect.anything(),
-				);
+				expect(showErrorModal).toHaveBeenCalledWith(error);
 			});
 		});
 
 		it('shows BE message on generic error', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			mockSendInvite.mockRejectedValue(
-				makeApiError('Internal server error', StatusCodes.INTERNAL_SERVER_ERROR),
+			const error = makeApiError(
+				'Internal server error',
+				StatusCodes.INTERNAL_SERVER_ERROR,
 			);
+			mockSendInvite.mockRejectedValue(error);
 
 			render(<InviteMembersModal {...defaultProps} />);
 
@@ -227,10 +235,7 @@ describe('InviteMembersModal', () => {
 			);
 
 			await waitFor(() => {
-				expect(toast.error).toHaveBeenCalledWith(
-					'Internal server error',
-					expect.anything(),
-				);
+				expect(showErrorModal).toHaveBeenCalledWith(error);
 			});
 		});
 	});

frontend/src/components/MembersTable/MembersTable.tsx

@@ -210,7 +210,7 @@ function MembersTable({
 					index % 2 === 0 ? 'members-table-row--tinted' : ''
 				}
 				onRow={(record): React.HTMLAttributes<HTMLElement> => {
-					const isClickable = onRowClick && record.status !== MemberStatus.Deleted;
+					const isClickable = !!onRowClick;
 					return {
 						onClick: (): void => {
 							if (isClickable) {

frontend/src/components/MembersTable/__tests__/MembersTable.test.tsx

@@ -86,7 +86,7 @@ describe('MembersTable', () => {
 		);
 	});
 
-	it('renders DELETED badge and does not call onRowClick when a deleted member row is clicked', async () => {
+	it('renders DELETED badge and calls onRowClick when a deleted member row is clicked', async () => {
 		const onRowClick = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const deletedMember: MemberRow = {
@@ -108,7 +108,7 @@ describe('MembersTable', () => {
 
 		expect(screen.getByText('DELETED')).toBeInTheDocument();
 		await user.click(screen.getByText('Dave Deleted'));
-		expect(onRowClick).not.toHaveBeenCalledWith(
+		expect(onRowClick).toHaveBeenCalledWith(
 			expect.objectContaining({ id: 'user-del' }),
 		);
 	});

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -85,7 +85,8 @@ interface BaseProps {
 interface SingleProps extends BaseProps {
 	mode?: 'single';
 	value?: string;
-	onChange?: (role: string) => void;
+	onChange?: (role: string | undefined) => void;
+	allowClear?: boolean;
 }
 
 interface MultipleProps extends BaseProps {
@@ -154,13 +155,14 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 		);
 	}
 
-	const { value, onChange } = props as SingleProps;
+	const { value, onChange, allowClear = true } = props as SingleProps;
 	return (
 		<Select
 			id={id}
 			value={value || undefined}
 			onChange={onChange}
 			placeholder={placeholder}
+			allowClear={allowClear}
 			className={cx('roles-single-select', className)}
 			loading={loading}
 			notFoundContent={notFoundContent}

frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx

@@ -17,6 +17,8 @@ import { AxiosError } from 'axios';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import { parseAsBoolean, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 
 import KeyCreatedPhase from './KeyCreatedPhase';
 import KeyFormPhase from './KeyFormPhase';
@@ -27,6 +29,7 @@ import './AddKeyModal.styles.scss';
 
 function AddKeyModal(): JSX.Element {
 	const queryClient = useQueryClient();
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [accountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [isAddKeyOpen, setIsAddKeyOpen] = useQueryState(
 		SA_QUERY_PARAMS.ADD_KEY,
@@ -81,11 +84,11 @@ function AddKeyModal(): JSX.Element {
 				}
 			},
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to create key';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -151,7 +154,7 @@ function AddKeyModal(): JSX.Element {
 			width="base"
 			className="add-key-modal"
 			showCloseButton
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			{phase === Phase.FORM && (
 				<KeyFormPhase

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -16,9 +16,12 @@ import type {
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import { parseAsBoolean, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 
 function DeleteAccountModal(): JSX.Element {
 	const queryClient = useQueryClient();
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [accountId, setAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [isDeleteOpen, setIsDeleteOpen] = useQueryState(
 		SA_QUERY_PARAMS.DELETE_SA,
@@ -45,11 +48,11 @@ function DeleteAccountModal(): JSX.Element {
 				await invalidateListServiceAccounts(queryClient);
 			},
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to delete service account';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -79,7 +82,7 @@ function DeleteAccountModal(): JSX.Element {
 			width="narrow"
 			className="alert-dialog sa-delete-dialog"
 			showCloseButton={false}
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			<p className="sa-delete-dialog__body">
 				Are you sure you want to delete <strong>{accountName}</strong>? This action

frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx

@@ -17,7 +17,9 @@ import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import dayjs from 'dayjs';
 import { parseAsString, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
+import APIError from 'types/api/error';
 
 import { RevokeKeyContent } from '../RevokeKeyModal';
 import EditKeyForm from './EditKeyForm';
@@ -41,6 +43,7 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 	const open = !!editKeyId && !!selectedAccountId;
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [isRevokeConfirmOpen, setIsRevokeConfirmOpen] = useState(false);
 
 	const {
@@ -78,11 +81,11 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 				}
 			},
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to update key';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -102,12 +105,13 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 					});
 				}
 			},
+			// eslint-disable-next-line sonarjs/no-identical-functions
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to revoke key';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -160,7 +164,7 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 				isRevokeConfirmOpen ? 'alert-dialog delete-dialog' : 'edit-key-modal'
 			}
 			showCloseButton={!isRevokeConfirmOpen}
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			{isRevokeConfirmOpen ? (
 				<RevokeKeyContent

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -17,7 +17,7 @@ interface OverviewTabProps {
 	localName: string;
 	onNameChange: (v: string) => void;
 	localRole: string;
-	onRoleChange: (v: string) => void;
+	onRoleChange: (v: string | undefined) => void;
 	isDisabled: boolean;
 	availableRoles: AuthtypesRoleDTO[];
 	rolesLoading?: boolean;

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -16,6 +16,8 @@ import type {
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import { parseAsString, useQueryState } from 'nuqs';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
 
 export interface RevokeKeyContentProps {
 	isRevoking: boolean;
@@ -56,6 +58,7 @@ export function RevokeKeyContent({
 
 function RevokeKeyModal(): JSX.Element {
 	const queryClient = useQueryClient();
+	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 	const [accountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [revokeKeyId, setRevokeKeyId] = useQueryState(
 		SA_QUERY_PARAMS.REVOKE_KEY,
@@ -83,11 +86,11 @@ function RevokeKeyModal(): JSX.Element {
 				}
 			},
 			onError: (error) => {
-				const errMessage =
+				showErrorModal(
 					convertToApiError(
 						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					)?.getErrorMessage() || 'Failed to revoke key';
-				toast.error(errMessage, { richColors: true });
+					) as APIError,
+				);
 			},
 		},
 	});
@@ -115,7 +118,7 @@ function RevokeKeyModal(): JSX.Element {
 			width="narrow"
 			className="alert-dialog delete-dialog"
 			showCloseButton={false}
-			disableOutsideClick={false}
+			disableOutsideClick={isErrorModalVisible}
 		>
 			<RevokeKeyContent
 				isRevoking={isRevoking}

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { Button } from '@signozhq/button';
 import { DrawerWrapper } from '@signozhq/drawer';
@@ -8,7 +8,9 @@ import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
+	getGetServiceAccountRolesQueryKey,
 	getListServiceAccountsQueryKey,
+	useDeleteServiceAccountRole,
 	useGetServiceAccount,
 	useListServiceAccountKeys,
 	useUpdateServiceAccount,
@@ -23,7 +25,10 @@ import {
 	ServiceAccountStatus,
 	toServiceAccountRow,
 } from 'container/ServiceAccountsSettings/utils';
-import { useServiceAccountRoleManager } from 'hooks/serviceAccount/useServiceAccountRoleManager';
+import {
+	RoleUpdateFailure,
+	useServiceAccountRoleManager,
+} from 'hooks/serviceAccount/useServiceAccountRoleManager';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -49,6 +54,13 @@ export interface ServiceAccountDrawerProps {
 
 const PAGE_SIZE = 15;
 
+function toSaveApiError(err: unknown): APIError {
+	return (
+		convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
+		toAPIError(err as AxiosError<RenderErrorResponseDTO>)
+	);
+}
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function ServiceAccountDrawer({
 	onSuccess,
@@ -103,21 +115,35 @@ function ServiceAccountDrawer({
 		[accountData],
 	);
 
-	const { currentRoles, applyDiff } = useServiceAccountRoleManager(
-		selectedAccountId ?? '',
-	);
+	const {
+		currentRoles,
+		isLoading: isRolesLoading,
+		applyDiff,
+	} = useServiceAccountRoleManager(selectedAccountId ?? '');
+
+	const roleSessionRef = useRef<string | null>(null);
 
 	useEffect(() => {
 		if (account?.id) {
 			setLocalName(account?.name ?? '');
 			setKeysPage(1);
 		}
-		setSaveErrors([]);
 	}, [account?.id, account?.name, setKeysPage]);
 
 	useEffect(() => {
-		setLocalRole(currentRoles[0]?.id ?? '');
-	}, [currentRoles]);
+		if (account?.id) {
+			setSaveErrors([]);
+		}
+	}, [account?.id]);
+
+	useEffect(() => {
+		if (!account?.id) {
+			roleSessionRef.current = null;
+		} else if (account.id !== roleSessionRef.current && !isRolesLoading) {
+			setLocalRole(currentRoles[0]?.id ?? '');
+			roleSessionRef.current = account.id;
+		}
+	}, [account?.id, currentRoles, isRolesLoading]);
 
 	const isDeleted =
 		account?.status?.toUpperCase() === ServiceAccountStatus.Deleted;
@@ -153,12 +179,22 @@ function ServiceAccountDrawer({
 
 	// the retry for this mutation is safe due to the api being idempotent on backend
 	const { mutateAsync: updateMutateAsync } = useUpdateServiceAccount();
+	const { mutateAsync: deleteRole } = useDeleteServiceAccountRole();
 
-	const toSaveApiError = useCallback(
-		(err: unknown): APIError =>
-			convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
-			toAPIError(err as AxiosError<RenderErrorResponseDTO>),
-		[],
+	const executeRolesOperation = useCallback(
+		async (accountId: string): Promise<RoleUpdateFailure[]> => {
+			if (localRole === '' && currentRoles[0]?.id) {
+				await deleteRole({
+					pathParams: { id: accountId, rid: currentRoles[0].id },
+				});
+				await queryClient.invalidateQueries(
+					getGetServiceAccountRolesQueryKey({ id: accountId }),
+				);
+				return [];
+			}
+			return applyDiff([localRole].filter(Boolean), availableRoles);
+		},
+		[localRole, currentRoles, availableRoles, applyDiff, deleteRole, queryClient],
 	);
 
 	const retryNameUpdate = useCallback(async (): Promise<void> => {
@@ -180,14 +216,7 @@ function ServiceAccountDrawer({
 				),
 			);
 		}
-	}, [
-		account,
-		localName,
-		updateMutateAsync,
-		refetchAccount,
-		queryClient,
-		toSaveApiError,
-	]);
+	}, [account, localName, updateMutateAsync, refetchAccount, queryClient]);
 
 	const handleNameChange = useCallback((name: string): void => {
 		setLocalName(name);
@@ -210,29 +239,39 @@ function ServiceAccountDrawer({
 				);
 			}
 		},
-		[toSaveApiError],
+		[],
+	);
+
+	const clearRoleErrors = useCallback((): void => {
+		setSaveErrors((prev) =>
+			prev.filter(
+				(e) => e.context !== 'Roles update' && !e.context.startsWith("Role '"),
+			),
+		);
+	}, []);
+
+	const failuresToSaveErrors = useCallback(
+		(failures: RoleUpdateFailure[]): SaveError[] =>
+			failures.map((f) => {
+				const ctx = `Role '${f.roleName}'`;
+				return {
+					context: ctx,
+					apiError: toSaveApiError(f.error),
+					onRetry: makeRoleRetry(ctx, f.onRetry),
+				};
+			}),
+		[makeRoleRetry],
 	);
 
 	const retryRolesUpdate = useCallback(async (): Promise<void> => {
 		try {
-			const failures = await applyDiff(
-				[localRole].filter(Boolean),
-				availableRoles,
-			);
+			const failures = await executeRolesOperation(selectedAccountId ?? '');
 			if (failures.length === 0) {
 				setSaveErrors((prev) => prev.filter((e) => e.context !== 'Roles update'));
 			} else {
 				setSaveErrors((prev) => {
 					const rest = prev.filter((e) => e.context !== 'Roles update');
-					const roleErrors = failures.map((f) => {
-						const ctx = `Role '${f.roleName}'`;
-						return {
-							context: ctx,
-							apiError: toSaveApiError(f.error),
-							onRetry: makeRoleRetry(ctx, f.onRetry),
-						};
-					});
-					return [...rest, ...roleErrors];
+					return [...rest, ...failuresToSaveErrors(failures)];
 				});
 			}
 		} catch (err) {
@@ -242,7 +281,7 @@ function ServiceAccountDrawer({
 				),
 			);
 		}
-	}, [localRole, availableRoles, applyDiff, toSaveApiError, makeRoleRetry]);
+	}, [selectedAccountId, executeRolesOperation, failuresToSaveErrors]);
 
 	const handleSave = useCallback(async (): Promise<void> => {
 		if (!account || !isDirty) {
@@ -261,7 +300,7 @@ function ServiceAccountDrawer({
 
 			const [nameResult, rolesResult] = await Promise.allSettled([
 				namePromise,
-				applyDiff([localRole].filter(Boolean), availableRoles),
+				executeRolesOperation(account.id),
 			]);
 
 			const errors: SaveError[] = [];
@@ -281,14 +320,7 @@ function ServiceAccountDrawer({
 					onRetry: retryRolesUpdate,
 				});
 			} else {
-				for (const failure of rolesResult.value) {
-					const context = `Role '${failure.roleName}'`;
-					errors.push({
-						context,
-						apiError: toSaveApiError(failure.error),
-						onRetry: makeRoleRetry(context, failure.onRetry),
-					});
-				}
+				errors.push(...failuresToSaveErrors(rolesResult.value));
 			}
 
 			if (errors.length > 0) {
@@ -310,17 +342,14 @@ function ServiceAccountDrawer({
 		account,
 		isDirty,
 		localName,
-		localRole,
-		availableRoles,
 		updateMutateAsync,
-		applyDiff,
+		executeRolesOperation,
 		refetchAccount,
 		onSuccess,
 		queryClient,
-		toSaveApiError,
 		retryNameUpdate,
-		makeRoleRetry,
 		retryRolesUpdate,
+		failuresToSaveErrors,
 	]);
 
 	const handleClose = useCallback((): void => {
@@ -413,7 +442,10 @@ function ServiceAccountDrawer({
 								localName={localName}
 								onNameChange={handleNameChange}
 								localRole={localRole}
-								onRoleChange={setLocalRole}
+								onRoleChange={(role): void => {
+									setLocalRole(role ?? '');
+									clearRoleErrors();
+								}}
 								isDisabled={isDeleted}
 								availableRoles={availableRoles}
 								rolesLoading={rolesLoading}

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -13,7 +13,7 @@ import uPlot from 'uplot';
 
 import { ChartProps } from '../types';
 
-const TOOLTIP_WIDTH_PADDING = 120;
+const TOOLTIP_WIDTH_PADDING = 60;
 const TOOLTIP_MIN_WIDTH = 200;
 
 export default function ChartWrapper({

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -51,6 +51,8 @@ function MembersSettings(): JSX.Element {
 
 		if (filterMode === FilterMode.Invited) {
 			result = result.filter((m) => m.status === MemberStatus.Invited);
+		} else if (filterMode === FilterMode.Deleted) {
+			result = result.filter((m) => m.status === MemberStatus.Deleted);
 		}
 
 		if (searchQuery.trim()) {
@@ -89,6 +91,9 @@ function MembersSettings(): JSX.Element {
 	const pendingCount = allMembers.filter(
 		(m) => m.status === MemberStatus.Invited,
 	).length;
+	const deletedCount = allMembers.filter(
+		(m) => m.status === MemberStatus.Deleted,
+	).length;
 	const totalCount = allMembers.length;
 
 	const filterMenuItems: MenuProps['items'] = [
@@ -118,12 +123,27 @@ function MembersSettings(): JSX.Element {
 				setPage(1);
 			},
 		},
+		{
+			key: FilterMode.Deleted,
+			label: (
+				<div className="members-filter-option">
+					<span>Deleted ⎯ {deletedCount}</span>
+					{filterMode === FilterMode.Deleted && <Check size={14} />}
+				</div>
+			),
+			onClick: (): void => {
+				setFilterMode(FilterMode.Deleted);
+				setPage(1);
+			},
+		},
 	];
 
 	const filterLabel =
 		filterMode === FilterMode.All
 			? `All members ⎯ ${totalCount}`
-			: `Pending invites ⎯ ${pendingCount}`;
+			: filterMode === FilterMode.Invited
+			? `Pending invites ⎯ ${pendingCount}`
+			: `Deleted ⎯ ${deletedCount}`;
 
 	const handleInviteComplete = useCallback((): void => {
 		refetchUsers();

frontend/src/container/MembersSettings/__tests__/MembersSettings.integration.test.tsx

@@ -117,14 +117,14 @@ describe('MembersSettings (integration)', () => {
 		await screen.findByText('Member Details');
 	});
 
-	it('does not open EditMemberDrawer when a deleted member row is clicked', async () => {
+	it('opens EditMemberDrawer when a deleted member row is clicked', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		render(<MembersSettings />);
 
 		await user.click(await screen.findByText('Dave Deleted'));
 
-		expect(screen.queryByText('Member Details')).not.toBeInTheDocument();
+		expect(screen.queryByText('Member Details')).toBeInTheDocument();
 	});
 
 	it('opens InviteMembersModal when "Invite member" button is clicked', async () => {

frontend/src/container/MembersSettings/utils.ts

@@ -1,6 +1,7 @@
 export enum FilterMode {
 	All = 'all',
 	Invited = 'invited',
+	Deleted = 'deleted',
 }
 
 export enum MemberStatus {

frontend/src/container/OrganizationSettings/DisplayName/__tests__/DisplayName.test.tsx

@@ -0,0 +1,72 @@
+import { toast } from '@signozhq/sonner';
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import DisplayName from '../index';
+
+jest.mock('@signozhq/sonner', () => ({
+	toast: {
+		success: jest.fn(),
+		error: jest.fn(),
+	},
+}));
+
+const ORG_ME_ENDPOINT = '*/api/v2/orgs/me';
+
+const defaultProps = { index: 0, id: 'does-not-matter-id' };
+
+describe('DisplayName', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders form pre-filled with org displayName from context', async () => {
+		render(<DisplayName {...defaultProps} />);
+
+		const input = await screen.findByRole('textbox');
+		expect(input).toHaveValue('Pentagon');
+
+		expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
+	});
+
+	it('enables submit and calls PUT when display name is changed', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		server.use(rest.put(ORG_ME_ENDPOINT, (_, res, ctx) => res(ctx.status(200))));
+
+		render(<DisplayName {...defaultProps} />);
+
+		const input = await screen.findByRole('textbox');
+		await user.clear(input);
+		await user.type(input, 'New Org Name');
+
+		const submitBtn = screen.getByRole('button', { name: /submit/i });
+		expect(submitBtn).toBeEnabled();
+
+		await user.click(submitBtn);
+
+		await waitFor(() => {
+			expect(toast.success).toHaveBeenCalled();
+		});
+	});
+
+	it('shows validation error when display name is cleared and submitted', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(<DisplayName {...defaultProps} />);
+
+		const input = await screen.findByRole('textbox');
+		await user.clear(input);
+
+		// Submit button is disabled when empty, so trigger validation via Enter
+		await user.type(input, '{enter}');
+
+		await waitFor(() => {
+			expect(screen.getByText(/missing display name/i)).toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/OrganizationSettings/DisplayName/index.tsx

@@ -1,12 +1,19 @@
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from '@signozhq/sonner';
 import { Button, Form, Input } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { useUpdateMyOrganization } from 'api/generated/services/orgs';
+import {
+	useGetMyOrganization,
+	useUpdateMyOrganization,
+} from 'api/generated/services/orgs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import { useAppContext } from 'providers/App/App';
 import { IUser } from 'providers/App/types';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+import { USER_ROLES } from 'types/roles';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 
 function DisplayName({ index, id: orgId }: DisplayNameProps): JSX.Element {
@@ -14,8 +21,25 @@ function DisplayName({ index, id: orgId }: DisplayNameProps): JSX.Element {
 	const orgName = Form.useWatch('displayName', form);
 
 	const { t } = useTranslation(['organizationsettings', 'common']);
-	const { org, updateOrg } = useAppContext();
-	const { displayName } = (org || [])[index];
+	const { showErrorModal } = useErrorModal();
+	const { org, updateOrg, user } = useAppContext();
+	const currentOrg = (org || [])[index];
+	const isAdmin = user.role === USER_ROLES.ADMIN;
+
+	const { data: orgData } = useGetMyOrganization({
+		query: {
+			enabled: isAdmin && !currentOrg?.displayName,
+		},
+	});
+
+	const displayName =
+		currentOrg?.displayName ?? orgData?.data?.displayName ?? '';
+
+	useEffect(() => {
+		if (displayName && !form.getFieldValue('displayName')) {
+			form.setFieldsValue({ displayName });
+		}
+	}, [displayName, form]);
 
 	const {
 		mutateAsync: updateMyOrganization,
@@ -30,12 +54,8 @@ function DisplayName({ index, id: orgId }: DisplayNameProps): JSX.Element {
 				updateOrg(orgId, data.displayName ?? '');
 			},
 			onError: (error) => {
-				const apiError = convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO>,
-				);
-				toast.error(
-					apiError?.getErrorMessage() ?? t('something_went_wrong', { ns: 'common' }),
-					{ richColors: true, position: 'top-right' },
+				showErrorModal(
+					convertToApiError(error as AxiosError<RenderErrorResponseDTO>) as APIError,
 				);
 			},
 		},

frontend/src/hooks/serviceAccount/useServiceAccountRoleManager.ts

@@ -73,7 +73,10 @@ export function useServiceAccountRoleManager(
 				allOperations.map((op) => op.run()),
 			);
 
-			await invalidateRoles();
+			const successCount = results.filter((r) => r.status === 'fulfilled').length;
+			if (successCount > 0) {
+				await invalidateRoles();
+			}
 
 			const failures: RoleUpdateFailure[] = [];
 			results.forEach((result, index) => {

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.module.scss

@@ -1,72 +0,0 @@
-.uplot-tooltip-container {
-	font-family: 'Inter';
-	font-size: 12px;
-	background: var(--bg-ink-300);
-	-webkit-font-smoothing: antialiased;
-	color: var(--bg-vanilla-100);
-	border-radius: 6px;
-	border: 1px solid var(--bg-ink-100);
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-
-	&.lightMode {
-		background: var(--bg-vanilla-100);
-		color: var(--bg-ink-500);
-		border: 1px solid var(--bg-vanilla-300);
-
-		.uplot-tooltip-list {
-			&::-webkit-scrollbar-thumb {
-				background: var(--bg-vanilla-400);
-			}
-		}
-
-		.uplot-tooltip-divider {
-			background-color: var(--bg-vanilla-300);
-		}
-	}
-
-	.uplot-tooltip-header-container {
-		padding: 1rem 1rem 0 1rem;
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-
-		&:last-child {
-			padding-bottom: 1rem;
-		}
-
-		.uplot-tooltip-header {
-			font-size: 13px;
-			font-weight: 500;
-		}
-	}
-
-	.uplot-tooltip-divider {
-		width: 100%;
-		height: 1px;
-		background-color: var(--bg-ink-100);
-	}
-
-	.uplot-tooltip-list {
-		// Virtuoso absolutely positions its item rows; left: 0 prevents accidental
-		// horizontal offset when the scroller has padding or transform applied.
-		div[data-viewport-type='element'] {
-			left: 0;
-			padding: 4px 8px 4px 16px;
-		}
-
-		&::-webkit-scrollbar {
-			width: 0.3rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--bg-slate-100);
-			border-radius: 0.5rem;
-		}
-	}
-}

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.styles.scss

@@ -0,0 +1,70 @@
+.uplot-tooltip-container {
+	font-family: 'Inter';
+	font-size: 12px;
+	background: var(--bg-ink-300);
+	-webkit-font-smoothing: antialiased;
+	color: var(--bg-vanilla-100);
+	border-radius: 6px;
+	padding: 1rem 0.5rem 0.5rem 1rem;
+	border: 1px solid var(--bg-ink-100);
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&.lightMode {
+		background: var(--bg-vanilla-100);
+		color: var(--bg-ink-500);
+		border: 1px solid var(--bg-vanilla-300);
+
+		.uplot-tooltip-list {
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-vanilla-400);
+			}
+		}
+	}
+
+	.uplot-tooltip-header {
+		font-size: 13px;
+		font-weight: 500;
+	}
+
+	.uplot-tooltip-list-container {
+		overflow-y: auto;
+		max-height: 330px;
+
+		.uplot-tooltip-list {
+			&::-webkit-scrollbar {
+				width: 0.3rem;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-slate-100);
+				border-radius: 0.5rem;
+			}
+		}
+	}
+
+	.uplot-tooltip-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-bottom: 4px;
+
+		.uplot-tooltip-item-marker {
+			border-radius: 50%;
+			border-width: 2px;
+			width: 12px;
+			height: 12px;
+			flex-shrink: 0;
+		}
+
+		.uplot-tooltip-item-content {
+			white-space: wrap;
+			word-break: break-all;
+		}
+	}
+}

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx

@@ -7,14 +7,12 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useTimezone } from 'providers/Timezone';
 
 import { TooltipProps } from '../types';
-import TooltipItem from './components/TooltipItem/TooltipItem';
 
-import Styles from './Tooltip.module.scss';
+import './Tooltip.styles.scss';
 
-// Fallback per-item height used for the initial size estimate before
-// Virtuoso reports the real total height via totalListHeightChanged.
+const TOOLTIP_LIST_MAX_HEIGHT = 330;
 const TOOLTIP_ITEM_HEIGHT = 38;
-const LIST_MAX_HEIGHT = 300;
+const TOOLTIP_LIST_PADDING = 10;
 
 export default function Tooltip({
 	uPlotInstance,
@@ -23,26 +21,27 @@ export default function Tooltip({
 	showTooltipHeader = true,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
+	const [listHeight, setListHeight] = useState(0);
+	const tooltipContent = content ?? [];
 	const { timezone: userTimezone } = useTimezone();
-	const [totalListHeight, setTotalListHeight] = useState(0);
 
-	const tooltipContent = useMemo(() => content ?? [], [content]);
-
-	const resolvedTimezone = timezone?.value ?? userTimezone.value;
+	const resolvedTimezone = useMemo(() => {
+		if (!timezone) {
+			return userTimezone.value;
+		}
+		return timezone.value;
+	}, [timezone, userTimezone]);
 
 	const headerTitle = useMemo(() => {
 		if (!showTooltipHeader) {
 			return null;
 		}
+		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
 		if (cursorIdx == null) {
 			return null;
 		}
-		const timestamp = uPlotInstance.data[0]?.[cursorIdx];
-		if (timestamp == null) {
-			return null;
-		}
-		return dayjs(timestamp * 1000)
+		return dayjs(data[0][cursorIdx] * 1000)
 			.tz(resolvedTimezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
@@ -52,68 +51,60 @@ export default function Tooltip({
 		showTooltipHeader,
 	]);
 
-	const activeItem = useMemo(
-		() => tooltipContent.find((item) => item.isActive) ?? null,
-		[tooltipContent],
-	);
-
-	// Use the measured height from Virtuoso when available; fall back to a
-	// per-item estimate on the first render.  Math.ceil prevents a 1 px
-	// subpixel rounding gap from triggering a spurious scrollbar.
-	const virtuosoHeight = useMemo(() => {
-		return totalListHeight > 0
-			? Math.ceil(Math.min(totalListHeight, LIST_MAX_HEIGHT))
-			: Math.min(tooltipContent.length * TOOLTIP_ITEM_HEIGHT, LIST_MAX_HEIGHT);
-	}, [totalListHeight, tooltipContent.length]);
-
-	const showHeader = showTooltipHeader || activeItem != null;
-	// With a single series the active item is fully represented in the header —
-	// hide the divider and list to avoid showing a duplicate row.
-	const showList = tooltipContent.length > 1;
-	const showDivider = showList && showHeader;
+	const virtuosoStyle = useMemo(() => {
+		return {
+			height:
+				listHeight > 0
+					? Math.min(listHeight + TOOLTIP_LIST_PADDING, TOOLTIP_LIST_MAX_HEIGHT)
+					: Math.min(
+							tooltipContent.length * TOOLTIP_ITEM_HEIGHT,
+							TOOLTIP_LIST_MAX_HEIGHT,
+					  ),
+			width: '100%',
+		};
+	}, [listHeight, tooltipContent.length]);
 
 	return (
 		<div
-			className={cx(Styles.uplotTooltipContainer, !isDarkMode && Styles.lightMode)}
+			className={cx(
+				'uplot-tooltip-container',
+				isDarkMode ? 'darkMode' : 'lightMode',
+			)}
 			data-testid="uplot-tooltip-container"
 		>
-			{showHeader && (
-				<div className={Styles.uplotTooltipHeaderContainer}>
-					{showTooltipHeader && headerTitle && (
-						<div
-							className={Styles.uplotTooltipHeader}
-							data-testid="uplot-tooltip-header"
-						>
-							<span>{headerTitle}</span>
-						</div>
-					)}
-
-					{activeItem && (
-						<TooltipItem
-							item={activeItem}
-							isItemActive={true}
-							containerTestId="uplot-tooltip-pinned"
-							markerTestId="uplot-tooltip-pinned-marker"
-							contentTestId="uplot-tooltip-pinned-content"
-						/>
-					)}
+			{showTooltipHeader && (
+				<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
+					<span>{headerTitle}</span>
 				</div>
 			)}
-
-			{showDivider && <span className={Styles.uplotTooltipDivider} />}
-
-			{showList && (
-				<Virtuoso
-					className={Styles.uplotTooltipList}
-					data-testid="uplot-tooltip-list"
-					data={tooltipContent}
-					style={{ height: virtuosoHeight, width: '100%' }}
-					totalListHeightChanged={setTotalListHeight}
-					itemContent={(_, item): JSX.Element => (
-						<TooltipItem item={item} isItemActive={false} />
-					)}
-				/>
-			)}
+			<div className="uplot-tooltip-list-container">
+				{tooltipContent.length > 0 ? (
+					<Virtuoso
+						className="uplot-tooltip-list"
+						data-testid="uplot-tooltip-list"
+						data={tooltipContent}
+						style={virtuosoStyle}
+						totalListHeightChanged={setListHeight}
+						itemContent={(_, item): JSX.Element => (
+							<div className="uplot-tooltip-item" data-testid="uplot-tooltip-item">
+								<div
+									className="uplot-tooltip-item-marker"
+									style={{ borderColor: item.color }}
+									data-is-legend-marker={true}
+									data-testid="uplot-tooltip-item-marker"
+								/>
+								<div
+									className="uplot-tooltip-item-content"
+									style={{ color: item.color, fontWeight: item.isActive ? 700 : 400 }}
+									data-testid="uplot-tooltip-item-content"
+								>
+									{item.label}: {item.tooltipValue}
+								</div>
+							</div>
+						)}
+					/>
+				) : null}
+			</div>
 		</div>
 	);
 }

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -133,30 +133,46 @@ describe('Tooltip', () => {
 		expect(screen.queryByText(unexpectedTitle)).not.toBeInTheDocument();
 	});
 
-	it('renders single active item in header only, without a list', () => {
+	it('renders lightMode class when dark mode is disabled', () => {
 		const uPlotInstance = createUPlotInstance(null);
-		const content = [createTooltipContent({ isActive: true })];
+		mockUseIsDarkMode.mockReturnValue(false);
 
-		renderTooltip({ uPlotInstance, content });
+		renderTooltip({ uPlotInstance });
 
-		// Active item is shown in the header, not duplicated in a list
-		expect(screen.queryByTestId('uplot-tooltip-list')).toBeNull();
-		expect(screen.getByTestId('uplot-tooltip-pinned')).toBeInTheDocument();
-		const pinnedContent = screen.getByTestId('uplot-tooltip-pinned-content');
-		expect(pinnedContent).toHaveTextContent('Series A');
-		expect(pinnedContent).toHaveTextContent('10');
+		const container = screen.getByTestId('uplot-tooltip-container');
+
+		expect(container).toHaveClass('lightMode');
+		expect(container).not.toHaveClass('darkMode');
 	});
 
-	it('renders list when multiple series are present', () => {
+	it('renders darkMode class when dark mode is enabled', () => {
 		const uPlotInstance = createUPlotInstance(null);
-		const content = [
-			createTooltipContent({ isActive: true }),
-			createTooltipContent({ label: 'Series B', isActive: false }),
-		];
+		mockUseIsDarkMode.mockReturnValue(true);
+
+		renderTooltip({ uPlotInstance });
+
+		const container = screen.getByTestId('uplot-tooltip-container');
+
+		expect(container).toHaveClass('darkMode');
+		expect(container).not.toHaveClass('lightMode');
+	});
+
+	it('renders tooltip items when content is provided', () => {
+		const uPlotInstance = createUPlotInstance(null);
+		const content = [createTooltipContent()];
 
 		renderTooltip({ uPlotInstance, content });
 
-		expect(screen.getByTestId('uplot-tooltip-list')).toBeInTheDocument();
+		const list = screen.queryByTestId('uplot-tooltip-list');
+
+		expect(list).not.toBeNull();
+
+		const marker = screen.getByTestId('uplot-tooltip-item-marker');
+		const itemContent = screen.getByTestId('uplot-tooltip-item-content');
+
+		expect(marker).toHaveStyle({ borderColor: '#ff0000' });
+		expect(itemContent).toHaveStyle({ color: '#ff0000', fontWeight: '700' });
+		expect(itemContent).toHaveTextContent('Series A: 10');
 	});
 
 	it('does not render tooltip list when content is empty', () => {
@@ -176,7 +192,7 @@ describe('Tooltip', () => {
 		renderTooltip({ uPlotInstance, content });
 
 		const list = screen.getByTestId('uplot-tooltip-list');
-		expect(list).toHaveStyle({ height: '200px' });
+		expect(list).toHaveStyle({ height: '210px' });
 	});
 
 	it('sets tooltip list height based on content length when Virtuoso reports 0 height', () => {

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/utils.test.ts

@@ -189,7 +189,7 @@ describe('Tooltip utils', () => {
 			];
 		}
 
-		it('builds tooltip content in series-index order with isActive flag set correctly', () => {
+		it('builds tooltip content with active series first', () => {
 			const data: AlignedData = [[0], [10], [20], [30]];
 			const series = createSeriesConfig();
 			const dataIndexes = [null, 0, 0, 0];
@@ -206,21 +206,21 @@ describe('Tooltip utils', () => {
 			});
 
 			expect(result).toHaveLength(2);
-			// Series are returned in series-index order (A=index 1 before B=index 2)
+			// Active (series index 2) should come first
 			expect(result[0]).toMatchObject<Partial<TooltipContentItem>>({
-				label: 'A',
-				value: 10,
-				tooltipValue: 'formatted-10',
-				color: '#ff0000',
-				isActive: false,
-			});
-			expect(result[1]).toMatchObject<Partial<TooltipContentItem>>({
 				label: 'B',
 				value: 20,
 				tooltipValue: 'formatted-20',
 				color: 'color-2',
 				isActive: true,
 			});
+			expect(result[1]).toMatchObject<Partial<TooltipContentItem>>({
+				label: 'A',
+				value: 10,
+				tooltipValue: 'formatted-10',
+				color: '#ff0000',
+				isActive: false,
+			});
 		});
 
 		it('skips series with null data index or non-finite values', () => {
@@ -273,31 +273,5 @@ describe('Tooltip utils', () => {
 			expect(result[0].value).toBe(30);
 			expect(result[1].value).toBe(30);
 		});
-
-		it('returns items in series-index order', () => {
-			// Series values in non-sorted order: 3, 1, 4, 2
-			const data: AlignedData = [[0], [3], [1], [4], [2]];
-			const series: Series[] = [
-				{ label: 'x', show: true } as Series,
-				{ label: 'C', show: true, stroke: '#aaaaaa' } as Series,
-				{ label: 'A', show: true, stroke: '#bbbbbb' } as Series,
-				{ label: 'D', show: true, stroke: '#cccccc' } as Series,
-				{ label: 'B', show: true, stroke: '#dddddd' } as Series,
-			];
-			const dataIndexes = [null, 0, 0, 0, 0];
-			const u = createUPlotInstance();
-
-			const result = buildTooltipContent({
-				data,
-				series,
-				dataIndexes,
-				activeSeriesIndex: null,
-				uPlotInstance: u,
-				yAxisUnit,
-				decimalPrecision,
-			});
-
-			expect(result.map((item) => item.value)).toEqual([3, 1, 4, 2]);
-		});
 	});
 });

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem.module.scss

@@ -1,36 +0,0 @@
-.uplot-tooltip-item {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 4px 0;
-
-	.uplot-tooltip-item-marker {
-		border-radius: 50%;
-		border-style: solid;
-		border-width: 2px;
-		width: 12px;
-		height: 12px;
-		flex-shrink: 0;
-	}
-
-	.uplot-tooltip-item-content {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		justify-content: space-between;
-
-		.uplot-tooltip-item-label {
-			white-space: normal;
-			overflow-wrap: anywhere;
-		}
-
-		&-separator {
-			flex: 1;
-			border-width: 0.5px;
-			border-style: dashed;
-			min-width: 24px;
-			opacity: 0.5;
-		}
-	}
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem.tsx

@@ -1,49 +0,0 @@
-import { TooltipContentItem } from '../../../types';
-
-import Styles from './TooltipItem.module.scss';
-
-interface TooltipItemProps {
-	item: TooltipContentItem;
-	isItemActive: boolean;
-	containerTestId?: string;
-	markerTestId?: string;
-	contentTestId?: string;
-}
-
-export default function TooltipItem({
-	item,
-	isItemActive,
-	containerTestId = 'uplot-tooltip-item',
-	markerTestId = 'uplot-tooltip-item-marker',
-	contentTestId = 'uplot-tooltip-item-content',
-}: TooltipItemProps): JSX.Element {
-	return (
-		<div
-			className={Styles.uplotTooltipItem}
-			style={{
-				opacity: isItemActive ? 1 : 0.7,
-				fontWeight: isItemActive ? 700 : 400,
-			}}
-			data-testid={containerTestId}
-		>
-			<div
-				className={Styles.uplotTooltipItemMarker}
-				style={{ borderColor: item.color }}
-				data-is-legend-marker={true}
-				data-testid={markerTestId}
-			/>
-			<div
-				className={Styles.uplotTooltipItemContent}
-				style={{ color: item.color }}
-				data-testid={contentTestId}
-			>
-				<span className={Styles.uplotTooltipItemLabel}>{item.label}</span>
-				<span
-					className={Styles.uplotTooltipItemContentSeparator}
-					style={{ borderColor: item.color }}
-				/>
-				<span>{item.tooltipValue}</span>
-			</div>
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -38,16 +38,16 @@ export function getTooltipBaseValue({
 	// When series are hidden, we must use the next *visible* series, not index+1,
 	// since hidden series keep raw values and would produce negative/wrong results.
 	if (isStackedBarChart && baseValue !== null && series) {
-		let nextVisibleSeriesIdx = -1;
-		for (let seriesIdx = index + 1; seriesIdx < series.length; seriesIdx++) {
-			if (series[seriesIdx]?.show) {
-				nextVisibleSeriesIdx = seriesIdx;
+		let nextVisibleIdx = -1;
+		for (let j = index + 1; j < series.length; j++) {
+			if (series[j]?.show) {
+				nextVisibleIdx = j;
 				break;
 			}
 		}
-		if (nextVisibleSeriesIdx >= 1) {
-			const nextStackedValue = data[nextVisibleSeriesIdx][dataIndex] ?? 0;
-			baseValue = baseValue - nextStackedValue;
+		if (nextVisibleIdx >= 1) {
+			const nextValue = data[nextVisibleIdx][dataIndex] ?? 0;
+			baseValue = baseValue - nextValue;
 		}
 	}
 	return baseValue;
@@ -72,15 +72,16 @@ export function buildTooltipContent({
 	decimalPrecision?: PrecisionOption;
 	isStackedBarChart?: boolean;
 }): TooltipContentItem[] {
-	const items: TooltipContentItem[] = [];
+	const active: TooltipContentItem[] = [];
+	const rest: TooltipContentItem[] = [];
 
-	for (let seriesIndex = 1; seriesIndex < series.length; seriesIndex += 1) {
-		const seriesItem = series[seriesIndex];
-		if (!seriesItem?.show) {
+	for (let index = 1; index < series.length; index += 1) {
+		const s = series[index];
+		if (!s?.show) {
 			continue;
 		}
 
-		const dataIndex = dataIndexes[seriesIndex];
+		const dataIndex = dataIndexes[index];
 		// Skip series with no data at the current cursor position
 		if (dataIndex === null) {
 			continue;
@@ -88,22 +89,30 @@ export function buildTooltipContent({
 
 		const baseValue = getTooltipBaseValue({
 			data,
-			index: seriesIndex,
+			index,
 			dataIndex,
 			isStackedBarChart,
 			series,
 		});
 
+		const isActive = index === activeSeriesIndex;
+
 		if (Number.isFinite(baseValue) && baseValue !== null) {
-			items.push({
-				label: String(seriesItem.label ?? ''),
+			const item: TooltipContentItem = {
+				label: String(s.label ?? ''),
 				value: baseValue,
 				tooltipValue: getToolTipValue(baseValue, yAxisUnit, decimalPrecision),
-				color: resolveSeriesColor(seriesItem.stroke, uPlotInstance, seriesIndex),
-				isActive: seriesIndex === activeSeriesIndex,
-			});
+				color: resolveSeriesColor(s.stroke, uPlotInstance, index),
+				isActive,
+			};
+
+			if (isActive) {
+				active.push(item);
+			} else {
+				rest.push(item);
+			}
 		}
 	}
 
-	return items;
+	return [...active, ...rest];
 }

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -36,8 +36,8 @@ const HOVER_DISMISS_DELAY_MS = 100;
 export default function TooltipPlugin({
 	config,
 	render,
-	maxWidth = 450,
-	maxHeight = 600,
+	maxWidth = 300,
+	maxHeight = 400,
 	syncMode = DashboardCursorSync.None,
 	syncKey = '_tooltip_sync_global_',
 	pinnedTooltipElement,

frontend/src/providers/App/App.tsx

@@ -12,7 +12,6 @@ import {
 import { useQuery } from 'react-query';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import { useGetMyOrganization } from 'api/generated/services/orgs';
 import { useGetMyUser } from 'api/generated/services/users';
 import listOrgPreferences from 'api/v1/org/preferences/list';
 import listUserPreferences from 'api/v1/user/preferences/list';
@@ -85,14 +84,6 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 		query: { enabled: isLoggedIn },
 	});
 
-	const {
-		data: orgData,
-		isFetching: isFetchingOrgData,
-		error: orgFetchDataError,
-	} = useGetMyOrganization({
-		query: { enabled: isLoggedIn },
-	});
-
 	const {
 		permissions: permissionsResult,
 		isFetching: isFetchingPermissions,
@@ -102,10 +93,8 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 		enabled: isLoggedIn,
 	});
 
-	const isFetchingUser =
-		isFetchingUserData || isFetchingOrgData || isFetchingPermissions;
-	const userFetchError =
-		userFetchDataError || orgFetchDataError || errorOnPermissions;
+	const isFetchingUser = isFetchingUserData || isFetchingPermissions;
+	const userFetchError = userFetchDataError || errorOnPermissions;
 
 	const userRole = useMemo(() => {
 		if (permissionsResult?.[IsAdminPermission]?.isGranted) {
@@ -145,39 +134,40 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 				createdAt: toISOString(userData.data.createdAt) ?? prev.createdAt,
 				updatedAt: toISOString(userData.data.updatedAt) ?? prev.updatedAt,
 			}));
-		}
-	}, [userData, isFetchingUserData]);
 
-	useEffect(() => {
-		if (!isFetchingOrgData && orgData?.data) {
-			const { id: orgId, displayName: orgDisplayName } = orgData.data;
-			setOrg((prev) => {
+			// todo: we need to update the org name as well, we should have the [admin only role restriction on the get org api call] - BE input needed
+			setOrg((prev): any => {
 				if (!prev) {
-					return [{ createdAt: 0, id: orgId, displayName: orgDisplayName ?? '' }];
+					return [
+						{
+							createdAt: 0,
+							id: userData.data.orgId,
+						},
+					];
 				}
-				const orgIndex = prev.findIndex((e) => e.id === orgId);
+				const orgIndex = prev.findIndex((e) => e.id === userData.data.orgId);
 
 				if (orgIndex === -1) {
 					return [
 						...prev,
-						{ createdAt: 0, id: orgId, displayName: orgDisplayName ?? '' },
+						{
+							createdAt: 0,
+							id: userData.data.orgId,
+						},
 					];
 				}
 
-				const updatedOrg: Organization[] = [
+				return [
 					...prev.slice(0, orgIndex),
-					{ createdAt: 0, id: orgId, displayName: orgDisplayName ?? '' },
+					{
+						createdAt: 0,
+						id: userData.data.orgId,
+					},
 					...prev.slice(orgIndex + 1),
 				];
-				return updatedOrg;
 			});
-
-			setDefaultUser((prev) => ({
-				...prev,
-				organization: orgDisplayName ?? prev.organization,
-			}));
 		}
-	}, [orgData, isFetchingOrgData]);
+	}, [userData, isFetchingUserData]);
 
 	// fetcher for licenses v3
 	const {

frontend/src/providers/App/__tests__/App.test.tsx

@@ -281,48 +281,6 @@ describe('AppProvider user and org data from v2 APIs', () => {
 		);
 	});
 
-	it('populates org state from GET /api/v2/orgs/me', async () => {
-		server.use(
-			rest.get(MY_ORG_URL, (_, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({
-						data: {
-							id: 'org-abc',
-							displayName: 'My Org',
-						},
-					}),
-				),
-			),
-			rest.get(MY_USER_URL, (_, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({ data: { id: 'u-default', email: 'default@signoz.io' } }),
-				),
-			),
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [false, false, false])),
-				);
-			}),
-		);
-
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useAppContext(), { wrapper });
-
-		await waitFor(
-			() => {
-				expect(result.current.org).not.toBeNull();
-				const org = result.current.org?.[0];
-				expect(org?.id).toBe('org-abc');
-				expect(org?.displayName).toBe('My Org');
-			},
-			{ timeout: 2000 },
-		);
-	});
-
 	it('sets isFetchingUser false once both user and org calls complete', async () => {
 		server.use(
 			rest.get(MY_USER_URL, (_, res, ctx) =>

frontend/src/providers/ErrorModalProvider.tsx

@@ -14,6 +14,7 @@ import APIError from 'types/api/error';
 interface ErrorModalContextType {
 	showErrorModal: (error: APIError) => void;
 	hideErrorModal: () => void;
+	isErrorModalVisible: boolean;
 }
 
 const ErrorModalContext = createContext<ErrorModalContextType | undefined>(
@@ -38,10 +39,10 @@ export function ErrorModalProvider({
 		setIsVisible(false);
 	}, []);
 
-	const value = useMemo(() => ({ showErrorModal, hideErrorModal }), [
-		showErrorModal,
-		hideErrorModal,
-	]);
+	const value = useMemo(
+		() => ({ showErrorModal, hideErrorModal, isErrorModalVisible: isVisible }),
+		[showErrorModal, hideErrorModal, isVisible],
+	);
 
 	return (
 		<ErrorModalContext.Provider value={value}>

frontend/vite.config.ts

@@ -97,9 +97,6 @@ export default defineConfig(
 						javascriptEnabled: true,
 					},
 				},
-				modules: {
-					localsConvention: 'camelCaseOnly',
-				},
 			},
 			define: {
 				// TODO: Remove this in favor of import.meta.env