fix: failing test

dropdown-test.md

@@ -0,0 +1,101 @@
+ere's the full guide. Dev server is at http://localhost:3301. The components are listed by what's easiest to find — top items  
+ don't need any setup, bottom items need data (a dashboard with widgets, an alert, a funnel).
+
+1. Sidebar — Help & Settings menus
+
+File: src/container/SideNav/SideNav.tsx  
+ Where to look: the left sidebar, scroll to the very bottom. Two icons sit there: a ? icon (Help & Support) and a gear icon  
+ (Settings).  
+ Click each → a menu pops up to the right.
+Verify: items render with icons, divider lines between groups, click outside closes. Extra test: while the menu is open, cmd-click
+(mac) / ctrl-click (linux) the "Shortcuts" item — should open shortcuts in a new tab, not navigate the current one.  
+ URL: any page works, e.g. http://localhost:3301/
+
+2. Alerts list — row "…" action menu
+
+File: src/components/DropDown/DropDown.tsx (the shared wrapper, consumed here)  
+ Where to look: the "Action" column at the right of each alert row — a three-dot (…) icon.
+Click it → menu with Enable/Disable, Edit, etc.  
+ URL: http://localhost:3301/alerts
+
+3. Alerts list — column-filter button
+
+File: src/components/ResizeTable/DynamicColumnTable.tsx  
+ Where to look: the top-right of the alerts table — a sliders/filter icon ("additional filters" button).  
+ Click → list of column names with a Switch next to each → toggle to hide/show columns.  
+ URL: http://localhost:3301/alerts
+
+4. Alert detail page — action menu in header
+
+File: src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx  
+ Where to look: click any alert from the list to open detail page. Top-right of the header: an ellipsis (…) icon next to the  
+ enable/disable toggle.  
+ Click → Rename / Duplicate / Delete (Delete is red — that's the new danger: true styling).
+URL: alerts list → click any alert.
+
+5. Dashboards list — "New dashboard" split menu
+
+File: src/container/ListOfDashboard/DashboardsList.tsx  
+ Where to look: top-right of the dashboards page — a blue "New dashboard" button (or in the empty state, a "New Dashboard" button in
+the center).  
+ Click → menu with Create dashboard / Import JSON / View templates.
+URL: http://localhost:3301/dashboard
+
+6. Widget kebab menu (on a dashboard panel)
+
+File: src/container/GridCardLayout/WidgetHeader/index.tsx  
+ Where to look: open any dashboard with at least one panel. Hover over a panel — top-right of the panel header shows a
+vertical-ellipsis icon (⋮).  
+ Click (note: was hover-trigger before, now click — this is the intentional behavior change) → View / Edit / Clone / Create Alert /
+Download / Delete.  
+ URL: http://localhost:3301/dashboard/<dashboardId> — open any dashboard from list.
+
+7. Widget builder — Columns add panel
+
+File: src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx  
+ Where to look: from a dashboard, click "+ Add panel" (or edit an existing panel). In the panel builder, in the left "Columns"
+section, there's a plus (+) button next to the column chips.  
+ Click → a panel pops up above the button with a Search input + scrollable list of attribute keys to add as columns.  
+ URL: http://localhost:3301/dashboard/<dashboardId>/new (a dashboard must already exist)
+
+8. Widget builder — Threshold color picker
+
+File: src/container/NewWidget/RightContainer/Threshold/ColorSelector.tsx  
+ Where to look: same widget builder, scroll the right-side config panel to "Thresholds" → click "+ Add threshold" → on the new  
+ threshold row, click the colored swatch button.  
+ Click → Red / Orange / Green / Blue / Custom Color (Custom Color opens a nested color picker on hover).
+
+9. Funnel step — Latency pointer picker
+
+File: src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelStep.tsx  
+ Where to look: Traces Funnels page → open or create a funnel → expand a step's config. At the bottom of the step there's "Latency
+pointer" with a dropdown trigger showing the current pointer + a down-chevron.  
+ Click → list of pointer options with radio dots (this is the new selection UI — was previously a background highlight).  
+ URL: http://localhost:3301/traces-funnels
+
+10. Download button (Excel / CSV)
+
+File: src/container/Download/Download.tsx  
+ Where to look (easiest): any APM service detail page → scroll to the Top Operations table → top-right has a "Download" link with a
+cloud icon.  
+ Click → Excel / CSV options.
+URL: http://localhost:3301/services/<service-name> — pick any service.  
+ Also rendered (same component) on: Logs Explorer toolbar (/logs/logs-explorer) and any explorer page rendering a QueryTable.
+
+11. Explorer card — saved view delete
+
+File: src/components/ExplorerCard/ExplorerCard.tsx  
+ Where to look: currently not visible in the UI — the parent component sets showSaveView = false (see ExplorerCard.tsx:165). The
+migration is correct but you won't see it unless that flag is flipped. Skip this one.
+
+---
+
+Quick verification priority
+
+If you only have time for a few, hit these — they cover all three migration patterns (Simple, compositional-controlled,
+compositional-with-cmd-click):
+
+1. Sidebar Help menu + cmd-click on "Shortcuts" (covers SideNav compositional + onOpenChange + native MouseEvent handling)
+2. Widget kebab ⋮ on a dashboard panel (covers hover→click behavior change)
+3. Column "+" panel in widget builder (covers controlled-open + custom content compositional API)
+4. Any alert row … on /alerts (covers the shared DropDown wrapper)

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

@@ -166,8 +166,6 @@ function createMockAppContext(
 		userPreferences: [],
 		hostsData: null,
 		isLoggedIn: true,
-		isNoAuthMode: false,
-		isPreflightLoading: false,
 		org: [{ createdAt: 0, id: 'org-id', displayName: 'Test Org' }],
 		isFetchingUser: false,
 		isFetchingActiveLicense: false,

frontend/src/AppRoutes/index.tsx

@@ -59,7 +59,6 @@ function App(): JSX.Element {
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
-		isPreflightLoading,
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
@@ -387,10 +386,6 @@ function App(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isCloudUser, isEnterpriseSelfHostedUser]);
 
-	if (isPreflightLoading) {
-		return <Spinner tip="Loading..." />;
-	}
-
 	// if the user is in logged in state
 	if (isLoggedInState) {
 		// if the setup calls are loading then return a spinner

frontend/src/api/__tests__/interceptorRejected.no-auth.test.ts

@@ -1,72 +0,0 @@
-import axios from 'axios';
-import { getIsNoAuthMode } from 'utils/noAuthMode';
-
-import { interceptorRejected } from '../index';
-
-jest.mock('utils/noAuthMode', () => ({
-	getIsNoAuthMode: jest.fn(),
-}));
-
-jest.mock('api/v2/sessions/rotate/post', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('AppRoutes/utils', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('../utils', () => ({
-	Logout: jest.fn(),
-}));
-
-// oxlint-disable-next-line typescript/no-require-imports typescript/no-var-requires
-const post = require('api/v2/sessions/rotate/post').default;
-// oxlint-disable-next-line typescript/no-require-imports typescript/no-var-requires
-const { Logout } = require('../utils');
-
-describe('interceptorRejected — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		jest.spyOn(axios, 'isAxiosError').mockReturnValue(true);
-	});
-
-	it('does NOT call rotate or Logout when no-auth mode is enabled on 401', async () => {
-		(getIsNoAuthMode as jest.Mock).mockReturnValue(true);
-
-		const error = {
-			isAxiosError: true,
-			response: {
-				status: 401,
-				config: { url: '/dashboards', method: 'get' },
-			},
-			config: { url: '/dashboards', headers: {} },
-		};
-
-		await interceptorRejected(error as any).catch(() => {});
-
-		expect(post).not.toHaveBeenCalled();
-		expect(Logout).not.toHaveBeenCalled();
-	});
-
-	it('DOES attempt rotate when no-auth mode is disabled on 401', async () => {
-		(getIsNoAuthMode as jest.Mock).mockReturnValue(false);
-		(post as jest.Mock).mockResolvedValue({
-			data: { accessToken: 'a', refreshToken: 'b' },
-		});
-
-		const error = {
-			isAxiosError: true,
-			response: {
-				status: 401,
-				config: { url: '/dashboards', method: 'get' },
-			},
-			config: { url: '/dashboards', headers: {} },
-		};
-
-		await interceptorRejected(error as any).catch(() => {});
-
-		expect(post).toHaveBeenCalled();
-	});
-});

frontend/src/api/index.ts

@@ -13,7 +13,6 @@ import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';
-import { getIsNoAuthMode } from 'utils/noAuthMode';
 
 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
 import { Logout } from './utils';
@@ -109,10 +108,7 @@ export const interceptorRejected = async (
 		if (axios.isAxiosError(value) && value.response) {
 			const { response } = value;
 
-			const isNoAuthMode = getIsNoAuthMode();
-
 			if (
-				!isNoAuthMode &&
 				response.status === 401 &&
 				// if the session rotate call or the create session errors out with 401 or the delete sessions call returns 401 then we do not retry!
 				response.config.url !== '/sessions/rotate' &&
@@ -144,20 +140,16 @@ export const interceptorRejected = async (
 						return await Promise.resolve(reResponse);
 					} catch (error) {
 						if ((error as AxiosError)?.response?.status === 401) {
-							void Logout();
+							Logout();
 						}
 					}
 				} catch (error) {
-					void Logout();
+					Logout();
 				}
 			}
 
-			if (
-				!isNoAuthMode &&
-				response.status === 401 &&
-				response.config.url === '/sessions/rotate'
-			) {
-				void Logout();
+			if (response.status === 401 && response.config.url === '/sessions/rotate') {
+				Logout();
 			}
 		}
 		return await Promise.reject(value);

frontend/src/components/DropDown/DropDown.tsx

@@ -1,46 +1,30 @@
-import { useState } from 'react';
 import { Ellipsis } from '@signozhq/icons';
-import { Button, Dropdown, MenuProps } from 'antd';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import { Button } from 'antd';
 
 import './DropDown.styles.scss';
 
+type DropDownItemClick = (info: { key: string; keyPath: string[] }) => void;
+
 function DropDown({
 	element,
 	onDropDownItemClick,
 }: {
 	element: JSX.Element[];
-	onDropDownItemClick?: MenuProps['onClick'];
+	onDropDownItemClick?: DropDownItemClick;
 }): JSX.Element {
-	const items: MenuProps['items'] = element.map(
-		(e: JSX.Element, index: number) => ({
-			label: e,
-			key: index,
-		}),
-	);
-
-	const [isDdOpen, setDdOpen] = useState<boolean>(false);
+	const items: MenuItem[] = element.map((e, index) => ({
+		key: String(index),
+		label: e,
+		onClick: onDropDownItemClick,
+	}));
 
 	return (
-		<Dropdown
-			menu={{
-				items,
-				onMouseEnter: (): void => setDdOpen(true),
-				onMouseLeave: (): void => setDdOpen(false),
-				onClick: (item): void => onDropDownItemClick?.(item),
-			}}
-			open={isDdOpen}
-		>
-			<Button
-				type="link"
-				className={`dropdown-button`}
-				onClick={(e): void => {
-					e.preventDefault();
-					setDdOpen(true);
-				}}
-			>
+		<DropdownMenuSimple menu={{ items }}>
+			<Button type="link" className="dropdown-button">
 				<Ellipsis className="dropdown-icon" size={16} />
 			</Button>
-		</Dropdown>
+		</DropdownMenuSimple>
 	);
 }
 

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -19,7 +19,6 @@ import {
 } from 'api/generated/services/users';
 import { AxiosError } from 'axios';
 import { MemberRow } from 'components/MembersTable/MembersTable';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import RolesSelect, { useRoles } from 'components/RolesSelect';
 import SaveErrorItem from 'components/ServiceAccountDrawer/SaveErrorItem';
 import type { SaveError } from 'components/ServiceAccountDrawer/utils';
@@ -614,43 +613,39 @@ function EditMemberDrawer({
 					<div className="edit-member-drawer__footer-left">
 						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
 							<span className="edit-member-drawer__tooltip-wrapper">
-								<NoAuthGuard testId="no-auth-delete-member">
-									<Button
-										onClick={(): void => setShowDeleteConfirm(true)}
-										disabled={isRootUser || isSelf}
-										variant="link"
-										color="destructive"
-									>
-										<Trash2 size={12} />
-										{isInvited ? 'Revoke Invite' : 'Delete Member'}
-									</Button>
-								</NoAuthGuard>
+								<Button
+									onClick={(): void => setShowDeleteConfirm(true)}
+									disabled={isRootUser || isSelf}
+									variant="link"
+									color="destructive"
+								>
+									<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">
-								<NoAuthGuard testId="no-auth-generate-reset-link">
-									<Button
-										onClick={handleGenerateResetLink}
-										disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
-										variant="link"
-										color="warning"
-									>
-										<RefreshCw size={12} />
-										{isGeneratingLink
-											? 'Generating...'
-											: isInvited
-												? getInviteButtonLabel(
-														isLoadingTokenStatus,
-														existingToken,
-														isTokenExpired,
-														tokenNotFound,
-													)
-												: 'Generate Password Reset Link'}
-									</Button>
-								</NoAuthGuard>
+								<Button
+									onClick={handleGenerateResetLink}
+									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
+									variant="link"
+									color="warning"
+								>
+									<RefreshCw size={12} />
+									{isGeneratingLink
+										? 'Generating...'
+										: isInvited
+											? getInviteButtonLabel(
+													isLoadingTokenStatus,
+													existingToken,
+													isTokenExpired,
+													tokenNotFound,
+												)
+											: 'Generate Password Reset Link'}
+								</Button>
 							</span>
 						</Tooltip>
 					</div>
@@ -661,17 +656,15 @@ function EditMemberDrawer({
 							Cancel
 						</Button>
 
-						<NoAuthGuard testId="no-auth-save-member">
-							<Button
-								variant="solid"
-								color="primary"
-								disabled={!isDirty || isSaving || isRootUser}
-								onClick={handleSave}
-								loading={isSaving}
-							>
-								{isSaving ? 'Saving...' : 'Save Member Details'}
-							</Button>
-						</NoAuthGuard>
+						<Button
+							variant="solid"
+							color="primary"
+							disabled={!isDirty || isSaving || isRootUser}
+							onClick={handleSave}
+							loading={isSaving}
+						>
+							{isSaving ? 'Saving...' : 'Save Member Details'}
+						</Button>
 					</div>
 				</>
 			)}

frontend/src/components/EditMemberDrawer/__tests__/EditMemberDrawer.no-auth.test.tsx

@@ -1,113 +0,0 @@
-import {
-	useCreateResetPasswordToken,
-	useDeleteUser,
-	useGetResetPasswordToken,
-	useGetRolesByUserID,
-	useGetUser,
-	useRemoveUserRoleByUserIDAndRoleID,
-	useSetRoleByUserID,
-	useUpdateMyUserV2,
-	useUpdateUser,
-} from 'api/generated/services/users';
-import { MemberStatus } from 'container/MembersSettings/utils';
-import { managedRoles } from 'mocks-server/__mockdata__/roles';
-import { screen } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import EditMemberDrawer from '../EditMemberDrawer';
-
-jest.mock('api/generated/services/users', () => ({
-	useDeleteUser: jest.fn(),
-	useGetUser: jest.fn(),
-	useGetRolesByUserID: jest.fn(),
-	useRemoveUserRoleByUserIDAndRoleID: jest.fn(),
-	useUpdateUser: jest.fn(),
-	useUpdateMyUserV2: jest.fn(),
-	useSetRoleByUserID: jest.fn(),
-	useGetResetPasswordToken: jest.fn(),
-	useCreateResetPasswordToken: jest.fn(),
-	getGetRolesByUserIDQueryKey: ({ id }: { id: string }): string[] => [
-		`/api/v2/users/${id}/roles`,
-	],
-}));
-
-const activeMember = {
-	id: 'user-1',
-	name: 'Alice Smith',
-	email: 'alice@signoz.io',
-	status: MemberStatus.Active,
-	joinedOn: '1700000000000',
-	updatedAt: '1710000000000',
-};
-
-function setupMocks(): void {
-	(useGetUser as jest.Mock).mockReturnValue({
-		data: {
-			data: {
-				id: 'user-1',
-				displayName: 'Alice Smith',
-				email: 'alice@signoz.io',
-				status: 'active',
-				userRoles: [
-					{ id: 'ur-1', roleId: managedRoles[0].id, role: managedRoles[0] },
-				],
-			},
-		},
-		isLoading: false,
-		refetch: jest.fn(),
-	});
-	(useGetRolesByUserID as jest.Mock).mockReturnValue({
-		data: { data: [managedRoles[0]] },
-		isLoading: false,
-	});
-	(useRemoveUserRoleByUserIDAndRoleID as jest.Mock).mockReturnValue({
-		mutateAsync: jest.fn().mockResolvedValue({}),
-		isLoading: false,
-	});
-	(useUpdateUser as jest.Mock).mockReturnValue({
-		mutateAsync: jest.fn().mockResolvedValue({}),
-		isLoading: false,
-	});
-	(useUpdateMyUserV2 as jest.Mock).mockReturnValue({
-		mutateAsync: jest.fn().mockResolvedValue({}),
-		isLoading: false,
-	});
-	(useSetRoleByUserID as jest.Mock).mockReturnValue({
-		mutateAsync: jest.fn().mockResolvedValue({}),
-		isLoading: false,
-	});
-	(useDeleteUser as jest.Mock).mockReturnValue({
-		mutate: jest.fn(),
-		isLoading: false,
-	});
-	(useGetResetPasswordToken as jest.Mock).mockReturnValue({
-		data: undefined,
-		isLoading: false,
-		isError: false,
-	});
-	(useCreateResetPasswordToken as jest.Mock).mockReturnValue({
-		mutateAsync: jest.fn().mockResolvedValue({}),
-		isLoading: false,
-	});
-}
-
-describe('EditMemberDrawer — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		setupMocks();
-	});
-
-	it('renders no-auth guard wrappers for all member mutation buttons', () => {
-		renderWithNoAuth(
-			<EditMemberDrawer
-				member={activeMember}
-				open
-				onClose={jest.fn()}
-				onComplete={jest.fn()}
-			/>,
-		);
-		expect(screen.getByTestId('no-auth-delete-member')).toBeInTheDocument();
-		expect(screen.getByTestId('no-auth-generate-reset-link')).toBeInTheDocument();
-		expect(screen.getByTestId('no-auth-save-member')).toBeInTheDocument();
-	});
-});

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,15 +1,7 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import {
-	Button,
-	Col,
-	Dropdown,
-	MenuProps,
-	Popover,
-	Row,
-	Select,
-	Space,
-} from 'antd';
+import { Button, Col, Popover, Row, Select, Space } from 'antd';
+import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -241,9 +233,13 @@ function ExplorerCard({
 								</Popover>
 								<Share2 onClick={onCopyUrlHandler} size="md" />
 								{viewKey && (
-									<Dropdown trigger={['click']} menu={moreOptionMenu}>
-										<Ellipsis size="md" />
-									</Dropdown>
+									<DropdownMenuSimple menu={moreOptionMenu}>
+										<Button
+											type="text"
+											size="small"
+											icon={<Ellipsis size="md" />}
+										/>
+									</DropdownMenuSimple>
 								)}
 							</Space>
 						</OffSetCol>

frontend/src/components/NoAuthBanner/NoAuthBanner.module.scss

@@ -1,13 +0,0 @@
-.banner {
-	height: var(--spacing-20);
-
-	a {
-		color: var(--callout-warning-title);
-		text-decoration: underline;
-
-		&:hover {
-			color: var(--callout-warning-title);
-			opacity: 0.8;
-		}
-	}
-}

frontend/src/components/NoAuthBanner/NoAuthBanner.tsx

@@ -1,26 +0,0 @@
-import { PersistedAnnouncementBanner } from '@signozhq/ui/announcement-banner';
-
-import styles from './NoAuthBanner.module.scss';
-
-export function NoAuthBanner(): JSX.Element {
-	return (
-		<PersistedAnnouncementBanner
-			type="warning"
-			storageKey="no-auth-banner-v1"
-			testId="no-auth-banner"
-			className={styles.banner}
-		>
-			Impersonation mode: authentication is disabled. Anyone with access to this
-			instance has admin privileges.{' '}
-			<a
-				href="https://signoz.io/docs/manage/administrator-guide/configuration/no-auth-mode/"
-				target="_blank"
-				rel="noreferrer"
-			>
-				Learn more
-			</a>
-		</PersistedAnnouncementBanner>
-	);
-}
-
-export default NoAuthBanner;

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

@@ -1,24 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import { NoAuthBanner } from '../NoAuthBanner';
-
-describe('NoAuthBanner', () => {
-	it('renders the no-auth message', () => {
-		render(<NoAuthBanner />);
-		expect(
-			screen.getByText(/Impersonation mode: authentication is disabled/i),
-		).toBeInTheDocument();
-	});
-
-	it('renders with the warning test id', () => {
-		render(<NoAuthBanner />);
-		expect(screen.getByTestId('no-auth-banner')).toBeInTheDocument();
-	});
-
-	it('renders a docs link that opens in a new tab', () => {
-		render(<NoAuthBanner />);
-		const link = screen.getByRole('link', { name: /learn more/i });
-		expect(link).toHaveAttribute('target', '_blank');
-		expect(link).toHaveAttribute('rel', 'noreferrer');
-	});
-});

frontend/src/components/NoAuthGuard/NoAuthGuard.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import {
-	TooltipRoot,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
-import { useAppContext } from 'providers/App/App';
-
-export const DEFAULT_NO_AUTH_MESSAGE = 'Not available in no-auth mode';
-
-interface NoAuthGuardProps {
-	children: React.ReactElement;
-	message?: string;
-	disabled?: boolean;
-	testId?: string;
-}
-
-export function NoAuthGuard({
-	children,
-	message = DEFAULT_NO_AUTH_MESSAGE,
-	disabled,
-	testId,
-}: NoAuthGuardProps): JSX.Element {
-	const { isNoAuthMode } = useAppContext();
-
-	if (!isNoAuthMode) {
-		return disabled ? React.cloneElement(children, { disabled: true }) : children;
-	}
-
-	const disabledChild = React.cloneElement(children, {
-		disabled: true,
-		style: { ...(children.props.style ?? {}), pointerEvents: 'none' },
-	});
-
-	return (
-		<TooltipProvider>
-			<TooltipRoot>
-				<TooltipTrigger asChild>
-					<span
-						data-no-auth-trigger
-						data-testid={testId}
-						style={{ display: 'inline-flex', cursor: 'not-allowed' }}
-					>
-						{disabledChild}
-					</span>
-				</TooltipTrigger>
-				<TooltipContent>{message}</TooltipContent>
-			</TooltipRoot>
-		</TooltipProvider>
-	);
-}

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

@@ -1,99 +0,0 @@
-import React from 'react';
-import { render } from 'tests/test-utils';
-
-import { NoAuthGuard } from '..';
-
-describe('NoAuthGuard', () => {
-	it('renders children unchanged when isNoAuthMode is false', () => {
-		const { getByRole } = render(
-			<NoAuthGuard>
-				<button type="button">Action</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: false } },
-		);
-		expect(getByRole('button', { name: 'Action' })).not.toBeDisabled();
-	});
-
-	it('does not intercept onClick when isNoAuthMode is false', () => {
-		const handleClick = jest.fn();
-		const { getByRole } = render(
-			<NoAuthGuard>
-				<button type="button" onClick={handleClick}>
-					Action
-				</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: false } },
-		);
-		getByRole('button', { name: 'Action' }).click();
-		expect(handleClick).toHaveBeenCalledTimes(1);
-	});
-
-	it('disables children when isNoAuthMode is true', () => {
-		const { getByRole } = render(
-			<NoAuthGuard>
-				<button type="button">Action</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: true } },
-		);
-		expect(getByRole('button', { name: 'Action' })).toBeDisabled();
-	});
-
-	it('renders a tooltip trigger wrapper when isNoAuthMode is true', () => {
-		const { container } = render(
-			<NoAuthGuard>
-				<button type="button">Action</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: true } },
-		);
-		expect(
-			container.querySelector('span[data-no-auth-trigger]'),
-		).toBeInTheDocument();
-	});
-
-	it('blocks onClick when isNoAuthMode is true', () => {
-		const handleClick = jest.fn();
-		const { container } = render(
-			<NoAuthGuard>
-				<button type="button" onClick={handleClick}>
-					Action
-				</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: true } },
-		);
-		container
-			.querySelector('span[data-no-auth-trigger]')
-			?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-		expect(handleClick).not.toHaveBeenCalled();
-	});
-
-	it('overrides existing disabled prop — no-auth always wins', () => {
-		const { getByRole } = render(
-			<NoAuthGuard>
-				<button type="button" disabled={false}>
-					Action
-				</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: true } },
-		);
-		expect(getByRole('button', { name: 'Action' })).toBeDisabled();
-	});
-
-	it('sets pointerEvents none on child when isNoAuthMode is true', () => {
-		const { getByRole } = render(
-			<NoAuthGuard>
-				<button type="button">Action</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: true } },
-		);
-		expect(getByRole('button', { name: 'Action' })).toHaveStyle({
-			pointerEvents: 'none',
-		});
-	});
-});

frontend/src/components/NoAuthGuard/index.ts

@@ -1 +0,0 @@
-export { DEFAULT_NO_AUTH_MESSAGE, NoAuthGuard } from './NoAuthGuard';

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { Dropdown } from 'antd';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -195,7 +195,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 							)}
 
 							{isMultiQueryAllowed && (
-								<Dropdown
+								<DropdownMenuSimple
 									className="query-actions-dropdown"
 									menu={{
 										items: [
@@ -217,10 +217,10 @@ export const QueryV2 = forwardRef(function QueryV2(
 												: []),
 										],
 									}}
-									placement="bottomRight"
+									align="end"
 								>
 									<Ellipsis size={16} />
-								</Dropdown>
+								</DropdownMenuSimple>
 							)}
 						</div>
 					</div>

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -4,13 +4,13 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
+import { Button, Flex, Switch } from 'antd';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { SlidersHorizontal } from '@signozhq/icons';
-import { popupContainer } from 'utils/selectPopupContainer';
 
 import ResizeTable from './ResizeTable';
 import { DynamicColumnTableProps } from './types';
@@ -85,8 +85,9 @@ function DynamicColumnTable({
 			);
 		};
 
-	const items: MenuProps['items'] =
+	const items: MenuItem[] =
 		dynamicColumns?.map((column, index) => ({
+			key: String(index),
 			label: (
 				<div className="dynamicColumnsTable-items">
 					<div>{column.title?.toString()}</div>
@@ -96,8 +97,6 @@ function DynamicColumnTable({
 					/>
 				</div>
 			),
-			key: index,
-			type: 'checkbox',
 		})) || [];
 
 	// Get current page from URL or default to 1
@@ -126,18 +125,14 @@ function DynamicColumnTable({
 			<Flex justify="flex-end" align="center" gap={8}>
 				{facingIssueBtn && <LaunchChatSupport {...facingIssueBtn} />}
 				{dynamicColumns && (
-					<Dropdown
-						getPopupContainer={popupContainer}
-						menu={{ items }}
-						trigger={['click']}
-					>
+					<DropdownMenuSimple menu={{ items }}>
 						<Button
 							className="dynamicColumnTable-button filter-btn"
 							size="middle"
 							icon={<SlidersHorizontal size={14} />}
 							data-testid="additional-filters-button"
 						/>
-					</Dropdown>
+					</DropdownMenuSimple>
 				)}
 			</Flex>
 

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

@@ -5,7 +5,6 @@ import { Input } from '@signozhq/ui/input';
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
@@ -126,19 +125,17 @@ function KeyFormPhase({
 						]}
 						enabled={!!accountId}
 					>
-						<NoAuthGuard testId="no-auth-create-key">
-							<Button
-								type="submit"
-								// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
-								form={FORM_ID}
-								variant="solid"
-								color="primary"
-								loading={isSubmitting}
-								disabled={!isValid}
-							>
-								Create Key
-							</Button>
-						</NoAuthGuard>
+						<Button
+							type="submit"
+							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
+							form={FORM_ID}
+							variant="solid"
+							color="primary"
+							loading={isSubmitting}
+							disabled={!isValid}
+						>
+							Create Key
+						</Button>
 					</AuthZTooltip>
 				</div>
 			</div>

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -2,7 +2,6 @@ import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import { buildSADeletePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
@@ -89,17 +88,15 @@ function DeleteAccountModal(): JSX.Element {
 				checks={[buildSADeletePermission(accountId ?? '')]}
 				enabled={!!accountId}
 			>
-				<NoAuthGuard testId="no-auth-delete-account">
-					<Button
-						variant="solid"
-						color="destructive"
-						loading={isDeleting}
-						onClick={handleConfirm}
-					>
-						<Trash2 size={12} />
-						Delete
-					</Button>
-				</NoAuthGuard>
+				<Button
+					variant="solid"
+					color="destructive"
+					loading={isDeleting}
+					onClick={handleConfirm}
+				>
+					<Trash2 size={12} />
+					Delete
+				</Button>
 			</AuthZTooltip>
 		</div>
 	);

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

@@ -8,7 +8,6 @@ import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import {
 	buildAPIKeyDeletePermission,
 	buildAPIKeyUpdatePermission,
@@ -175,12 +174,10 @@ function EditKeyForm({
 					]}
 					enabled={!!accountId && !!keyItem?.id}
 				>
-					<NoAuthGuard testId="no-auth-revoke-key">
-						<Button variant="link" color="destructive" onClick={onRevokeClick}>
-							<Trash2 size={12} />
-							Revoke Key
-						</Button>
-					</NoAuthGuard>
+					<Button variant="link" color="destructive" onClick={onRevokeClick}>
+						<Trash2 size={12} />
+						Revoke Key
+					</Button>
 				</AuthZTooltip>
 				<div className="edit-key-modal__footer-right">
 					<Button variant="solid" color="secondary" onClick={onClose}>
@@ -191,19 +188,17 @@ function EditKeyForm({
 						checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
 						enabled={!!accountId && !!keyItem?.id}
 					>
-						<NoAuthGuard testId="no-auth-save-key">
-							<Button
-								type="submit"
-								// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
-								form={FORM_ID}
-								variant="solid"
-								color="primary"
-								loading={isSaving}
-								disabled={!isDirty}
-							>
-								Save Changes
-							</Button>
-						</NoAuthGuard>
+						<Button
+							type="submit"
+							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
+							form={FORM_ID}
+							variant="solid"
+							color="primary"
+							loading={isSaving}
+							disabled={!isDirty}
+						>
+							Save Changes
+						</Button>
 					</AuthZTooltip>
 				</div>
 			</div>

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,9 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { KeyRound, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Skeleton, Table, Tooltip } from 'antd';
-import { DEFAULT_NO_AUTH_MESSAGE, NoAuthGuard } from 'components/NoAuthGuard';
-import { useAppContext } from 'providers/App/App';
+import { Skeleton, Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
@@ -35,7 +33,6 @@ interface KeysTabProps {
 interface BuildColumnsParams {
 	isDisabled: boolean;
 	accountId: string;
-	isNoAuthMode: boolean;
 	onRevokeClick: (keyId: string) => void;
 	handleformatLastObservedAt: (
 		lastObservedAt: Date | null | undefined,
@@ -56,7 +53,6 @@ function formatExpiry(expiresAt: number): JSX.Element {
 function buildColumns({
 	isDisabled,
 	accountId,
-	isNoAuthMode,
 	onRevokeClick,
 	handleformatLastObservedAt,
 }: BuildColumnsParams): ColumnsType<ServiceaccounttypesGettableFactorAPIKeyDTO> {
@@ -114,38 +110,28 @@ function buildColumns({
 				onClick: (e): void => e.stopPropagation(),
 				style: { cursor: 'default' },
 			}),
-			render: (_, record): JSX.Element => {
-				const tooltipTitle = isDisabled
-					? 'Service account disabled'
-					: isNoAuthMode
-						? DEFAULT_NO_AUTH_MESSAGE
-						: 'Revoke Key';
-				return (
-					<AuthZTooltip
-						checks={[
-							buildAPIKeyDeletePermission(record.id),
-							buildSADetachPermission(accountId),
-						]}
-						enabled={!isDisabled && !!accountId}
+			render: (_, record): JSX.Element => (
+				<AuthZTooltip
+					checks={[
+						buildAPIKeyDeletePermission(record.id),
+						buildSADetachPermission(accountId),
+					]}
+					enabled={!isDisabled && !!accountId}
+				>
+					<Button
+						variant="ghost"
+						size="sm"
+						color="destructive"
+						disabled={isDisabled}
+						onClick={(): void => {
+							onRevokeClick(record.id);
+						}}
+						className="keys-tab__revoke-btn"
 					>
-						<Tooltip title={tooltipTitle}>
-							<Button
-								variant="ghost"
-								size="sm"
-								color="destructive"
-								disabled={isDisabled || isNoAuthMode}
-								onClick={(e): void => {
-									e.stopPropagation();
-									onRevokeClick(record.id);
-								}}
-								className="keys-tab__revoke-btn"
-							>
-								<X size={12} />
-							</Button>
-						</Tooltip>
-					</AuthZTooltip>
-				);
-			},
+						<X size={12} />
+					</Button>
+				</AuthZTooltip>
+			),
 		},
 	];
 }
@@ -172,7 +158,6 @@ function KeysTab({
 		parseAsString.withDefault(''),
 	);
 	const editKey = keys.find((k) => k.id === editKeyId) ?? null;
-	const { isNoAuthMode } = useAppContext();
 
 	const handleformatLastObservedAt = useCallback(
 		(lastObservedAt: Date | null | undefined): string =>
@@ -192,17 +177,10 @@ function KeysTab({
 			buildColumns({
 				isDisabled,
 				accountId,
-				isNoAuthMode,
 				onRevokeClick,
 				handleformatLastObservedAt,
 			}),
-		[
-			isDisabled,
-			accountId,
-			isNoAuthMode,
-			onRevokeClick,
-			handleformatLastObservedAt,
-		],
+		[isDisabled, accountId, onRevokeClick, handleformatLastObservedAt],
 	);
 
 	if (isLoading) {
@@ -232,18 +210,16 @@ function KeysTab({
 					checks={[APIKeyCreatePermission, buildSAAttachPermission(accountId)]}
 					enabled={!isDisabled && !!accountId}
 				>
-					<NoAuthGuard testId="no-auth-add-first-key">
-						<Button
-							variant="link"
-							color="primary"
-							onClick={async (): Promise<void> => {
-								await setIsAddKeyOpen(true);
-							}}
-							disabled={isDisabled}
-						>
-							+ Add your first key
-						</Button>
-					</NoAuthGuard>
+					<Button
+						variant="link"
+						color="primary"
+						onClick={async (): Promise<void> => {
+							await setIsAddKeyOpen(true);
+						}}
+						disabled={isDisabled}
+					>
+						+ Add your first key
+					</Button>
 				</AuthZTooltip>
 			</div>
 		);

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -2,7 +2,6 @@ import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import {
 	buildAPIKeyDeletePermission,
 	buildSADetachPermission,
@@ -53,17 +52,15 @@ export function RevokeKeyFooter({
 				]}
 				enabled={!!accountId && !!keyId}
 			>
-				<NoAuthGuard testId="no-auth-confirm-revoke">
-					<Button
-						variant="solid"
-						color="destructive"
-						loading={isRevoking}
-						onClick={onConfirm}
-					>
-						<Trash2 size={12} />
-						Revoke Key
-					</Button>
-				</NoAuthGuard>
+				<Button
+					variant="solid"
+					color="destructive"
+					loading={isRevoking}
+					onClick={onConfirm}
+				>
+					<Trash2 size={12} />
+					Revoke Key
+				</Button>
 			</AuthZTooltip>
 		</>
 	);

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -49,7 +49,6 @@ import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';
 
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
 import KeysTab from './KeysTab';
@@ -437,20 +436,18 @@ function ServiceAccountDrawer({
 						]}
 						enabled={!isDeleted && !!selectedAccountId}
 					>
-						<NoAuthGuard testId="no-auth-add-key">
-							<Button
-								variant="outlined"
-								size="sm"
-								color="secondary"
-								disabled={isDeleted}
-								onClick={(): void => {
-									void setIsAddKeyOpen(true);
-								}}
-							>
-								<Plus size={12} />
-								Add Key
-							</Button>
-						</NoAuthGuard>
+						<Button
+							variant="outlined"
+							size="sm"
+							color="secondary"
+							disabled={isDeleted}
+							onClick={(): void => {
+								void setIsAddKeyOpen(true);
+							}}
+						>
+							<Plus size={12} />
+							Add Key
+						</Button>
 					</AuthZTooltip>
 				)}
 			</div>
@@ -553,18 +550,16 @@ function ServiceAccountDrawer({
 							checks={[buildSADeletePermission(selectedAccountId ?? '')]}
 							enabled={!!selectedAccountId}
 						>
-							<NoAuthGuard testId="no-auth-delete-service-account">
-								<Button
-									variant="link"
-									color="destructive"
-									onClick={(): void => {
-										void setIsDeleteOpen(true);
-									}}
-								>
-									<Trash2 size={12} />
-									Delete Service Account
-								</Button>
-							</NoAuthGuard>
+							<Button
+								variant="link"
+								color="destructive"
+								onClick={(): void => {
+									void setIsDeleteOpen(true);
+								}}
+							>
+								<Trash2 size={12} />
+								Delete Service Account
+							</Button>
 						</AuthZTooltip>
 					)}
 					{!isDeleted && (
@@ -573,17 +568,15 @@ function ServiceAccountDrawer({
 								<X size={14} />
 								Cancel
 							</Button>
-							<NoAuthGuard testId="no-auth-save-service-account">
-								<Button
-									variant="solid"
-									color="primary"
-									loading={isSaving}
-									disabled={!isDirty}
-									onClick={handleSave}
-								>
-									Save Changes
-								</Button>
-							</NoAuthGuard>
+							<Button
+								variant="solid"
+								color="primary"
+								loading={isSaving}
+								disabled={!isDirty}
+								onClick={handleSave}
+							>
+								Save Changes
+							</Button>
 						</div>
 					)}
 				</>

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.no-auth.test.tsx

@@ -1,50 +0,0 @@
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { screen, waitFor } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import AddKeyModal from '../AddKeyModal';
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-jest.mock('react-use', () => ({
-	useCopyToClipboard: (): [
-		{ value: undefined; error: undefined },
-		jest.Mock,
-	] => [{ value: undefined, error: undefined }, jest.fn()],
-}));
-
-function renderModal(
-	searchParams: Record<string, string> = {
-		account: 'sa-1',
-		'add-key': 'true',
-	},
-): ReturnType<typeof renderWithNoAuth> {
-	return renderWithNoAuth(
-		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
-			<AddKeyModal />
-		</NuqsTestingAdapter>,
-	);
-}
-
-describe('AddKeyModal — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders no-auth guard on Create Key button when modal is open', async () => {
-		renderModal();
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-auth-create-key')).toBeInTheDocument();
-		});
-	});
-
-	it('does not render no-auth guard when modal is closed', () => {
-		renderModal({ account: 'sa-1' });
-
-		expect(screen.queryByTestId('no-auth-create-key')).not.toBeInTheDocument();
-	});
-});

frontend/src/components/ServiceAccountDrawer/__tests__/DeleteAccountModal.no-auth.test.tsx

@@ -1,54 +0,0 @@
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { screen, waitFor } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import DeleteAccountModal from '../DeleteAccountModal';
-
-jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
-	__esModule: true,
-	default: ({
-		children,
-	}: {
-		children: React.ReactElement;
-	}): React.ReactElement => children,
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-function renderModal(
-	searchParams: Record<string, string> = {
-		account: 'sa-1',
-		'delete-sa': 'true',
-	},
-): ReturnType<typeof renderWithNoAuth> {
-	return renderWithNoAuth(
-		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
-			<DeleteAccountModal />
-		</NuqsTestingAdapter>,
-	);
-}
-
-describe('DeleteAccountModal — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders no-auth guard on Delete button when modal is open', async () => {
-		renderModal();
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-auth-delete-account')).toBeInTheDocument();
-		});
-	});
-
-	it('does not render no-auth guard when modal is closed', () => {
-		renderModal({ account: 'sa-1' });
-
-		expect(
-			screen.queryByTestId('no-auth-delete-account'),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.no-auth.test.tsx

@@ -1,64 +0,0 @@
-import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { screen, waitFor } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import EditKeyModal from '../EditKeyModal';
-
-jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
-	__esModule: true,
-	default: ({
-		children,
-	}: {
-		children: React.ReactElement;
-	}): React.ReactElement => children,
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-const mockKey: ServiceaccounttypesGettableFactorAPIKeyDTO = {
-	id: 'key-1',
-	name: 'Test Key',
-	expiresAt: 0,
-	lastObservedAt: null as unknown as string,
-	serviceAccountId: 'sa-1',
-};
-
-function renderModal(
-	keyItem: ServiceaccounttypesGettableFactorAPIKeyDTO | null = mockKey,
-	searchParams: Record<string, string> = {
-		account: 'sa-1',
-		'edit-key': 'key-1',
-	},
-): ReturnType<typeof renderWithNoAuth> {
-	return renderWithNoAuth(
-		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
-			<EditKeyModal keyItem={keyItem} />
-		</NuqsTestingAdapter>,
-	);
-}
-
-describe('EditKeyModal — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders no-auth guards on Revoke Key and Save Changes buttons', async () => {
-		renderModal();
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-auth-revoke-key')).toBeInTheDocument();
-			expect(screen.getByTestId('no-auth-save-key')).toBeInTheDocument();
-		});
-	});
-
-	it('does not render no-auth guards when modal is closed', () => {
-		renderModal(null, { account: 'sa-1' });
-
-		expect(screen.queryByTestId('no-auth-revoke-key')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('no-auth-save-key')).not.toBeInTheDocument();
-	});
-});

frontend/src/components/ServiceAccountDrawer/__tests__/RevokeKeyModal.no-auth.test.tsx

@@ -1,54 +0,0 @@
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { screen, waitFor } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import RevokeKeyModal from '../RevokeKeyModal';
-
-jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
-	__esModule: true,
-	default: ({
-		children,
-	}: {
-		children: React.ReactElement;
-	}): React.ReactElement => children,
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-function renderModal(
-	searchParams: Record<string, string> = {
-		account: 'sa-1',
-		'revoke-key': 'key-1',
-	},
-): ReturnType<typeof renderWithNoAuth> {
-	return renderWithNoAuth(
-		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
-			<RevokeKeyModal />
-		</NuqsTestingAdapter>,
-	);
-}
-
-describe('RevokeKeyModal — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders no-auth guard on confirm Revoke Key button when modal is open', async () => {
-		renderModal();
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-auth-confirm-revoke')).toBeInTheDocument();
-		});
-	});
-
-	it('does not render no-auth guard when modal is closed', () => {
-		renderModal({ account: 'sa-1' });
-
-		expect(
-			screen.queryByTestId('no-auth-confirm-revoke'),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/components/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.no-auth.test.tsx

@@ -1,137 +0,0 @@
-import type { ReactNode } from 'react';
-import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
-import { rest, server } from 'mocks-server/server';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { screen, waitFor } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import ServiceAccountDrawer from '../ServiceAccountDrawer';
-
-const ROLES_ENDPOINT = '*/api/v1/roles';
-const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
-const SA_ENDPOINT = '*/api/v1/service_accounts/sa-1';
-const SA_ROLES_ENDPOINT = '*/api/v1/service_accounts/:id/roles';
-const SA_ROLE_DELETE_ENDPOINT = '*/api/v1/service_accounts/:id/roles/:rid';
-
-const activeAccountResponse = {
-	id: 'sa-1',
-	name: 'CI Bot',
-	email: 'ci-bot@signoz.io',
-	roles: ['signoz-admin'],
-	status: 'ACTIVE',
-	createdAt: '2026-01-01T00:00:00Z',
-	updatedAt: '2026-01-02T00:00:00Z',
-};
-
-jest.mock('@signozhq/ui/drawer', () => ({
-	...jest.requireActual('@signozhq/ui/drawer'),
-	DrawerWrapper: ({
-		children,
-		footer,
-		open,
-	}: {
-		children?: ReactNode;
-		footer?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null =>
-		open ? (
-			<div>
-				{children}
-				{footer}
-			</div>
-		) : null,
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-function renderDrawer(
-	searchParams: Record<string, string> = { account: 'sa-1' },
-): ReturnType<typeof renderWithNoAuth> {
-	return renderWithNoAuth(
-		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
-			<ServiceAccountDrawer onSuccess={jest.fn()} />
-		</NuqsTestingAdapter>,
-	);
-}
-
-function setupBaseHandlers(): void {
-	server.use(
-		rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
-			res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-		),
-		rest.get(SA_KEYS_ENDPOINT, (_, res, ctx) =>
-			res(ctx.status(200), ctx.json({ data: [] })),
-		),
-		rest.get(SA_ENDPOINT, (_, res, ctx) =>
-			res(ctx.status(200), ctx.json({ data: activeAccountResponse })),
-		),
-		rest.put(SA_ENDPOINT, (_, res, ctx) =>
-			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
-		),
-		rest.delete(SA_ENDPOINT, (_, res, ctx) =>
-			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
-		),
-		rest.get(SA_ROLES_ENDPOINT, (_, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({
-					data: listRolesSuccessResponse.data.filter(
-						(r) => r.name === 'signoz-admin',
-					),
-				}),
-			),
-		),
-		rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
-			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
-		),
-		rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) =>
-			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
-		),
-	);
-}
-
-describe('ServiceAccountDrawer — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		setupBaseHandlers();
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders no-auth guards in the Overview tab footer', async () => {
-		renderDrawer();
-
-		await waitFor(() => {
-			expect(
-				screen.getByTestId('no-auth-delete-service-account'),
-			).toBeInTheDocument();
-			expect(
-				screen.getByTestId('no-auth-save-service-account'),
-			).toBeInTheDocument();
-		});
-	});
-
-	it('renders no-auth guard on Add Key button in Keys tab header', async () => {
-		renderDrawer({ account: 'sa-1', tab: 'keys' });
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-auth-add-key')).toBeInTheDocument();
-		});
-	});
-
-	it('does not render no-auth guards when drawer is closed', () => {
-		renderDrawer({});
-
-		expect(
-			screen.queryByTestId('no-auth-delete-service-account'),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByTestId('no-auth-save-service-account'),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { ChevronDown, Globe } from '@signozhq/icons';
-import { Button, Dropdown } from 'antd';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
@@ -27,20 +28,17 @@ function TimePreference({
 
 	const menu = useMemo(
 		() => ({
-			items: menuItems,
-			onClick: timeMenuItemOnChangeHandler,
+			items: menuItems.map((item) => ({
+				...item,
+				onClick: timeMenuItemOnChangeHandler,
+			})),
 		}),
 		[timeMenuItemOnChangeHandler],
 	);
 
 	return (
-		<Dropdown
-			menu={menu}
-			rootClassName="time-selection-menu"
-			className="time-selection-target"
-			trigger={['click']}
-		>
-			<Button>
+		<DropdownMenuSimple menu={menu} className="time-selection-menu">
+			<Button className="time-selection-target">
 				<div className="button-selected-text">
 					<Globe size={14} />
 					<Typography.Text className="selected-value">
@@ -49,7 +47,7 @@ function TimePreference({
 				</div>
 				<ChevronDown size="md" />
 			</Button>
-		</Dropdown>
+		</DropdownMenuSimple>
 	);
 }
 

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -11,8 +11,13 @@ import {
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
-import { Dropdown, Skeleton } from 'antd';
+import { Skeleton } from 'antd';
 import {
 	RenderErrorResponseDTO,
 	ZeustypesHostDTO,
@@ -200,10 +205,15 @@ export default function CustomDomainSettings(): JSX.Element {
 							!workspaceName ? 'workspace-name-hidden' : ''
 						}`}
 					>
-						<Dropdown
-							trigger={['click']}
-							disabled={isFetchingHosts}
-							dropdownRender={(): JSX.Element => (
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild disabled={isFetchingHosts}>
+								<Button variant="link" color="none">
+									<Link2 size={12} />
+									<span>{stripProtocol(activeHost?.url ?? '')}</span>
+									<ChevronDown size={12} />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="start">
 								<div className="workspace-url-dropdown">
 									<span className="workspace-url-dropdown-header">
 										All Workspace URLs
@@ -236,14 +246,8 @@ export default function CustomDomainSettings(): JSX.Element {
 										);
 									})}
 								</div>
-							)}
-						>
-							<Button variant="link" color="none">
-								<Link2 size={12} />
-								<span>{stripProtocol(activeHost?.url ?? '')}</span>
-								<ChevronDown size={12} />
-							</Button>
-						</Dropdown>
+							</DropdownMenuContent>
+						</DropdownMenu>
 						<span className="custom-domain-card-meta-timezone">
 							<Clock size={11} />
 							{timezone.offset}

frontend/src/container/CustomDomainSettings/__tests__/CustomDomainSettings.test.tsx

@@ -1,4 +1,5 @@
 import { GetHosts200 } from 'api/generated/services/sigNoz.schemas';
+import userEvent from '@testing-library/user-event';
 import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
@@ -142,12 +143,13 @@ describe('CustomDomainSettings', () => {
 	});
 
 	it('shows all workspace URLs as links in the dropdown', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
 
 		// Open the URL dropdown
-		fireEvent.click(
+		await user.click(
 			screen.getByRole('button', { name: /custom-host\.test\.cloud/i }),
 		);
 

frontend/src/container/Download/Download.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { CloudDownload } from '@signozhq/icons';
-import { Button, Dropdown, MenuProps, Flex } from 'antd';
+import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
+import { Button, Flex } from 'antd';
 import { unparse } from 'papaparse';
 
 import { DownloadProps } from './Download.types';
@@ -67,7 +68,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 	};
 
 	return (
-		<Dropdown menu={menu} trigger={['click']}>
+		<DropdownMenuSimple menu={menu}>
 			<Button
 				className="download-button"
 				loading={isLoading || isDownloading}
@@ -79,7 +80,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 					Download
 				</Flex>
 			</Button>
-		</Dropdown>
+		</DropdownMenuSimple>
 	);
 }
 

frontend/src/container/GeneralSettings/styles.ts

@@ -1,8 +1,4 @@
-import {
-	Col,
-	Dropdown as DropDownComponent,
-	Input as InputComponent,
-} from 'antd';
+import { Col, Input as InputComponent } from 'antd';
 import { Typography as TypographyComponent } from '@signozhq/ui/typography';
 import styled from 'styled-components';
 
@@ -34,16 +30,6 @@ export const ButtonContainer = styled.div`
 	}
 `;
 
-export const Dropdown = styled(DropDownComponent)`
-	&&& {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		max-width: 150px;
-		min-width: 150px;
-	}
-`;
-
 export const TextContainer = styled.div`
 	&&& {
 		min-width: 100px;

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { AppProvider } from 'providers/App/App';
@@ -176,6 +177,7 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 
 describe('WidgetGraphComponent', () => {
 	it('should show correct menu items when hovering over more options while loading', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const { getByTestId, findByRole, getByText, container } = render(
 			<MockQueryClientProvider>
 				<ErrorModalProvider>
@@ -208,7 +210,7 @@ describe('WidgetGraphComponent', () => {
 		expect(skeleton).toBeInTheDocument();
 
 		const moreOptionsButton = getByTestId('widget-header-options');
-		fireEvent.mouseEnter(moreOptionsButton);
+		await user.click(moreOptionsButton);
 
 		const menu = await findByRole('menu');
 		expect(menu).toBeInTheDocument();

frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss

@@ -54,6 +54,17 @@
 	visibility: visible;
 }
 
+// currently the width of the dropdown menu is set to 100% of the parent container,
+// which is not desired. This is a workaround to unset that width and allow the dropdown menu to size based on its content.
+// This is necessary because the dropdown menu can contain items with varying widths, and setting it to 100% can cause layout issues and make the menu look unbalanced.
+// we should idealy fix this in the dropdown menu component itself, but for now this is a quick fix to ensure the dropdown menu looks correct in the widget header.
+
+[data-radix-popper-content-wrapper]
+	[data-slot='dropdown-menu-content'].widget-header-dropdown
+	[data-slot='dropdown-menu-item'] {
+	width: unset !important;
+}
+
 .widget-api-actions {
 	padding-right: 0.25rem;
 }

frontend/src/container/GridCardLayout/WidgetHeader/__tests__/WidgetHeader.test.tsx

@@ -467,6 +467,7 @@ describe('WidgetHeader', () => {
 
 	describe('Create Alerts Menu Item', () => {
 		it('renders Create Alerts menu item with external link icon when included in headerMenuList', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(
 				<WidgetHeader
 					title={TEST_WIDGET_TITLE}
@@ -483,7 +484,7 @@ describe('WidgetHeader', () => {
 
 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
 			expect(moreOptionsIcon).toBeInTheDocument();
-			await userEvent.hover(moreOptionsIcon);
+			await user.click(moreOptionsIcon);
 
 			await screen.findByText(CREATE_ALERTS_TEXT);
 
@@ -494,6 +495,7 @@ describe('WidgetHeader', () => {
 		});
 
 		it('Create Alerts menu item is enabled and clickable', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			const mockCreateAlertsHandler = jest.fn();
 			const useCreateAlerts = jest.requireMock(
 				'hooks/queryBuilder/useCreateAlerts',
@@ -517,12 +519,12 @@ describe('WidgetHeader', () => {
 			expect(useCreateAlerts).toHaveBeenCalledWith(mockWidget, 'dashboardView');
 
 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
-			await userEvent.hover(moreOptionsIcon);
+			await user.click(moreOptionsIcon);
 
 			const createAlertsMenuItem = await screen.findByText(CREATE_ALERTS_TEXT);
 
 			// Verify the menu item is clickable by actually clicking it
-			await userEvent.click(createAlertsMenuItem);
+			await user.click(createAlertsMenuItem);
 			expect(mockCreateAlertsHandler).toHaveBeenCalledTimes(1);
 		});
 	});

frontend/src/container/GridCardLayout/WidgetHeader/index.tsx

@@ -15,7 +15,8 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Dropdown, Input, MenuProps, Tooltip } from 'antd';
+import { Button, Input, Tooltip } from 'antd';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import ErrorPopover from 'components/ErrorPopover/ErrorPopover';
@@ -128,7 +129,7 @@ function WidgetHeader({
 		],
 	);
 
-	const onMenuItemSelectHandler: MenuProps['onClick'] = useCallback(
+	const onMenuItemSelectHandler = useCallback(
 		({ key }: { key: string }): void => {
 			if (isTWidgetOptions(key)) {
 				const functionToCall = keyMethodMapping[key];
@@ -188,18 +189,8 @@ function WidgetHeader({
 			{
 				key: MenuItemKeys.CreateAlerts,
 				icon: <Bell size="md" />,
-				label: (
-					<span
-						style={{
-							display: 'flex',
-							alignItems: 'baseline',
-							justifyContent: 'space-between',
-						}}
-					>
-						{MENUITEM_KEYS_VS_LABELS[MenuItemKeys.CreateAlerts]}
-						<SquareArrowOutUpRight size={10} />
-					</span>
-				),
+				label: MENUITEM_KEYS_VS_LABELS[MenuItemKeys.CreateAlerts],
+				rightIcon: <SquareArrowOutUpRight size="lg" />,
 				isVisible: headerMenuList?.includes(MenuItemKeys.CreateAlerts) || false,
 				disabled: false,
 			},
@@ -221,8 +212,10 @@ function WidgetHeader({
 
 	const menu = useMemo(
 		() => ({
-			items: updatedMenuList,
-			onClick: onMenuItemSelectHandler,
+			items: updatedMenuList.map((item) => ({
+				...item,
+				onClick: onMenuItemSelectHandler,
+			})),
 		}),
 		[updatedMenuList, onMenuItemSelectHandler],
 	);
@@ -321,7 +314,7 @@ function WidgetHeader({
 							/>
 						)}
 						{menu && Array.isArray(menu.items) && menu.items.length > 0 && (
-							<Dropdown menu={menu} trigger={['hover']} placement="bottomRight">
+							<DropdownMenuSimple menu={menu} side="bottom" align="end">
 								<Button
 									data-testid="widget-header-options"
 									className={`widget-header-more-options ${
@@ -329,7 +322,7 @@ function WidgetHeader({
 									}`}
 									icon={<EllipsisVertical size="md" />}
 								/>
-							</Dropdown>
+							</DropdownMenuSimple>
 						)}
 					</div>
 				</>

frontend/src/container/GridCardLayout/WidgetHeader/types.ts

@@ -6,6 +6,7 @@ export interface MenuItem {
 	key: MenuItemKeys;
 	icon: ReactNode;
 	label: ReactNode;
+	rightIcon?: ReactNode;
 	isVisible: boolean;
 	disabled: boolean;
 	danger?: boolean;

frontend/src/container/GridCardLayout/WidgetHeader/utils.ts

@@ -1,9 +1,9 @@
-import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
+import type { MenuItem as DropdownMenuItem } from '@signozhq/ui/dropdown-menu';
 
 import { MenuItemKeys } from './contants';
 import { MenuItem } from './types';
 
-export const generateMenuList = (actions: MenuItem[]): MenuItemType[] =>
+export const generateMenuList = (actions: MenuItem[]): DropdownMenuItem[] =>
 	actions
 		.filter((action: MenuItem) => action.isVisible)
 		.map(({ key, icon: Icon, label, disabled, ...rest }) => ({

frontend/src/container/Home/Home.tsx

@@ -18,7 +18,6 @@ import listUserPreferences from 'api/v1/user/preferences/list';
 import updateUserPreferenceAPI from 'api/v1/user/preferences/name/update';
 import Header from 'components/Header/Header';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import NoAuthBanner from 'components/NoAuthBanner/NoAuthBanner';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
@@ -63,7 +62,7 @@ const homeInterval = 30 * 60 * 1000;
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function Home(): JSX.Element {
-	const { user, isNoAuthMode } = useAppContext();
+	const { user } = useAppContext();
 	const { safeNavigate } = useSafeNavigate();
 	const isDarkMode = useIsDarkMode();
 
@@ -197,7 +196,7 @@ export default function Home(): JSX.Element {
 	const { mutate: updateUserPreference } = useMutation(updateUserPreferenceAPI, {
 		onSuccess: () => {
 			setUpdatingUserPreferences(false);
-			void refetchUserPreferences();
+			refetchUserPreferences();
 		},
 		onError: () => {
 			setUpdatingUserPreferences(false);
@@ -205,7 +204,7 @@ export default function Home(): JSX.Element {
 	});
 
 	const handleWillDoThisLater = (): void => {
-		void logEvent('Welcome Checklist: Will do this later clicked', {});
+		logEvent('Welcome Checklist: Will do this later clicked', {});
 		setUpdatingUserPreferences(true);
 
 		updateUserPreference({
@@ -272,12 +271,11 @@ export default function Home(): JSX.Element {
 	}, [metricsOnboardingData, handleUpdateChecklistDoneItem]);
 
 	useEffect(() => {
-		void logEvent('Homepage: Visited', {});
+		logEvent('Homepage: Visited', {});
 	}, []);
 
 	return (
 		<div className="home-container">
-			{isNoAuthMode && <NoAuthBanner />}
 			<div className="sticky-header">
 				<Header
 					leftComponent={
@@ -300,9 +298,9 @@ export default function Home(): JSX.Element {
 									autoAdjustOverflow
 									onOpenChange={(visible): void => {
 										if (visible) {
-											void logEvent('Welcome Checklist: Expanded', {});
+											logEvent('Welcome Checklist: Expanded', {});
 										} else {
-											void logEvent('Welcome Checklist: Minimized', {});
+											logEvent('Welcome Checklist: Minimized', {});
 										}
 									}}
 									content={renderWelcomeChecklistModal()}
@@ -355,7 +353,7 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											onClick={(e: React.MouseEvent): void => {
 												// eslint-disable-next-line sonarjs/no-duplicate-string
-												void logEvent('Homepage: Ingestion Active Explore clicked', {
+												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Logs',
 												});
 												safeNavigate(ROUTES.LOGS_EXPLORER, {
@@ -364,7 +362,7 @@ export default function Home(): JSX.Element {
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
-													void logEvent('Homepage: Ingestion Active Explore clicked', {
+													logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Logs',
 													});
 													history.push(ROUTES.LOGS_EXPLORER);
@@ -398,7 +396,7 @@ export default function Home(): JSX.Element {
 											role="button"
 											tabIndex={0}
 											onClick={(e: React.MouseEvent): void => {
-												void logEvent('Homepage: Ingestion Active Explore clicked', {
+												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Traces',
 												});
 												safeNavigate(ROUTES.TRACES_EXPLORER, {
@@ -407,7 +405,7 @@ export default function Home(): JSX.Element {
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
-													void logEvent('Homepage: Ingestion Active Explore clicked', {
+													logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Traces',
 													});
 													history.push(ROUTES.TRACES_EXPLORER);
@@ -441,7 +439,7 @@ export default function Home(): JSX.Element {
 											role="button"
 											tabIndex={0}
 											onClick={(e: React.MouseEvent): void => {
-												void logEvent('Homepage: Ingestion Active Explore clicked', {
+												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Metrics',
 												});
 												safeNavigate(ROUTES.METRICS_EXPLORER, {
@@ -450,7 +448,7 @@ export default function Home(): JSX.Element {
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
-													void logEvent('Homepage: Ingestion Active Explore clicked', {
+													logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Metrics',
 													});
 													history.push(ROUTES.METRICS_EXPLORER);
@@ -498,7 +496,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Wrench size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													void logEvent('Homepage: Explore clicked', {
+													logEvent('Homepage: Explore clicked', {
 														source: 'Logs',
 													});
 													safeNavigate(ROUTES.LOGS_EXPLORER, {
@@ -515,7 +513,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Wrench size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													void logEvent('Homepage: Explore clicked', {
+													logEvent('Homepage: Explore clicked', {
 														source: 'Traces',
 													});
 													safeNavigate(ROUTES.TRACES_EXPLORER, {
@@ -532,7 +530,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Wrench size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													void logEvent('Homepage: Explore clicked', {
+													logEvent('Homepage: Explore clicked', {
 														source: 'Metrics',
 													});
 													safeNavigate(ROUTES.METRICS_EXPLORER_EXPLORER, {
@@ -571,7 +569,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Plus size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													void logEvent('Homepage: Explore clicked', {
+													logEvent('Homepage: Explore clicked', {
 														source: 'Dashboards',
 													});
 													safeNavigate(ROUTES.ALL_DASHBOARD, {
@@ -616,7 +614,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Plus size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													void logEvent('Homepage: Explore clicked', {
+													logEvent('Homepage: Explore clicked', {
 														source: 'Alerts',
 													});
 													safeNavigate(ROUTES.ALERTS_NEW, {

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,12 +12,11 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import {
 	Button,
-	Dropdown,
 	Flex,
 	Input,
-	MenuProps,
 	Modal,
 	Popover,
 	Skeleton,
@@ -553,7 +552,7 @@ function DashboardsList(): JSX.Element {
 	];
 
 	const getCreateDashboardItems = useMemo(() => {
-		const menuItems: MenuProps['items'] = [
+		const menuItems: MenuItem[] = [
 			{
 				label: (
 					<div
@@ -711,11 +710,11 @@ function DashboardsList(): JSX.Element {
 
 						{createNewDashboard && (
 							<section className="actions">
-								<Dropdown
-									overlayClassName="new-dashboard-menu"
+								<DropdownMenuSimple
+									className="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									placement="bottomRight"
-									trigger={['click']}
+									side="bottom"
+									align="end"
 								>
 									<Button
 										type="text"
@@ -727,7 +726,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New Dashboard
 									</Button>
-								</Dropdown>
+								</DropdownMenuSimple>
 								<Button
 									type="text"
 									className="learn-more"
@@ -756,11 +755,11 @@ function DashboardsList(): JSX.Element {
 								onChange={handleSearch}
 							/>
 							{createNewDashboard && (
-								<Dropdown
-									overlayClassName="new-dashboard-menu"
+								<DropdownMenuSimple
+									className="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									placement="bottomRight"
-									trigger={['click']}
+									side="bottom"
+									align="end"
 								>
 									<Button
 										type="primary"
@@ -773,7 +772,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New dashboard
 									</Button>
-								</Dropdown>
+								</DropdownMenuSimple>
 							)}
 						</div>
 

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -2,7 +2,13 @@ import { useCallback } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { orange } from '@ant-design/colors';
 import { Settings } from '@signozhq/icons';
-import { Dropdown, MenuProps } from 'antd';
+import {
+	type BaseMenuItem,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
 import {
 	negateOperator,
 	OPERATORS,
@@ -135,41 +141,38 @@ function BodyTitleRenderer({
 		viewName,
 	]);
 
-	const onClickHandler: MenuProps['onClick'] = (props): void => {
+	const onClickHandler = (key: string): void => {
 		const mapper = {
 			[DROPDOWN_KEY.FILTER_IN]: filterHandler(true),
 			[DROPDOWN_KEY.FILTER_OUT]: filterHandler(false),
 			[DROPDOWN_KEY.GROUP_BY]: groupByHandler,
 		};
 
-		const handler = mapper[props.key];
+		const handler = mapper[key];
 
 		if (handler) {
 			handler();
 		}
 	};
 
-	const menu: MenuProps = {
-		items: [
-			{
-				key: DROPDOWN_KEY.FILTER_IN,
-				label: `Filter for ${value}`,
-			},
-			{
-				key: DROPDOWN_KEY.FILTER_OUT,
-				label: `Filter out ${value}`,
-			},
-			...(isGroupBySupported
-				? [
-						{
-							key: DROPDOWN_KEY.GROUP_BY,
-							label: `Group by ${nodeKey}`,
-						},
-					]
-				: []),
-		],
-		onClick: onClickHandler,
-	};
+	const menuItems: BaseMenuItem[] = [
+		{
+			key: DROPDOWN_KEY.FILTER_IN,
+			label: `Filter for ${value}`,
+		},
+		{
+			key: DROPDOWN_KEY.FILTER_OUT,
+			label: `Filter out ${value}`,
+		},
+		...(isGroupBySupported
+			? [
+					{
+						key: DROPDOWN_KEY.GROUP_BY,
+						label: `Group by ${nodeKey}`,
+					},
+				]
+			: []),
+	];
 
 	const handleNodeClick = useCallback(
 		(e: React.MouseEvent): void => {
@@ -218,15 +221,23 @@ function BodyTitleRenderer({
 					}}
 					onMouseDown={(e): void => e.preventDefault()}
 				>
-					<Dropdown
-						menu={menu}
-						trigger={['click']}
-						dropdownRender={(originNode): React.ReactNode => (
-							<div data-log-detail-ignore="true">{originNode}</div>
-						)}
-					>
-						<Settings style={{ marginRight: 8 }} className="hover-reveal" />
-					</Dropdown>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Settings style={{ marginRight: 8 }} className="hover-reveal" />
+						</DropdownMenuTrigger>
+						<DropdownMenuContent>
+							<div data-log-detail-ignore="true">
+								{menuItems.map((item) => (
+									<DropdownMenuItem
+										key={item.key}
+										onSelect={(): void => onClickHandler(item.key as string)}
+									>
+										{item.label}
+									</DropdownMenuItem>
+								))}
+							</div>
+						</DropdownMenuContent>
+					</DropdownMenu>
 				</span>
 			)}
 			{title.toString()}{' '}

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -2,14 +2,12 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
-import type { MenuProps } from 'antd';
-import { Dropdown } from 'antd';
 import { useListUsers } from 'api/generated/services/users';
 import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
 import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal';
 import MembersTable, { MemberRow } from 'components/MembersTable/MembersTable';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { toISOString } from 'utils/app';
 
@@ -22,6 +20,7 @@ const PAGE_SIZE = 20;
 function MembersSettings(): JSX.Element {
 	const history = useHistory();
 	const urlQuery = useUrlQuery();
+
 	const pageParam = parseInt(urlQuery.get('page') ?? '1', 10);
 	const currentPage = Number.isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;
 
@@ -96,7 +95,7 @@ function MembersSettings(): JSX.Element {
 	).length;
 	const totalCount = allMembers.length;
 
-	const filterMenuItems: MenuProps['items'] = [
+	const filterMenuItems: MenuItem[] = [
 		{
 			key: FilterMode.All,
 			label: (
@@ -146,7 +145,7 @@ function MembersSettings(): JSX.Element {
 				: `Deleted ⎯ ${deletedCount}`;
 
 	const handleInviteComplete = useCallback((): void => {
-		void refetchUsers();
+		refetchUsers();
 	}, [refetchUsers]);
 
 	const handleRowClick = useCallback((member: MemberRow): void => {
@@ -158,7 +157,7 @@ function MembersSettings(): JSX.Element {
 	}, []);
 
 	const handleMemberEditComplete = useCallback((): void => {
-		void refetchUsers();
+		refetchUsers();
 	}, [refetchUsers]);
 
 	return (
@@ -172,10 +171,9 @@ function MembersSettings(): JSX.Element {
 				</div>
 
 				<div className="members-settings__controls">
-					<Dropdown
+					<DropdownMenuSimple
 						menu={{ items: filterMenuItems }}
-						trigger={['click']}
-						overlayClassName="members-filter-dropdown"
+						className="members-filter-dropdown"
 					>
 						<Button
 							variant="solid"
@@ -185,7 +183,7 @@ function MembersSettings(): JSX.Element {
 							<span>{filterLabel}</span>
 							<ChevronDown size={12} className="members-filter-trigger__chevron" />
 						</Button>
-					</Dropdown>
+					</DropdownMenuSimple>
 
 					<div className="members-settings__search">
 						<Input
@@ -201,16 +199,14 @@ function MembersSettings(): JSX.Element {
 						/>
 					</div>
 
-					<NoAuthGuard testId="no-auth-invite-member">
-						<Button
-							variant="solid"
-							color="primary"
-							onClick={(): void => setIsInviteModalOpen(true)}
-						>
-							<Plus size={12} />
-							Invite member
-						</Button>
-					</NoAuthGuard>
+					<Button
+						variant="solid"
+						color="primary"
+						onClick={(): void => setIsInviteModalOpen(true)}
+					>
+						<Plus size={12} />
+						Invite member
+					</Button>
 				</div>
 			</div>
 			<MembersTable

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

@@ -1,4 +1,5 @@
 import type { TypesUserDTO } from 'api/generated/services/sigNoz.schemas';
+import userEvent from '@testing-library/user-event';
 import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen } from 'tests/test-utils';
 
@@ -76,14 +77,15 @@ describe('MembersSettings (integration)', () => {
 	});
 
 	it('filters to pending invites via the filter dropdown', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<MembersSettings />);
 
 		await screen.findByText('Alice Smith');
 
-		fireEvent.click(screen.getByRole('button', { name: /all members/i }));
+		await user.click(screen.getByRole('button', { name: /all members/i }));
 
 		const pendingOption = await screen.findByText(/pending invites/i);
-		fireEvent.click(pendingOption);
+		await user.click(pendingOption);
 
 		await screen.findByText('charlie@signoz.io');
 		expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument();

frontend/src/container/MembersSettings/__tests__/MembersSettings.no-auth.test.tsx

@@ -1,51 +0,0 @@
-import type { TypesUserDTO } from 'api/generated/services/sigNoz.schemas';
-import { rest, server } from 'mocks-server/server';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-import { screen } from 'tests/test-utils';
-
-import MembersSettings from '../MembersSettings';
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: {
-		success: jest.fn(),
-		error: jest.fn(),
-	},
-}));
-
-const USERS_ENDPOINT = '*/api/v2/users';
-
-const mockUsers: TypesUserDTO[] = [
-	{
-		id: 'user-1',
-		displayName: 'Alice Smith',
-		email: 'alice@signoz.io',
-		status: 'active',
-		createdAt: '2024-01-01T00:00:00.000Z',
-		orgId: 'org-1',
-	},
-];
-
-describe('MembersSettings — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		server.use(
-			rest.get(USERS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: mockUsers })),
-			),
-		);
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders the no-auth sentinel and disables the Invite member button', async () => {
-		renderWithNoAuth(<MembersSettings />);
-
-		await screen.findByText('Alice Smith');
-
-		expect(screen.getByTestId('no-auth-invite-member')).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /invite member/i })).toBeDisabled();
-	});
-});

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { generatePath } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Dropdown, Skeleton } from 'antd';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useGetMetricAlerts,
@@ -126,12 +127,11 @@ function DashboardsAndAlertsPopover({
 	return (
 		<div className="dashboards-and-alerts-popover-container">
 			{dashboardsPopoverContent && (
-				<Dropdown
+				<DropdownMenuSimple
 					menu={{
 						items: dashboardsPopoverContent,
 					}}
-					placement="bottomLeft"
-					trigger={['click']}
+					align="start"
 				>
 					<div
 						className="dashboards-and-alerts-popover dashboards-popover"
@@ -142,15 +142,14 @@ function DashboardsAndAlertsPopover({
 							{pluralize(dashboards.length, 'dashboard')}
 						</Typography.Text>
 					</div>
-				</Dropdown>
+				</DropdownMenuSimple>
 			)}
 			{alertsPopoverContent && (
-				<Dropdown
+				<DropdownMenuSimple
 					menu={{
 						items: alertsPopoverContent,
 					}}
-					placement="bottomLeft"
-					trigger={['click']}
+					align="start"
 				>
 					<div
 						className="dashboards-and-alerts-popover alerts-popover"
@@ -161,7 +160,7 @@ function DashboardsAndAlertsPopover({
 							{pluralize(alerts.length, 'alert rule')}
 						</Typography.Text>
 					</div>
-				</Dropdown>
+				</DropdownMenuSimple>
 			)}
 		</div>
 	);

frontend/src/container/MySettings/UserInfo/index.tsx

@@ -7,7 +7,6 @@ import {
 	updateMyPassword,
 	useUpdateMyUserV2,
 } from 'api/generated/services/users';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import { useNotifications } from 'hooks/useNotifications';
 import { Check, FileTerminal, Mail, User } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
@@ -81,10 +80,10 @@ function UserInfo(): JSX.Element {
 		currentPassword === updatePassword;
 
 	const onSaveHandler = async (): Promise<void> => {
-		void logEvent('Account Settings: Name Updated', {
+		logEvent('Account Settings: Name Updated', {
 			name: changedName,
 		});
-		void logEvent(
+		logEvent(
 			'Account Settings: Name Updated',
 			{
 				name: changedName,
@@ -136,27 +135,23 @@ function UserInfo(): JSX.Element {
 			</div>
 
 			<div className="user-info-update-section">
-				<NoAuthGuard testId="no-auth-update-name">
-					<Button
-						type="default"
-						className="periscope-btn secondary"
-						icon={<FileTerminal size={16} />}
-						onClick={(): void => setIsUpdateNameModalOpen(true)}
-					>
-						Update name
-					</Button>
-				</NoAuthGuard>
+				<Button
+					type="default"
+					className="periscope-btn secondary"
+					icon={<FileTerminal size={16} />}
+					onClick={(): void => setIsUpdateNameModalOpen(true)}
+				>
+					Update name
+				</Button>
 
-				<NoAuthGuard testId="no-auth-reset-password">
-					<Button
-						type="default"
-						className="periscope-btn secondary"
-						icon={<FileTerminal size={16} />}
-						onClick={(): void => setIsResetPasswordModalOpen(true)}
-					>
-						Reset password
-					</Button>
-				</NoAuthGuard>
+				<Button
+					type="default"
+					className="periscope-btn secondary"
+					icon={<FileTerminal size={16} />}
+					onClick={(): void => setIsResetPasswordModalOpen(true)}
+				>
+					Reset password
+				</Button>
 			</div>
 
 			<Modal

frontend/src/container/MySettings/__tests__/UserInfo.no-auth.test.tsx

@@ -1,33 +0,0 @@
-import UserInfo from 'container/MySettings/UserInfo';
-import { screen } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-jest.mock('api/generated/services/users', () => ({
-	...jest.requireActual('api/generated/services/users'),
-	useUpdateMyUserV2: jest.fn(() => ({
-		mutateAsync: jest.fn(),
-		isLoading: false,
-	})),
-}));
-
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): any => ({
-		notifications: {
-			error: jest.fn(),
-			success: jest.fn(),
-		},
-	}),
-}));
-
-describe('UserInfo — no-auth mode', () => {
-	it('renders no-auth guard wrappers for Update name and Reset password buttons', () => {
-		renderWithNoAuth(<UserInfo />);
-		expect(screen.getByTestId('no-auth-update-name')).toBeInTheDocument();
-		expect(screen.getByTestId('no-auth-reset-password')).toBeInTheDocument();
-	});
-});

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx

@@ -7,7 +7,12 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Divider, Dropdown, Input, MenuProps, Tooltip } from 'antd';
+import { Button, Divider, Input, Tooltip } from 'antd';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
 import { FieldDataType } from 'api/v5/v5';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -159,34 +164,12 @@ function ExplorerColumnsRenderer({
 		debouncedSetQuerySearchText(e.target.value);
 	};
 
-	const items: MenuProps['items'] = [
-		{
-			key: 'search',
-			label: (
-				<Input
-					type="text"
-					placeholder="Search"
-					className="explorer-columns-search"
-					value={searchText}
-					onChange={handleSearchChange}
-					prefix={<Search size={16} style={{ padding: '6px' }} />}
-				/>
-			),
-		},
-		{
-			key: 'columns',
-			label: (
-				<ExplorerAttributeColumns
-					isLoading={isLoading}
-					data={data}
-					searchText={searchText}
-					isAttributeKeySelected={isAttributeKeySelected}
-					handleCheckboxChange={handleCheckboxChange}
-					dataSource={initialDataSource}
-				/>
-			),
-		},
-	];
+	const handleOpenChange = (nextOpen: boolean): void => {
+		setOpen(nextOpen);
+		if (nextOpen) {
+			setSearchText('');
+		}
+	};
 
 	const removeSelectedLogField = (name: string): void => {
 		if (
@@ -238,13 +221,6 @@ function ExplorerColumnsRenderer({
 		}
 	};
 
-	const toggleDropdown = (): void => {
-		setOpen(!open);
-		if (!open) {
-			setSearchText('');
-		}
-	};
-
 	const isDarkMode = useIsDarkMode();
 
 	return (
@@ -327,25 +303,38 @@ function ExplorerColumnsRenderer({
 						</Droppable>
 					</DragDropContext>
 					<div>
-						<Dropdown
-							menu={{ items }}
-							arrow
-							placement="top"
-							open={open}
-							overlayClassName="explorer-columns-dropdown"
-						>
-							<Button
-								className="action-btn"
-								data-testid="add-columns-button"
-								icon={
-									<CirclePlus
-										size={16}
-										color={isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100}
-									/>
-								}
-								onClick={toggleDropdown}
-							/>
-						</Dropdown>
+						<DropdownMenu open={open} onOpenChange={handleOpenChange}>
+							<DropdownMenuTrigger asChild>
+								<Button
+									className="action-btn"
+									data-testid="add-columns-button"
+									icon={
+										<CirclePlus
+											size={16}
+											color={isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100}
+										/>
+									}
+								/>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent side="top" className="explorer-columns-dropdown">
+								<Input
+									type="text"
+									placeholder="Search"
+									className="explorer-columns-search"
+									value={searchText}
+									onChange={handleSearchChange}
+									prefix={<Search size={16} style={{ padding: '6px' }} />}
+								/>
+								<ExplorerAttributeColumns
+									isLoading={isLoading}
+									data={data}
+									searchText={searchText}
+									isAttributeKeySelected={isAttributeKeySelected}
+									handleCheckboxChange={handleCheckboxChange}
+									dataSource={initialDataSource}
+								/>
+							</DropdownMenuContent>
+						</DropdownMenu>
 					</div>
 				</div>
 			)}

frontend/src/container/NewWidget/LeftContainer/__test__/ExplorerColumnsRenderer.test.tsx

@@ -146,6 +146,7 @@ describe('ExplorerColumnsRenderer', () => {
 	});
 
 	it('opens and closes the dropdown', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(
 			<Wrapper>
 				<ExplorerColumnsRenderer
@@ -158,12 +159,12 @@ describe('ExplorerColumnsRenderer', () => {
 		);
 
 		const addButton = screen.getByTestId('add-columns-button');
-		await userEvent.click(addButton);
+		await user.click(addButton);
 
 		expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 
-		await userEvent.click(addButton);
+		await user.click(addButton);
 		await waitFor(() => {
 			expect(screen.queryByRole('menu')).not.toBeInTheDocument();
 		});

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -13,7 +13,7 @@ import { Plus, Trash2 } from '@signozhq/icons';
 import { ContextLinkProps, Widgets } from 'types/api/dashboard/getAll';
 import { getBaseUrl } from 'utils/basePath';
 
-import VariablesDropdown from './VariablesDropdown';
+import VariablesPopover from './VariablesPopover';
 
 import './UpdateContextLinks.styles.scss';
 
@@ -71,7 +71,7 @@ function UpdateContextLinks({
 		customVariables: fieldVariables,
 	});
 
-	// Transform variables into the format expected by VariablesDropdown
+	// Transform variables into the format expected by VariablesPopover
 	const transformedVariables = useMemo(
 		() => transformContextVariables(variables),
 		[variables],
@@ -224,7 +224,9 @@ function UpdateContextLinks({
 							},
 						]}
 					>
-						<VariablesDropdown
+						{/* TODO: replace with AutoComplete with options for variables and
+						previously used URLs for better UX */}
+						<VariablesPopover
 							onVariableSelect={handleVariableSelect}
 							variables={transformedVariables}
 						>
@@ -252,7 +254,7 @@ function UpdateContextLinks({
 									/>
 								</div>
 							)}
-						</VariablesDropdown>
+						</VariablesPopover>
 					</Form.Item>
 
 					{/* Remove the separate variables section */}
@@ -282,7 +284,7 @@ function UpdateContextLinks({
 										/>
 									</Col>
 									<Col span={16}>
-										<VariablesDropdown
+										<VariablesPopover
 											onVariableSelect={(variableName, cursorPosition): void =>
 												handleParamVariableSelect(index, variableName, cursorPosition)
 											}
@@ -311,7 +313,7 @@ function UpdateContextLinks({
 													}
 												/>
 											)}
-										</VariablesDropdown>
+										</VariablesPopover>
 									</Col>
 									<Col span={2}>
 										<Button

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesDropdown.styles.scss

@@ -1,26 +0,0 @@
-.variables-dropdown-container {
-	.url-input-trigger {
-		width: 100%;
-
-		.url-input-field {
-			width: 100%;
-		}
-	}
-
-	// Override Ant Design dropdown styles
-	.ant-dropdown-menu {
-		max-height: 300px;
-		overflow-y: auto;
-		padding: 8px 0;
-	}
-}
-
-.variable-row {
-	display: flex;
-	justify-content: space-between;
-
-	.variable-source {
-		color: #666;
-		font-size: 12px;
-	}
-}

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesDropdown.tsx

@@ -1,93 +0,0 @@
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
-import { Dropdown } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import './VariablesDropdown.styles.scss';
-
-interface VariablesDropdownProps {
-	onVariableSelect: (variableName: string, cursorPosition?: number) => void;
-	variables: VariableItem[];
-	children: (props: {
-		onVariableSelect: (variableName: string, cursorPosition?: number) => void;
-		isOpen: boolean;
-		setIsOpen: (open: boolean) => void;
-		cursorPosition: number | null;
-		setCursorPosition: (position: number | null) => void;
-	}) => ReactNode;
-}
-
-interface VariableItem {
-	name: string;
-	source: string;
-}
-
-function VariablesDropdown({
-	onVariableSelect,
-	variables,
-	children,
-}: VariablesDropdownProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState(false);
-	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
-	const wrapperRef = useRef<HTMLDivElement>(null);
-
-	// Click outside handler
-	useEffect(() => {
-		function handleClickOutside(event: MouseEvent): void {
-			if (
-				wrapperRef.current &&
-				!wrapperRef.current.contains(event.target as Node)
-			) {
-				setIsOpen(false);
-			}
-		}
-		if (isOpen) {
-			document.addEventListener('mousedown', handleClickOutside);
-		}
-		return (): void => {
-			document.removeEventListener('mousedown', handleClickOutside);
-		};
-	}, [isOpen]);
-
-	const dropdownItems = useMemo(
-		() =>
-			variables.map((v) => ({
-				key: v.name,
-				label: (
-					<div className="variable-row">
-						<Typography.Text className="variable-name">{`{{${v.name}}}`}</Typography.Text>
-						<Typography.Text className="variable-source">{v.source}</Typography.Text>
-					</div>
-				),
-			})),
-		[variables],
-	);
-
-	return (
-		<div className="variables-dropdown-container" ref={wrapperRef}>
-			<Dropdown
-				menu={{
-					items: dropdownItems,
-					onClick: ({ key }): void => {
-						const variableName = key as string;
-						onVariableSelect(`{{${variableName}}}`, cursorPosition || undefined);
-						setIsOpen(false);
-					},
-				}}
-				open={isOpen}
-				placement="bottomLeft"
-				trigger={['click']}
-				getPopupContainer={(): HTMLElement => wrapperRef.current || document.body}
-			>
-				{children({
-					onVariableSelect,
-					isOpen,
-					setIsOpen,
-					cursorPosition,
-					setCursorPosition,
-				})}
-			</Dropdown>
-		</div>
-	);
-}
-
-export default VariablesDropdown;

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesPopover.styles.scss

@@ -0,0 +1,74 @@
+.variables-popover-container {
+	.url-input-trigger {
+		width: 100%;
+
+		.url-input-field {
+			width: 100%;
+		}
+	}
+
+	.variables-popover-anchor-wrap {
+		width: 100%;
+	}
+}
+
+.variables-popover-content {
+	// antd Modal uses z-index ~1000; popover must sit above it.
+	z-index: 1100;
+	padding: 4px 0;
+	max-height: 300px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	min-width: var(--radix-popover-trigger-width);
+}
+
+.variables-popover-empty {
+	padding: 8px 12px;
+	color: var(--l3-foreground, #999);
+	font-size: 12px;
+	font-style: italic;
+}
+
+.variables-popover-item {
+	all: unset;
+	display: block;
+	box-sizing: border-box;
+	width: 100%;
+	padding: 8px 12px;
+	cursor: pointer;
+	color: var(--l1-foreground);
+	font-size: 13px;
+	line-height: 1.4;
+	overflow: hidden;
+
+	&:hover,
+	&:focus {
+		background-color: var(--l1-background-hover);
+	}
+}
+
+.variable-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	min-width: 0;
+
+	.variable-name,
+	.variable-source {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.variable-name {
+		flex: 1 1 auto;
+	}
+
+	.variable-source {
+		color: #666;
+		font-size: 12px;
+		flex: 0 1 auto;
+	}
+}

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesPopover.tsx

@@ -0,0 +1,111 @@
+// Uses Popover (not DropdownMenu like the rest of the antd-dropdown migration):
+// DropdownMenuTrigger preventDefaults pointerdown, breaking input focus and
+// dismissing on every keystroke. PopoverAnchor is a passive positioning element.
+import { ReactNode, useRef, useState } from 'react';
+import { Popover, PopoverAnchor, PopoverContent } from '@signozhq/ui/popover';
+import { Typography } from '@signozhq/ui/typography';
+
+import './VariablesPopover.styles.scss';
+
+interface VariablesPopoverProps {
+	onVariableSelect: (variableName: string, cursorPosition?: number) => void;
+	variables: VariableItem[];
+	children: (props: {
+		onVariableSelect: (variableName: string, cursorPosition?: number) => void;
+		isOpen: boolean;
+		setIsOpen: (open: boolean) => void;
+		cursorPosition: number | null;
+		setCursorPosition: (position: number | null) => void;
+	}) => ReactNode;
+}
+
+interface VariableItem {
+	name: string;
+	source: string;
+}
+
+function VariablesPopover({
+	onVariableSelect,
+	variables,
+	children,
+}: VariablesPopoverProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState(false);
+	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
+	const anchorRef = useRef<HTMLDivElement>(null);
+
+	const handleOpenChange = (open: boolean): void => {
+		// Accept "close" events from the popover (outside-click, Esc) but ignore
+		// opens — opening is driven by the input's onFocus in the consumer.
+		if (!open) {
+			setIsOpen(false);
+		}
+	};
+
+	return (
+		<div className="variables-popover-container">
+			<Popover open={isOpen} onOpenChange={handleOpenChange} modal={false}>
+				<PopoverAnchor asChild>
+					<div className="variables-popover-anchor-wrap" ref={anchorRef}>
+						{children({
+							onVariableSelect,
+							isOpen,
+							setIsOpen,
+							cursorPosition,
+							setCursorPosition,
+						})}
+					</div>
+				</PopoverAnchor>
+				<PopoverContent
+					align="start"
+					sideOffset={4}
+					className="variables-popover-content"
+					onOpenAutoFocus={(e): void => e.preventDefault()}
+					onCloseAutoFocus={(e): void => e.preventDefault()}
+					onInteractOutside={(e): void => {
+						// Keep the popover open while interacting with the anchor (the input),
+						// otherwise typing/clicking the input would close it immediately.
+						const target = e.target as Node | null;
+						if (target && anchorRef.current?.contains(target)) {
+							e.preventDefault();
+						}
+					}}
+					onFocusOutside={(e): void => {
+						const target = e.target as Node | null;
+						if (target && anchorRef.current?.contains(target)) {
+							e.preventDefault();
+						}
+					}}
+				>
+					{variables.length === 0 ? (
+						<div className="variables-popover-empty">No variables available</div>
+					) : (
+						variables.map((v) => (
+							<button
+								key={v.name}
+								type="button"
+								className="variables-popover-item"
+								onMouseDown={(e): void => {
+									// Prevent the input from losing focus when clicking an item.
+									e.preventDefault();
+								}}
+								onClick={(): void => {
+									onVariableSelect(`{{${v.name}}}`, cursorPosition || undefined);
+									setIsOpen(false);
+								}}
+							>
+								<div className="variable-row">
+									<Typography.Text className="variable-name">{`{{${v.name}}}`}</Typography.Text>
+									<Typography.Text className="variable-source">
+										{v.source}
+									</Typography.Text>
+								</div>
+							</button>
+						))
+					)}
+				</PopoverContent>
+			</Popover>
+		</div>
+	);
+}
+
+export default VariablesPopover;

frontend/src/container/NewWidget/RightContainer/ContextLinks/utils.tsx

@@ -204,7 +204,7 @@ const processContextLinks = (
 };
 
 /**
- * Transforms context variables into the format expected by VariablesDropdown
+ * Transforms context variables into the format expected by VariablesPopover
  * @param variables - Array of context variables from useContextVariables
  * @returns Array of transformed variables with proper source descriptions
  */

frontend/src/container/NewWidget/RightContainer/Threshold/ColorSelector.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { ChevronDown } from '@signozhq/icons';
-import { Button, ColorPicker, Dropdown, MenuProps, Space } from 'antd';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import { Button, ColorPicker, Space } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import useDebounce from 'hooks/useDebounce';
 
@@ -26,7 +27,7 @@ function ColorSelector({
 		setColorFromPicker(hex);
 	};
 
-	const items: MenuProps['items'] = [
+	const items: MenuItem[] = [
 		{
 			key: 'Red',
 			label: <CustomColor color="Red" />,
@@ -62,7 +63,7 @@ function ColorSelector({
 	];
 
 	return (
-		<Dropdown menu={{ items }} trigger={['click']}>
+		<DropdownMenuSimple menu={{ items }}>
 			<Button
 				onClick={(e): void => e.preventDefault()}
 				className="color-selector-button"
@@ -72,7 +73,7 @@ function ColorSelector({
 					<ChevronDown size="md" />
 				</Space>
 			</Button>
-		</Dropdown>
+		</DropdownMenuSimple>
 	);
 }
 

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx

@@ -8,9 +8,7 @@ import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import AuthError from 'components/AuthError/AuthError';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import { useNotifications } from 'hooks/useNotifications';
-import { useAppContext } from 'providers/App/App';
 import { cloneDeep, debounce } from 'lodash-es';
 import {
 	ArrowRight,
@@ -142,8 +140,6 @@ function InviteTeamMembers({
 		}, 1000);
 	};
 
-	const { isNoAuthMode } = useAppContext();
-
 	const { mutate: sendInvites, isLoading: isSendingInvites } = useMutation(
 		inviteUsers,
 		{
@@ -261,7 +257,7 @@ function InviteTeamMembers({
 	const hasInvites =
 		(teamMembersToInvite?.filter(isMemberTouched) ?? []).length > 0;
 	const isButtonDisabled = isSendingInvites || isLoading;
-	const isInviteButtonDisabled = isButtonDisabled || !hasInvites || isNoAuthMode;
+	const isInviteButtonDisabled = isButtonDisabled || !hasInvites;
 
 	return (
 		<div className="questions-container">
@@ -369,26 +365,24 @@ function InviteTeamMembers({
 				)}
 
 				<div className="onboarding-buttons-container">
-					<NoAuthGuard testId="no-auth-onboarding-invite">
-						<Button
-							variant="solid"
-							color="primary"
-							className={`onboarding-next-button ${
-								isInviteButtonDisabled ? 'disabled' : ''
-							}`}
-							onClick={handleNext}
-							disabled={isInviteButtonDisabled}
-							suffix={
-								isButtonDisabled ? (
-									<LoaderCircle className="animate-spin" size={12} />
-								) : (
-									<ArrowRight size={12} />
-								)
-							}
-						>
-							Send Invites
-						</Button>
-					</NoAuthGuard>
+					<Button
+						variant="solid"
+						color="primary"
+						className={`onboarding-next-button ${
+							isInviteButtonDisabled ? 'disabled' : ''
+						}`}
+						onClick={handleNext}
+						disabled={isInviteButtonDisabled}
+						suffix={
+							isButtonDisabled ? (
+								<LoaderCircle className="animate-spin" size={12} />
+							) : (
+								<ArrowRight size={12} />
+							)
+						}
+					>
+						Send Invites
+					</Button>
 					<Button
 						variant="ghost"
 						color="secondary"

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/__tests__/InviteTeamMembers.no-auth.test.tsx

@@ -1,31 +0,0 @@
-import InviteTeamMembers from 'container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers';
-import { screen } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): any => ({
-		notifications: {
-			error: jest.fn(),
-			success: jest.fn(),
-		},
-	}),
-}));
-
-describe('OnboardingQuestionaire InviteTeamMembers — no-auth mode', () => {
-	it('renders no-auth guard wrapper for the invite button', () => {
-		renderWithNoAuth(
-			<InviteTeamMembers
-				isLoading={false}
-				teamMembers={null}
-				setTeamMembers={jest.fn()}
-				onNext={jest.fn()}
-			/>,
-		);
-		expect(screen.getByTestId('no-auth-onboarding-invite')).toBeInTheDocument();
-	});
-});

frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx

@@ -21,7 +21,6 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { isModifierKeyPressed } from 'utils/app';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
 
@@ -210,7 +209,7 @@ function OnboardingAddDataSource(): JSX.Element {
 	};
 
 	useEffect(() => {
-		void logEvent(
+		logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.STARTED}`,
 			{},
 		);
@@ -254,7 +253,7 @@ function OnboardingAddDataSource(): JSX.Element {
 		setSelectedFramework(null);
 		setSelectedEnvironment(null);
 
-		void logEvent(
+		logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.DATA_SOURCE_SELECTED}`,
 			{
 				dataSource: dataSource.label,
@@ -277,7 +276,7 @@ function OnboardingAddDataSource(): JSX.Element {
 	};
 
 	const handleSelectFramework = (option: any): void => {
-		void logEvent(
+		logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.FRAMEWORK_SELECTED}`,
 			{
 				dataSource: selectedDataSource?.label,
@@ -310,7 +309,7 @@ function OnboardingAddDataSource(): JSX.Element {
 		selectedEnvironment: any,
 		baseURL?: string,
 	): void => {
-		void logEvent(
+		logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.ENVIRONMENT_SELECTED}`,
 			{
 				dataSource: selectedDataSource?.label,
@@ -352,7 +351,7 @@ function OnboardingAddDataSource(): JSX.Element {
 			groupDataSourcesByTags(filteredDataSources as Entity[]),
 		);
 
-		void logEvent(
+		logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.DATA_SOURCE_SEARCHED}`,
 			{
 				searchedDataSource: query,
@@ -486,7 +485,7 @@ function OnboardingAddDataSource(): JSX.Element {
 	};
 
 	const handleShowInviteTeamMembersModal = (): void => {
-		void logEvent(
+		logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_BUTTON_CLICKED}`,
 			{
 				dataSource: selectedDataSource?.label,
@@ -499,7 +498,7 @@ function OnboardingAddDataSource(): JSX.Element {
 	};
 
 	const handleSubmitDataSourceRequest = (): void => {
-		void logEvent(
+		logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.DATA_SOURCE_REQUESTED}`,
 			{
 				requestedDataSource: dataSourceRequest,
@@ -514,7 +513,7 @@ function OnboardingAddDataSource(): JSX.Element {
 	};
 
 	const handleRaiseRequest = (): void => {
-		void logEvent(
+		logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.DATA_SOURCE_REQUESTED}`,
 			{
 				requestedDataSource: searchQuery,
@@ -636,7 +635,7 @@ function OnboardingAddDataSource(): JSX.Element {
 								size={14}
 								className="onboarding-header-container-close-icon"
 								onClick={(e): void => {
-									void logEvent(
+									logEvent(
 										`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CLOSE_ONBOARDING_CLICKED}`,
 										{
 											currentPage: setupStepItems[currentStep]?.title || '',
@@ -650,16 +649,14 @@ function OnboardingAddDataSource(): JSX.Element {
 						</div>
 
 						<div className="header-right-section">
-							<NoAuthGuard testId="no-auth-invite-teammate">
-								<Button
-									type="default"
-									className="periscope-btn invite-teammate-btn outlined"
-									onClick={handleShowInviteTeamMembersModal}
-									icon={<UserPlus size={16} />}
-								>
-									Invite a teammate
-								</Button>
-							</NoAuthGuard>
+							<Button
+								type="default"
+								className="periscope-btn invite-teammate-btn outlined"
+								onClick={handleShowInviteTeamMembersModal}
+								icon={<UserPlus size={16} />}
+							>
+								Invite a teammate
+							</Button>
 
 							<LaunchChatSupport
 								attributes={{
@@ -973,7 +970,7 @@ function OnboardingAddDataSource(): JSX.Element {
 													disabled={!selectedDataSource}
 													shape="round"
 													onClick={(e): void => {
-														void logEvent(
+														logEvent(
 															`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONFIGURED_PRODUCT}`,
 															{
 																dataSource: selectedDataSource?.label,
@@ -1041,7 +1038,7 @@ function OnboardingAddDataSource(): JSX.Element {
 										type="default"
 										shape="round"
 										onClick={(): void => {
-											void logEvent(
+											logEvent(
 												`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BACK_BUTTON_CLICKED}`,
 												{
 													dataSource: selectedDataSource?.label,
@@ -1060,7 +1057,7 @@ function OnboardingAddDataSource(): JSX.Element {
 										type="primary"
 										shape="round"
 										onClick={(e): void => {
-											void logEvent(
+											logEvent(
 												`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONTINUE_BUTTON_CLICKED}`,
 												{
 													dataSource: selectedDataSource?.label,

frontend/src/container/OnboardingV2Container/AddDataSource/__tests__/AddDataSource.no-auth.test.tsx

@@ -1,31 +0,0 @@
-import { screen } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import OnboardingAddDataSource from '../AddDataSource';
-
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn().mockResolvedValue(undefined),
-}));
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
-		safeNavigate: jest.fn(),
-	}),
-}));
-
-jest.mock('api/generated/services/global', () => ({
-	useGetGlobalConfig: jest.fn(() => ({ data: undefined })),
-}));
-
-jest.mock('components/LaunchChatSupport/LaunchChatSupport', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <button type="button">Contact Support</button>,
-}));
-
-describe('OnboardingAddDataSource — no-auth mode', () => {
-	it('renders no-auth guard wrapper for the invite teammate button', () => {
-		renderWithNoAuth(<OnboardingAddDataSource />);
-		expect(screen.getByTestId('no-auth-invite-teammate')).toBeInTheDocument();
-	});
-});

frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.no-auth.test.tsx

@@ -1,32 +0,0 @@
-import InviteTeamMembers from 'container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers';
-import { screen } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): any => ({
-		notifications: {
-			error: jest.fn(),
-			success: jest.fn(),
-		},
-	}),
-}));
-
-describe('OnboardingV2Container InviteTeamMembers — no-auth mode', () => {
-	it('renders no-auth guard wrapper for the invite button', () => {
-		renderWithNoAuth(
-			<InviteTeamMembers
-				isLoading={false}
-				teamMembers={null}
-				setTeamMembers={jest.fn()}
-				onNext={jest.fn()}
-				onClose={jest.fn()}
-			/>,
-		);
-		expect(screen.getByTestId('no-auth-v2-invite')).toBeInTheDocument();
-	});
-});

frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.tsx

@@ -5,7 +5,6 @@ import { Button, Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import inviteUsers from 'api/v1/invite/bulk/create';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import { useNotifications } from 'hooks/useNotifications';
 import { cloneDeep, debounce, isEmpty } from 'lodash-es';
 import {
@@ -282,17 +281,15 @@ function InviteTeamMembers({
 					Cancel
 				</Button>
 
-				<NoAuthGuard testId="no-auth-v2-invite">
-					<Button
-						type="primary"
-						className="next-button periscope-btn primary"
-						onClick={handleNext}
-						loading={isSendingInvites || isLoading}
-					>
-						Send Invites
-						<ArrowRight size={14} />
-					</Button>
-				</NoAuthGuard>
+				<Button
+					type="primary"
+					className="next-button periscope-btn primary"
+					onClick={handleNext}
+					loading={isSendingInvites || isLoading}
+				>
+					Send Invites
+					<ArrowRight size={14} />
+				</Button>
 			</div>
 		</div>
 	);

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.no-auth.test.tsx

@@ -1,32 +0,0 @@
-import { fireEvent, screen } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import CreateEdit from './CreateEdit';
-import { mockGoogleAuthDomain } from '../__tests__/mocks';
-
-describe('CreateEdit — no-auth mode', () => {
-	it('renders no-auth guard sentinel for Save Changes button', () => {
-		renderWithNoAuth(
-			<CreateEdit
-				isCreate={false}
-				record={mockGoogleAuthDomain}
-				onClose={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByTestId('no-auth-save-auth-domain')).toBeInTheDocument();
-	});
-
-	it('renders no-auth guard sentinel for Save Changes button in create mode after selecting provider', async () => {
-		renderWithNoAuth(<CreateEdit isCreate onClose={jest.fn()} />);
-
-		const configureButtons = await screen.findAllByRole('button', {
-			name: /configure/i,
-		});
-		fireEvent.click(configureButtons[0]);
-
-		await expect(
-			screen.findByTestId('no-auth-save-auth-domain'),
-		).resolves.toBeInTheDocument();
-	});
-});

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.tsx

@@ -17,7 +17,6 @@ import {
 import { AxiosError } from 'axios';
 import { FeatureKeys } from 'constants/features';
 import { defaultTo } from 'lodash-es';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { ErrorV2Resp } from 'types/api';
@@ -258,16 +257,14 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 									Cancel
 								</Button>
 							)}
-							<NoAuthGuard testId="no-auth-save-auth-domain">
-								<Button
-									onClick={onSubmitHandler}
-									variant="solid"
-									color="primary"
-									loading={isCreating || isUpdating}
-								>
-									Save Changes
-								</Button>
-							</NoAuthGuard>
+							<Button
+								onClick={onSubmitHandler}
+								variant="solid"
+								color="primary"
+								loading={isCreating || isUpdating}
+							>
+								Save Changes
+							</Button>
 						</section>
 					</div>
 				)}

frontend/src/container/OrganizationSettings/AuthDomain/SSOEnforcementToggle.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import { Switch } from '@signozhq/ui/switch';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { useUpdateAuthDomain } from 'api/generated/services/authdomains';
 import {
@@ -66,9 +65,7 @@ function SSOEnforcementToggle({
 	};
 
 	return (
-		<NoAuthGuard testId="no-auth-sso-toggle">
-			<Switch disabled={isLoading} value={isChecked} onChange={onChangeHandler} />
-		</NoAuthGuard>
+		<Switch disabled={isLoading} value={isChecked} onChange={onChangeHandler} />
 	);
 }
 

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/AuthDomain.no-auth.test.tsx

@@ -1,26 +0,0 @@
-import { rest, server } from 'mocks-server/server';
-import { screen, waitFor } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import AuthDomain from '../index';
-import { AUTH_DOMAINS_LIST_ENDPOINT, mockEmptyDomainsResponse } from './mocks';
-
-describe('AuthDomain — no-auth mode', () => {
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders no-auth guard sentinel for Add Domain button', async () => {
-		server.use(
-			rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockEmptyDomainsResponse)),
-			),
-		);
-
-		renderWithNoAuth(<AuthDomain />);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-auth-add-domain')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/SSOEnforcementToggle.no-auth.test.tsx

@@ -1,36 +0,0 @@
-import { screen } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-jest.mock('@signozhq/ui/switch', () => ({
-	...jest.requireActual('@signozhq/ui/switch'),
-	Switch: ({
-		value,
-		disabled,
-	}: {
-		value: boolean;
-		disabled?: boolean;
-	}): JSX.Element => (
-		<button
-			type="button"
-			role="switch"
-			aria-checked={value}
-			disabled={disabled}
-		/>
-	),
-}));
-
-import SSOEnforcementToggle from '../SSOEnforcementToggle';
-import { mockGoogleAuthDomain } from './mocks';
-
-describe('SSOEnforcementToggle — no-auth mode', () => {
-	it('renders no-auth guard sentinel when isNoAuthMode is true', () => {
-		renderWithNoAuth(
-			<SSOEnforcementToggle
-				isDefaultChecked={false}
-				record={mockGoogleAuthDomain}
-			/>,
-		);
-
-		expect(screen.getByTestId('no-auth-sso-toggle')).toBeInTheDocument();
-	});
-});

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

@@ -14,7 +14,6 @@ import {
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
@@ -76,7 +75,7 @@ function AuthDomain(): JSX.Element {
 			{
 				onSuccess: () => {
 					toast.success('Domain deleted successfully');
-					void refetchAuthDomainListResponse();
+					refetchAuthDomainListResponse();
 					hideDeleteModal();
 				},
 				onError: (error) => {
@@ -154,24 +153,20 @@ function AuthDomain(): JSX.Element {
 				width: 100,
 				render: (_, record: AuthtypesGettableAuthDomainDTO): JSX.Element => (
 					<section className="auth-domain-list-column-action">
-						<NoAuthGuard testId="no-auth-configure-sso">
-							<Button
-								className="auth-domain-list-action-link"
-								onClick={(): void => setRecord(record)}
-								variant="link"
-							>
-								Configure {SSOType.get(record.config?.ssoType || '')}
-							</Button>
-						</NoAuthGuard>
-						<NoAuthGuard testId="no-auth-delete-domain">
-							<Button
-								className="auth-domain-list-action-link delete"
-								onClick={(): void => showDeleteModal(record)}
-								variant="link"
-							>
-								Delete
-							</Button>
-						</NoAuthGuard>
+						<Button
+							className="auth-domain-list-action-link"
+							onClick={(): void => setRecord(record)}
+							variant="link"
+						>
+							Configure {SSOType.get(record.config?.ssoType || '')}
+						</Button>
+						<Button
+							className="auth-domain-list-action-link delete"
+							onClick={(): void => showDeleteModal(record)}
+							variant="link"
+						>
+							Delete
+						</Button>
 					</section>
 				),
 			},
@@ -183,19 +178,17 @@ function AuthDomain(): JSX.Element {
 		<div className="auth-domain">
 			<section className="auth-domain-header">
 				<h3 className="auth-domain-title">Authenticated Domains</h3>
-				<NoAuthGuard testId="no-auth-add-domain">
-					<Button
-						prefix={<Plus size="md" />}
-						onClick={(): void => {
-							setAddDomain(true);
-						}}
-						variant="solid"
-						size="sm"
-						color="primary"
-					>
-						Add Domain
-					</Button>
-				</NoAuthGuard>
+				<Button
+					prefix={<Plus size="md" />}
+					onClick={(): void => {
+						setAddDomain(true);
+					}}
+					variant="solid"
+					size="sm"
+					color="primary"
+				>
+					Add Domain
+				</Button>
 			</section>
 			{formattedError && <ErrorContent error={formattedError} />}
 			{!errorFetchingAuthDomainListResponse && (
@@ -238,16 +231,15 @@ function AuthDomain(): JSX.Element {
 					>
 						Cancel
 					</Button>,
-					<NoAuthGuard key="submit" testId="no-auth-delete-domain-confirm">
-						<Button
-							prefix={<Trash2 size={16} />}
-							onClick={handleDeleteDomain}
-							className="delete-btn"
-							loading={isLoading}
-						>
-							Delete Domain
-						</Button>
-					</NoAuthGuard>,
+					<Button
+						key="submit"
+						prefix={<Trash2 size={16} />}
+						onClick={handleDeleteDomain}
+						className="delete-btn"
+						loading={isLoading}
+					>
+						Delete Domain
+					</Button>,
 				]}
 			>
 				<p className="delete-text">

frontend/src/container/OrganizationSettings/InviteUserModal/InviteUserModal.no-auth.test.tsx

@@ -1,37 +0,0 @@
-import { Form } from 'antd';
-import InviteUserModal from 'container/OrganizationSettings/InviteUserModal/InviteUserModal';
-import { screen } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): any => ({
-		notifications: {
-			error: jest.fn(),
-			success: jest.fn(),
-		},
-	}),
-}));
-
-jest.mock('api/v1/invite/create', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-function TestWrapper(): JSX.Element {
-	const [form] = Form.useForm();
-	return (
-		<InviteUserModal
-			isInviteTeamMemberModalOpen
-			toggleModal={jest.fn()}
-			form={form}
-			onClose={jest.fn()}
-		/>
-	);
-}
-
-describe('InviteUserModal — no-auth mode', () => {
-	it('renders no-auth guard wrapper for the invite submit button', () => {
-		renderWithNoAuth(<TestWrapper />);
-		expect(screen.getByTestId('no-auth-invite-user')).toBeInTheDocument();
-	});
-});

frontend/src/container/OrganizationSettings/InviteUserModal/InviteUserModal.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, FormInstance, Modal } from 'antd';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import sendInvite from 'api/v1/invite/create';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';
@@ -86,20 +85,16 @@ function InviteUserModal(props: InviteUserModalProps): JSX.Element {
 						ns: 'common',
 					})}
 				</Button>,
-				<NoAuthGuard
+				<Button
 					key={t('invite_team_members').toString()}
-					testId="no-auth-invite-user"
+					onClick={modalForm.submit}
+					data-testid="invite-team-members-button"
+					type="primary"
+					disabled={isInvitingMembers}
+					loading={isInvitingMembers}
 				>
-					<Button
-						onClick={modalForm.submit}
-						data-testid="invite-team-members-button"
-						type="primary"
-						disabled={isInvitingMembers}
-						loading={isInvitingMembers}
-					>
-						{t('invite_team_members')}
-					</Button>
-				</NoAuthGuard>,
+					{t('invite_team_members')}
+				</Button>,
 			]}
 		>
 			<InviteTeamMembers form={modalForm} onFinish={onInviteClickHandler} />

frontend/src/container/RolesSettings/RolesComponents/CreateRoleModal.no-auth.test.tsx

@@ -1,12 +0,0 @@
-import { screen } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import CreateRoleModal from './CreateRoleModal';
-
-describe('CreateRoleModal — no-auth mode', () => {
-	it('renders no-auth guard sentinel for Create Role button', () => {
-		renderWithNoAuth(<CreateRoleModal isOpen onClose={jest.fn()} />);
-
-		expect(screen.getByTestId('no-auth-save-role')).toBeInTheDocument();
-	});
-});

frontend/src/container/RolesSettings/RolesComponents/CreateRoleModal.tsx

@@ -18,7 +18,6 @@ import {
 } from 'api/generated/services/sigNoz.schemas';
 import { ErrorType } from 'api/generatedAPIInstance';
 import ROUTES from 'constants/routes';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { handleApiError } from 'utils/errorUtils';
 
@@ -149,17 +148,16 @@ function CreateRoleModal({
 					<X size={14} />
 					Cancel
 				</Button>,
-				<NoAuthGuard key="submit" testId="no-auth-save-role">
-					<Button
-						variant="solid"
-						color="primary"
-						onClick={onSubmit}
-						loading={isLoading}
-						size="sm"
-					>
-						{isEditMode ? 'Save Changes' : 'Create Role'}
-					</Button>
-				</NoAuthGuard>,
+				<Button
+					key="submit"
+					variant="solid"
+					color="primary"
+					onClick={onSubmit}
+					loading={isLoading}
+					size="sm"
+				>
+					{isEditMode ? 'Save Changes' : 'Create Role'}
+				</Button>,
 			]}
 			destroyOnClose
 			className="create-role-modal"

frontend/src/container/RolesSettings/RolesSettings.tsx

@@ -5,7 +5,6 @@ import { Input } from '@signozhq/ui/input';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import { RoleCreatePermission } from 'hooks/useAuthZ/permissions/role.permissions';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 
 import CreateRoleModal from './RolesComponents/CreateRoleModal';
 import RolesListingTable from './RolesComponents/RolesListingTable';
@@ -43,17 +42,15 @@ function RolesSettings(): JSX.Element {
 					/>
 					{isRolesEnabled && (
 						<AuthZTooltip checks={[RoleCreatePermission]}>
-							<NoAuthGuard testId="no-auth-create-custom-role">
-								<Button
-									variant="solid"
-									color="primary"
-									className="role-settings-toolbar-button"
-									onClick={(): void => setIsCreateModalOpen(true)}
-								>
-									<Plus size={14} />
-									Custom role
-								</Button>
-							</NoAuthGuard>
+							<Button
+								variant="solid"
+								color="primary"
+								className="role-settings-toolbar-button"
+								onClick={(): void => setIsCreateModalOpen(true)}
+							>
+								<Plus size={14} />
+								Custom role
+							</Button>
 						</AuthZTooltip>
 					)}
 				</div>

frontend/src/container/RolesSettings/__tests__/RolesSettings.no-auth.test.tsx

@@ -1,37 +0,0 @@
-import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
-import { rest, server } from 'mocks-server/server';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-import { screen } from 'tests/test-utils';
-
-import RolesSettings from '../RolesSettings';
-
-jest.mock('hooks/useAuthZ/useAuthZ');
-const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
-
-const ROLES_ENDPOINT = '*/api/v1/roles';
-
-describe('RolesSettings — no-auth mode', () => {
-	beforeEach(() => {
-		mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
-		server.use(
-			rest.get(ROLES_ENDPOINT, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-		server.resetHandlers();
-	});
-
-	it('renders the no-auth sentinel for the Custom role button', async () => {
-		renderWithNoAuth(<RolesSettings />);
-
-		await screen.findByText('signoz-admin');
-
-		expect(screen.getByTestId('no-auth-create-custom-role')).toBeInTheDocument();
-	});
-});

frontend/src/container/RoutingPolicies/__tests__/testUtils.ts

@@ -101,8 +101,6 @@ export function getAppContextMockState(
 		userPreferences: null,
 		hostsData: null,
 		isLoggedIn: false,
-		isNoAuthMode: false,
-		isPreflightLoading: false,
 		org: null,
 		isFetchingUser: false,
 		isFetchingActiveLicense: false,

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
-import type { MenuProps } from 'antd';
-import { Dropdown } from 'antd';
 import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
@@ -37,7 +36,6 @@ import {
 } from './utils';
 
 import './ServiceAccountsSettings.styles.scss';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 
 function ServiceAccountsSettings(): JSX.Element {
 	const [currentPage, setPage] = useQueryState(
@@ -135,7 +133,7 @@ function ServiceAccountsSettings(): JSX.Element {
 
 	const totalCount = allAccounts.length;
 
-	const filterMenuItems: MenuProps['items'] = [
+	const filterMenuItems: MenuItem[] = [
 		{
 			key: FilterMode.All,
 			label: (
@@ -232,10 +230,9 @@ function ServiceAccountsSettings(): JSX.Element {
 			) : (
 				<div className="sa-settings__list-section">
 					<div className="sa-settings__controls">
-						<Dropdown
+						<DropdownMenuSimple
 							menu={{ items: filterMenuItems }}
-							trigger={['click']}
-							overlayClassName="sa-settings-filter-dropdown"
+							className="sa-settings-filter-dropdown"
 						>
 							<Button
 								variant="solid"
@@ -248,7 +245,7 @@ function ServiceAccountsSettings(): JSX.Element {
 									className="sa-settings-filter-trigger__chevron"
 								/>
 							</Button>
-						</Dropdown>
+						</DropdownMenuSimple>
 
 						<div className="sa-settings__search">
 							<Input
@@ -265,18 +262,16 @@ function ServiceAccountsSettings(): JSX.Element {
 						</div>
 
 						<AuthZTooltip checks={[SACreatePermission]}>
-							<NoAuthGuard testId="no-auth-new-service-account">
-								<Button
-									variant="solid"
-									color="primary"
-									onClick={async (): Promise<void> => {
-										await setIsCreateModalOpen(true);
-									}}
-								>
-									<Plus size={12} />
-									New Service Account
-								</Button>
-							</NoAuthGuard>
+							<Button
+								variant="solid"
+								color="primary"
+								onClick={async (): Promise<void> => {
+									await setIsCreateModalOpen(true);
+								}}
+							>
+								<Plus size={12} />
+								New Service Account
+							</Button>
 						</AuthZTooltip>
 					</div>
 

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import userEvent from '@testing-library/user-event';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -129,6 +130,7 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('filter dropdown to "Active" hides DISABLED accounts', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(
 			<NuqsTestingAdapter>
 				<ServiceAccountsSettings />
@@ -137,10 +139,10 @@ describe('ServiceAccountsSettings (integration)', () => {
 
 		await screen.findByText('CI Bot');
 
-		fireEvent.click(screen.getByRole('button', { name: /All accounts/i }));
+		await user.click(screen.getByRole('button', { name: /All accounts/i }));
 
 		const activeOption = await screen.findByText(/Active ⎯/i);
-		fireEvent.click(activeOption);
+		await user.click(activeOption);
 
 		await screen.findByText('CI Bot');
 		expect(screen.queryByText('Legacy Bot')).not.toBeInTheDocument();

frontend/src/container/ServiceAccountsSettings/__tests__/ServiceAccountsSettings.no-auth.test.tsx

@@ -1,70 +0,0 @@
-import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
-import { rest, server } from 'mocks-server/server';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { setupAuthzAdmin } from 'tests/authz-test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-import { screen } from 'tests/test-utils';
-
-import ServiceAccountsSettings from '../ServiceAccountsSettings';
-
-const SA_LIST_ENDPOINT = '*/api/v1/service_accounts';
-const SA_ENDPOINT = '*/api/v1/service_accounts/:id';
-const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
-const SA_ROLES_ENDPOINT = '*/api/v1/service_accounts/:id/roles';
-const ROLES_ENDPOINT = '*/api/v1/roles';
-
-const mockServiceAccountsAPI = [
-	{
-		id: 'sa-1',
-		name: 'CI Bot',
-		email: 'ci-bot@signoz.io',
-		roles: ['signoz-admin'],
-		status: 'ACTIVE',
-		createdAt: 1700000000,
-		updatedAt: 1700000001,
-	},
-];
-
-describe('ServiceAccountsSettings — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		server.use(
-			setupAuthzAdmin(),
-			rest.get(SA_LIST_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: mockServiceAccountsAPI })),
-			),
-			rest.get(SA_ENDPOINT, (req, res, ctx) => {
-				const { id } = req.params as { id: string };
-				const account = mockServiceAccountsAPI.find((a) => a.id === id);
-				return account
-					? res(ctx.status(200), ctx.json({ data: account }))
-					: res(ctx.status(404), ctx.json({ message: 'Not found' }));
-			}),
-			rest.get(SA_KEYS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: [] })),
-			),
-			rest.get(SA_ROLES_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: [] })),
-			),
-			rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders the no-auth sentinel for the New Service Account button', async () => {
-		renderWithNoAuth(
-			<NuqsTestingAdapter>
-				<ServiceAccountsSettings />
-			</NuqsTestingAdapter>,
-		);
-
-		await screen.findByText('CI Bot');
-
-		expect(screen.getByTestId('no-auth-new-service-account')).toBeInTheDocument();
-	});
-});

frontend/src/container/SideNav/SideNav.styles.scss

@@ -662,7 +662,7 @@
 		}
 	}
 
-	&:not(.pinned):hover,
+	&:not(.pinned).is-hovered,
 	&.dropdown-open {
 		flex: 0 0 240px;
 		max-width: 240px;
@@ -1120,7 +1120,6 @@
 
 		.user-settings-dropdown-logout-section {
 			color: var(--danger-background);
-			pointer-events: auto;
 		}
 	}
 }

frontend/src/container/SideNav/SideNav.tsx

@@ -1,5 +1,6 @@
 import {
 	MouseEvent,
+	ReactNode,
 	useCallback,
 	useEffect,
 	useMemo,
@@ -25,7 +26,14 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Button, Dropdown, MenuProps, Modal, Tooltip } from 'antd';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
+import { Button, MenuProps, Modal, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { Logout } from 'api/utils';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
@@ -134,7 +142,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		featureFlags,
 		trialInfo,
 		isLoggedIn,
-		isNoAuthMode,
 		userPreferences,
 		changelog,
 		toggleChangelogModal,
@@ -163,7 +170,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const [hasScroll, setHasScroll] = useState(false);
 	const navTopSectionRef = useRef<HTMLDivElement>(null);
+	const sidenavRef = useRef<HTMLDivElement>(null);
 	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const isDropdownOpenRef = useRef(false);
 
 	const [isHovered, setIsHovered] = useState(false);
 	const [pinnedMenuItems, setPinnedMenuItems] = useState<SidebarItem[]>([]);
@@ -176,9 +185,27 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	}, []);
 
 	const handleMouseLeave = useCallback(() => {
+		// When the dropdown is open its content renders in a portal outside
+		// the sidenav, which causes the browser to fire mouseleave on the
+		// sidenav. Keep the sidenav expanded in that case.
+		if (isDropdownOpenRef.current) {
+			return;
+		}
 		setIsHovered(false);
 	}, []);
 
+	const handleDropdownOpenChange = useCallback((open: boolean): void => {
+		isDropdownOpenRef.current = open;
+		setIsDropdownOpen(open);
+		if (!open) {
+			// Re-sync hover state on close: the cursor may have moved to the
+			// portal content (outside .sideNav), so mouseleave never fired.
+			requestAnimationFrame(() => {
+				setIsHovered(sidenavRef.current?.matches(':hover') ?? false);
+			});
+		}
+	}, []);
+
 	const checkScroll = useCallback((): void => {
 		if (navTopSectionRef.current) {
 			const { scrollHeight, clientHeight, scrollTop } = navTopSectionRef.current;
@@ -409,7 +436,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	);
 
 	const handleReorderShortcutNavItems = (): void => {
-		void logEvent('Sidebar V2: Save shortcuts clicked', {
+		logEvent('Sidebar V2: Save shortcuts clicked', {
 			shortcuts: tempPinnedMenuItems.map((item) => item.key),
 		});
 		setPinnedMenuItems(tempPinnedMenuItems);
@@ -437,7 +464,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	const isWorkspaceBlocked = trialInfo?.workSpaceBlock || false;
 
 	const onClickGetStarted = (event: MouseEvent): void => {
-		void logEvent('Sidebar: Menu clicked', {
+		logEvent('Sidebar: Menu clicked', {
 			menuRoute: '/get-started',
 			menuLabel: 'Get Started',
 		});
@@ -490,14 +517,12 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 				isWorkspaceBlocked,
 				isEnterpriseSelfHostedUser,
 				isCommunityEnterpriseUser,
-				isNoAuthMode,
 			}),
 		[
 			isEnterpriseSelfHostedUser,
 			isCommunityEnterpriseUser,
 			user.email,
 			isWorkspaceBlocked,
-			isNoAuthMode,
 		],
 	);
 
@@ -654,7 +679,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		} else if (item) {
 			onClickHandler(item?.key as string, event);
 		}
-		void logEvent('Sidebar V2: Menu clicked', {
+		logEvent('Sidebar V2: Menu clicked', {
 			menuRoute: item?.key,
 			menuLabel: item?.label,
 		});
@@ -797,7 +822,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 					onTogglePin={
 						allowPin
 							? (item): void => {
-									void logEvent(
+									logEvent(
 										`Sidebar V2: Menu item ${item.isPinned ? 'unpinned' : 'pinned'}`,
 										{
 											menuRoute: item.key,
@@ -844,7 +869,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;
 
 		if (item && !('type' in item)) {
-			void logEvent('Help Popover: Item clicked', {
+			logEvent('Help Popover: Item clicked', {
 				menuRoute: item.key,
 				menuLabel: String(item.label),
 			});
@@ -893,7 +918,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			menuLabel = item.label;
 		}
 
-		void logEvent('Settings Popover: Item clicked', {
+		logEvent('Settings Popover: Item clicked', {
 			menuRoute: item?.key,
 			menuLabel,
 		});
@@ -930,7 +955,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 				}
 				break;
 			case 'logout':
-				void Logout();
+				Logout();
 				break;
 			default:
 		}
@@ -962,9 +987,11 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	return (
 		<div className={cx('sidenav-container', isPinned && 'pinned')}>
 			<div
+				ref={sidenavRef}
 				className={cx(
 					'sideNav',
 					isPinned && 'pinned',
+					isHovered && 'is-hovered',
 					isDropdownOpen && 'dropdown-open',
 				)}
 				onMouseEnter={handleMouseEnter}
@@ -1084,7 +1111,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 													<div
 														className="nav-section-title-icon reorder"
 														onClick={(): void => {
-															void logEvent('Sidebar V2: Manage shortcuts clicked', {});
+															logEvent('Sidebar V2: Manage shortcuts clicked', {});
 															setIsReorderShortcutNavItemsModalOpen(true);
 														}}
 													>
@@ -1131,7 +1158,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 													return;
 												}
 												const newCollapsedState = !isMoreMenuCollapsed;
-												void logEvent('Sidebar V2: More menu clicked', {
+												logEvent('Sidebar V2: More menu clicked', {
 													action: isMoreMenuCollapsed ? 'expand' : 'collapse',
 												});
 												setIsMoreMenuCollapsed(newCollapsedState);
@@ -1185,46 +1212,95 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 							{isAIAssistantEnabled && renderNavItems([aiAssistantMenuItem], false)}
 
 							<div className="nav-dropdown-item">
-								<Dropdown
-									menu={{
-										items: helpSupportDropdownMenuItems,
-										onClick: handleHelpSupportMenuItemClick,
-									}}
-									placement="topLeft"
-									overlayClassName="nav-dropdown-overlay help-support-dropdown"
-									trigger={['click']}
-									onOpenChange={(open): void => setIsDropdownOpen(open)}
-								>
-									<div className="nav-item">
-										<div className="nav-item-data" data-testid="help-support-nav-item">
-											<div className="nav-item-icon">{helpSupportMenuItem.icon}</div>
+								<DropdownMenu onOpenChange={handleDropdownOpenChange}>
+									<DropdownMenuTrigger asChild>
+										<div className="nav-item">
+											<div className="nav-item-data" data-testid="help-support-nav-item">
+												<div className="nav-item-icon">{helpSupportMenuItem.icon}</div>
 
-											<div className="nav-item-label">{helpSupportMenuItem.label}</div>
+												<div className="nav-item-label">{helpSupportMenuItem.label}</div>
+											</div>
 										</div>
-									</div>
-								</Dropdown>
+									</DropdownMenuTrigger>
+									<DropdownMenuContent
+										side="top"
+										align="start"
+										className="nav-dropdown-overlay help-support-dropdown"
+									>
+										{helpSupportDropdownMenuItems.map((item, idx) => {
+											if ('type' in item) {
+												// eslint-disable-next-line react/no-array-index-key
+												return <DropdownMenuSeparator key={`help-sep-${idx}`} />;
+											}
+											return (
+												<DropdownMenuItem
+													key={String(item.key)}
+													leftIcon={item.icon}
+													onClick={(e): void =>
+														handleHelpSupportMenuItemClick({
+															...item,
+															key: String(item.key),
+															domEvent: e.nativeEvent,
+														} as unknown as SidebarItem)
+													}
+												>
+													{item.label}
+												</DropdownMenuItem>
+											);
+										})}
+									</DropdownMenuContent>
+								</DropdownMenu>
 							</div>
 
 							<div className="nav-dropdown-item">
-								<Dropdown
-									menu={{
-										items: userSettingsDropdownMenuItems,
-										onClick: handleSettingsMenuItemClick,
-									}}
-									placement="topLeft"
-									overlayClassName="nav-dropdown-overlay settings-dropdown"
-									trigger={['click']}
-									onOpenChange={(open): void => setIsDropdownOpen(open)}
-								>
-									<div className={cx('nav-item', isSettingsPage && 'active')}>
-										<div className="nav-item-active-marker" />
-										<div className="nav-item-data" data-testid="settings-nav-item">
-											<div className="nav-item-icon">{userSettingsMenuItem.icon}</div>
+								<DropdownMenu onOpenChange={handleDropdownOpenChange}>
+									<DropdownMenuTrigger asChild>
+										<div className={cx('nav-item', isSettingsPage && 'active')}>
+											<div className="nav-item-active-marker" />
+											<div className="nav-item-data" data-testid="settings-nav-item">
+												<div className="nav-item-icon">{userSettingsMenuItem.icon}</div>
 
-											<div className="nav-item-label">{userSettingsMenuItem.label}</div>
+												<div className="nav-item-label">{userSettingsMenuItem.label}</div>
+											</div>
 										</div>
-									</div>
-								</Dropdown>
+									</DropdownMenuTrigger>
+									<DropdownMenuContent
+										side="top"
+										align="start"
+										className="nav-dropdown-overlay settings-dropdown"
+									>
+										{(userSettingsDropdownMenuItems ?? []).map((item, idx) => {
+											if (!item) {
+												return null;
+											}
+											if ('type' in item && item.type === 'divider') {
+												// eslint-disable-next-line react/no-array-index-key
+												return <DropdownMenuSeparator key={`settings-sep-${idx}`} />;
+											}
+											const settingsItem = item as {
+												key?: string | number;
+												label?: ReactNode;
+												icon?: ReactNode;
+												disabled?: boolean;
+											};
+											return (
+												<DropdownMenuItem
+													key={String(settingsItem.key)}
+													leftIcon={settingsItem.icon}
+													disabled={settingsItem.disabled}
+													onClick={(e): void =>
+														handleSettingsMenuItemClick({
+															key: String(settingsItem.key),
+															domEvent: e.nativeEvent,
+														} as unknown as SidebarItem)
+													}
+												>
+													{settingsItem.label}
+												</DropdownMenuItem>
+											);
+										})}
+									</DropdownMenuContent>
+								</DropdownMenu>
 							</div>
 						</div>
 					</div>
@@ -1237,14 +1313,14 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 				open={isReorderShortcutNavItemsModalOpen}
 				closable
 				onCancel={(): void => {
-					void logEvent('Sidebar V2: Manage shortcuts dismissed', {});
+					logEvent('Sidebar V2: Manage shortcuts dismissed', {});
 					hideReorderShortcutNavItemsModal();
 				}}
 				footer={[
 					<Button
 						key="cancel"
 						onClick={(): void => {
-							void logEvent('Sidebar V2: Manage shortcuts dismissed', {});
+							logEvent('Sidebar V2: Manage shortcuts dismissed', {});
 							hideReorderShortcutNavItemsModal();
 						}}
 						className="periscope-btn cancel-btn secondary-btn"

frontend/src/container/SideNav/__tests__/menuItems.test.tsx

@@ -5,7 +5,6 @@ const BASE_PARAMS = {
 	isWorkspaceBlocked: false,
 	isEnterpriseSelfHostedUser: false,
 	isCommunityEnterpriseUser: false,
-	isNoAuthMode: false,
 };
 
 describe('getUserSettingsDropdownMenuItems', () => {
@@ -72,15 +71,4 @@ describe('getUserSettingsDropdownMenuItems', () => {
 		expect(keys[3]).toBe('account');
 		expect(keys[keys.length - 1]).toBe('logout');
 	});
-
-	it('omits sign out and its preceding divider when isNoAuthMode=true', () => {
-		const items =
-			getUserSettingsDropdownMenuItems({ ...BASE_PARAMS, isNoAuthMode: true }) ??
-			[];
-		const keys = items.map((item: any) => item.key ?? item.type);
-
-		expect(keys).not.toContain('logout');
-		// the trailing divider before logout should also be gone
-		expect(keys[keys.length - 1]).toBe('keyboard-shortcuts');
-	});
 });

frontend/src/container/SideNav/menuItems.tsx

@@ -1,5 +1,3 @@
-import { MenuProps } from 'antd';
-import ROUTES from 'constants/routes';
 import {
 	ArrowUpRight,
 	BarChart,
@@ -37,13 +35,15 @@ import {
 	Users,
 	Binoculars,
 } from '@signozhq/icons';
+import { Style } from '@signozhq/design-tokens';
+import { MenuProps } from 'antd';
+import ROUTES from 'constants/routes';
 
 import {
 	SecondaryMenuItemKey,
 	SettingsNavSection,
 	SidebarItem,
 } from './sideNav.types';
-import { Style } from '@signozhq/design-tokens';
 
 export const getStartedMenuItem = {
 	key: ROUTES.GET_STARTED,
@@ -487,7 +487,6 @@ export interface UserSettingsMenuItemsParams {
 	isWorkspaceBlocked: boolean;
 	isEnterpriseSelfHostedUser: boolean;
 	isCommunityEnterpriseUser: boolean;
-	isNoAuthMode: boolean;
 }
 
 export const getUserSettingsDropdownMenuItems = ({
@@ -495,7 +494,6 @@ export const getUserSettingsDropdownMenuItems = ({
 	isWorkspaceBlocked,
 	isEnterpriseSelfHostedUser,
 	isCommunityEnterpriseUser,
-	isNoAuthMode,
 }: UserSettingsMenuItemsParams): MenuProps['items'] =>
 	[
 		{
@@ -539,25 +537,21 @@ export const getUserSettingsDropdownMenuItems = ({
 			icon: <Keyboard size={14} color={Style.L1_FOREGROUND} />,
 			dataTestId: 'keyboard-shortcuts-nav-item',
 		},
-		...(isNoAuthMode
-			? []
-			: [
-					{ type: 'divider' as const },
-					{
-						key: 'logout',
-						label: (
-							<span className="user-settings-dropdown-logout-section">Sign out</span>
-						),
-						icon: (
-							<LogOut
-								size={14}
-								className="user-settings-dropdown-logout-section"
-								color={Style.DANGER_BACKGROUND}
-							/>
-						),
-						dataTestId: 'logout-nav-item',
-					},
-				]),
+		{ type: 'divider' as const },
+		{
+			key: 'logout',
+			label: (
+				<span className="user-settings-dropdown-logout-section">Sign out</span>
+			),
+			icon: (
+				<LogOut
+					size={14}
+					className="user-settings-dropdown-logout-section"
+					color={Style.DANGER_BACKGROUND}
+				/>
+			),
+			dataTestId: 'logout-nav-item',
+		},
 	].filter(Boolean);
 
 /** Mapping of some newly added routes and their corresponding active sidebar menu key */

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.styles.scss

@@ -8,8 +8,10 @@
 		border-color: var(--l1-border);
 		margin: 0;
 	}
-	.dropdown-icon {
-		margin-right: 4px;
+	.dropdown-trigger-wrapper {
+		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
 }
 .dropdown-menu {

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Divider, Dropdown, MenuProps, Switch, Tooltip } from 'antd';
+import { Button, Divider, Switch, Tooltip } from 'antd';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Copy, Ellipsis, PenLine, Trash2 } from '@signozhq/icons';
 import {
@@ -11,7 +12,6 @@ import {
 } from 'pages/AlertDetails/hooks';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
 import { useAlertRule } from 'providers/Alert';
-import { CSSProperties } from 'styled-components';
 import { NEW_ALERT_SCHEMA_VERSION } from 'types/api/alerts/alertTypesV2';
 import { AlertDef } from 'types/api/alerts/def';
 
@@ -20,16 +20,6 @@ import RenameModal from './RenameModal';
 
 import './ActionButtons.styles.scss';
 
-const menuItemStyle: CSSProperties = {
-	fontSize: '14px',
-	letterSpacing: '0.14px',
-};
-
-const menuItemStyleV2: CSSProperties = {
-	fontSize: '13px',
-	letterSpacing: '0.13px',
-};
-
 function AlertActionButtons({
 	ruleId,
 	alertDetails,
@@ -68,9 +58,7 @@ function AlertActionButtons({
 
 	const isV2Alert = alertDetails.schemaVersion === NEW_ALERT_SCHEMA_VERSION;
 
-	const finalMenuItemStyle = isV2Alert ? menuItemStyleV2 : menuItemStyle;
-
-	const menuItems: MenuProps['items'] = [
+	const menuItems: MenuItem[] = [
 		...(!isV2Alert
 			? [
 					{
@@ -78,7 +66,6 @@ function AlertActionButtons({
 						label: 'Rename',
 						icon: <PenLine size={16} color={Color.BG_VANILLA_400} />,
 						onClick: handleRename,
-						style: finalMenuItemStyle,
 					},
 				]
 			: []),
@@ -87,17 +74,13 @@ function AlertActionButtons({
 			label: 'Duplicate',
 			icon: <Copy size={16} color={Color.BG_VANILLA_400} />,
 			onClick: handleAlertDuplicate,
-			style: finalMenuItemStyle,
 		},
 		{
 			key: 'delete-rule',
 			label: 'Delete',
 			icon: <Trash2 size={16} color={Color.BG_CHERRY_400} />,
 			onClick: handleAlertDelete,
-			style: {
-				...finalMenuItemStyle,
-				color: Color.BG_CHERRY_400,
-			},
+			danger: true,
 		},
 	];
 
@@ -138,16 +121,21 @@ function AlertActionButtons({
 
 				<Divider type="vertical" />
 
-				<Dropdown trigger={['click']} menu={{ items: menuItems }}>
-					<Tooltip title="More options">
-						<Ellipsis
-							size={16}
-							color={isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400}
-							cursor="pointer"
-							className="dropdown-icon"
-						/>
-					</Tooltip>
-				</Dropdown>
+				<DropdownMenuSimple menu={{ items: menuItems }}>
+					<span className="dropdown-trigger-wrapper">
+						<Tooltip title="More options">
+							<Button
+								type="text"
+								icon={
+									<Ellipsis
+										size={16}
+										color={isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400}
+									/>
+								}
+							/>
+						</Tooltip>
+					</span>
+				</DropdownMenuSimple>
 			</div>
 
 			<RenameModal

frontend/src/pages/Settings/Settings.tsx

@@ -321,7 +321,7 @@ function SettingsPage(): JSX.Element {
 										isDisabled={false}
 										showIcon={false}
 										onClick={(event): void => {
-											void logEvent('Settings V2: Menu clicked', {
+											logEvent('Settings V2: Menu clicked', {
 												menuLabel: item.label,
 												menuRoute: item.key,
 											});

frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelStep.tsx

@@ -1,14 +1,6 @@
 import { useMemo, useState } from 'react';
-import {
-	Button,
-	Divider,
-	Dropdown,
-	Form,
-	MenuProps,
-	Space,
-	Switch,
-	Tooltip,
-} from 'antd';
+import { Button, Divider, Form, Space, Switch, Tooltip } from 'antd';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import cx from 'classnames';
 import { FilterSelect } from 'components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions';
 import { QueryParams } from 'constants/query';
@@ -44,16 +36,22 @@ function FunnelStep({
 	const [isAddDetailsModalOpen, setIsAddDetailsModalOpen] =
 		useState<boolean>(false);
 
-	const latencyPointerItems: MenuProps['items'] = LatencyPointers.map(
-		(option) => ({
-			key: option.value,
-			label: option.key,
-			style:
-				option.value === stepData.latency_pointer
-					? { backgroundColor: 'var(--bg-slate-100)' }
-					: {},
-		}),
-	);
+	const latencyPointerItems: MenuItem[] = [
+		{
+			type: 'radio-group',
+			value: stepData.latency_pointer,
+			onChange: (value): void =>
+				onStepChange(index, {
+					latency_pointer: value as FunnelStepData['latency_pointer'],
+				}),
+			children: LatencyPointers.map((option) => ({
+				type: 'radio',
+				key: option.value,
+				label: option.key,
+				value: option.value,
+			})),
+		},
+	];
 
 	const updatedCurrentQuery = useMemo(
 		() => ({
@@ -212,17 +210,18 @@ function FunnelStep({
 					</div>
 					<div className="latency-pointer">
 						<div className="latency-pointer__label">Latency pointer</div>
-						<Dropdown
-							menu={{
-								items: latencyPointerItems,
-								onClick: ({ key }): void =>
-									onStepChange(index, {
-										latency_pointer: key as FunnelStepData['latency_pointer'],
-									}),
-							}}
-							trigger={['click']}
-							disabled={!hasEditPermission}
-						>
+						{hasEditPermission ? (
+							<DropdownMenuSimple menu={{ items: latencyPointerItems }}>
+								<Space>
+									{
+										LatencyPointers.find(
+											(option) => option.value === stepData.latency_pointer,
+										)?.key
+									}
+									<ChevronDown size={14} color="var(--bg-vanilla-400)" />
+								</Space>
+							</DropdownMenuSimple>
+						) : (
 							<Space>
 								{
 									LatencyPointers.find(
@@ -231,7 +230,7 @@ function FunnelStep({
 								}
 								<ChevronDown size={14} color="var(--bg-vanilla-400)" />
 							</Space>
-						</Dropdown>
+						)}
 					</div>
 				</div>
 			</Form>

frontend/src/providers/App/App.tsx

@@ -13,11 +13,8 @@ import { useQuery } from 'react-query';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import { useGetHosts } from 'api/generated/services/zeus';
-import { useGetGlobalConfig } from 'api/generated/services/global';
 import { useGetMyUser } from 'api/generated/services/users';
 import listOrgPreferences from 'api/v1/org/preferences/list';
-import { clearAuthStorage } from 'utils/clearAuthStorage';
-import { setNoAuthMode } from 'utils/noAuthMode';
 import listUserPreferences from 'api/v1/user/preferences/list';
 import getUserVersion from 'api/v1/version/get';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -73,51 +70,11 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 	const [isLoggedIn, setIsLoggedIn] = useState<boolean>(
 		(): boolean => getLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN) === 'true',
 	);
-	const [isNoAuthMode, setIsNoAuthMode] = useState<boolean>(false);
-	const [isPreflightLoading, setIsPreflightLoading] = useState<boolean>(true);
 	const [org, setOrg] = useState<Organization[] | null>(null);
 	const [changelog, setChangelog] = useState<ChangelogSchema | null>(null);
 
 	const [showChangelogModal, setShowChangelogModal] = useState<boolean>(false);
 
-	// Pre-flight: discover auth mode from public global config.
-	// On success: in impersonation mode → clear stale tokens, force isLoggedIn=true,
-	//             set noAuthMode singleton so the axios interceptor (outside React)
-	//             can skip the rotate-logout chain.
-	// On failure: fail-safe to normal auth flow (treat as not no-auth).
-	const { data: globalConfigData, isLoading: isFetchingGlobalConfig } =
-		useGetGlobalConfig({
-			query: {
-				retry: 2,
-				retryDelay: 1000,
-				refetchOnWindowFocus: false,
-				staleTime: Infinity,
-			},
-		});
-
-	useEffect(() => {
-		if (isFetchingGlobalConfig) {
-			return;
-		}
-
-		const impersonationEnabled =
-			globalConfigData?.data?.identN?.impersonation?.enabled === true;
-
-		if (impersonationEnabled) {
-			clearAuthStorage();
-			setDefaultUser(getUserDefaults());
-			setLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN, 'true');
-			setNoAuthMode(true);
-			setIsNoAuthMode(true);
-			setIsLoggedIn(true);
-		} else {
-			setNoAuthMode(false);
-			setIsNoAuthMode(false);
-		}
-
-		setIsPreflightLoading(false);
-	}, [globalConfigData, isFetchingGlobalConfig]);
-
 	// fetcher for current user
 	// user will only be fetched if the user id and token is present
 	// if logged out and trying to hit any route none of these calls will trigger
@@ -409,9 +366,6 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 
 	// global event listener for LOGOUT event to clean the app context state
 	useGlobalEventListener('LOGOUT', () => {
-		if (isNoAuthMode) {
-			return;
-		} // logout is meaningless in no-auth; defensively no-op
 		setIsLoggedIn(false);
 		setDefaultUser(getUserDefaults());
 		setActiveLicense(null);
@@ -431,8 +385,6 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 			orgPreferences,
 			hostsData,
 			isLoggedIn,
-			isNoAuthMode,
-			isPreflightLoading,
 			org,
 			isFetchingUser,
 			isFetchingActiveLicense,
@@ -473,8 +425,6 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 			isLoggedIn,
 			hostsData,
 			hostsFetchError,
-			isNoAuthMode,
-			isPreflightLoading,
 			org,
 			orgPreferences,
 			activeLicenseRefetch,

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

@@ -2,7 +2,6 @@ import { ReactElement } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { renderHook, waitFor } from '@testing-library/react';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import { getIsNoAuthMode, setNoAuthMode } from 'utils/noAuthMode';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { SINGLE_FLIGHT_WAIT_TIME_MS } from 'hooks/useAuthZ/constants';
 import { server } from 'mocks-server/server';
@@ -14,7 +13,6 @@ import { AppProvider, useAppContext } from '../App';
 
 const MY_USER_URL = 'http://localhost/api/v2/users/me';
 const MY_ORG_URL = 'http://localhost/api/v2/orgs/me';
-const GLOBAL_CONFIG_URL = 'http://localhost/api/v1/global/config';
 
 jest.mock('constants/env', () => ({
 	ENVIRONMENT: { baseURL: 'http://localhost', wsURL: '' },
@@ -338,127 +336,3 @@ describe('AppProvider when authz/check fails', () => {
 		);
 	});
 });
-
-describe('AppProvider no-auth preflight', () => {
-	beforeEach(() => {
-		queryClient.clear();
-	});
-
-	afterEach(() => {
-		setNoAuthMode(false);
-	});
-
-	it('sets isNoAuthMode=true and noAuthMode singleton when impersonation is enabled', async () => {
-		server.use(
-			rest.get(GLOBAL_CONFIG_URL, (_, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({
-						data: { identN: { impersonation: { enabled: true } } },
-					}),
-				),
-			),
-		);
-
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useAppContext(), { wrapper });
-
-		await waitFor(
-			() => {
-				expect(result.current.isNoAuthMode).toBe(true);
-			},
-			{ timeout: 3000 },
-		);
-
-		expect(getIsNoAuthMode()).toBe(true);
-	});
-
-	it('leaves isNoAuthMode=false and clears noAuthMode singleton when impersonation is disabled', async () => {
-		server.use(
-			rest.get(GLOBAL_CONFIG_URL, (_, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({
-						data: { identN: { impersonation: { enabled: false } } },
-					}),
-				),
-			),
-		);
-
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useAppContext(), { wrapper });
-
-		await waitFor(
-			() => {
-				expect(result.current.isPreflightLoading).toBe(false);
-			},
-			{ timeout: 3000 },
-		);
-
-		expect(result.current.isNoAuthMode).toBe(false);
-		expect(getIsNoAuthMode()).toBe(false);
-	});
-
-	it('clears stale auth tokens from localStorage and resets in-memory JWT state when impersonation is enabled', async () => {
-		setLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN, 'stale-access-token');
-		setLocalStorageApi(LOCALSTORAGE.REFRESH_AUTH_TOKEN, 'stale-refresh-token');
-		setLocalStorageApi(LOCALSTORAGE.LOGGED_IN_USER_EMAIL, 'old@example.com');
-		setLocalStorageApi(LOCALSTORAGE.LOGGED_IN_USER_NAME, 'Old Name');
-
-		server.use(
-			rest.get(GLOBAL_CONFIG_URL, (_, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({
-						data: { identN: { impersonation: { enabled: true } } },
-					}),
-				),
-			),
-		);
-
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useAppContext(), { wrapper });
-
-		await waitFor(
-			() => {
-				expect(result.current.isNoAuthMode).toBe(true);
-			},
-			{ timeout: 3000 },
-		);
-
-		// localStorage cleared
-		expect(localStorage.getItem(LOCALSTORAGE.AUTH_TOKEN)).toBeNull();
-		expect(localStorage.getItem(LOCALSTORAGE.REFRESH_AUTH_TOKEN)).toBeNull();
-		expect(localStorage.getItem(LOCALSTORAGE.LOGGED_IN_USER_EMAIL)).toBeNull();
-		expect(localStorage.getItem(LOCALSTORAGE.LOGGED_IN_USER_NAME)).toBeNull();
-
-		// in-memory JWTs reset so stale tokens don't linger in context or React Query keys
-		expect(result.current.user.accessJwt).toBe('');
-		expect(result.current.user.refreshJwt).toBe('');
-	});
-
-	it('transitions isPreflightLoading from true to false once preflight resolves', async () => {
-		server.use(
-			rest.get(GLOBAL_CONFIG_URL, (_, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({
-						data: { identN: { impersonation: { enabled: false } } },
-					}),
-				),
-			),
-		);
-
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useAppContext(), { wrapper });
-
-		expect(result.current.isPreflightLoading).toBe(true);
-
-		await waitFor(
-			() => {
-				expect(result.current.isPreflightLoading).toBe(false);
-			},
-			{ timeout: 3000 },
-		);
-	});
-});

frontend/src/providers/App/types.ts

@@ -20,8 +20,6 @@ export interface IAppContext {
 	userPreferences: UserPreference[] | null;
 	hostsData: GetHosts200 | null;
 	isLoggedIn: boolean;
-	isNoAuthMode: boolean;
-	isPreflightLoading: boolean;
 	org: Organization[] | null;
 	isFetchingUser: boolean;
 	isFetchingActiveLicense: boolean;

frontend/src/tests/no-auth-test-utils.ts

@@ -1,25 +0,0 @@
-import type { IAppContext } from 'providers/App/types';
-
-import { render } from './test-utils';
-
-export const NO_AUTH_CONTEXT: Partial<IAppContext> = {
-	isNoAuthMode: true,
-	isPreflightLoading: false,
-};
-
-/**
- * Renders a component with no-auth mode enabled in the app context.
- * Mirrors the authz-test-utils pattern for consistent no-auth test setup.
- */
-export function renderWithNoAuth(
-	...args: Parameters<typeof render>
-): ReturnType<typeof render> {
-	const [ui, options, providerProps = {}] = args;
-	return render(ui, options, {
-		...providerProps,
-		appContextOverrides: {
-			...providerProps.appContextOverrides,
-			...NO_AUTH_CONTEXT,
-		},
-	});
-}

frontend/src/tests/test-utils.tsx

@@ -243,8 +243,6 @@ export function getAppContextMock(
 		isFetchingOrgPreferences: false,
 		orgPreferencesFetchError: null,
 		isLoggedIn: true,
-		isNoAuthMode: false,
-		isPreflightLoading: false,
 		showChangelogModal: false,
 		updateUser: jest.fn(),
 		updateOrg: jest.fn(),

frontend/src/utils/__tests__/clearAuthStorage.test.ts

@@ -1,39 +0,0 @@
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-import { clearAuthStorage } from '../clearAuthStorage';
-
-describe('clearAuthStorage', () => {
-	beforeEach(() => {
-		localStorage.clear();
-	});
-
-	it('removes all auth-related localStorage keys', () => {
-		localStorage.setItem(LOCALSTORAGE.AUTH_TOKEN, 'access');
-		localStorage.setItem(LOCALSTORAGE.REFRESH_AUTH_TOKEN, 'refresh');
-		localStorage.setItem(LOCALSTORAGE.IS_LOGGED_IN, 'true');
-		localStorage.setItem(LOCALSTORAGE.LOGGED_IN_USER_EMAIL, 'old@example.com');
-		localStorage.setItem(LOCALSTORAGE.LOGGED_IN_USER_NAME, 'old');
-		localStorage.setItem(LOCALSTORAGE.IS_IDENTIFIED_USER, 'true');
-		localStorage.setItem(LOCALSTORAGE.USER_ID, 'abc');
-
-		clearAuthStorage();
-
-		expect(localStorage.getItem(LOCALSTORAGE.AUTH_TOKEN)).toBeNull();
-		expect(localStorage.getItem(LOCALSTORAGE.REFRESH_AUTH_TOKEN)).toBeNull();
-		expect(localStorage.getItem(LOCALSTORAGE.IS_LOGGED_IN)).toBeNull();
-		expect(localStorage.getItem(LOCALSTORAGE.LOGGED_IN_USER_EMAIL)).toBeNull();
-		expect(localStorage.getItem(LOCALSTORAGE.LOGGED_IN_USER_NAME)).toBeNull();
-		expect(localStorage.getItem(LOCALSTORAGE.IS_IDENTIFIED_USER)).toBeNull();
-		expect(localStorage.getItem(LOCALSTORAGE.USER_ID)).toBeNull();
-	});
-
-	it('preserves non-auth localStorage keys', () => {
-		localStorage.setItem(LOCALSTORAGE.THEME, 'dark');
-		localStorage.setItem(LOCALSTORAGE.AUTH_TOKEN, 'access');
-
-		clearAuthStorage();
-
-		expect(localStorage.getItem(LOCALSTORAGE.THEME)).toBe('dark');
-		expect(localStorage.getItem(LOCALSTORAGE.AUTH_TOKEN)).toBeNull();
-	});
-});

frontend/src/utils/clearAuthStorage.ts

@@ -1,16 +0,0 @@
-import deleteLocalStorageKey from 'api/browser/localstorage/remove';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-const AUTH_KEYS: LOCALSTORAGE[] = [
-	LOCALSTORAGE.AUTH_TOKEN,
-	LOCALSTORAGE.REFRESH_AUTH_TOKEN,
-	LOCALSTORAGE.IS_LOGGED_IN,
-	LOCALSTORAGE.LOGGED_IN_USER_EMAIL,
-	LOCALSTORAGE.LOGGED_IN_USER_NAME,
-	LOCALSTORAGE.IS_IDENTIFIED_USER,
-	LOCALSTORAGE.USER_ID,
-];
-
-export const clearAuthStorage = (): void => {
-	AUTH_KEYS.forEach((key) => deleteLocalStorageKey(key));
-};

frontend/src/utils/noAuthMode.ts

@@ -1,7 +0,0 @@
-let _isNoAuthMode = false;
-
-export const setNoAuthMode = (value: boolean): void => {
-	_isNoAuthMode = value;
-};
-
-export const getIsNoAuthMode = (): boolean => _isNoAuthMode;

migration-v2.md

@@ -0,0 +1,239 @@
+ in container/GeneralSettings/styles.ts.                                         
+  
+  npx tsc --noEmit passes clean; oxlint shows 0 errors on the 8 changed files (only pre-existing warnings).                          
+                                                                                                                                   
+  Note: a few SCSS selectors targeting .ant-dropdown-menu (e.g., in MembersSettings.styles.scss, ServiceAccountsSettings.styles.scss)
+   are now dead since the rendered DOM is radix-based — left as-is, matching the convention from your earlier migration commits.   
+  Worth a follow-up SCSS cleanup pass if you want.                                                                                   
+                                                                                                                                   
+✻ Sautéed for 15m 34s                 
+
+❯ can you make a list ? of components you have migrated also the list of these components ?                                          
+                                                                                            
+⏺ Migrated components — antd Dropdown → @signozhq/ui/dropdown-menu                                                                   
+                                                                                                                                   
+  Files I migrated in this session                                                                                                   
+                                                                                                                                     
+  ┌─────┬────────────────────────────────────────────────────────────────────────────┬────────────────────────────────────────────┐  
+  │  #  │                                    File                                    │                  Approach                  │  
+  ├─────┼────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────┤  
+  │ 1   │ src/components/TimePreferenceDropDown/index.tsx                            │ DropdownMenuSimple (top-level onClick      │
+  │     │                                                                            │ lifted onto each item)                     │
+  ├─────┼────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────┤  
+  │     │                                                                            │ DropdownMenuSimple (×2 — dashboards +      │  
+  │ 2   │ src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx │ alerts), placement="bottomLeft" →          │  
+  │     │                                                                            │ align="start"                              │  
+  ├─────┼────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────┤
+  │ 3   │ src/container/MembersSettings/MembersSettings.tsx                          │ DropdownMenuSimple + MenuItem type,        │
+  │     │                                                                            │ overlayClassName → className               │  
+  ├─────┼────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────┤
+  │ 4   │ src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx          │ DropdownMenuSimple + MenuItem type         │  
+  ├─────┼────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────┤  
+  │ 5   │ src/components/QueryBuilderV2/QueryV2/QueryV2.tsx                          │ DropdownMenuSimple,                        │
+  │     │                                                                            │ placement="bottomRight" → align="end"      │  
+  ├─────┼────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────┤
+  │     │                                                                            │ Composable API (DropdownMenu + Trigger +   │  
+  │ 6   │ src/container/NewWidget/RightContainer/ContextLinks/VariablesDropdown.tsx  │ Content + Item) — controlled open +        │  
+  │     │                                                                            │ modal={false}                              │
+  ├─────┼────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────┤  
+  │     │                                                                            │ Composable API — replaced dropdownRender   │
+  │ 7   │ src/container/LogDetailedView/BodyTitleRenderer.tsx                        │ with inner <div                            │  
+  │     │                                                                            │ data-log-detail-ignore="true"> wrapper     │
+  ├─────┼────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────┤  
+  │ 8   │ src/container/CustomDomainSettings/CustomDomainSettings.tsx                │ Composable API — dropdownRender replaced   │
+  │     │                                                                            │ by raw JSX inside DropdownMenuContent      │  
+  ├─────┼────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────┤
+  │ 9   │ src/container/GeneralSettings/styles.ts                                    │ Removed dead styled(Dropdown) export +     │  
+  │     │                                                                            │ antd import                                │  
+  └─────┴────────────────────────────────────────────────────────────────────────────┴────────────────────────────────────────────┘
+                                                                                                                                     
+  Files that were already migrated (before this session)                                                                           
+
+  ┌─────────────────────────────────────────────────────────────────────────────┬───────────────────────────────────────────────┐
+  │                                    File                                     │                  Migrated in                  │
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/components/DropDown/DropDown.tsx                                        │ chore: migrate dropdown                       │
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/components/ExplorerCard/ExplorerCard.tsx                                │ chore: migrate dropdown                       │  
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/components/ResizeTable/DynamicColumnTable.tsx                           │ chore: migrate dropdown                       │
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/container/Download/Download.tsx                                         │ chore: migrate dropdown                       │  
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/container/GridCardLayout/WidgetHeader/index.tsx (+ utils.ts)            │ chore: migrate dropdown                       │  
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/container/ListOfDashboard/DashboardsList.tsx                            │ chore: migrate dropdown                       │  
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx           │ chore: migrate dropdown                       │  
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/container/NewWidget/RightContainer/Threshold/ColorSelector.tsx          │ chore: migrate dropdown                       │  
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/container/SideNav/SideNav.tsx                                           │ chore: migrate dropdown + fix: side nav issue │  
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx          │ chore: migrate dropdown                       │
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelStep.tsx │ chore: migrate dropdown                       │  
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/container/AIAssistant/components/ConversationItem/ConversationItem.tsx  │ prior commit                                  │  
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/pages/TraceDetailsV3/TraceDetailsHeader/TraceOptionsMenu.tsx            │ prior commit                                  │  
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/periscope/components/PrettyView/PrettyView.tsx                          │ prior commit                                  │  
+  ├─────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤    
+  │ src/periscope/components/DataViewer/DataViewer.tsx                          │ prior commit                                  │
+  └─────────────────────────────────────────────────────────────────────────────┴───────────────────────────────────────────────┘    
+                                                                                                                                   
+  Files intentionally NOT touched                                                                                                    
+                                                                                                                                   
+  ┌──────────────────────────────────────────────────────────────────────────────┬────────────────────────────────────────────────┐  
+  │                                     File                                     │                     Reason                     │
+  ├──────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────┤
+  │ src/container/GeneralSettings/__tests__/GeneralSettings.test.tsx             │ Test file — out of scope                       │
+  ├──────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────┤
+  │ src/components/QuickFilters/tests/QuickFilters.test.tsx                      │ Test file                                      │  
+  ├──────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────┤
+  │ src/components/NewSelect/__test__/*.test.tsx (4 files)                       │ Test files                                     │  
+  ├──────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────┤  
+  │                                                                              │ False positive — "Dropdown" only in            │
+  │ src/container/QueryBuilder/filters/MetricNameSelector/MetricNameSelector.tsx │ comments/var names; imports AutoComplete, Spin │  
+  │                                                                              │  from antd                                     │
+  ├──────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────┤  
+  │ src/components/NewSelect/CustomSelect.tsx                                    │ False positive — "Dropdown" only in handler    │
+  │                                                                              │ names; imports Select from antd                │  
+  ├──────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────┤
+  │                                                                              │ Configures antd's theme token for Dropdown     │  
+  │ src/hooks/useDarkMode/index.tsx                                              │ component — needed as long as any antd         │  
+  │                                                                              │ component still themes against it; not an      │
+  │                                                                              │ instance of <Dropdown>                         │  
+  └──────────────────────────────────────────────────────────────────────────────┴────────────────────────────────────────────────┘
+
+─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+❯ what i wanted it   
+─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+  ⏵⏵ accept edits on (shift+tab to cycle) · PR #11376                               Update available! Run: brew upgrade claude-code
+  Files intentionally NOT touched
+
+  ┌──────────────────────────────────────────────────────────────────────────────┬────────────────────────────────────────────────┐
+  │                                     File                                     │                     Reason                     │
+  ├──────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────┤
+  │ src/container/GeneralSettings/__tests__/GeneralSettings.test.tsx             │ Test file — out of scope                       │
+  ├──────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────┤
+  │ src/components/QuickFilters/tests/QuickFilters.test.tsx                      │ Test file                                      │
+  ├──────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────┤
+  │ src/components/NewSelect/__test__/*.test.tsx (4 files)                       │ Test files                                     │
+  ├──────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────┤
+  │                                                                              │ False positive — "Dropdown" only in            │
+  │ src/container/QueryBuilder/filters/MetricNameSelector/MetricNameSelector.tsx │ comments/var names; imports AutoComplete, Spin │
+  │                                                                              │  from antd                                     │
+  ├──────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────┤
+  │ src/components/NewSelect/CustomSelect.tsx                                    │ False positive — "Dropdown" only in handler    │
+  │                                                                              │ names; imports Select from antd                │
+  ├──────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────┤
+  │                                                                              │ Configures antd's theme token for Dropdown     │
+  │ src/hooks/useDarkMode/index.tsx                                              │ component — needed as long as any antd         │
+  │                                                                              │ component still themes against it; not an      │
+  │                                                                              │ instance of <Dropdown>                         │
+  └──────────────────────────────────────────────────────────────────────────────┴────────────────────────────────────────────────┘
+
+  After this session — production source has zero remaining <Dropdown> from antd. The only references left are aliases of
+  DropdownMenuSimple as Dropdown and unrelated identifiers (variable names, comments, theme tokens).
+
+❯ what i wanted is to give me a route , breakdown what components you have migrate just now and how can i verify them ?              
+                                                                                                                                  
+  Searched for 16 patterns, read 1 file (ctrl+o to expand)                                                                           
+                                                                                                                                     
+⏺ I have enough info. Here's the verification guide:                                                                                 
+                                                                                                                                     
+  Migration verification guide                                                                                                       
+                                                                                                                                     
+  How to test each one                                                                                                               
+                                                                                                                                     
+  Run the dev server (pnpm dev), navigate to each route, click the trigger element, and verify:                                      
+  - Menu opens with the same items as before                                                                                         
+  - Clicking an item fires the right action and closes the menu                                                                      
+  - Clicking outside closes the menu                                                                                               
+  - Pressing Esc closes the menu                                                                                                     
+  - No console errors
+                                                                                                                                     
+  ---                                                                                                                              
+  1. TimePreferenceDropDown                                                                                                          
+                                                                                                                                     
+  Route: /dashboard/<any-dashboardId>/<any-widgetId> (edit/create widget flow)
+  Where to find it: New/Edit widget page → right panel → "Visualization settings" → time-selection button (Globe icon + dropdown).   
+  Also appears in Full View of any dashboard panel.                                                                                  
+  Verify: Click the globe-prefixed button → menu of time preferences opens → pick one → button label updates.                        
+                                                                                                                                     
+  ---                                                                                                                              
+  2. DashboardsAndAlertsPopover                                                                                                      
+                                                                                                                                     
+  Route: /metrics-explorer/summary → click any metric row to open Metric Details
+  Verify: In the details header, click the small "N dashboard(s)" or "N alert rule(s)" pill → dropdown lists linked dashboards /     
+  alerts → clicking a link opens it in a new tab.                                                                                    
+                                                                                                                                     
+  ---                                                                                                                                
+  3. MembersSettings                                                                                                               
+
+  Route: /settings/members
+  Verify: Top-left "All members ⎯ N" button → dropdown opens with three filter rows (All / Pending invites / Deleted) → selecting one
+   filters the table and the check-mark moves.                                                                                       
+  
+  ---                                                                                                                                
+  4. ServiceAccountsSettings                                                                                                       
+                                                                                                                                     
+  Route: /settings/service-accounts
+  Verify: Same filter dropdown pattern as #3 → opens filter menu → clicking filters the SA list.                                     
+                                                                                                                                     
+  ---
+  5. QueryV2 (Query Builder V2 actions dropdown)                                                                                     
+                                                                                                                                     
+  Route: /logs/logs-explorer, /traces-explorer, /metrics-explorer/explorer, /meter/explorer — anywhere you see the new query builder.
+  Verify: Add 2+ queries → on each query row click the ⋯ (ellipsis) icon at the right of the query header → menu with "Clone" and (if
+   >1 query) "Delete" appears with icons → clicking each performs the action.                                                        
+                                                                                                                                     
+  ---                                                                                                                                
+  6. VariablesDropdown                                                                                                             
+                      
+  Route: /dashboard/<dashboardId>/<widgetId> → right panel → Context Links section
+  Verify: In any URL/value input, focus the input → dropdown of {{variable}} suggestions opens → click a suggestion → the variable is
+   inserted at the cursor and the dropdown closes. Outside-click and Esc close the dropdown.                                         
+                                                                                                                                     
+  ▎ ⚠️  Behavior note for this one: radix's trigger toggles on click. So clicking an already-open input may close it (different from  
+  ▎ antd, where it was driven purely by focus). Focus-to-open and item-select still work.                                          
+                                                                                                                                     
+  ---                                                                                                                              
+  7. BodyTitleRenderer
+                                                                                                                                     
+  Route: /logs/logs-explorer → run any query that returns logs with JSON body → click a log row to open the Log Detail drawer →
+  expand the Body tree                                                                                                               
+  Verify: Hover any field name → a gear icon appears → click it → menu shows "Filter for …", "Filter out …", and (if JSON body flag
+  enabled and key isn't an array) "Group by …" → clicking applies the filter. Most importantly, the log detail drawer should NOT     
+  close when interacting with the dropdown (that's what the data-log-detail-ignore attribute protects).                            
+                                                                                                                                     
+  ---                                                                                                                              
+  8. CustomDomainSettings
+                                                                                                                                     
+  Route: /settings (General settings — visible only to cloud admins)
+  Verify: Top card shows your workspace URL with a chevron-down button → click it → "All Workspace URLs" dropdown opens with the     
+  active host marked by a check and others showing an external-link icon → links open in a new tab.                                  
+                                                                                                                                     
+  ---                                                                                                                                
+  9. GeneralSettings/styles.ts (dead-code removal)                                                                                 
+                                                                                                                                     
+  Route: N/A — no UI behavior. Just an unused styled(Dropdown) export removed.
+  Verify: pnpm build succeeds and /settings still renders.                                                                           
+                                                                                                                                     
+  ---                                                                                                                                
+  Quick smoke command                                                                                                                
+                                                                                                                                   
+  pnpm dev
+  # then visit, in order:
+  #   /settings/members
+  #   /settings/service-accounts
+  #   /settings  (cloud admin)                                                                                                       
+  #   /metrics-explorer/summary  → open any metric
+  #   /logs/logs-explorer        → open a log, expand body, hover a field                                                            
+  #   /logs/logs-explorer        → add 2 queries, click ⋯                                                                            
+  #   /dashboard/<id>/<widgetId> → context links + visualization time picker                                                         
+                                                                                                                                     
+  If all 8 dropdowns open, items fire, and outside-click/Esc close them, the migration is good.                                      
+