fix: added fix for panel setting scrollbar issue (#10587)

* fix: added fix for panel setting scrollbar issue

* fix: added changes for panel switch

.github/CODEOWNERS

@@ -127,12 +127,15 @@
 /frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
 /frontend/src/container/ListOfDashboard/ @SigNoz/pulse-frontend
 
+# Dashboard Widget Page
+/frontend/src/pages/DashboardWidget/ @SigNoz/pulse-frontend
+/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
+
 ## Dashboard Page
 
 /frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
 /frontend/src/container/DashboardContainer/ @SigNoz/pulse-frontend
 /frontend/src/container/GridCardLayout/ @SigNoz/pulse-frontend
-/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
 
 ## Public Dashboard Page
 

frontend/public/locales/en-GB/routes.json

@@ -15,6 +15,5 @@
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
 	"role_details": "Role Details",
-	"members": "Members",
-	"service_accounts": "Service Accounts"
+	"members": "Members"
 }

frontend/public/locales/en-GB/titles.json

@@ -50,8 +50,5 @@
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
-	"METER": "SigNoz | Meter",
-	"ROLES_SETTINGS": "SigNoz | Roles",
-	"MEMBERS_SETTINGS": "SigNoz | Members",
-	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
+	"METER": "SigNoz | Meter"
 }

frontend/public/locales/en/routes.json

@@ -15,6 +15,5 @@
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
 	"role_details": "Role Details",
-	"members": "Members",
-	"service_accounts": "Service Accounts"
+	"members": "Members"
 }

frontend/public/locales/en/titles.json

@@ -75,6 +75,5 @@
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
-	"MEMBERS_SETTINGS": "SigNoz | Members",
-	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
+	"MEMBERS_SETTINGS": "SigNoz | Members"
 }

frontend/src/components/AnnouncementBanner/AnnouncementBanner.styles.scss

@@ -1,115 +0,0 @@
-.announcement-banner {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-	padding: var(--padding-2) var(--padding-4);
-	height: 40px;
-	font-family: var(--font-sans), sans-serif;
-	font-size: var(--label-base-500-font-size);
-	line-height: var(--label-base-500-line-height);
-	font-weight: var(--label-base-500-font-weight);
-	letter-spacing: -0.065px;
-
-	&--warning {
-		background-color: var(--callout-warning-background);
-		color: var(--callout-warning-description);
-		.announcement-banner__action,
-		.announcement-banner__dismiss {
-			background: var(--callout-warning-border);
-		}
-	}
-
-	&--info {
-		background-color: var(--callout-primary-background);
-		color: var(--callout-primary-description);
-		.announcement-banner__action,
-		.announcement-banner__dismiss {
-			background: var(--callout-primary-border);
-		}
-	}
-
-	&--error {
-		background-color: var(--callout-error-background);
-		color: var(--callout-error-description);
-		.announcement-banner__action,
-		.announcement-banner__dismiss {
-			background: var(--callout-error-border);
-		}
-	}
-
-	&--success {
-		background-color: var(--callout-success-background);
-		color: var(--callout-success-description);
-		.announcement-banner__action,
-		.announcement-banner__dismiss {
-			background: var(--callout-success-border);
-		}
-	}
-
-	&__body {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-4);
-		flex: 1;
-		min-width: 0;
-	}
-
-	&__icon {
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-	}
-
-	&__message {
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		line-height: var(--line-height-normal);
-
-		strong {
-			font-weight: var(--font-weight-semibold);
-		}
-	}
-
-	&__action {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-3);
-		height: 24px;
-		padding: 0 var(--padding-2);
-		border: none;
-		border-radius: 2px;
-		cursor: pointer;
-		font-size: var(--label-small-500-font-size);
-		font-family: var(--font-sans), sans-serif;
-		font-weight: var(--label-small-500-font-weight);
-		color: currentColor;
-		white-space: nowrap;
-		flex-shrink: 0;
-
-		&:hover {
-			opacity: 0.8;
-		}
-	}
-
-	&__dismiss {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 24px;
-		height: 24px;
-		border: none;
-		border-radius: 2px;
-		padding: 0;
-		cursor: pointer;
-		color: currentColor;
-		flex-shrink: 0;
-
-		&:hover {
-			opacity: 0.8;
-		}
-	}
-}

frontend/src/components/AnnouncementBanner/AnnouncementBanner.test.tsx

@@ -1,74 +0,0 @@
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import AnnouncementBanner, {
-	AnnouncementBannerProps,
-} from './AnnouncementBanner';
-
-const STORAGE_KEY = 'test-banner-dismissed';
-
-function renderBanner(props: Partial<AnnouncementBannerProps> = {}): void {
-	render(<AnnouncementBanner message="Test message" {...props} />);
-}
-
-afterEach(() => {
-	localStorage.removeItem(STORAGE_KEY);
-});
-
-describe('AnnouncementBanner', () => {
-	it('renders message and default warning variant', () => {
-		renderBanner({ message: <strong>Heads up</strong> });
-
-		const alert = screen.getByRole('alert');
-		expect(alert).toHaveClass('announcement-banner--warning');
-		expect(alert).toHaveTextContent('Heads up');
-	});
-
-	it.each(['warning', 'info', 'success', 'error'] as const)(
-		'renders %s variant correctly',
-		(type) => {
-			renderBanner({ type, message: 'Test message' });
-			const alert = screen.getByRole('alert');
-			expect(alert).toHaveClass(`announcement-banner--${type}`);
-		},
-	);
-
-	it('dismisses on click, calls onDismiss, and persists to localStorage', async () => {
-		const onDismiss = jest.fn() as jest.MockedFunction<() => void>;
-		renderBanner({ storageKey: STORAGE_KEY, onDismiss });
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		await user.click(screen.getByRole('button', { name: /dismiss/i }));
-
-		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-		expect(onDismiss).toHaveBeenCalledTimes(1);
-		expect(localStorage.getItem(STORAGE_KEY)).toBe('true');
-	});
-
-	it('does not render when storageKey is already set in localStorage', () => {
-		localStorage.setItem(STORAGE_KEY, 'true');
-		renderBanner({ storageKey: STORAGE_KEY });
-
-		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-	});
-
-	it('calls action onClick when action button is clicked', async () => {
-		const onClick = jest.fn() as jest.MockedFunction<() => void>;
-		renderBanner({ action: { label: 'Go to Settings', onClick } });
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		await user.click(screen.getByRole('button', { name: /go to settings/i }));
-
-		expect(onClick).toHaveBeenCalledTimes(1);
-	});
-
-	it('hides dismiss button when dismissible is false and hides icon when icon is null', () => {
-		renderBanner({ dismissible: false, icon: null });
-
-		expect(
-			screen.queryByRole('button', { name: /dismiss/i }),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('alert')?.querySelector('.announcement-banner__icon'),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/components/AnnouncementBanner/AnnouncementBanner.tsx

@@ -1,115 +0,0 @@
-import { ReactNode, useState } from 'react';
-import {
-	CircleAlert,
-	CircleCheckBig,
-	Info,
-	TriangleAlert,
-	X,
-} from '@signozhq/icons';
-import cx from 'classnames';
-
-import './AnnouncementBanner.styles.scss';
-
-export type AnnouncementBannerType = 'warning' | 'info' | 'error' | 'success';
-
-export interface AnnouncementBannerAction {
-	label: string;
-	onClick: () => void;
-}
-
-export interface AnnouncementBannerProps {
-	message: ReactNode;
-	type?: AnnouncementBannerType;
-	icon?: ReactNode | null;
-	action?: AnnouncementBannerAction;
-	dismissible?: boolean;
-	storageKey?: string;
-	onDismiss?: () => void;
-	className?: string;
-}
-
-const DEFAULT_ICONS: Record<AnnouncementBannerType, ReactNode> = {
-	warning: <TriangleAlert size={14} />,
-	info: <Info size={14} />,
-	error: <CircleAlert size={14} />,
-	success: <CircleCheckBig size={14} />,
-};
-
-function isDismissed(storageKey?: string): boolean {
-	if (!storageKey) {
-		return false;
-	}
-	return localStorage.getItem(storageKey) === 'true';
-}
-
-export default function AnnouncementBanner({
-	message,
-	type = 'warning',
-	icon,
-	action,
-	dismissible = true,
-	storageKey,
-	onDismiss,
-	className,
-}: AnnouncementBannerProps): JSX.Element | null {
-	const [visible, setVisible] = useState(() => !isDismissed(storageKey));
-
-	if (!visible) {
-		return null;
-	}
-
-	const handleDismiss = (): void => {
-		if (storageKey) {
-			localStorage.setItem(storageKey, 'true');
-		}
-		setVisible(false);
-		onDismiss?.();
-	};
-
-	const resolvedIcon = icon === null ? null : icon ?? DEFAULT_ICONS[type];
-
-	return (
-		<div
-			role="alert"
-			className={cx(
-				'announcement-banner',
-				`announcement-banner--${type}`,
-				className,
-			)}
-		>
-			<div className="announcement-banner__body">
-				{resolvedIcon && (
-					<span className="announcement-banner__icon">{resolvedIcon}</span>
-				)}
-				{typeof message === 'string' ? (
-					<span
-						className="announcement-banner__message"
-						dangerouslySetInnerHTML={{ __html: message }}
-					/>
-				) : (
-					<span className="announcement-banner__message">{message}</span>
-				)}
-				{action && (
-					<button
-						type="button"
-						className="announcement-banner__action"
-						onClick={action.onClick}
-					>
-						{action.label}
-					</button>
-				)}
-			</div>
-
-			{dismissible && (
-				<button
-					type="button"
-					aria-label="Dismiss"
-					className="announcement-banner__dismiss"
-					onClick={handleDismiss}
-				>
-					<X size={14} />
-				</button>
-			)}
-		</div>
-	);
-}

frontend/src/components/AnnouncementBanner/index.ts

@@ -1,6 +0,0 @@
-export type {
-	AnnouncementBannerAction,
-	AnnouncementBannerProps,
-	AnnouncementBannerType,
-} from './AnnouncementBanner';
-export { default } from './AnnouncementBanner';

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.styles.scss

@@ -1,142 +0,0 @@
-.create-sa-modal {
-	max-width: 530px;
-	background: var(--popover);
-	border: 1px solid var(--secondary);
-	border-radius: 4px;
-	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
-
-	[data-slot='dialog-header'] {
-		padding: var(--padding-4);
-		border-bottom: 1px solid var(--secondary);
-		flex-shrink: 0;
-		background: transparent;
-		margin: 0;
-	}
-
-	[data-slot='dialog-title'] {
-		font-family: Inter, sans-serif;
-		font-size: var(--label-base-400-font-size);
-		font-weight: var(--label-base-400-font-weight);
-		line-height: var(--label-base-400-line-height);
-		letter-spacing: -0.065px;
-		color: var(--bg-base-white);
-		margin: 0;
-	}
-
-	[data-slot='dialog-description'] {
-		padding: 0;
-
-		.create-sa-modal__content {
-			padding: var(--padding-4);
-		}
-	}
-}
-
-.create-sa-form {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-
-	.ant-form-item {
-		margin-bottom: var(--spacing-4);
-	}
-
-	.ant-form-item-label > label {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--foreground);
-		letter-spacing: -0.07px;
-	}
-
-	&__input {
-		height: 32px;
-		color: var(--l1-foreground);
-		background-color: var(--l2-background);
-		border-color: var(--border);
-		font-size: var(--paragraph-base-400-font-size);
-		border-radius: 2px;
-		width: 100%;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-
-		&:focus {
-			border-color: var(--primary);
-			box-shadow: none;
-		}
-	}
-
-	&__select {
-		width: 100%;
-
-		.ant-select-selector {
-			min-height: 32px;
-			border-radius: 2px;
-			background-color: var(--l2-background) !important;
-			border: 1px solid var(--border) !important;
-			padding: 0 var(--padding-2) !important;
-
-			.ant-select-selection-placeholder {
-				color: var(--l3-foreground);
-				opacity: 0.4;
-				font-size: var(--paragraph-base-400-font-size);
-				letter-spacing: -0.07px;
-				line-height: 32px;
-			}
-
-			.ant-select-selection-item {
-				font-size: var(--paragraph-base-400-font-size);
-				letter-spacing: -0.07px;
-				color: var(--bg-base-white);
-			}
-		}
-
-		.ant-select-arrow {
-			color: var(--foreground);
-		}
-
-		&.ant-select-focused .ant-select-selector,
-		&:not(.ant-select-disabled):hover .ant-select-selector {
-			border-color: var(--primary);
-		}
-	}
-
-	&__helper {
-		font-size: var(--paragraph-small-400-font-size);
-		color: var(--l3-foreground);
-		margin: calc(var(--spacing-2) * -1) 0 var(--spacing-4) 0;
-		line-height: var(--paragraph-small-400-line-height);
-	}
-}
-
-.create-sa-modal__footer {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: flex-end;
-	padding: 0 var(--padding-4);
-	height: 56px;
-	min-height: 56px;
-	border-top: 1px solid var(--secondary);
-	gap: var(--spacing-4);
-	flex-shrink: 0;
-}
-
-.lightMode {
-	.create-sa-modal {
-		[data-slot='dialog-title'] {
-			color: var(--bg-base-black);
-		}
-	}
-
-	.create-sa-form {
-		&__select {
-			.ant-select-selector {
-				.ant-select-selection-item {
-					color: var(--bg-base-black);
-				}
-			}
-		}
-	}
-}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -1,186 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { X } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
-import { Form } from 'antd';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { useCreateServiceAccount } from 'api/generated/services/serviceaccount';
-import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import RolesSelect, { useRoles } from 'components/RolesSelect';
-
-import './CreateServiceAccountModal.styles.scss';
-
-interface CreateServiceAccountModalProps {
-	open: boolean;
-	onClose: () => void;
-	onSuccess: () => void;
-}
-
-interface FormValues {
-	name: string;
-	email: string;
-	roles: string[];
-}
-
-function CreateServiceAccountModal({
-	open,
-	onClose,
-	onSuccess,
-}: CreateServiceAccountModalProps): JSX.Element {
-	const [form] = Form.useForm<FormValues>();
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [submittable, setSubmittable] = useState(false);
-
-	const values = Form.useWatch([], form);
-
-	useEffect(() => {
-		form
-			.validateFields({ validateOnly: true })
-			.then(() => setSubmittable(true))
-			.catch(() => setSubmittable(false));
-	}, [values, form]);
-
-	const { mutateAsync: createServiceAccount } = useCreateServiceAccount();
-	const {
-		roles,
-		isLoading: rolesLoading,
-		isError: rolesError,
-		error: rolesErrorObj,
-		refetch: refetchRoles,
-	} = useRoles();
-
-	const handleClose = useCallback((): void => {
-		form.resetFields();
-		onClose();
-	}, [form, onClose]);
-
-	const handleSubmit = useCallback(async (): Promise<void> => {
-		try {
-			const values = await form.validateFields();
-			setIsSubmitting(true);
-			await createServiceAccount({
-				data: {
-					name: values.name.trim(),
-					email: values.email.trim(),
-					roles: values.roles,
-				},
-			});
-			toast.success('Service account created successfully', { richColors: true });
-			form.resetFields();
-			onSuccess();
-			onClose();
-		} catch (err: unknown) {
-			if (err && typeof err === 'object' && 'errorFields' in err) {
-				return;
-			}
-			const errMessage =
-				convertToApiError(
-					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'An error occurred';
-			toast.error(`Failed to create service account: ${errMessage}`, {
-				richColors: true,
-			});
-		} finally {
-			setIsSubmitting(false);
-		}
-	}, [form, createServiceAccount, onSuccess, onClose]);
-
-	return (
-		<DialogWrapper
-			title="New Service Account"
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					handleClose();
-				}
-			}}
-			showCloseButton
-			width="narrow"
-			className="create-sa-modal"
-			disableOutsideClick={false}
-		>
-			<div className="create-sa-modal__content">
-				<Form form={form} layout="vertical" className="create-sa-form">
-					<Form.Item
-						name="name"
-						label="Name"
-						rules={[{ required: true, message: 'Name is required' }]}
-						className="create-sa-form__item"
-					>
-						<Input placeholder="Enter a name" className="create-sa-form__input" />
-					</Form.Item>
-
-					<Form.Item
-						name="email"
-						label="Email Address"
-						rules={[
-							{ required: true, message: 'Email Address is required' },
-							{ type: 'email', message: 'Please enter a valid email address' },
-						]}
-						className="create-sa-form__item"
-					>
-						<Input
-							type="email"
-							placeholder="email@example.com"
-							className="create-sa-form__input"
-						/>
-					</Form.Item>
-					<p className="create-sa-form__helper">
-						Used only for notifications about this service account. It is not used for
-						authentication.
-					</p>
-
-					<Form.Item
-						name="roles"
-						label="Roles"
-						rules={[{ required: true, message: 'At least one role is required' }]}
-						className="create-sa-form__item"
-					>
-						<RolesSelect
-							mode="multiple"
-							roles={roles}
-							loading={rolesLoading}
-							isError={rolesError}
-							error={rolesErrorObj}
-							onRefetch={refetchRoles}
-							placeholder="Select roles"
-							className="create-sa-form__select"
-							getPopupContainer={(triggerNode): HTMLElement =>
-								(triggerNode?.closest('.create-sa-modal') as HTMLElement) ||
-								document.body
-							}
-						/>
-					</Form.Item>
-				</Form>
-			</div>
-
-			<DialogFooter className="create-sa-modal__footer">
-				<Button
-					type="button"
-					variant="solid"
-					color="secondary"
-					size="sm"
-					onClick={handleClose}
-				>
-					<X size={12} />
-					Cancel
-				</Button>
-
-				<Button
-					variant="solid"
-					color="primary"
-					size="sm"
-					onClick={handleSubmit}
-					disabled={isSubmitting || !submittable}
-				>
-					{isSubmitting ? 'Creating...' : 'Create Service Account'}
-				</Button>
-			</DialogFooter>
-		</DialogWrapper>
-	);
-}
-
-export default CreateServiceAccountModal;

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

@@ -1,247 +0,0 @@
-import type { ReactNode } from 'react';
-import { toast } from '@signozhq/sonner';
-import { useCreateServiceAccount } from 'api/generated/services/serviceaccount';
-import { useRoles } from 'components/RolesSelect';
-import { managedRoles } from 'mocks-server/__mockdata__/roles';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import CreateServiceAccountModal from '../CreateServiceAccountModal';
-
-jest.mock('api/generated/services/serviceaccount');
-
-jest.mock('components/RolesSelect', () => {
-	function MockRolesSelect({
-		value = [],
-		onChange,
-		roles = [],
-	}: {
-		value?: string[];
-		onChange?: (val: string[]) => void;
-		roles?: Array<{ id: string; name: string }>;
-		loading?: boolean;
-		isError?: boolean;
-		error?: unknown;
-		onRefetch?: () => void;
-		mode?: string;
-		placeholder?: string;
-		className?: string;
-		getPopupContainer?: (el: HTMLElement) => HTMLElement;
-	}): JSX.Element {
-		return (
-			<select
-				multiple
-				data-testid="roles-select"
-				value={value}
-				onChange={(e): void => {
-					const selected = Array.from(e.target.selectedOptions).map((o) => o.value);
-					onChange?.(selected);
-				}}
-			>
-				{roles.map((r: { id: string; name: string }) => (
-					<option key={r.id} value={r.name}>
-						{r.name}
-					</option>
-				))}
-			</select>
-		);
-	}
-	return {
-		__esModule: true,
-		default: MockRolesSelect,
-		useRoles: jest.fn(),
-	};
-});
-
-jest.mock('@signozhq/dialog', () => ({
-	DialogWrapper: ({
-		children,
-		open,
-		title,
-	}: {
-		children?: ReactNode;
-		open: boolean;
-		title?: string;
-	}): JSX.Element | null =>
-		open ? (
-			<div role="dialog" aria-label={title}>
-				{children}
-			</div>
-		) : null,
-	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
-		<div>{children}</div>
-	),
-}));
-
-jest.mock('@signozhq/sonner', () => ({
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-const mockCreateServiceAccount = jest.fn();
-const mockUseRoles = jest.mocked(useRoles);
-const mockToast = jest.mocked(toast);
-
-describe('CreateServiceAccountModal', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		jest.mocked(useCreateServiceAccount).mockReturnValue(({
-			mutateAsync: mockCreateServiceAccount,
-		} as unknown) as ReturnType<typeof useCreateServiceAccount>);
-		mockUseRoles.mockReturnValue({
-			roles: managedRoles,
-			isLoading: false,
-			isError: false,
-			error: undefined,
-			refetch: jest.fn(),
-		});
-	});
-
-	it('submit button is disabled when form is empty', () => {
-		render(
-			<CreateServiceAccountModal open onClose={jest.fn()} onSuccess={jest.fn()} />,
-		);
-
-		expect(
-			screen.getByRole('button', { name: /Create Service Account/i }),
-		).toBeDisabled();
-	});
-
-	it('submit button remains disabled when email is invalid', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<CreateServiceAccountModal open onClose={jest.fn()} onSuccess={jest.fn()} />,
-		);
-
-		await user.type(screen.getByPlaceholderText('Enter a name'), 'My Bot');
-		await user.type(
-			screen.getByPlaceholderText('email@example.com'),
-			'not-an-email',
-		);
-		await user.selectOptions(screen.getByTestId('roles-select'), [
-			'signoz-admin',
-		]);
-
-		await waitFor(() =>
-			expect(
-				screen.getByRole('button', { name: /Create Service Account/i }),
-			).toBeDisabled(),
-		);
-	});
-
-	it('successful submit calls mutation, shows toast.success, and calls onSuccess + onClose', async () => {
-		const onSuccess = jest.fn();
-		const onClose = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		mockCreateServiceAccount.mockResolvedValue({});
-
-		render(
-			<CreateServiceAccountModal open onClose={onClose} onSuccess={onSuccess} />,
-		);
-
-		await user.type(screen.getByPlaceholderText('Enter a name'), 'Deploy Bot');
-		await user.type(
-			screen.getByPlaceholderText('email@example.com'),
-			'deploy@acme.io',
-		);
-		await user.selectOptions(screen.getByTestId('roles-select'), [
-			'signoz-admin',
-		]);
-
-		const submitBtn = screen.getByRole('button', {
-			name: /Create Service Account/i,
-		});
-		await waitFor(() => expect(submitBtn).not.toBeDisabled());
-		await user.click(submitBtn);
-
-		await waitFor(() => {
-			expect(mockCreateServiceAccount).toHaveBeenCalledWith({
-				data: {
-					name: 'Deploy Bot',
-					email: 'deploy@acme.io',
-					roles: ['signoz-admin'],
-				},
-			});
-			expect(mockToast.success).toHaveBeenCalled();
-			expect(onSuccess).toHaveBeenCalled();
-			expect(onClose).toHaveBeenCalled();
-		});
-	});
-
-	it('shows toast.error and does not call onSuccess on API error', async () => {
-		const onSuccess = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		mockCreateServiceAccount.mockRejectedValue(new Error('Already exists'));
-
-		render(
-			<CreateServiceAccountModal open onClose={jest.fn()} onSuccess={onSuccess} />,
-		);
-
-		await user.type(screen.getByPlaceholderText('Enter a name'), 'Dupe Bot');
-		await user.type(
-			screen.getByPlaceholderText('email@example.com'),
-			'dupe@acme.io',
-		);
-		await user.selectOptions(screen.getByTestId('roles-select'), [
-			'signoz-admin',
-		]);
-
-		const submitBtn = screen.getByRole('button', {
-			name: /Create Service Account/i,
-		});
-		await waitFor(() => expect(submitBtn).not.toBeDisabled());
-		await user.click(submitBtn);
-
-		await waitFor(() => {
-			expect(mockToast.error).toHaveBeenCalledWith(
-				expect.stringMatching(/Failed to create service account/i),
-				expect.anything(),
-			);
-			expect(onSuccess).not.toHaveBeenCalled();
-		});
-	});
-
-	it('Cancel button calls onClose without submitting', async () => {
-		const onClose = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<CreateServiceAccountModal open onClose={onClose} onSuccess={jest.fn()} />,
-		);
-
-		await user.click(screen.getByRole('button', { name: /Cancel/i }));
-
-		expect(onClose).toHaveBeenCalledTimes(1);
-		expect(mockCreateServiceAccount).not.toHaveBeenCalled();
-	});
-
-	it('shows "Name is required" after clearing the name field', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<CreateServiceAccountModal open onClose={jest.fn()} onSuccess={jest.fn()} />,
-		);
-
-		const nameInput = screen.getByPlaceholderText('Enter a name');
-		await user.type(nameInput, 'Bot');
-		await user.clear(nameInput);
-
-		await screen.findByText('Name is required');
-	});
-
-	it('shows "Please enter a valid email address" for a malformed email', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<CreateServiceAccountModal open onClose={jest.fn()} onSuccess={jest.fn()} />,
-		);
-
-		await user.type(
-			screen.getByPlaceholderText('email@example.com'),
-			'not-an-email',
-		);
-
-		await screen.findByText('Please enter a valid email address');
-	});
-});

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -1,6 +1,31 @@
 .custom-time-picker {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	align-items: center;
+	gap: 4px;
+
+	.zoom-out-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		color: var(--foreground);
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		box-shadow: none;
+		padding: 10px;
+		height: 33px;
+
+		&:hover:not(:disabled) {
+			color: var(--bg-vanilla-100);
+			background: var(--primary);
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
 
 	.timeSelection-input {
 		&:hover {

frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx

@@ -16,6 +16,15 @@ jest.mock('react-router-dom', () => {
 	};
 });
 
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useDispatch: jest.fn(() => jest.fn()),
+	useSelector: jest.fn(() => ({
+		minTime: 0,
+		maxTime: Date.now(),
+	})),
+}));
+
 jest.mock('providers/Timezone', () => {
 	const actual = jest.requireActual('providers/Timezone');
 

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,9 +7,11 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
+import { Button } from '@signozhq/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { QueryParams } from 'constants/query';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
 	FixedDurationSuggestionOptions,
@@ -17,9 +19,11 @@ import {
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/constants';
 import dayjs from 'dayjs';
+import { useZoomOut } from 'hooks/useZoomOut';
 import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
+import { isZoomOutDisabled } from 'lib/zoomOutUtils';
 import { defaultTo, isFunction, noop } from 'lodash-es';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDown, ChevronUp, ZoomOut } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -66,6 +70,8 @@ interface CustomTimePickerProps {
 	showRecentlyUsed?: boolean;
 	minTime: number;
 	maxTime: number;
+	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
+	isModalTimeSelection?: boolean;
 }
 
 function CustomTimePicker({
@@ -88,6 +94,7 @@ function CustomTimePicker({
 	showRecentlyUsed = true,
 	minTime,
 	maxTime,
+	isModalTimeSelection = false,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
@@ -116,6 +123,14 @@ function CustomTimePicker({
 
 	const [isOpenedFromFooter, setIsOpenedFromFooter] = useState(false);
 
+	const durationMs = (maxTime - minTime) / 1e6;
+	const zoomOutDisabled = showLiveLogs || isZoomOutDisabled(durationMs);
+
+	const handleZoomOut = useZoomOut({
+		isDisabled: zoomOutDisabled,
+		urlParamsToDelete: [QueryParams.activeLogId],
+	});
+
 	// function to get selected time in Last 1m, Last 2h, Last 3d, Last 4w format
 	// 1m, 2h, 3d, 4w -> Last 1 minute, Last 2 hours, Last 3 days, Last 4 weeks
 	const getSelectedTimeRangeLabelInRelativeFormat = (
@@ -282,7 +297,11 @@ function CustomTimePicker({
 		resetErrorStatus();
 	};
 
-	const handleInputPressEnter = (): void => {
+	const handleInputPressEnter = (
+		event?: React.KeyboardEvent<HTMLInputElement>,
+	): void => {
+		event?.preventDefault();
+		event?.stopPropagation();
 		// check if the entered time is in the format of 1m, 2h, 3d, 4w
 		const isTimeDurationShortHandFormat = /^(\d+)([mhdw])$/.test(inputValue);
 
@@ -631,6 +650,23 @@ function CustomTimePicker({
 					/>
 				</Popover>
 			</Tooltip>
+			{!showLiveLogs && !isModalTimeSelection && (
+				<Tooltip
+					title={
+						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
+					}
+				>
+					<span>
+						<Button
+							className="zoom-out-btn"
+							onClick={handleZoomOut}
+							disabled={zoomOutDisabled}
+							data-testid="zoom-out-btn"
+							prefixIcon={<ZoomOut size={14} />}
+						/>
+					</span>
+				</Tooltip>
+			)}
 		</div>
 	);
 }

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -0,0 +1,169 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryParams } from 'constants/query';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import CustomTimePicker from '../CustomTimePicker';
+
+const MS_PER_MIN = 60 * 1000;
+const NOW_MS = 1705312800000;
+
+const mockDispatch = jest.fn();
+const mockSafeNavigate = jest.fn();
+const mockUrlQueryDelete = jest.fn();
+const mockUrlQuerySet = jest.fn();
+
+interface MockAppState {
+	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
+}
+
+jest.mock('react-redux', () => ({
+	useDispatch: (): jest.Mock => mockDispatch,
+	useSelector: (selector: (state: MockAppState) => unknown): unknown => {
+		const mockState: MockAppState = {
+			globalTime: {
+				minTime: (NOW_MS - 15 * MS_PER_MIN) * 1e6,
+				maxTime: NOW_MS * 1e6,
+			},
+		};
+		return selector(mockState);
+	},
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+interface MockUrlQuery {
+	delete: typeof mockUrlQueryDelete;
+	set: typeof mockUrlQuerySet;
+	get: () => null;
+	toString: () => string;
+}
+
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: (): MockUrlQuery => ({
+		delete: mockUrlQueryDelete,
+		set: mockUrlQuerySet,
+		get: (): null => null,
+		toString: (): string => 'relativeTime=45m',
+	}),
+}));
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): { timezone: { value: string; offset: string } } => ({
+		timezone: { value: 'UTC', offset: 'UTC' },
+	}),
+}));
+
+jest.mock('react-router-dom', () => ({
+	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
+}));
+
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+const now = Date.now();
+const defaultProps = {
+	onSelect: jest.fn(),
+	onError: jest.fn(),
+	selectedValue: '15m',
+	selectedTime: '15m',
+	onValidCustomDateChange: jest.fn(),
+	open: false,
+	setOpen: jest.fn(),
+	items: [
+		{ value: '15m', label: 'Last 15 minutes' },
+		{ value: '1h', label: 'Last 1 hour' },
+	],
+	minTime: (now - 15 * 60 * 1000) * 1e6,
+	maxTime: now * 1e6,
+};
+
+describe('CustomTimePicker - zoom out button', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	it('should render zoom out button when showLiveLogs is false', () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		expect(screen.getByTestId('zoom-out-btn')).toBeInTheDocument();
+	});
+
+	it('should not render zoom out button when showLiveLogs is true', () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={true} />);
+
+		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
+	});
+
+	it('should not render zoom out button when isModalTimeSelection is true', () => {
+		render(
+			<CustomTimePicker
+				{...defaultProps}
+				showLiveLogs={false}
+				isModalTimeSelection={true}
+			/>,
+		);
+
+		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
+	});
+
+	it('should call handleZoomOut when zoom out button is clicked', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockDispatch).toHaveBeenCalled();
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
+		);
+	});
+
+	it('should use real ladder logic: 15m range zooms to 45m preset and updates URL', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
+		);
+		expect(mockDispatch).toHaveBeenCalled();
+	});
+
+	it('should delete activeLogId when zoom out is clicked', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
+	});
+
+	it('should disable zoom button when time range is >= 1 month', () => {
+		const now = Date.now();
+		render(
+			<CustomTimePicker
+				{...defaultProps}
+				minTime={(now - 31 * MS_PER_DAY) * 1e6}
+				maxTime={now * 1e6}
+				showLiveLogs={false}
+			/>,
+		);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		expect(zoomOutBtn).toBeDisabled();
+	});
+});

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -243,60 +243,56 @@ function InviteMembersModal({
 						<div className="table-header-cell role-header">Roles</div>
 						<div className="table-header-cell action-header" />
 					</div>
-					<form noValidate onSubmit={(e): void => e.preventDefault()}>
-						<div className="invite-members-modal__container">
-							{rows.map(
-								(row): JSX.Element => (
-									<div key={row.id} className="team-member-row">
-										<div className="team-member-cell email-cell">
-											<Input
-												type="email"
-												placeholder="john@signoz.io"
-												value={row.email}
-												onChange={(e): void => updateEmail(row.id, e.target.value)}
-												className="team-member-email-input"
-												name={`invite-email-${row.id}`}
-												autoComplete="email"
-											/>
-											{emailValidity[row.id] === false && row.email.trim() !== '' && (
-												<span className="email-error-message">Invalid email address</span>
-											)}
-										</div>
-										<div className="team-member-cell role-cell">
-											<Select
-												value={row.role || undefined}
-												onChange={(role): void => updateRole(row.id, role as ROLES)}
-												className="team-member-role-select"
-												placeholder="Select roles"
-												suffixIcon={<ChevronDown size={14} />}
-												getPopupContainer={(triggerNode): HTMLElement =>
-													(triggerNode?.closest('.invite-members-modal') as HTMLElement) ||
-													document.body
-												}
-											>
-												<Select.Option value="VIEWER">Viewer</Select.Option>
-												<Select.Option value="EDITOR">Editor</Select.Option>
-												<Select.Option value="ADMIN">Admin</Select.Option>
-											</Select>
-										</div>
-										<div className="team-member-cell action-cell">
-											{rows.length > 1 && (
-												<Button
-													variant="ghost"
-													color="destructive"
-													className="remove-team-member-button"
-													onClick={(): void => removeRow(row.id)}
-													aria-label="Remove row"
-												>
-													<Trash2 size={12} />
-												</Button>
-											)}
-										</div>
+					<div className="invite-members-modal__container">
+						{rows.map(
+							(row): JSX.Element => (
+								<div key={row.id} className="team-member-row">
+									<div className="team-member-cell email-cell">
+										<Input
+											type="email"
+											placeholder="john@signoz.io"
+											value={row.email}
+											onChange={(e): void => updateEmail(row.id, e.target.value)}
+											className="team-member-email-input"
+										/>
+										{emailValidity[row.id] === false && row.email.trim() !== '' && (
+											<span className="email-error-message">Invalid email address</span>
+										)}
 									</div>
-								),
-							)}
-						</div>
-					</form>
+									<div className="team-member-cell role-cell">
+										<Select
+											value={row.role || undefined}
+											onChange={(role): void => updateRole(row.id, role as ROLES)}
+											className="team-member-role-select"
+											placeholder="Select roles"
+											suffixIcon={<ChevronDown size={14} />}
+											getPopupContainer={(triggerNode): HTMLElement =>
+												(triggerNode?.closest('.invite-members-modal') as HTMLElement) ||
+												document.body
+											}
+										>
+											<Select.Option value="VIEWER">Viewer</Select.Option>
+											<Select.Option value="EDITOR">Editor</Select.Option>
+											<Select.Option value="ADMIN">Admin</Select.Option>
+										</Select>
+									</div>
+									<div className="team-member-cell action-cell">
+										{rows.length > 1 && (
+											<Button
+												variant="ghost"
+												color="destructive"
+												className="remove-team-member-button"
+												onClick={(): void => removeRow(row.id)}
+												aria-label="Remove row"
+											>
+												<Trash2 size={12} />
+											</Button>
+										)}
+									</div>
+								</div>
+							),
+						)}
+					</div>
 				</div>
 
 				{(hasInvalidEmails || hasInvalidRoles) && (

frontend/src/components/MembersTable/MembersTable.styles.scss

@@ -162,7 +162,7 @@
 		font-weight: var(--paragraph-base-400-font-weight);
 		color: var(--foreground);
 		margin: 0;
-		line-height: var(--paragraph-base-400-line-height);
+		line-height: var(--paragraph-base-400-font-height);
 
 		strong {
 			font-weight: var(--font-weight-medium);

frontend/src/components/RolesSelect/RolesSelect.styles.scss

@@ -1,25 +0,0 @@
-.roles-select-error {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-3);
-	padding: var(--padding-1) var(--padding-2);
-	color: var(--destructive);
-	font-size: var(--font-size-xs);
-
-	&__msg {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-3);
-	}
-
-	&__retry-btn {
-		display: flex;
-		align-items: center;
-		background: none;
-		border: none;
-		cursor: pointer;
-		padding: 2px;
-		color: var(--destructive);
-	}
-}

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -1,171 +0,0 @@
-import { CircleAlert, RefreshCw } from '@signozhq/icons';
-import { Checkbox, Select } from 'antd';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { useListRoles } from 'api/generated/services/role';
-import type { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
-import APIError from 'types/api/error';
-
-import './RolesSelect.styles.scss';
-
-export interface RoleOption {
-	label: string;
-	value: string;
-}
-
-export function useRoles(): {
-	roles: RoletypesRoleDTO[];
-	isLoading: boolean;
-	isError: boolean;
-	error: APIError | undefined;
-	refetch: () => void;
-} {
-	const { data, isLoading, isError, error, refetch } = useListRoles();
-	return {
-		roles: data?.data ?? [],
-		isLoading,
-		isError,
-		error: convertToApiError(error),
-		refetch,
-	};
-}
-
-export function getRoleOptions(roles: RoletypesRoleDTO[]): RoleOption[] {
-	return roles.map((role) => ({
-		label: role.name ?? '',
-		value: role.name ?? '',
-	}));
-}
-
-function ErrorContent({
-	error,
-	onRefetch,
-}: {
-	error?: APIError;
-	onRefetch?: () => void;
-}): JSX.Element {
-	const errorMessage = error?.message || 'Failed to load roles';
-
-	return (
-		<div className="roles-select-error">
-			<span className="roles-select-error__msg">
-				<CircleAlert size={12} />
-				{errorMessage}
-			</span>
-			{onRefetch && (
-				<button
-					type="button"
-					onClick={(e): void => {
-						e.stopPropagation();
-						onRefetch();
-					}}
-					className="roles-select-error__retry-btn"
-					title="Retry"
-				>
-					<RefreshCw size={12} />
-				</button>
-			)}
-		</div>
-	);
-}
-
-interface BaseProps {
-	id?: string;
-	placeholder?: string;
-	className?: string;
-	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
-	roles?: RoletypesRoleDTO[];
-	loading?: boolean;
-	isError?: boolean;
-	error?: APIError;
-	onRefetch?: () => void;
-}
-
-interface SingleProps extends BaseProps {
-	mode?: 'single';
-	value?: string;
-	onChange?: (role: string) => void;
-}
-
-interface MultipleProps extends BaseProps {
-	mode: 'multiple';
-	value?: string[];
-	onChange?: (roles: string[]) => void;
-}
-
-export type RolesSelectProps = SingleProps | MultipleProps;
-
-function RolesSelect(props: RolesSelectProps): JSX.Element {
-	const externalRoles = props.roles;
-
-	const {
-		data,
-		isLoading: internalLoading,
-		isError: internalError,
-		error: internalErrorObj,
-		refetch: internalRefetch,
-	} = useListRoles({
-		query: { enabled: externalRoles === undefined },
-	});
-
-	const roles = externalRoles ?? data?.data ?? [];
-	const options = getRoleOptions(roles);
-
-	const {
-		mode,
-		id,
-		placeholder = 'Select role',
-		className,
-		getPopupContainer,
-		loading = internalLoading,
-		isError = internalError,
-		error = convertToApiError(internalErrorObj),
-		onRefetch = externalRoles === undefined ? internalRefetch : undefined,
-	} = props;
-
-	const notFoundContent = isError ? (
-		<ErrorContent error={error} onRefetch={onRefetch} />
-	) : undefined;
-
-	if (mode === 'multiple') {
-		const { value = [], onChange } = props as MultipleProps;
-		return (
-			<Select
-				id={id}
-				mode="multiple"
-				value={value}
-				onChange={onChange}
-				placeholder={placeholder}
-				className={className}
-				loading={loading}
-				notFoundContent={notFoundContent}
-				options={options}
-				optionRender={(option): JSX.Element => (
-					<Checkbox
-						checked={value.includes(option.value as string)}
-						style={{ pointerEvents: 'none' }}
-					>
-						{option.label}
-					</Checkbox>
-				)}
-				getPopupContainer={getPopupContainer}
-			/>
-		);
-	}
-
-	const { value, onChange } = props as SingleProps;
-	return (
-		<Select
-			id={id}
-			value={value}
-			onChange={onChange}
-			placeholder={placeholder}
-			className={className}
-			loading={loading}
-			notFoundContent={notFoundContent}
-			options={options}
-			getPopupContainer={getPopupContainer}
-		/>
-	);
-}
-
-export default RolesSelect;

frontend/src/components/RolesSelect/index.ts

@@ -1,2 +0,0 @@
-export type { RoleOption, RolesSelectProps } from './RolesSelect';
-export { default, getRoleOptions, useRoles } from './RolesSelect';

frontend/src/components/ServiceAccountDrawer/AddKeyModal.styles.scss

@@ -1,179 +0,0 @@
-.add-key-modal {
-	[data-slot='dialog-description'] {
-		padding: 0;
-	}
-
-	&__form {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-		padding: var(--padding-4);
-	}
-
-	&__field {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-4);
-	}
-
-	&__label {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		color: var(--foreground);
-		line-height: var(--line-height-20);
-		letter-spacing: -0.07px;
-	}
-
-	&__input {
-		height: 32px;
-		background: var(--l2-background);
-		border-color: var(--border);
-		color: var(--l1-foreground);
-		box-shadow: none;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-	}
-
-	&__expiry-toggle {
-		width: 60%;
-		display: flex;
-		border: 1px solid var(--border);
-		border-radius: 2px;
-		overflow: hidden;
-		padding: 0;
-		gap: 0;
-
-		[data-slot='toggle-group'] {
-			width: 100%;
-			display: flex;
-		}
-
-		&-btn {
-			flex: 1;
-			height: 32px;
-			border-radius: 0;
-			font-size: var(--label-small-400-font-size);
-			font-weight: var(--label-small-400-font-weight);
-			line-height: var(--label-small-400-line-height);
-			justify-content: center;
-			background: transparent;
-			border: none;
-			border-right: 1px solid var(--border);
-			color: var(--foreground);
-
-			&:last-child {
-				border-right: none;
-			}
-
-			&[data-state='on'] {
-				background: var(--l2-background);
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	&__datepicker {
-		width: 100%;
-		height: 32px;
-
-		.ant-picker {
-			background: var(--l2-background);
-			border-color: var(--border);
-			border-radius: 2px;
-			width: 100%;
-			height: 32px;
-
-			input {
-				color: var(--l1-foreground);
-				font-size: var(--font-size-sm);
-			}
-
-			.ant-picker-suffix {
-				color: var(--foreground);
-			}
-		}
-
-		.add-key-modal-datepicker-popup {
-			border-radius: 4px;
-			border: 1px solid var(--secondary);
-			background: var(--popover);
-			box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-		}
-	}
-
-	&__key-display {
-		display: flex;
-		align-items: center;
-		height: 32px;
-		background: var(--l2-background);
-		border: 1px solid var(--border);
-		border-radius: 2px;
-		overflow: hidden;
-	}
-
-	&__key-text {
-		flex: 1;
-		min-width: 0;
-		padding: 0 var(--padding-2);
-		font-size: var(--font-size-sm);
-		color: var(--l1-foreground);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		font-family: monospace;
-	}
-
-	&__copy-btn {
-		flex-shrink: 0;
-		height: 32px;
-		border-radius: 0 2px 2px 0;
-		border-top: none;
-		border-right: none;
-		border-bottom: none;
-		border-left: 1px solid var(--border);
-		min-width: 40px;
-	}
-
-	&__expiry-meta {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-2);
-	}
-
-	&__expiry-label {
-		font-size: var(--font-size-xs);
-		font-weight: var(--font-weight-medium);
-		color: var(--foreground);
-		letter-spacing: 0.48px;
-		text-transform: uppercase;
-	}
-
-	&__footer {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		padding: var(--padding-4);
-		border-top: 1px solid var(--secondary);
-	}
-
-	&__footer-right {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-4);
-	}
-
-	&__learn-more {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--spacing-1);
-		color: var(--primary);
-		font-size: var(--font-size-sm);
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-}

frontend/src/components/ServiceAccountDrawer/AddKeyModal.tsx

@@ -1,267 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Badge } from '@signozhq/badge';
-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
-import { DialogWrapper } from '@signozhq/dialog';
-import { Check, Copy } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { DatePicker } from 'antd';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { useCreateServiceAccountKey } from 'api/generated/services/serviceaccount';
-import type {
-	RenderErrorResponseDTO,
-	ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import type { Dayjs } from 'dayjs';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { disabledDate } from './utils';
-
-import './AddKeyModal.styles.scss';
-
-interface AddKeyModalProps {
-	open: boolean;
-	accountId: string;
-	onClose: () => void;
-	onSuccess: () => void;
-}
-
-type Phase = 'form' | 'created';
-type ExpiryMode = 'none' | 'date';
-
-function AddKeyModal({
-	open,
-	accountId,
-	onClose,
-	onSuccess,
-}: AddKeyModalProps): JSX.Element {
-	const [phase, setPhase] = useState<Phase>('form');
-	const [keyName, setKeyName] = useState('');
-	const [expiryMode, setExpiryMode] = useState<ExpiryMode>('none');
-	const [expiryDate, setExpiryDate] = useState<Dayjs | null>(null);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [
-		createdKey,
-		setCreatedKey,
-	] = useState<ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO | null>(null);
-	const [hasCopied, setHasCopied] = useState(false);
-
-	useEffect(() => {
-		if (open) {
-			setPhase('form');
-			setKeyName('');
-			setExpiryMode('none');
-			setExpiryDate(null);
-			setIsSubmitting(false);
-			setCreatedKey(null);
-			setHasCopied(false);
-		}
-	}, [open]);
-
-	const { mutateAsync: createKey } = useCreateServiceAccountKey();
-
-	const handleCreate = useCallback(async (): Promise<void> => {
-		if (!keyName.trim()) {
-			return;
-		}
-		setIsSubmitting(true);
-		try {
-			const expiresAt =
-				expiryMode === 'date' && expiryDate ? expiryDate.endOf('day').unix() : 0;
-			const response = await createKey({
-				pathParams: { id: accountId },
-				data: { name: keyName.trim(), expiresAt },
-			});
-			const keyData = response?.data;
-			if (keyData) {
-				setCreatedKey(keyData);
-				setPhase('created');
-			}
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to create key';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsSubmitting(false);
-		}
-	}, [keyName, expiryMode, expiryDate, accountId, createKey]);
-
-	const handleCopy = useCallback(async (): Promise<void> => {
-		if (!createdKey?.key) {
-			return;
-		}
-		try {
-			await navigator.clipboard.writeText(createdKey.key);
-			setHasCopied(true);
-			setTimeout(() => setHasCopied(false), 2000);
-			toast.success('Key copied to clipboard', { richColors: true });
-		} catch {
-			toast.error('Failed to copy key', { richColors: true });
-		}
-	}, [createdKey]);
-
-	const handleClose = useCallback((): void => {
-		if (phase === 'created') {
-			onSuccess();
-		}
-		onClose();
-	}, [phase, onSuccess, onClose]);
-
-	const expiryLabel = (): string => {
-		if (expiryMode === 'none' || !expiryDate) {
-			return 'Never';
-		}
-		try {
-			return expiryDate.format('MMM D, YYYY');
-		} catch {
-			return 'Never';
-		}
-	};
-
-	const title = phase === 'form' ? 'Add a New Key' : 'Key Created Successfully';
-
-	return (
-		<DialogWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					handleClose();
-				}
-			}}
-			title={title}
-			width="base"
-			className="add-key-modal"
-			showCloseButton
-			disableOutsideClick={false}
-		>
-			{phase === 'form' && (
-				<>
-					<div className="add-key-modal__form">
-						<div className="add-key-modal__field">
-							<label className="add-key-modal__label" htmlFor="key-name">
-								Name <span style={{ color: 'var(--destructive)' }}>*</span>
-							</label>
-							<Input
-								id="key-name"
-								value={keyName}
-								onChange={(e): void => setKeyName(e.target.value)}
-								placeholder="Enter key name e.g.: Service Owner"
-								className="add-key-modal__input"
-							/>
-						</div>
-
-						<div className="add-key-modal__field">
-							<span className="add-key-modal__label">Expiration</span>
-							<ToggleGroup
-								type="single"
-								value={expiryMode}
-								onValueChange={(val): void => {
-									if (val) {
-										setExpiryMode(val as ExpiryMode);
-										if (val === 'none') {
-											setExpiryDate(null);
-										}
-									}
-								}}
-								className="add-key-modal__expiry-toggle"
-							>
-								<ToggleGroupItem
-									value="none"
-									className="add-key-modal__expiry-toggle-btn"
-								>
-									No Expiration
-								</ToggleGroupItem>
-								<ToggleGroupItem
-									value="date"
-									className="add-key-modal__expiry-toggle-btn"
-								>
-									Set Expiration Date
-								</ToggleGroupItem>
-							</ToggleGroup>
-						</div>
-
-						{expiryMode === 'date' && (
-							<div className="add-key-modal__field">
-								<label className="add-key-modal__label" htmlFor="expiry-date">
-									Expiration Date
-								</label>
-								<div className="add-key-modal__datepicker">
-									<DatePicker
-										id="expiry-date"
-										value={expiryDate}
-										onChange={(date): void => setExpiryDate(date)}
-										popupClassName="add-key-modal-datepicker-popup"
-										getPopupContainer={popupContainer}
-										disabledDate={disabledDate}
-									/>
-								</div>
-							</div>
-						)}
-					</div>
-
-					<div className="add-key-modal__footer">
-						<div className="add-key-modal__footer-right">
-							<Button
-								variant="solid"
-								color="secondary"
-								size="sm"
-								onClick={handleClose}
-							>
-								Cancel
-							</Button>
-							<Button
-								variant="solid"
-								color="primary"
-								size="sm"
-								disabled={!keyName.trim() || isSubmitting}
-								onClick={handleCreate}
-							>
-								{isSubmitting ? 'Creating...' : 'Create Key'}
-							</Button>
-						</div>
-					</div>
-				</>
-			)}
-
-			{phase === 'created' && createdKey && (
-				<>
-					<div className="add-key-modal__form">
-						<div className="add-key-modal__field">
-							<span className="add-key-modal__label">Key</span>
-							<div className="add-key-modal__key-display">
-								<span className="add-key-modal__key-text">{createdKey.key}</span>
-								<Button
-									variant="outlined"
-									color="secondary"
-									size="sm"
-									onClick={handleCopy}
-									className="add-key-modal__copy-btn"
-								>
-									{hasCopied ? <Check size={12} /> : <Copy size={12} />}
-								</Button>
-							</div>
-						</div>
-
-						<div className="add-key-modal__expiry-meta">
-							<span className="add-key-modal__expiry-label">Expiration</span>
-							<Badge color="vanilla">{expiryLabel()}</Badge>
-						</div>
-
-						<Callout
-							type="info"
-							showIcon
-							message="Store the key securely. This is the only time it will be displayed."
-						/>
-					</div>
-				</>
-			)}
-		</DialogWrapper>
-	);
-}
-
-export default AddKeyModal;

frontend/src/components/ServiceAccountDrawer/EditKeyModal.styles.scss

@@ -1,188 +0,0 @@
-.edit-key-modal {
-	[data-slot='dialog-description'] {
-		padding: 0;
-	}
-
-	&__form {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-		padding: var(--padding-4);
-	}
-
-	&__field {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-4);
-	}
-
-	&__label {
-		font-size: 13px;
-		font-weight: var(--font-weight-normal);
-		color: var(--foreground);
-		line-height: var(--line-height-20);
-		letter-spacing: -0.07px;
-	}
-
-	&__input {
-		height: 32px;
-		background: var(--l2-background);
-		border-color: var(--border);
-		color: var(--l1-foreground);
-		box-shadow: none;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-	}
-
-	&__key-display {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 32px;
-		padding: 0 var(--padding-2);
-		border-radius: 2px;
-		background: var(--l2-background);
-		border: 1px solid var(--border);
-		cursor: not-allowed;
-		opacity: 0.8;
-	}
-
-	&__key-text {
-		font-size: 13px;
-		font-family: monospace;
-		color: var(--foreground);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		flex: 1;
-		letter-spacing: 2px;
-	}
-
-	&__lock-icon {
-		color: var(--foreground);
-		flex-shrink: 0;
-		margin-left: 6px;
-		opacity: 0.6;
-	}
-
-	&__expiry-toggle {
-		width: 60%;
-		display: flex;
-		border: 1px solid var(--border);
-		border-radius: 2px;
-		overflow: hidden;
-		padding: 0;
-		gap: 0;
-
-		[data-slot='toggle-group'] {
-			width: 100%;
-			display: flex;
-		}
-
-		&-btn {
-			flex: 1;
-			height: 32px;
-			border-radius: 0;
-			font-size: var(--label-small-400-font-size);
-			font-weight: var(--label-small-400-font-weight);
-			line-height: var(--label-small-400-line-height);
-			justify-content: center;
-			background: transparent;
-			border: none;
-			border-right: 1px solid var(--border);
-			color: var(--foreground);
-			white-space: nowrap;
-
-			&:last-child {
-				border-right: none;
-			}
-
-			&[data-state='on'] {
-				background: var(--l2-background);
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	&__datepicker {
-		width: 100%;
-		height: 32px;
-
-		.ant-picker {
-			background: var(--l2-background);
-			border-color: var(--border);
-			border-radius: 2px;
-			width: 100%;
-			height: 32px;
-
-			input {
-				color: var(--l1-foreground);
-				font-size: 13px;
-			}
-
-			.ant-picker-suffix {
-				color: var(--foreground);
-			}
-		}
-
-		.edit-key-modal-datepicker-popup {
-			border-radius: 4px;
-			border: 1px solid var(--secondary);
-			background: var(--popover);
-			box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-		}
-	}
-
-	&__meta {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-2);
-	}
-
-	&__meta-label {
-		font-size: var(--font-size-xs);
-		font-weight: var(--font-weight-medium);
-		color: var(--foreground);
-		letter-spacing: 0.48px;
-		text-transform: uppercase;
-	}
-
-	&__footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: var(--padding-4);
-		border-top: 1px solid var(--secondary);
-	}
-
-	&__footer-right {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-4);
-	}
-
-	&__footer-danger {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--spacing-2);
-		padding: 0;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		color: var(--destructive);
-		font-size: var(--label-small-400-font-size);
-		font-weight: var(--label-small-400-font-weight);
-		transition: opacity 0.15s ease;
-
-		&:hover {
-			opacity: 0.8;
-		}
-
-		&:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-	}
-}

frontend/src/components/ServiceAccountDrawer/EditKeyModal.tsx

@@ -1,301 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Badge } from '@signozhq/badge';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { LockKeyhole, Trash2, X } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { DatePicker } from 'antd';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import {
-	useRevokeServiceAccountKey,
-	useUpdateServiceAccountKey,
-} from 'api/generated/services/serviceaccount';
-import type {
-	RenderErrorResponseDTO,
-	ServiceaccounttypesFactorAPIKeyDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import type { Dayjs } from 'dayjs';
-import dayjs from 'dayjs';
-import { useTimezone } from 'providers/Timezone';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { disabledDate, formatLastObservedAt } from './utils';
-
-import './EditKeyModal.styles.scss';
-
-interface EditKeyModalProps {
-	open: boolean;
-	accountId: string;
-	keyItem: ServiceaccounttypesFactorAPIKeyDTO | null;
-	onClose: () => void;
-	onSuccess: () => void;
-}
-
-type ExpiryMode = 'none' | 'date';
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function EditKeyModal({
-	open,
-	accountId,
-	keyItem,
-	onClose,
-	onSuccess,
-}: EditKeyModalProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const [localName, setLocalName] = useState('');
-	const [expiryMode, setExpiryMode] = useState<ExpiryMode>('none');
-	const [localDate, setLocalDate] = useState<Dayjs | null>(null);
-	const [isRevokeConfirmOpen, setIsRevokeConfirmOpen] = useState(false);
-	const [isSaving, setIsSaving] = useState(false);
-	const [isRevoking, setIsRevoking] = useState(false);
-
-	useEffect(() => {
-		if (keyItem) {
-			setLocalName(keyItem.name ?? '');
-			if (keyItem.expiresAt === 0) {
-				setExpiryMode('none');
-				setLocalDate(null);
-			} else {
-				setExpiryMode('date');
-				setLocalDate(dayjs.unix(keyItem.expiresAt));
-			}
-		}
-	}, [keyItem]);
-
-	const originalExpiresAt = keyItem?.expiresAt ?? 0;
-	const currentExpiresAt =
-		expiryMode === 'none' || !localDate ? 0 : localDate.endOf('day').unix();
-	const isDirty =
-		keyItem !== null &&
-		(localName !== (keyItem.name ?? '') ||
-			currentExpiresAt !== originalExpiresAt);
-
-	const { mutateAsync: updateKey } = useUpdateServiceAccountKey();
-	const { mutateAsync: revokeKey } = useRevokeServiceAccountKey();
-
-	const handleSave = useCallback(async (): Promise<void> => {
-		if (!keyItem || !isDirty) {
-			return;
-		}
-		setIsSaving(true);
-		try {
-			await updateKey({
-				pathParams: { id: accountId, fid: keyItem.id },
-				data: { name: localName, expiresAt: currentExpiresAt },
-			});
-			toast.success('Key updated successfully', { richColors: true });
-			onSuccess();
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to update key';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsSaving(false);
-		}
-	}, [
-		keyItem,
-		isDirty,
-		localName,
-		currentExpiresAt,
-		accountId,
-		updateKey,
-		onSuccess,
-	]);
-
-	const handleRevoke = useCallback(async (): Promise<void> => {
-		if (!keyItem) {
-			return;
-		}
-		setIsRevoking(true);
-		try {
-			await revokeKey({
-				pathParams: { id: accountId, fid: keyItem.id },
-			});
-			toast.success('Key revoked successfully', { richColors: true });
-			setIsRevokeConfirmOpen(false);
-			onSuccess();
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to revoke key';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsRevoking(false);
-		}
-	}, [keyItem, accountId, revokeKey, onSuccess]);
-
-	return (
-		<DialogWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					if (isRevokeConfirmOpen) {
-						setIsRevokeConfirmOpen(false);
-					} else {
-						onClose();
-					}
-				}
-			}}
-			title={
-				isRevokeConfirmOpen
-					? `Revoke ${keyItem?.name ?? 'key'}?`
-					: 'Edit Key Details'
-			}
-			width={isRevokeConfirmOpen ? 'narrow' : 'base'}
-			className={
-				isRevokeConfirmOpen ? 'alert-dialog delete-dialog' : 'edit-key-modal'
-			}
-			showCloseButton={!isRevokeConfirmOpen}
-			disableOutsideClick={false}
-		>
-			{isRevokeConfirmOpen ? (
-				<>
-					<p className="delete-dialog__body">
-						Revoking this key will permanently invalidate it. Any systems using this
-						key will lose access immediately.
-					</p>
-					<DialogFooter className="delete-dialog__footer">
-						<Button
-							variant="solid"
-							color="secondary"
-							size="sm"
-							onClick={(): void => setIsRevokeConfirmOpen(false)}
-						>
-							<X size={12} />
-							Cancel
-						</Button>
-						<Button
-							variant="solid"
-							color="destructive"
-							size="sm"
-							disabled={isRevoking}
-							onClick={handleRevoke}
-						>
-							<Trash2 size={12} />
-							{isRevoking ? 'Revoking...' : 'Revoke Key'}
-						</Button>
-					</DialogFooter>
-				</>
-			) : (
-				<>
-					<div className="edit-key-modal__form">
-						<div className="edit-key-modal__field">
-							<label className="edit-key-modal__label" htmlFor="edit-key-name">
-								Name
-							</label>
-							<Input
-								id="edit-key-name"
-								value={localName}
-								onChange={(e): void => setLocalName(e.target.value)}
-								className="edit-key-modal__input"
-								placeholder="Enter key name"
-							/>
-						</div>
-
-						<div className="edit-key-modal__field">
-							<label className="edit-key-modal__label" htmlFor="edit-key-display">
-								Key
-							</label>
-							<div id="edit-key-display" className="edit-key-modal__key-display">
-								<span className="edit-key-modal__key-text">********************</span>
-								<LockKeyhole size={12} className="edit-key-modal__lock-icon" />
-							</div>
-						</div>
-
-						<div className="edit-key-modal__field">
-							<span className="edit-key-modal__label">Expiration</span>
-							<ToggleGroup
-								type="single"
-								value={expiryMode}
-								onValueChange={(val): void => {
-									if (val) {
-										setExpiryMode(val as ExpiryMode);
-										if (val === 'none') {
-											setLocalDate(null);
-										}
-									}
-								}}
-								className="edit-key-modal__expiry-toggle"
-							>
-								<ToggleGroupItem
-									value="none"
-									className="edit-key-modal__expiry-toggle-btn"
-								>
-									No Expiration
-								</ToggleGroupItem>
-								<ToggleGroupItem
-									value="date"
-									className="edit-key-modal__expiry-toggle-btn"
-								>
-									Set Expiration Date
-								</ToggleGroupItem>
-							</ToggleGroup>
-						</div>
-
-						{expiryMode === 'date' && (
-							<div className="edit-key-modal__field">
-								<label className="edit-key-modal__label" htmlFor="edit-key-datepicker">
-									Expiration Date
-								</label>
-								<div className="edit-key-modal__datepicker">
-									<DatePicker
-										value={localDate}
-										id="edit-key-datepicker"
-										onChange={(date): void => setLocalDate(date)}
-										popupClassName="edit-key-modal-datepicker-popup"
-										getPopupContainer={popupContainer}
-										disabledDate={disabledDate}
-									/>
-								</div>
-							</div>
-						)}
-
-						<div className="edit-key-modal__meta">
-							<span className="edit-key-modal__meta-label">Last Observed At</span>
-							<Badge color="vanilla">
-								{formatLastObservedAt(
-									keyItem?.lastObservedAt ?? null,
-									formatTimezoneAdjustedTimestamp,
-								)}
-							</Badge>
-						</div>
-					</div>
-
-					<div className="edit-key-modal__footer">
-						<Button
-							type="button"
-							className="edit-key-modal__footer-danger"
-							onClick={(): void => setIsRevokeConfirmOpen(true)}
-						>
-							<Trash2 size={12} />
-							Revoke Key
-						</Button>
-						<div className="edit-key-modal__footer-right">
-							<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
-								<X size={12} />
-								Cancel
-							</Button>
-							<Button
-								variant="solid"
-								color="primary"
-								size="sm"
-								disabled={!isDirty || isSaving}
-								onClick={handleSave}
-							>
-								{isSaving ? 'Saving...' : 'Save Changes'}
-							</Button>
-						</div>
-					</div>
-				</>
-			)}
-		</DialogWrapper>
-	);
-}
-
-export default EditKeyModal;

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,291 +0,0 @@
-import { useCallback, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { Trash2, X } from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
-import { Skeleton, Table, Tooltip } from 'antd';
-import type { ColumnsType } from 'antd/es/table/interface';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { useRevokeServiceAccountKey } from 'api/generated/services/serviceaccount';
-import type {
-	RenderErrorResponseDTO,
-	ServiceaccounttypesFactorAPIKeyDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import dayjs from 'dayjs';
-import { useTimezone } from 'providers/Timezone';
-
-import EditKeyModal from './EditKeyModal';
-import { formatLastObservedAt } from './utils';
-
-interface KeysTabProps {
-	accountId: string;
-	keys: ServiceaccounttypesFactorAPIKeyDTO[];
-	isLoading: boolean;
-	isDisabled?: boolean;
-	currentPage: number;
-	pageSize: number;
-	onRefetch: () => void;
-	onAddKeyClick: () => void;
-}
-
-function formatExpiry(expiresAt: number): JSX.Element {
-	if (expiresAt === 0) {
-		return <span className="keys-tab__expiry--never">Never</span>;
-	}
-	const expiryDate = dayjs.unix(expiresAt);
-	if (expiryDate.isBefore(dayjs())) {
-		return <span className="keys-tab__expiry--expired">Expired</span>;
-	}
-	return <span>{expiryDate.format('MMM D, YYYY')}</span>;
-}
-
-function KeysTab({
-	accountId,
-	keys,
-	isLoading,
-	isDisabled = false,
-	currentPage,
-	pageSize,
-	onRefetch,
-	onAddKeyClick,
-}: KeysTabProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const [
-		editKey,
-		setEditKey,
-	] = useState<ServiceaccounttypesFactorAPIKeyDTO | null>(null);
-	const [
-		revokeTarget,
-		setRevokeTarget,
-	] = useState<ServiceaccounttypesFactorAPIKeyDTO | null>(null);
-	const [isRevoking, setIsRevoking] = useState(false);
-
-	const { mutateAsync: revokeKey } = useRevokeServiceAccountKey();
-
-	const handleRevoke = useCallback(async (): Promise<void> => {
-		if (!revokeTarget) {
-			return;
-		}
-		setIsRevoking(true);
-		try {
-			await revokeKey({
-				pathParams: { id: accountId, fid: revokeTarget.id },
-			});
-			toast.success('Key revoked successfully', { richColors: true });
-			setRevokeTarget(null);
-			onRefetch();
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to revoke key';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsRevoking(false);
-		}
-	}, [revokeTarget, revokeKey, accountId, onRefetch]);
-
-	const handleKeySuccess = useCallback((): void => {
-		setEditKey(null);
-		onRefetch();
-	}, [onRefetch]);
-
-	const handleformatLastObservedAt = useCallback(
-		(lastObservedAt: Date | null | undefined): string =>
-			formatLastObservedAt(lastObservedAt, formatTimezoneAdjustedTimestamp),
-		[formatTimezoneAdjustedTimestamp],
-	);
-
-	const columns: ColumnsType<ServiceaccounttypesFactorAPIKeyDTO> = [
-		{
-			title: 'Name',
-			dataIndex: 'name',
-			key: 'name',
-			className: 'keys-tab__name-column',
-			sorter: (a, b): number => (a.name ?? '').localeCompare(b.name ?? ''),
-			render: (_, record): JSX.Element => (
-				<span className="keys-tab__name-text">{record.name ?? '—'}</span>
-			),
-		},
-		{
-			title: 'Expiry',
-			dataIndex: 'expiresAt',
-			key: 'expiry',
-			width: 160,
-			align: 'right' as const,
-			sorter: (a, b): number => {
-				const aVal = a.expiresAt === 0 ? Infinity : a.expiresAt;
-				const bVal = b.expiresAt === 0 ? Infinity : b.expiresAt;
-				return aVal - bVal;
-			},
-			render: (expiresAt: number): JSX.Element => formatExpiry(expiresAt),
-		},
-		{
-			title: 'Last Observed At',
-			dataIndex: 'lastObservedAt',
-			key: 'lastObservedAt',
-			width: 220,
-			align: 'right' as const,
-			sorter: (a, b): number => {
-				const aVal = a.lastObservedAt
-					? new Date(a.lastObservedAt).getTime()
-					: -Infinity;
-				const bVal = b.lastObservedAt
-					? new Date(b.lastObservedAt).getTime()
-					: -Infinity;
-				return aVal - bVal;
-			},
-			render: (lastObservedAt: Date | null | undefined): string =>
-				handleformatLastObservedAt(lastObservedAt),
-		},
-		{
-			title: '',
-			key: 'action',
-			width: 48,
-			align: 'right' as const,
-			render: (_, record): JSX.Element => (
-				<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
-					<Button
-						variant="ghost"
-						size="xs"
-						color="destructive"
-						disabled={isDisabled}
-						onClick={(e): void => {
-							e.stopPropagation();
-							setRevokeTarget(record);
-						}}
-						className="keys-tab__revoke-btn"
-					>
-						<X size={12} />
-					</Button>
-				</Tooltip>
-			),
-		},
-	];
-
-	if (isLoading) {
-		return (
-			<div className="keys-tab__loading">
-				<Skeleton active paragraph={{ rows: 4 }} />
-			</div>
-		);
-	}
-
-	if (keys.length === 0) {
-		return (
-			<div className="keys-tab__empty">
-				<span className="keys-tab__empty-emoji" role="img" aria-label="searching">
-					🧐
-				</span>
-				<p className="keys-tab__empty-text">No keys. Start by creating one.</p>
-				<Button
-					type="button"
-					className="keys-tab__learn-more"
-					onClick={onAddKeyClick}
-					disabled={isDisabled}
-				>
-					+ Add your first key
-				</Button>
-			</div>
-		);
-	}
-
-	return (
-		<>
-			<Table<ServiceaccounttypesFactorAPIKeyDTO>
-				columns={columns}
-				dataSource={keys}
-				rowKey="id"
-				pagination={{
-					style: { display: 'none' },
-					current: currentPage,
-					pageSize,
-				}}
-				showSorterTooltip={false}
-				className={`keys-tab__table${
-					isDisabled ? ' keys-tab__table--disabled' : ''
-				}`}
-				rowClassName={(_, index): string =>
-					index % 2 === 0 ? 'keys-tab__table-row--alt' : ''
-				}
-				onRow={(
-					record,
-				): {
-					onClick: () => void;
-					onKeyDown: (e: React.KeyboardEvent) => void;
-					role: string;
-					tabIndex: number;
-					'aria-label': string;
-				} => ({
-					onClick: (): void => {
-						if (!isDisabled) {
-							setEditKey(record);
-						}
-					},
-					onKeyDown: (e: React.KeyboardEvent): void => {
-						if ((e.key === 'Enter' || e.key === ' ') && !isDisabled) {
-							if (e.key === ' ') {
-								e.preventDefault();
-							}
-							setEditKey(record);
-						}
-					},
-					role: 'button',
-					tabIndex: 0,
-					'aria-label': `Edit key ${record.name || 'options'}`,
-				})}
-			/>
-
-			<DialogWrapper
-				open={revokeTarget !== null}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setRevokeTarget(null);
-					}
-				}}
-				title={`Revoke ${revokeTarget?.name ?? 'key'}?`}
-				width="narrow"
-				className="alert-dialog delete-dialog"
-				showCloseButton={false}
-				disableOutsideClick={false}
-			>
-				<p className="delete-dialog__body">
-					Revoking this key will permanently invalidate it. Any systems using this
-					key will lose access immediately.
-				</p>
-				<DialogFooter className="delete-dialog__footer">
-					<Button
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={(): void => setRevokeTarget(null)}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="destructive"
-						size="sm"
-						disabled={isRevoking}
-						onClick={handleRevoke}
-					>
-						<Trash2 size={12} />
-						{isRevoking ? 'Revoking...' : 'Revoke Key'}
-					</Button>
-				</DialogFooter>
-			</DialogWrapper>
-
-			<EditKeyModal
-				open={editKey !== null}
-				accountId={accountId}
-				keyItem={editKey}
-				onClose={(): void => setEditKey(null)}
-				onSuccess={handleKeySuccess}
-			/>
-		</>
-	);
-}
-
-export default KeysTab;

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -1,154 +0,0 @@
-import { useCallback } from 'react';
-import { Badge } from '@signozhq/badge';
-import { LockKeyhole } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import type { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
-import RolesSelect from 'components/RolesSelect';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-import { useTimezone } from 'providers/Timezone';
-import APIError from 'types/api/error';
-
-interface OverviewTabProps {
-	account: ServiceAccountRow;
-	localName: string;
-	onNameChange: (v: string) => void;
-	localRoles: string[];
-	onRolesChange: (v: string[]) => void;
-	isDisabled: boolean;
-	availableRoles: RoletypesRoleDTO[];
-	rolesLoading?: boolean;
-	rolesError?: boolean;
-	rolesErrorObj?: APIError | undefined;
-	onRefetchRoles?: () => void;
-}
-
-function OverviewTab({
-	account,
-	localName,
-	onNameChange,
-	localRoles,
-	onRolesChange,
-	isDisabled,
-	availableRoles,
-	rolesLoading,
-	rolesError,
-	rolesErrorObj,
-	onRefetchRoles,
-}: OverviewTabProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const formatTimestamp = useCallback(
-		(ts: string | null | undefined): string => {
-			if (!ts) {
-				return '—';
-			}
-			const d = new Date(ts);
-			if (Number.isNaN(d.getTime())) {
-				return '—';
-			}
-			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
-		},
-		[formatTimezoneAdjustedTimestamp],
-	);
-
-	return (
-		<>
-			<div className="sa-drawer__field">
-				<label className="sa-drawer__label" htmlFor="sa-name">
-					Name
-				</label>
-				{isDisabled ? (
-					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
-						<span className="sa-drawer__input-text">{localName || '—'}</span>
-						<LockKeyhole size={14} className="sa-drawer__lock-icon" />
-					</div>
-				) : (
-					<Input
-						id="sa-name"
-						value={localName}
-						onChange={(e): void => onNameChange(e.target.value)}
-						className="sa-drawer__input"
-						placeholder="Enter name"
-					/>
-				)}
-			</div>
-
-			<div className="sa-drawer__field">
-				<label className="sa-drawer__label" htmlFor="sa-email">
-					Email Address
-				</label>
-				<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
-					<span className="sa-drawer__input-text">{account.email || '—'}</span>
-					<LockKeyhole size={14} className="sa-drawer__lock-icon" />
-				</div>
-			</div>
-
-			<div className="sa-drawer__field">
-				<label className="sa-drawer__label" htmlFor="sa-roles">
-					Roles
-				</label>
-				{isDisabled ? (
-					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
-						<div className="sa-drawer__disabled-roles">
-							{localRoles.length > 0 ? (
-								localRoles.map((r) => (
-									<Badge key={r} color="vanilla">
-										{r}
-									</Badge>
-								))
-							) : (
-								<span className="sa-drawer__input-text">—</span>
-							)}
-						</div>
-						<LockKeyhole size={14} className="sa-drawer__lock-icon" />
-					</div>
-				) : (
-					<RolesSelect
-						id="sa-roles"
-						mode="multiple"
-						roles={availableRoles}
-						loading={rolesLoading}
-						isError={rolesError}
-						error={rolesErrorObj}
-						onRefetch={onRefetchRoles}
-						value={localRoles}
-						onChange={onRolesChange}
-						placeholder="Select roles"
-						className="sa-drawer__role-select"
-						getPopupContainer={(triggerNode): HTMLElement =>
-							(triggerNode?.closest('.sa-drawer') as HTMLElement) || document.body
-						}
-					/>
-				)}
-			</div>
-
-			<div className="sa-drawer__meta">
-				<div className="sa-drawer__meta-item">
-					<span className="sa-drawer__meta-label">Status</span>
-					{account.status?.toUpperCase() === 'ACTIVE' ? (
-						<Badge color="forest" variant="outline">
-							ACTIVE
-						</Badge>
-					) : (
-						<Badge color="vanilla" variant="outline" className="sa-status-badge">
-							DISABLED
-						</Badge>
-					)}
-				</div>
-
-				<div className="sa-drawer__meta-item">
-					<span className="sa-drawer__meta-label">Created At</span>
-					<Badge color="vanilla">{formatTimestamp(account.createdAt)}</Badge>
-				</div>
-
-				<div className="sa-drawer__meta-item">
-					<span className="sa-drawer__meta-label">Updated At</span>
-					<Badge color="vanilla">{formatTimestamp(account.updatedAt)}</Badge>
-				</div>
-			</div>
-		</>
-	);
-}
-
-export default OverviewTab;

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss

@@ -1,523 +0,0 @@
-.sa-drawer {
-	[data-slot='drawer-close'] + div {
-		border-left: 1px solid var(--l1-border);
-		padding-left: var(--padding-4);
-		margin-left: var(--margin-2);
-	}
-
-	&__layout {
-		display: flex;
-		flex-direction: column;
-		height: calc(100vh - 48px);
-	}
-
-	&__tabs {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: var(--padding-3) var(--padding-4) var(--padding-2) var(--padding-4);
-		flex-shrink: 0;
-	}
-
-	&__tab-group {
-		[data-slot='toggle-group'] {
-			height: 32px;
-			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
-			gap: 0;
-		}
-
-		[data-slot='toggle-group-item'] {
-			height: 32px;
-			border-radius: 0;
-			border-left: 1px solid var(--l1-border);
-			background: transparent;
-			color: var(--l2-foreground);
-			font-size: var(--font-size-xs);
-			font-weight: var(--font-weight-normal);
-			font-family: Inter, sans-serif;
-			padding: 0 var(--padding-7);
-			gap: var(--spacing-3);
-			box-shadow: none;
-
-			&:first-child {
-				border-left: none;
-				border-radius: 2px 0 0 2px;
-			}
-
-			&:last-child {
-				border-radius: 0 2px 2px 0;
-			}
-
-			&:hover {
-				background: rgba(171, 189, 255, 0.04);
-				color: var(--l1-foreground);
-			}
-
-			&[data-state='on'] {
-				background: var(--l1-border);
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	&__tab {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--spacing-2);
-		font-size: var(--font-size-xs);
-		font-weight: var(--font-weight-normal);
-	}
-
-	&__tab-count {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 20px;
-		padding: 0 6px;
-		border-radius: 50px;
-		background: var(--secondary);
-		font-size: var(--code-small-400-font-size);
-		font-weight: var(--font-weight-normal);
-		line-height: var(--line-height-20);
-		color: var(--foreground);
-		letter-spacing: -0.06px;
-	}
-
-	&__body {
-		flex: 1;
-		overflow-y: auto;
-		padding: var(--padding-5) var(--padding-4);
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-	}
-
-	&__footer {
-		height: 56px;
-		flex-shrink: 0;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0 var(--padding-4);
-		border-top: 1px solid var(--secondary);
-		background: var(--card);
-	}
-
-	&__keys-pagination {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		width: 100%;
-		padding: var(--padding-2) 0;
-
-		.ant-pagination-total-text {
-			margin-right: auto;
-		}
-	}
-
-	&__pagination-range {
-		font-size: var(--font-size-xs);
-		color: var(--foreground);
-		font-weight: var(--font-weight-normal);
-	}
-
-	&__pagination-total {
-		font-size: var(--font-size-xs);
-		color: var(--foreground);
-		opacity: 0.5;
-	}
-
-	&__footer-btn {
-		padding-left: 0;
-		padding-right: 0;
-	}
-
-	&__footer-right {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-6);
-	}
-
-	&__field {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-4);
-	}
-
-	&__label {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		color: var(--foreground);
-		line-height: var(--line-height-20);
-		letter-spacing: -0.07px;
-		cursor: default;
-	}
-
-	&__input {
-		height: 32px;
-		background: var(--l2-background);
-		border-color: var(--border);
-		color: var(--l1-foreground);
-		box-shadow: none;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-	}
-
-	&__input-wrapper {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 32px;
-		padding: 0 var(--padding-2);
-		border-radius: 2px;
-		background: var(--l2-background);
-		border: 1px solid var(--border);
-
-		&--disabled {
-			cursor: not-allowed;
-			opacity: 0.8;
-		}
-	}
-
-	&__input-text {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		color: var(--foreground);
-		line-height: var(--line-height-18);
-		letter-spacing: -0.07px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		flex: 1;
-	}
-
-	&__lock-icon {
-		color: var(--foreground);
-		flex-shrink: 0;
-		margin-left: 6px;
-		opacity: 0.6;
-	}
-
-	&__role-select {
-		width: 100%;
-		min-height: 32px;
-
-		.ant-select-selector {
-			background-color: var(--l2-background) !important;
-			border-color: var(--border) !important;
-			border-radius: 2px;
-			padding: 2px var(--padding-2) !important;
-			display: flex;
-			align-items: center;
-			flex-wrap: wrap;
-			min-height: 32px;
-		}
-
-		.ant-select-selection-overflow {
-			display: flex;
-			flex-wrap: wrap;
-			align-items: center;
-			gap: var(--spacing-1);
-			padding: 2px 0;
-		}
-
-		.ant-select-selection-overflow-item {
-			display: flex;
-			align-items: center;
-		}
-
-		.ant-select-selection-item {
-			display: flex;
-			align-items: center;
-			height: 22px;
-			font-size: var(--font-size-sm);
-			color: var(--l1-foreground);
-			background: var(--l3-background);
-			border: 1px solid var(--border);
-			border-radius: 2px;
-			padding: 0 var(--padding-1) 0 6px;
-			line-height: var(--line-height-20);
-			letter-spacing: -0.07px;
-			margin: 0;
-		}
-
-		.ant-select-selection-item-remove {
-			display: flex;
-			align-items: center;
-			color: var(--foreground);
-			margin-left: 2px;
-		}
-
-		.ant-select-selection-placeholder {
-			font-size: var(--font-size-sm);
-			color: var(--l3-foreground);
-		}
-
-		.ant-select-arrow {
-			color: var(--foreground);
-		}
-
-		&:not(.ant-select-disabled):hover .ant-select-selector {
-			border-color: var(--foreground);
-		}
-	}
-
-	&__disabled-roles {
-		display: flex;
-		flex-wrap: wrap;
-		gap: var(--spacing-2);
-	}
-
-	&__meta {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-8);
-		margin-top: var(--margin-1);
-	}
-
-	&__meta-item {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-2);
-
-		[data-slot='badge'] {
-			padding: var(--padding-1) var(--padding-2);
-			align-items: center;
-			font-size: var(--uppercase-small-500-font-size);
-			font-weight: var(--uppercase-small-500-font-weight);
-			line-height: 100%;
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-		}
-	}
-
-	&__meta-label {
-		font-size: var(--font-size-xs);
-		font-weight: var(--font-weight-medium);
-		color: var(--foreground);
-		line-height: var(--line-height-20);
-		letter-spacing: 0.48px;
-		text-transform: uppercase;
-	}
-}
-
-.keys-tab {
-	&__loading {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: var(--padding-8) var(--padding-4);
-	}
-
-	&__empty {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: var(--padding-8) var(--padding-4);
-		gap: var(--spacing-4);
-		text-align: center;
-		height: 80%;
-	}
-
-	&__empty-emoji {
-		font-size: 32px;
-	}
-
-	&__empty-text {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--foreground);
-		margin: 0;
-	}
-
-	&__learn-more {
-		background: transparent;
-		border: none;
-		color: var(--primary);
-		font-size: var(--font-size-sm);
-		cursor: pointer;
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
-	&__table {
-		.ant-table {
-			background: transparent;
-			border: 1px solid var(--l1-border);
-			border-radius: 4px;
-			overflow: hidden;
-		}
-
-		.ant-table-thead > tr > th,
-		.ant-table-thead > tr > td {
-			height: 38px;
-			padding: 0 var(--padding-4);
-			background: transparent !important;
-			border-bottom: 1px solid var(--l1-border) !important;
-			font-size: var(--uppercase-small-500-font-size);
-			font-weight: var(--uppercase-small-500-font-weight);
-			color: var(--l2-foreground);
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-
-			&::before {
-				display: none !important;
-			}
-
-			.ant-table-column-sorter {
-				color: var(--l2-foreground);
-				opacity: 0.5;
-			}
-
-			&.ant-table-column-sort {
-				background: transparent !important;
-				color: var(--l1-foreground);
-
-				.ant-table-column-sorter {
-					color: var(--l1-foreground);
-					opacity: 1;
-				}
-			}
-
-			&:hover {
-				background: transparent !important;
-				color: var(--l1-foreground);
-
-				.ant-table-column-sorter {
-					opacity: 1;
-				}
-			}
-		}
-
-		.ant-table-tbody > tr > td {
-			height: 38px;
-			padding: 0 var(--padding-4);
-			border-bottom: 1px solid var(--l1-border);
-			font-size: 13px;
-			font-weight: var(--font-weight-normal);
-			color: var(--l2-foreground);
-			letter-spacing: -0.07px;
-			cursor: pointer;
-			background: transparent;
-			transition: none;
-			font-variant-numeric: lining-nums tabular-nums stacked-fractions ordinal
-				slashed-zero;
-
-			&.ant-table-column-sort {
-				background: transparent;
-			}
-		}
-
-		.ant-table-tbody > tr:last-child > td {
-			border-bottom: none;
-		}
-
-		.ant-table-tbody > tr {
-			background: transparent;
-
-			&:hover > td {
-				background: rgba(171, 189, 255, 0.06) !important;
-			}
-
-			&.keys-tab__table-row--alt > td {
-				background: rgba(171, 189, 255, 0.02);
-
-				&:hover {
-					background: rgba(171, 189, 255, 0.06) !important;
-				}
-			}
-		}
-
-		&--disabled {
-			.ant-table-tbody > tr {
-				cursor: not-allowed;
-				opacity: 0.6;
-
-				&:hover > td {
-					background: transparent !important;
-				}
-			}
-		}
-
-		.ant-table-cell-row-hover {
-			background: transparent !important;
-		}
-	}
-
-	&__name-column {
-		.ant-table-column-sorters {
-			justify-content: flex-start;
-			gap: var(--spacing-2);
-		}
-
-		.ant-table-column-title {
-			flex: none;
-		}
-	}
-
-	&__name-text {
-		font-size: 13px;
-		font-weight: var(--font-weight-normal);
-		color: var(--l2-foreground);
-		letter-spacing: -0.07px;
-		text-transform: none;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	&__expiry--never {
-		color: var(--l2-foreground);
-	}
-
-	&__expiry--expired {
-		color: var(--l3-foreground);
-	}
-
-	&__revoke-btn {
-		width: 32px;
-		height: 32px;
-		padding: 0;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-	}
-}
-
-.sa-disable-dialog {
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-
-	[data-slot='dialog-title'] {
-		color: var(--l1-foreground);
-	}
-
-	&__body {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l2-foreground);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.065px;
-		margin: 0;
-
-		strong {
-			font-weight: var(--font-weight-medium);
-			color: var(--l1-foreground);
-		}
-	}
-
-	&__footer {
-		display: flex;
-		justify-content: flex-end;
-		gap: var(--spacing-4);
-		margin-top: var(--margin-6);
-	}
-}

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,369 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { DrawerWrapper } from '@signozhq/drawer';
-import { Key, LayoutGrid, Plus, PowerOff, Trash2, X } from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Pagination } from 'antd';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import {
-	useListServiceAccountKeys,
-	useUpdateServiceAccount,
-	useUpdateServiceAccountStatus,
-} from 'api/generated/services/serviceaccount';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import { useRoles } from 'components/RolesSelect';
-import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-
-import AddKeyModal from './AddKeyModal';
-import KeysTab from './KeysTab';
-import OverviewTab from './OverviewTab';
-import { ServiceAccountDrawerTab } from './utils';
-
-import './ServiceAccountDrawer.styles.scss';
-
-export interface ServiceAccountDrawerProps {
-	account: ServiceAccountRow | null;
-	open: boolean;
-	onClose: () => void;
-	onSuccess: (options?: { closeDrawer?: boolean }) => void;
-}
-
-const PAGE_SIZE = 15;
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function ServiceAccountDrawer({
-	account,
-	open,
-	onClose,
-	onSuccess,
-}: ServiceAccountDrawerProps): JSX.Element {
-	const [activeTab, setActiveTab] = useState<ServiceAccountDrawerTab>(
-		ServiceAccountDrawerTab.Overview,
-	);
-	const [isDisableConfirmOpen, setIsDisableConfirmOpen] = useState(false);
-	const [localName, setLocalName] = useState('');
-	const [localRoles, setLocalRoles] = useState<string[]>([]);
-	const [isSaving, setIsSaving] = useState(false);
-	const [isDisabling, setIsDisabling] = useState(false);
-	const [isAddKeyOpen, setIsAddKeyOpen] = useState(false);
-	const [keysPage, setKeysPage] = useState(1);
-
-	useEffect(() => {
-		if (account) {
-			setLocalName(account.name ?? '');
-			setLocalRoles(account.roles ?? []);
-			setActiveTab(ServiceAccountDrawerTab.Overview);
-			setKeysPage(1);
-		}
-	}, [account]);
-
-	const isDisabled = account?.status?.toUpperCase() !== 'ACTIVE';
-
-	const isDirty =
-		account !== null &&
-		(localName !== (account.name ?? '') ||
-			JSON.stringify(localRoles) !== JSON.stringify(account.roles ?? []));
-
-	const {
-		roles: availableRoles,
-		isLoading: rolesLoading,
-		isError: rolesError,
-		error: rolesErrorObj,
-		refetch: refetchRoles,
-	} = useRoles();
-
-	const {
-		data: keysData,
-		isLoading: keysLoading,
-		refetch: refetchKeys,
-	} = useListServiceAccountKeys(
-		{ id: account?.id ?? '' },
-		{ query: { enabled: !!account?.id } },
-	);
-	const keys = keysData?.data ?? [];
-
-	useEffect(() => {
-		if (keysLoading) {
-			return;
-		}
-		const maxPage = Math.max(1, Math.ceil(keys.length / PAGE_SIZE));
-		if (keysPage > maxPage) {
-			setKeysPage(maxPage);
-		}
-	}, [keysLoading, keys.length, keysPage]);
-
-	const { mutateAsync: updateAccount } = useUpdateServiceAccount();
-	const { mutateAsync: updateStatus } = useUpdateServiceAccountStatus();
-
-	const handleSave = useCallback(async (): Promise<void> => {
-		if (!account || !isDirty) {
-			return;
-		}
-		setIsSaving(true);
-		try {
-			await updateAccount({
-				pathParams: { id: account.id },
-				data: { name: localName, email: account.email, roles: localRoles },
-			});
-			toast.success('Service account updated successfully', { richColors: true });
-			onSuccess({ closeDrawer: false });
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to update service account';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsSaving(false);
-		}
-	}, [account, isDirty, localName, localRoles, updateAccount, onSuccess]);
-
-	const handleDisable = useCallback(async (): Promise<void> => {
-		if (!account) {
-			return;
-		}
-		setIsDisabling(true);
-		try {
-			await updateStatus({
-				pathParams: { id: account.id },
-				data: { status: 'DISABLED' },
-			});
-			toast.success('Service account disabled', { richColors: true });
-			setIsDisableConfirmOpen(false);
-			onSuccess({ closeDrawer: true });
-		} catch (error: unknown) {
-			const errMessage =
-				convertToApiError(
-					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				)?.getErrorMessage() || 'Failed to disable service account';
-			toast.error(errMessage, { richColors: true });
-		} finally {
-			setIsDisabling(false);
-		}
-	}, [account, updateStatus, onSuccess]);
-
-	const handleClose = useCallback((): void => {
-		setIsDisableConfirmOpen(false);
-		setIsAddKeyOpen(false);
-		onClose();
-	}, [onClose]);
-
-	const handleKeySuccess = useCallback((): void => {
-		setIsAddKeyOpen(false);
-		refetchKeys();
-	}, [refetchKeys]);
-
-	const drawerContent = (
-		<div className="sa-drawer__layout">
-			<div className="sa-drawer__tabs">
-				<ToggleGroup
-					type="single"
-					value={activeTab}
-					onValueChange={(val): void => {
-						if (val) {
-							setActiveTab(val as ServiceAccountDrawerTab);
-						}
-					}}
-					className="sa-drawer__tab-group"
-				>
-					<ToggleGroupItem
-						value={ServiceAccountDrawerTab.Overview}
-						className="sa-drawer__tab"
-					>
-						<LayoutGrid size={14} />
-						Overview
-					</ToggleGroupItem>
-					<ToggleGroupItem
-						value={ServiceAccountDrawerTab.Keys}
-						className="sa-drawer__tab"
-					>
-						<Key size={14} />
-						Keys
-						{keys.length > 0 && (
-							<span className="sa-drawer__tab-count">{keys.length}</span>
-						)}
-					</ToggleGroupItem>
-				</ToggleGroup>
-				{activeTab === ServiceAccountDrawerTab.Keys && (
-					<Button
-						variant="outlined"
-						size="sm"
-						color="secondary"
-						disabled={isDisabled}
-						onClick={(): void => setIsAddKeyOpen(true)}
-					>
-						<Plus size={12} />
-						Add Key
-					</Button>
-				)}
-			</div>
-
-			<div
-				className={`sa-drawer__body${
-					activeTab === ServiceAccountDrawerTab.Keys ? ' sa-drawer__body--keys' : ''
-				}`}
-			>
-				{activeTab === ServiceAccountDrawerTab.Overview && account && (
-					<OverviewTab
-						account={account}
-						localName={localName}
-						onNameChange={setLocalName}
-						localRoles={localRoles}
-						onRolesChange={setLocalRoles}
-						isDisabled={isDisabled}
-						availableRoles={availableRoles}
-						rolesLoading={rolesLoading}
-						rolesError={rolesError}
-						rolesErrorObj={rolesErrorObj}
-						onRefetchRoles={refetchRoles}
-					/>
-				)}
-				{activeTab === ServiceAccountDrawerTab.Keys && account && (
-					<KeysTab
-						accountId={account.id}
-						keys={keys}
-						isLoading={keysLoading}
-						isDisabled={isDisabled}
-						currentPage={keysPage}
-						pageSize={PAGE_SIZE}
-						onRefetch={refetchKeys}
-						onAddKeyClick={(): void => setIsAddKeyOpen(true)}
-					/>
-				)}
-			</div>
-
-			<div className="sa-drawer__footer">
-				{activeTab === ServiceAccountDrawerTab.Keys ? (
-					<Pagination
-						current={keysPage}
-						pageSize={PAGE_SIZE}
-						total={keys.length}
-						showTotal={(total: number, range: number[]): JSX.Element => (
-							<>
-								<span className="sa-drawer__pagination-range">
-									{range[0]} &#8212; {range[1]}
-								</span>
-								<span className="sa-drawer__pagination-total"> of {total}</span>
-							</>
-						)}
-						showSizeChanger={false}
-						hideOnSinglePage
-						onChange={(page): void => setKeysPage(page)}
-						className="sa-drawer__keys-pagination"
-					/>
-				) : (
-					<>
-						{!isDisabled && (
-							<Button
-								variant="ghost"
-								color="destructive"
-								className="sa-drawer__footer-btn"
-								onClick={(): void => setIsDisableConfirmOpen(true)}
-							>
-								<PowerOff size={12} />
-								Disable Service Account
-							</Button>
-						)}
-						{!isDisabled && (
-							<div className="sa-drawer__footer-right">
-								<Button
-									variant="solid"
-									color="secondary"
-									size="sm"
-									onClick={handleClose}
-								>
-									<X size={14} />
-									Cancel
-								</Button>
-								<Button
-									variant="solid"
-									color="primary"
-									size="sm"
-									disabled={!isDirty || isSaving}
-									onClick={handleSave}
-								>
-									{isSaving ? 'Saving...' : 'Save Changes'}
-								</Button>
-							</div>
-						)}
-					</>
-				)}
-			</div>
-		</div>
-	);
-
-	return (
-		<>
-			<DrawerWrapper
-				open={open}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						handleClose();
-					}
-				}}
-				direction="right"
-				type="panel"
-				showCloseButton
-				showOverlay={false}
-				allowOutsideClick
-				header={{ title: 'Service Account Details' }}
-				content={drawerContent}
-				className="sa-drawer"
-			/>
-
-			<DialogWrapper
-				open={isDisableConfirmOpen}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						setIsDisableConfirmOpen(false);
-					}
-				}}
-				title={`Disable service account ${account?.name ?? ''}?`}
-				width="narrow"
-				className="alert-dialog sa-disable-dialog"
-				showCloseButton={false}
-				disableOutsideClick={false}
-			>
-				<p className="sa-disable-dialog__body">
-					Disabling this service account will revoke access for all its keys. Any
-					systems using this account will lose access immediately.
-				</p>
-				<DialogFooter className="sa-disable-dialog__footer">
-					<Button
-						variant="solid"
-						color="secondary"
-						size="sm"
-						onClick={(): void => setIsDisableConfirmOpen(false)}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="destructive"
-						size="sm"
-						disabled={isDisabling}
-						onClick={handleDisable}
-					>
-						<Trash2 size={12} />
-						{isDisabling ? 'Disabling...' : 'Disable'}
-					</Button>
-				</DialogFooter>
-			</DialogWrapper>
-
-			{account && (
-				<AddKeyModal
-					open={isAddKeyOpen}
-					accountId={account.id}
-					onClose={(): void => setIsAddKeyOpen(false)}
-					onSuccess={handleKeySuccess}
-				/>
-			)}
-		</>
-	);
-}
-
-export default ServiceAccountDrawer;

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.test.tsx

@@ -1,179 +0,0 @@
-import type { ReactNode } from 'react';
-import { toast } from '@signozhq/sonner';
-import { useCreateServiceAccountKey } from 'api/generated/services/serviceaccount';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import AddKeyModal from '../AddKeyModal';
-
-jest.mock('@signozhq/toggle-group', () => ({
-	ToggleGroup: ({
-		children,
-		className,
-	}: {
-		children: ReactNode;
-		onValueChange?: (val: string) => void;
-		value?: string;
-		type?: string;
-		className?: string;
-	}): JSX.Element => <div className={className}>{children}</div>,
-	ToggleGroupItem: ({
-		children,
-		className,
-	}: {
-		children: ReactNode;
-		value: string;
-		className?: string;
-	}): JSX.Element => <span className={className}>{children}</span>,
-}));
-
-jest.mock('@signozhq/dialog', () => ({
-	DialogWrapper: ({
-		children,
-		open,
-		title,
-	}: {
-		children?: ReactNode;
-		open: boolean;
-		title?: string;
-	}): JSX.Element | null =>
-		open ? (
-			<div role="dialog" aria-label={title}>
-				{children}
-			</div>
-		) : null,
-}));
-
-jest.mock('api/generated/services/serviceaccount');
-
-jest.mock('@signozhq/sonner', () => ({
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-const mockCreateKey = jest.fn();
-const mockToast = jest.mocked(toast);
-
-const defaultProps = {
-	open: true,
-	accountId: 'sa-1',
-	onClose: jest.fn(),
-	onSuccess: jest.fn(),
-};
-
-const createdKeyResponse = {
-	data: {
-		id: 'key-1',
-		name: 'Deploy Key',
-		key: 'snz_abc123xyz456secret',
-		expiresAt: 0,
-		lastObservedAt: null,
-	},
-};
-
-describe('AddKeyModal', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		jest.mocked(useCreateServiceAccountKey).mockReturnValue(({
-			mutateAsync: mockCreateKey,
-		} as unknown) as ReturnType<typeof useCreateServiceAccountKey>);
-	});
-
-	beforeAll(() => {
-		Object.defineProperty(navigator, 'clipboard', {
-			value: { writeText: jest.fn().mockResolvedValue(undefined) },
-			configurable: true,
-			writable: true,
-		});
-	});
-
-	it('"Create Key" is disabled when name is empty; enabled after typing a name', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<AddKeyModal {...defaultProps} />);
-
-		expect(screen.getByRole('button', { name: /Create Key/i })).toBeDisabled();
-
-		await user.type(screen.getByPlaceholderText(/Enter key name/i), 'My Key');
-
-		await waitFor(() =>
-			expect(
-				screen.getByRole('button', { name: /Create Key/i }),
-			).not.toBeDisabled(),
-		);
-	});
-
-	it('successful creation transitions to phase 2 with key displayed and security callout', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		mockCreateKey.mockResolvedValue(createdKeyResponse);
-
-		render(<AddKeyModal {...defaultProps} />);
-
-		await user.type(screen.getByPlaceholderText(/Enter key name/i), 'Deploy Key');
-		await waitFor(() =>
-			expect(
-				screen.getByRole('button', { name: /Create Key/i }),
-			).not.toBeDisabled(),
-		);
-		await user.click(screen.getByRole('button', { name: /Create Key/i }));
-
-		await screen.findByText('snz_abc123xyz456secret');
-		expect(screen.getByText(/Store the key securely/i)).toBeInTheDocument();
-		expect(
-			screen.getByRole('dialog', { name: /Key Created Successfully/i }),
-		).toBeInTheDocument();
-	});
-
-	it('copy button writes key to clipboard and shows toast.success', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const writeTextSpy = jest
-			.spyOn(navigator.clipboard, 'writeText')
-			.mockResolvedValue(undefined);
-
-		mockCreateKey.mockResolvedValue(createdKeyResponse);
-
-		render(<AddKeyModal {...defaultProps} />);
-
-		await user.type(screen.getByPlaceholderText(/Enter key name/i), 'Deploy Key');
-		await waitFor(() =>
-			expect(
-				screen.getByRole('button', { name: /Create Key/i }),
-			).not.toBeDisabled(),
-		);
-		await user.click(screen.getByRole('button', { name: /Create Key/i }));
-
-		await screen.findByText('snz_abc123xyz456secret');
-
-		const copyBtn = screen
-			.getAllByRole('button')
-			.find((btn) => btn.querySelector('svg'));
-		if (!copyBtn) {
-			throw new Error('Copy button not found');
-		}
-		await user.click(copyBtn);
-
-		await waitFor(() => {
-			expect(writeTextSpy).toHaveBeenCalledWith('snz_abc123xyz456secret');
-			expect(mockToast.success).toHaveBeenCalledWith(
-				'Key copied to clipboard',
-				expect.anything(),
-			);
-		});
-
-		writeTextSpy.mockRestore();
-	});
-
-	it('onSuccess called only when closing from phase 2, not from phase 1 (Cancel)', async () => {
-		const onSuccess = jest.fn();
-		const onClose = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<AddKeyModal {...defaultProps} onSuccess={onSuccess} onClose={onClose} />,
-		);
-
-		await user.click(screen.getByRole('button', { name: /Cancel/i }));
-
-		expect(onClose).toHaveBeenCalledTimes(1);
-		expect(onSuccess).not.toHaveBeenCalled();
-	});
-});

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.test.tsx

@@ -1,200 +0,0 @@
-import type { ReactNode } from 'react';
-import { toast } from '@signozhq/sonner';
-import {
-	useRevokeServiceAccountKey,
-	useUpdateServiceAccountKey,
-} from 'api/generated/services/serviceaccount';
-import { ServiceaccounttypesFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import EditKeyModal from '../EditKeyModal';
-
-jest.mock('@signozhq/toggle-group', () => ({
-	ToggleGroup: ({
-		children,
-		onValueChange,
-		value,
-		className,
-	}: {
-		children: ReactNode;
-		onValueChange?: (val: string) => void;
-		value?: string;
-		className?: string;
-	}): JSX.Element => (
-		<div
-			className={className}
-			data-testid="toggle-group"
-			data-value={value}
-			onClick={(e): void => {
-				const target = e.target as HTMLElement;
-				const toggleItem = target.closest('[data-toggle-value]');
-				if (toggleItem) {
-					onValueChange?.(toggleItem.getAttribute('data-toggle-value') || '');
-				}
-			}}
-		>
-			{children}
-		</div>
-	),
-	ToggleGroupItem: ({
-		children,
-		value,
-		className,
-	}: {
-		children: ReactNode;
-		value: string;
-		className?: string;
-	}): JSX.Element => (
-		<button
-			type="button"
-			className={className}
-			data-toggle-value={value}
-			data-testid={`toggle-item-${value}`}
-		>
-			{children}
-		</button>
-	),
-}));
-
-jest.mock('@signozhq/dialog', () => ({
-	DialogWrapper: ({
-		children,
-		open,
-		title,
-	}: {
-		children?: ReactNode;
-		open: boolean;
-		title?: string;
-	}): JSX.Element | null =>
-		open ? (
-			<div role="dialog" aria-label={title} data-testid="dialog-wrapper">
-				{children}
-			</div>
-		) : null,
-	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
-		<div data-testid="dialog-footer">{children}</div>
-	),
-}));
-
-jest.mock('api/generated/services/serviceaccount');
-
-jest.mock('@signozhq/sonner', () => ({
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-const mockUpdateKey = jest.fn();
-const mockRevokeKey = jest.fn();
-const mockToast = jest.mocked(toast);
-
-const keyItem: ServiceaccounttypesFactorAPIKeyDTO = {
-	id: 'key-1',
-	name: 'Original Key Name',
-	expiresAt: 0,
-	lastObservedAt: null as any,
-	key: 'snz_abc123',
-	serviceAccountId: 'sa-1',
-};
-
-const defaultProps = {
-	open: true,
-	accountId: 'sa-1',
-	keyItem,
-	onClose: jest.fn(),
-	onSuccess: jest.fn(),
-};
-
-describe('EditKeyModal', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		jest.mocked(useUpdateServiceAccountKey).mockReturnValue(({
-			mutateAsync: mockUpdateKey,
-		} as unknown) as ReturnType<typeof useUpdateServiceAccountKey>);
-		jest.mocked(useRevokeServiceAccountKey).mockReturnValue(({
-			mutateAsync: mockRevokeKey,
-		} as unknown) as ReturnType<typeof useRevokeServiceAccountKey>);
-	});
-
-	it('renders correctly with initial values', () => {
-		render(<EditKeyModal {...defaultProps} />);
-
-		expect(screen.getByDisplayValue('Original Key Name')).toBeInTheDocument();
-		expect(screen.getByText('No Expiration')).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /Save Changes/i })).toBeDisabled();
-	});
-
-	it('enables save button when name is changed', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<EditKeyModal {...defaultProps} />);
-
-		const nameInput = screen.getByPlaceholderText(/Enter key name/i);
-		await user.clear(nameInput);
-		await user.type(nameInput, 'New Key Name');
-
-		expect(
-			screen.getByRole('button', { name: /Save Changes/i }),
-		).not.toBeDisabled();
-	});
-
-	it('calls updateKey API and onSuccess on save', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onSuccess = jest.fn();
-		mockUpdateKey.mockResolvedValue({});
-
-		render(<EditKeyModal {...defaultProps} onSuccess={onSuccess} />);
-
-		const nameInput = screen.getByPlaceholderText(/Enter key name/i);
-		await user.type(nameInput, ' Updated');
-
-		await user.click(screen.getByRole('button', { name: /Save Changes/i }));
-
-		await waitFor(() => {
-			expect(mockUpdateKey).toHaveBeenCalled();
-			expect(mockToast.success).toHaveBeenCalledWith(
-				'Key updated successfully',
-				expect.anything(),
-			);
-			expect(onSuccess).toHaveBeenCalled();
-		});
-	});
-
-	it('opens revoke confirmation and handles revocation', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onSuccess = jest.fn();
-		mockRevokeKey.mockResolvedValue({});
-
-		render(<EditKeyModal {...defaultProps} onSuccess={onSuccess} />);
-
-		await user.click(screen.getByRole('button', { name: /Revoke Key/i }));
-
-		expect(
-			screen.getByText(/Revoking this key will permanently invalidate it/i),
-		).toBeInTheDocument();
-
-		const confirmRevokeBtn = screen.getByRole('button', {
-			name: (content, element) =>
-				content === 'Revoke Key' && element?.tagName === 'BUTTON',
-		});
-		await user.click(confirmRevokeBtn);
-
-		await waitFor(() => {
-			expect(mockRevokeKey).toHaveBeenCalledWith({
-				pathParams: { id: 'sa-1', fid: 'key-1' },
-			});
-			expect(mockToast.success).toHaveBeenCalledWith(
-				'Key revoked successfully',
-				expect.anything(),
-			);
-			expect(onSuccess).toHaveBeenCalled();
-		});
-	});
-
-	it('closes modal when clicking cancel', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onClose = jest.fn();
-		render(<EditKeyModal {...defaultProps} onClose={onClose} />);
-
-		await user.click(screen.getByRole('button', { name: /Cancel/i }));
-
-		expect(onClose).toHaveBeenCalled();
-	});
-});

frontend/src/components/ServiceAccountDrawer/__tests__/KeysTab.test.tsx

@@ -1,189 +0,0 @@
-import type { ReactNode } from 'react';
-import { toast } from '@signozhq/sonner';
-import { useRevokeServiceAccountKey } from 'api/generated/services/serviceaccount';
-import { ServiceaccounttypesFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import KeysTab from '../KeysTab';
-
-jest.mock('@signozhq/dialog', () => ({
-	DialogWrapper: ({
-		children,
-		open,
-		title,
-	}: {
-		children?: ReactNode;
-		open: boolean;
-		title?: string;
-	}): JSX.Element | null =>
-		open ? (
-			<div role="dialog" aria-label={title}>
-				{children}
-			</div>
-		) : null,
-	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
-		<div>{children}</div>
-	),
-}));
-
-jest.mock('antd', () => {
-	const original = jest.requireActual('antd');
-	return {
-		...original,
-		Skeleton: ({ active }: { active?: boolean }): JSX.Element | null =>
-			active ? <div data-testid="skeleton">Loading...</div> : null,
-	};
-});
-
-jest.mock('../EditKeyModal', () => ({
-	__esModule: true,
-	default: ({
-		open,
-		keyItem,
-	}: {
-		open: boolean;
-		keyItem: any;
-	}): JSX.Element | null =>
-		open ? <div data-testid="edit-key-modal">Editing {keyItem?.name}</div> : null,
-}));
-
-jest.mock('api/generated/services/serviceaccount');
-
-jest.mock('@signozhq/sonner', () => ({
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-const mockRevokeKey = jest.fn();
-const mockToast = jest.mocked(toast);
-
-const keys: ServiceaccounttypesFactorAPIKeyDTO[] = [
-	{
-		id: 'key-1',
-		name: 'Production Key',
-		expiresAt: 0,
-		lastObservedAt: null as any,
-		key: 'snz_prod_123',
-		serviceAccountId: 'sa-1',
-	},
-	{
-		id: 'key-2',
-		name: 'Staging Key',
-		expiresAt: 1924905600, // 2030-12-31
-		lastObservedAt: new Date('2026-03-10T10:00:00Z'),
-		key: 'snz_stag_456',
-		serviceAccountId: 'sa-1',
-	},
-];
-
-const defaultProps = {
-	accountId: 'sa-1',
-	keys,
-	isLoading: false,
-	isDisabled: false,
-	currentPage: 1,
-	pageSize: 10,
-	onRefetch: jest.fn(),
-	onAddKeyClick: jest.fn(),
-};
-
-describe('KeysTab', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		jest.mocked(useRevokeServiceAccountKey).mockReturnValue(({
-			mutateAsync: mockRevokeKey,
-		} as unknown) as ReturnType<typeof useRevokeServiceAccountKey>);
-	});
-
-	it('renders loading state', () => {
-		render(<KeysTab {...defaultProps} isLoading={true} />);
-		expect(screen.getByTestId('skeleton')).toBeInTheDocument();
-	});
-
-	it('renders empty state when no keys', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onAddKeyClick = jest.fn();
-		render(<KeysTab {...defaultProps} keys={[]} onAddKeyClick={onAddKeyClick} />);
-
-		expect(
-			screen.getByText(/No keys. Start by creating one./i),
-		).toBeInTheDocument();
-		const addBtn = screen.getByRole('button', { name: /\+ Add your first key/i });
-		await user.click(addBtn);
-		expect(onAddKeyClick).toHaveBeenCalled();
-	});
-
-	it('renders table with keys', () => {
-		render(<KeysTab {...defaultProps} />);
-
-		expect(screen.getByText('Production Key')).toBeInTheDocument();
-		expect(screen.getByText('Staging Key')).toBeInTheDocument();
-		expect(screen.getByText('Never')).toBeInTheDocument(); // Expiry for Prod Key
-		expect(screen.getByText('Dec 31, 2030')).toBeInTheDocument(); // Expiry for Staging Key
-	});
-
-	it('clicking a row opens EditKeyModal', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<KeysTab {...defaultProps} />);
-
-		const row = screen.getByText('Production Key').closest('tr');
-		if (!row) {
-			throw new Error('Row not found');
-		}
-
-		await user.click(row);
-
-		expect(screen.getByTestId('edit-key-modal')).toHaveTextContent(
-			'Editing Production Key',
-		);
-	});
-
-	it('clicking revoke icon opens confirmation dialog', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<KeysTab {...defaultProps} />);
-
-		const revokeBtns = screen
-			.getAllByRole('button')
-			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
-		await user.click(revokeBtns[0]);
-
-		expect(
-			screen.getByRole('dialog', { name: /Revoke Production Key\?/i }),
-		).toBeInTheDocument();
-	});
-
-	it('handles successful key revocation', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onRefetch = jest.fn();
-		mockRevokeKey.mockResolvedValue({});
-
-		render(<KeysTab {...defaultProps} onRefetch={onRefetch} />);
-
-		const revokeBtns = screen
-			.getAllByRole('button')
-			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
-		await user.click(revokeBtns[0]);
-
-		const confirmBtn = screen.getByRole('button', { name: /Revoke Key/i });
-		await user.click(confirmBtn);
-
-		await waitFor(() => {
-			expect(mockRevokeKey).toHaveBeenCalledWith({
-				pathParams: { id: 'sa-1', fid: 'key-1' },
-			});
-			expect(mockToast.success).toHaveBeenCalledWith(
-				'Key revoked successfully',
-				expect.anything(),
-			);
-			expect(onRefetch).toHaveBeenCalled();
-		});
-	});
-
-	it('disables actions when isDisabled is true', () => {
-		render(<KeysTab {...defaultProps} isDisabled={true} />);
-
-		const revokeBtns = screen
-			.getAllByRole('button')
-			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
-		revokeBtns.forEach((btn) => expect(btn).toBeDisabled());
-	});
-});

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

@@ -1,325 +0,0 @@
-import type { ReactNode } from 'react';
-import { toast } from '@signozhq/sonner';
-import {
-	useCreateServiceAccountKey,
-	useListServiceAccountKeys,
-	useRevokeServiceAccountKey,
-	useUpdateServiceAccount,
-	useUpdateServiceAccountKey,
-	useUpdateServiceAccountStatus,
-} from 'api/generated/services/serviceaccount';
-import { useRoles } from 'components/RolesSelect';
-import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-import { managedRoles } from 'mocks-server/__mockdata__/roles';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import ServiceAccountDrawer, {
-	ServiceAccountDrawerProps,
-} from '../ServiceAccountDrawer';
-
-let mockOnToggleGroupChange: ((val: string) => void) | undefined;
-
-jest.mock('@signozhq/toggle-group', () => ({
-	ToggleGroup: ({
-		children,
-		onValueChange,
-		className,
-	}: {
-		children: ReactNode;
-		onValueChange?: (val: string) => void;
-		value?: string;
-		type?: string;
-		className?: string;
-	}): JSX.Element => {
-		mockOnToggleGroupChange = onValueChange;
-		return <div className={className}>{children}</div>;
-	},
-	ToggleGroupItem: ({
-		children,
-		value,
-		className,
-	}: {
-		children: ReactNode;
-		value: string;
-		className?: string;
-	}): JSX.Element => (
-		<button
-			type="button"
-			className={className}
-			onClick={(): void => mockOnToggleGroupChange?.(value)}
-		>
-			{children}
-		</button>
-	),
-}));
-
-jest.mock('@signozhq/drawer', () => ({
-	DrawerWrapper: ({
-		content,
-		open,
-	}: {
-		content?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null => (open ? <div>{content}</div> : null),
-}));
-
-jest.mock('@signozhq/dialog', () => ({
-	DialogWrapper: ({
-		children,
-		open,
-		title,
-	}: {
-		children?: ReactNode;
-		open: boolean;
-		title?: string;
-	}): JSX.Element | null =>
-		open ? (
-			<div role="dialog" aria-label={title}>
-				{children}
-			</div>
-		) : null,
-	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
-		<div>{children}</div>
-	),
-}));
-
-jest.mock('api/generated/services/serviceaccount');
-
-jest.mock('components/RolesSelect', () => {
-	function MockRolesSelect({
-		value = [],
-		onChange,
-		roles = [],
-	}: {
-		value?: string[];
-		onChange?: (val: string[]) => void;
-		roles?: Array<{ id: string; name: string }>;
-		loading?: boolean;
-		isError?: boolean;
-		error?: unknown;
-		onRefetch?: () => void;
-		mode?: string;
-		placeholder?: string;
-		className?: string;
-		getPopupContainer?: (el: HTMLElement) => HTMLElement;
-	}): JSX.Element {
-		return (
-			<select
-				multiple
-				data-testid="roles-select"
-				value={value}
-				onChange={(e): void => {
-					const selected = Array.from(e.target.selectedOptions).map((o) => o.value);
-					onChange?.(selected);
-				}}
-			>
-				{roles.map((r: { id: string; name: string }) => (
-					<option key={r.id} value={r.name}>
-						{r.name}
-					</option>
-				))}
-			</select>
-		);
-	}
-	return {
-		__esModule: true,
-		default: MockRolesSelect,
-		useRoles: jest.fn(),
-	};
-});
-
-jest.mock('@signozhq/sonner', () => ({
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-const mockUpdate = jest.fn();
-const mockUpdateStatus = jest.fn();
-const mockToast = jest.mocked(toast);
-const mockUseRoles = jest.mocked(useRoles);
-
-const activeAccount: ServiceAccountRow = {
-	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',
-};
-
-const disabledAccount: ServiceAccountRow = {
-	...activeAccount,
-	id: 'sa-2',
-	status: 'DISABLED',
-};
-
-function renderDrawer(
-	props: Partial<ServiceAccountDrawerProps> = {},
-): ReturnType<typeof render> {
-	return render(
-		<ServiceAccountDrawer
-			account={activeAccount}
-			open
-			onClose={jest.fn()}
-			onSuccess={jest.fn()}
-			{...props}
-		/>,
-	);
-}
-
-describe('ServiceAccountDrawer', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockOnToggleGroupChange = undefined;
-
-		jest.mocked(useListServiceAccountKeys).mockReturnValue(({
-			data: { data: [] },
-			isLoading: false,
-			refetch: jest.fn(),
-		} as unknown) as ReturnType<typeof useListServiceAccountKeys>);
-
-		jest.mocked(useUpdateServiceAccount).mockReturnValue(({
-			mutateAsync: mockUpdate,
-		} as unknown) as ReturnType<typeof useUpdateServiceAccount>);
-
-		jest.mocked(useUpdateServiceAccountStatus).mockReturnValue(({
-			mutateAsync: mockUpdateStatus,
-		} as unknown) as ReturnType<typeof useUpdateServiceAccountStatus>);
-
-		jest.mocked(useCreateServiceAccountKey).mockReturnValue(({
-			mutateAsync: jest.fn(),
-		} as unknown) as ReturnType<typeof useCreateServiceAccountKey>);
-
-		jest.mocked(useRevokeServiceAccountKey).mockReturnValue(({
-			mutateAsync: jest.fn(),
-		} as unknown) as ReturnType<typeof useRevokeServiceAccountKey>);
-
-		jest.mocked(useUpdateServiceAccountKey).mockReturnValue(({
-			mutateAsync: jest.fn(),
-		} as unknown) as ReturnType<typeof useUpdateServiceAccountKey>);
-
-		mockUseRoles.mockReturnValue({
-			roles: managedRoles,
-			isLoading: false,
-			isError: false,
-			error: undefined,
-			refetch: jest.fn(),
-		});
-	});
-
-	it('renders Overview tab by default: editable name input, locked email, Save disabled when not dirty', () => {
-		renderDrawer();
-
-		expect(screen.getByDisplayValue('CI Bot')).toBeInTheDocument();
-		expect(screen.getByText('ci-bot@signoz.io')).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /Save Changes/i })).toBeDisabled();
-	});
-
-	it('editing name enables Save; clicking Save calls updateAccount with correct payload', async () => {
-		const onSuccess = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		mockUpdate.mockResolvedValue({});
-
-		renderDrawer({ onSuccess });
-
-		const nameInput = screen.getByDisplayValue('CI Bot');
-		await user.clear(nameInput);
-		await user.type(nameInput, 'CI Bot Updated');
-
-		const saveBtn = screen.getByRole('button', { name: /Save Changes/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
-		await user.click(saveBtn);
-
-		await waitFor(() => {
-			expect(mockUpdate).toHaveBeenCalledWith({
-				pathParams: { id: 'sa-1' },
-				data: {
-					name: 'CI Bot Updated',
-					email: 'ci-bot@signoz.io',
-					roles: ['signoz-admin'],
-				},
-			});
-			expect(mockToast.success).toHaveBeenCalled();
-			expect(onSuccess).toHaveBeenCalledWith({ closeDrawer: false });
-		});
-	});
-
-	it('changing roles enables Save; clicking Save calls updateAccount with updated roles', async () => {
-		const onSuccess = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		mockUpdate.mockResolvedValue({});
-
-		renderDrawer({ onSuccess });
-
-		const rolesSelect = screen.getByTestId('roles-select');
-		await user.selectOptions(rolesSelect, ['signoz-viewer']);
-
-		const saveBtn = screen.getByRole('button', { name: /Save Changes/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
-		await user.click(saveBtn);
-
-		await waitFor(() => {
-			expect(mockUpdate).toHaveBeenCalledWith(
-				expect.objectContaining({
-					data: expect.objectContaining({
-						roles: expect.arrayContaining(['signoz-admin', 'signoz-viewer']),
-					}),
-				}),
-			);
-		});
-	});
-
-	it('"Disable Service Account" opens confirm dialog; confirming calls updateStatus and onSuccess({ closeDrawer: true })', async () => {
-		const onSuccess = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		mockUpdateStatus.mockResolvedValue({});
-
-		renderDrawer({ onSuccess });
-
-		await user.click(
-			screen.getByRole('button', { name: /Disable Service Account/i }),
-		);
-
-		const dialog = await screen.findByRole('dialog', {
-			name: /Disable service account CI Bot/i,
-		});
-		expect(dialog).toBeInTheDocument();
-
-		const confirmBtns = screen.getAllByRole('button', { name: /^Disable$/i });
-		await user.click(confirmBtns[confirmBtns.length - 1]);
-
-		await waitFor(() => {
-			expect(mockUpdateStatus).toHaveBeenCalledWith({
-				pathParams: { id: 'sa-1' },
-				data: { status: 'DISABLED' },
-			});
-			expect(onSuccess).toHaveBeenCalledWith({ closeDrawer: true });
-		});
-	});
-
-	it('disabled account shows read-only name, no Save button, no Disable button', () => {
-		renderDrawer({ account: disabledAccount });
-
-		expect(
-			screen.queryByRole('button', { name: /Save Changes/i }),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /Disable Service Account/i }),
-		).not.toBeInTheDocument();
-		expect(screen.queryByDisplayValue('CI Bot')).not.toBeInTheDocument();
-		expect(screen.getByText('CI Bot')).toBeInTheDocument();
-	});
-
-	it('switching to Keys tab shows "No keys" empty state', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		renderDrawer();
-
-		await user.click(screen.getByRole('button', { name: /Keys/i }));
-
-		await screen.findByText(/No keys/i);
-	});
-});

frontend/src/components/ServiceAccountDrawer/utils.ts

@@ -1,33 +0,0 @@
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import type { Dayjs } from 'dayjs';
-import dayjs from 'dayjs';
-
-export enum ServiceAccountDrawerTab {
-	Overview = 'overview',
-	Keys = 'keys',
-}
-
-export function formatLastObservedAt(
-	lastObservedAt: string | Date | null | undefined,
-	formatTimezoneAdjustedTimestamp: (ts: string, format: string) => string,
-): string {
-	if (!lastObservedAt) {
-		return '—';
-	}
-	const str =
-		typeof lastObservedAt === 'string'
-			? lastObservedAt
-			: lastObservedAt.toISOString();
-	// Go zero time means the key has never been used
-	if (str.startsWith('0001-01-01')) {
-		return '—';
-	}
-	const d = new Date(str);
-	if (Number.isNaN(d.getTime())) {
-		return '—';
-	}
-	return formatTimezoneAdjustedTimestamp(str, DATE_TIME_FORMATS.DASH_DATETIME);
-}
-
-export const disabledDate = (current: Dayjs): boolean =>
-	!!current && current < dayjs().startOf('day');

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss

@@ -1,218 +0,0 @@
-.sa-table-wrapper {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-	border-radius: 4px;
-}
-
-.sa-table {
-	.ant-table {
-		background: transparent;
-		font-size: 13px;
-	}
-
-	.ant-table-container {
-		border-radius: 0 !important;
-		border: none !important;
-	}
-
-	.ant-table-thead {
-		> tr > th,
-		> tr > td {
-			background: var(--background);
-			font-size: var(--paragraph-small-600-font-size);
-			font-weight: var(--paragraph-small-600-font-weight);
-			line-height: var(--paragraph-small-600-line-height);
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-			color: var(--foreground);
-			padding: var(--padding-2) var(--padding-4);
-			border-bottom: none !important;
-			border-top: none !important;
-
-			&::before {
-				display: none !important;
-			}
-		}
-	}
-
-	.ant-table-tbody {
-		> tr > td {
-			border-bottom: none !important;
-			padding: var(--padding-2) var(--padding-4);
-			background: transparent;
-			transition: none;
-		}
-
-		> tr.sa-table-row--tinted > td {
-			background: rgba(171, 189, 255, 0.02);
-		}
-
-		> tr:hover > td {
-			background: rgba(171, 189, 255, 0.04) !important;
-		}
-	}
-
-	.ant-table-wrapper,
-	.ant-table-container,
-	.ant-spin-nested-loading,
-	.ant-spin-container {
-		border: none !important;
-		box-shadow: none !important;
-	}
-
-	.sa-name-column {
-		.ant-table-column-sorters {
-			justify-content: flex-start;
-			gap: var(--spacing-2);
-		}
-
-		.ant-table-column-title {
-			flex: none;
-		}
-	}
-
-	.sa-status-cell {
-		[data-slot='badge'] {
-			padding: var(--padding-1) var(--padding-2);
-			align-items: center;
-			font-size: var(--uppercase-small-500-font-size);
-			font-weight: var(--uppercase-small-500-font-weight);
-			line-height: 100%;
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-		}
-	}
-}
-
-.sa-name-email-cell {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	height: 22px;
-	overflow: hidden;
-
-	.sa-name {
-		font-size: var(--paragraph-base-500-font-size);
-		font-weight: var(--paragraph-base-500-font-weight);
-		color: var(--foreground);
-		line-height: var(--paragraph-base-500-line-height);
-		letter-spacing: -0.07px;
-		white-space: nowrap;
-		flex-shrink: 0;
-	}
-
-	.sa-email {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l3-foreground-hover);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.07px;
-		flex: 1 0 0;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-}
-
-.sa-roles-cell {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-}
-
-.sa-dash {
-	font-size: var(--paragraph-base-400-font-size);
-	color: var(--l3-foreground-hover);
-}
-
-.sa-empty-state {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: var(--padding-12) var(--padding-4);
-	gap: var(--spacing-4);
-	color: var(--foreground);
-
-	&__emoji {
-		font-size: var(--font-size-2xl);
-		line-height: 1;
-	}
-
-	&__text {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--foreground);
-		margin: 0;
-		line-height: var(--paragraph-base-400-line-height);
-
-		strong {
-			font-weight: var(--font-weight-medium);
-			color: var(--bg-base-white);
-		}
-	}
-}
-
-.sa-table-pagination {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding: var(--padding-2) var(--padding-4);
-
-	.ant-pagination-total-text {
-		margin-right: auto;
-	}
-
-	.sa-pagination-range {
-		font-size: var(--font-size-xs);
-		color: var(--foreground);
-	}
-
-	.sa-pagination-total {
-		font-size: var(--font-size-xs);
-		color: var(--foreground);
-		opacity: 0.5;
-	}
-}
-
-.sa-tooltip {
-	.ant-tooltip-inner {
-		background-color: var(--bg-slate-500);
-		color: var(--foreground);
-		font-size: var(--font-size-xs);
-		line-height: normal;
-		padding: var(--padding-2) var(--padding-3);
-		border-radius: 4px;
-		text-align: left;
-	}
-
-	.ant-tooltip-arrow-content {
-		background-color: var(--bg-slate-500);
-	}
-}
-
-.lightMode {
-	.sa-table {
-		.ant-table-tbody {
-			> tr.sa-table-row--tinted > td {
-				background: rgba(0, 0, 0, 0.015);
-			}
-
-			> tr:hover > td {
-				background: rgba(0, 0, 0, 0.03) !important;
-			}
-		}
-	}
-
-	.sa-empty-state {
-		&__text {
-			strong {
-				color: var(--bg-base-black);
-			}
-		}
-	}
-}

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.tsx

@@ -1,216 +0,0 @@
-import React from 'react';
-import { Badge } from '@signozhq/badge';
-import { Pagination, Table, Tooltip } from 'antd';
-import type { ColumnsType } from 'antd/es/table/interface';
-import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-
-import './ServiceAccountsTable.styles.scss';
-
-interface ServiceAccountsTableProps {
-	data: ServiceAccountRow[];
-	loading: boolean;
-	total: number;
-	currentPage: number;
-	pageSize: number;
-	searchQuery: string;
-	onPageChange: (page: number) => void;
-	onRowClick?: (row: ServiceAccountRow) => void;
-}
-
-function NameEmailCell({
-	name,
-	email,
-}: {
-	name: string;
-	email: string;
-}): JSX.Element {
-	return (
-		<div className="sa-name-email-cell">
-			{name && (
-				<span className="sa-name" title={name}>
-					{name}
-				</span>
-			)}
-			<Tooltip title={email} overlayClassName="sa-tooltip">
-				<span className="sa-email">{email}</span>
-			</Tooltip>
-		</div>
-	);
-}
-
-function RolesCell({ roles }: { roles: string[] }): JSX.Element {
-	if (!roles || roles.length === 0) {
-		return <span className="sa-dash">—</span>;
-	}
-	const first = roles[0];
-	const overflow = roles.length - 1;
-	const tooltipContent = roles.slice(1).join(', ');
-
-	return (
-		<div className="sa-roles-cell">
-			<Badge color="vanilla">{first}</Badge>
-			{overflow > 0 && (
-				<Tooltip
-					title={tooltipContent}
-					overlayClassName="sa-tooltip"
-					overlayStyle={{ maxWidth: '600px' }}
-				>
-					<Badge color="vanilla" variant="outline" className="sa-status-badge">
-						+{overflow}
-					</Badge>
-				</Tooltip>
-			)}
-		</div>
-	);
-}
-
-function StatusBadge({ status }: { status: string }): JSX.Element {
-	if (status?.toUpperCase() === 'ACTIVE') {
-		return (
-			<Badge color="forest" variant="outline">
-				ACTIVE
-			</Badge>
-		);
-	}
-	return (
-		<Badge color="vanilla" variant="outline" className="sa-status-badge">
-			DISABLED
-		</Badge>
-	);
-}
-
-function ServiceAccountsEmptyState({
-	searchQuery,
-}: {
-	searchQuery: string;
-}): JSX.Element {
-	return (
-		<div className="sa-empty-state">
-			<span className="sa-empty-state__emoji" role="img" aria-label="monocle face">
-				🧐
-			</span>
-			{searchQuery ? (
-				<p className="sa-empty-state__text">
-					No results for <strong>{searchQuery}</strong>
-				</p>
-			) : (
-				<p className="sa-empty-state__text">
-					No service accounts. Start by creating one to manage keys.
-				</p>
-			)}
-		</div>
-	);
-}
-
-function ServiceAccountsTable({
-	data,
-	loading,
-	total,
-	currentPage,
-	pageSize,
-	searchQuery,
-	onPageChange,
-	onRowClick,
-}: ServiceAccountsTableProps): JSX.Element {
-	const columns: ColumnsType<ServiceAccountRow> = [
-		{
-			title: 'Name / Email',
-			dataIndex: 'name',
-			key: 'name',
-			className: 'sa-name-column',
-			sorter: (a, b): number => a.email.localeCompare(b.email),
-			render: (_, record): JSX.Element => (
-				<NameEmailCell name={record.name} email={record.email} />
-			),
-		},
-		{
-			title: 'Roles',
-			dataIndex: 'roles',
-			key: 'roles',
-			width: 420,
-			render: (roles: string[]): JSX.Element => <RolesCell roles={roles} />,
-		},
-		{
-			title: 'Status',
-			dataIndex: 'status',
-			key: 'status',
-			width: 120,
-			align: 'right' as const,
-			className: 'sa-status-cell',
-			sorter: (a, b): number =>
-				(a.status?.toUpperCase() === 'ACTIVE' ? 0 : 1) -
-				(b.status?.toUpperCase() === 'ACTIVE' ? 0 : 1),
-			render: (status: string): JSX.Element => <StatusBadge status={status} />,
-		},
-	];
-
-	const showPaginationTotal = (_total: number, range: number[]): JSX.Element => (
-		<>
-			<span className="sa-pagination-range">
-				{range[0]} &#8212; {range[1]}
-			</span>
-			<span className="sa-pagination-total"> of {_total}</span>
-		</>
-	);
-
-	return (
-		<div className="sa-table-wrapper">
-			<Table<ServiceAccountRow>
-				columns={columns}
-				dataSource={data}
-				rowKey="id"
-				loading={loading}
-				pagination={false}
-				rowClassName={(_, index): string =>
-					index % 2 === 0 ? 'sa-table-row--tinted' : ''
-				}
-				showSorterTooltip={false}
-				locale={{
-					emptyText: <ServiceAccountsEmptyState searchQuery={searchQuery} />,
-				}}
-				className="sa-table"
-				onRow={(
-					record,
-				): {
-					onClick?: () => void;
-					onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
-					style?: React.CSSProperties;
-					tabIndex?: number;
-					role?: string;
-					'aria-label'?: string;
-				} => {
-					if (!onRowClick) {
-						return {};
-					}
-
-					return {
-						onClick: (): void => onRowClick(record),
-						onKeyDown: (e: React.KeyboardEvent<HTMLElement>): void => {
-							if (e.key === 'Enter' || e.key === ' ') {
-								e.preventDefault();
-								onRowClick(record);
-							}
-						},
-						style: { cursor: 'pointer' },
-						tabIndex: 0,
-						role: 'button',
-						'aria-label': `View service account ${record.name || record.email}`,
-					};
-				}}
-			/>
-			{total > pageSize && (
-				<Pagination
-					current={currentPage}
-					pageSize={pageSize}
-					total={total}
-					showTotal={showPaginationTotal}
-					showSizeChanger={false}
-					onChange={onPageChange}
-					className="sa-table-pagination"
-				/>
-			)}
-		</div>
-	);
-}
-
-export default ServiceAccountsTable;

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

@@ -1,110 +0,0 @@
-import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import ServiceAccountsTable from '../ServiceAccountsTable';
-
-const mockActiveAccount: ServiceAccountRow = {
-	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',
-};
-
-const mockDisabledAccount: ServiceAccountRow = {
-	id: 'sa-2',
-	name: 'Legacy Bot',
-	email: 'legacy@signoz.io',
-	roles: ['signoz-viewer', 'signoz-editor', 'billing-manager'],
-	status: 'DISABLED',
-	createdAt: '2025-06-01T00:00:00Z',
-	updatedAt: '2025-12-01T00:00:00Z',
-};
-
-const defaultProps = {
-	loading: false,
-	total: 1,
-	currentPage: 1,
-	pageSize: 20,
-	searchQuery: '',
-	onPageChange: jest.fn(),
-	onRowClick: jest.fn(),
-};
-
-describe('ServiceAccountsTable', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders name, email, role badge, and ACTIVE status badge', () => {
-		render(<ServiceAccountsTable {...defaultProps} data={[mockActiveAccount]} />);
-
-		expect(screen.getByText('CI Bot')).toBeInTheDocument();
-		expect(screen.getByText('ci-bot@signoz.io')).toBeInTheDocument();
-		expect(screen.getByText('signoz-admin')).toBeInTheDocument();
-		expect(screen.getByText('ACTIVE')).toBeInTheDocument();
-	});
-
-	it('shows DISABLED badge and +2 overflow badge for multi-role accounts', () => {
-		render(
-			<ServiceAccountsTable {...defaultProps} data={[mockDisabledAccount]} />,
-		);
-
-		expect(screen.getByText('DISABLED')).toBeInTheDocument();
-		expect(screen.getByText('signoz-viewer')).toBeInTheDocument();
-		expect(screen.getByText('+2')).toBeInTheDocument();
-	});
-
-	it('calls onRowClick with the correct account when a row is clicked', async () => {
-		const onRowClick = jest.fn() as jest.MockedFunction<
-			(row: ServiceAccountRow) => void
-		>;
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<ServiceAccountsTable
-				{...defaultProps}
-				data={[mockActiveAccount]}
-				onRowClick={onRowClick}
-			/>,
-		);
-
-		await user.click(
-			screen.getByRole('button', { name: /View service account CI Bot/i }),
-		);
-
-		expect(onRowClick).toHaveBeenCalledTimes(1);
-		expect(onRowClick).toHaveBeenCalledWith(
-			expect.objectContaining({ id: 'sa-1', email: 'ci-bot@signoz.io' }),
-		);
-	});
-
-	it('shows "No service accounts" empty state when data is empty and no search query', () => {
-		render(
-			<ServiceAccountsTable
-				{...defaultProps}
-				data={[]}
-				total={0}
-				searchQuery=""
-			/>,
-		);
-
-		expect(screen.getByText(/No service accounts/i)).toBeInTheDocument();
-	});
-
-	it('shows "No results for {query}" empty state when search is active', () => {
-		render(
-			<ServiceAccountsTable
-				{...defaultProps}
-				data={[]}
-				total={0}
-				searchQuery="ghost"
-			/>,
-		);
-
-		expect(screen.getByText(/No results for/i)).toBeInTheDocument();
-		expect(screen.getByText('ghost')).toBeInTheDocument();
-	});
-});

frontend/src/constants/localStorage.ts

@@ -35,5 +35,4 @@ export enum LOCALSTORAGE {
 	LAST_USED_CUSTOM_TIME_RANGES = 'LAST_USED_CUSTOM_TIME_RANGES',
 	SHOW_FREQUENCY_CHART = 'SHOW_FREQUENCY_CHART',
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
-	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
 }

frontend/src/constants/routes.ts

@@ -86,7 +86,6 @@ const ROUTES = {
 	METER_EXPLORER_VIEWS: '/meter/explorer/views',
 	HOME_PAGE: '/',
 	PUBLIC_DASHBOARD: '/public/dashboard/:dashboardId',
-	SERVICE_ACCOUNTS_SETTINGS: '/settings/service-accounts',
 } as const;
 
 export default ROUTES;

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -9,7 +9,6 @@ import {
 } from 'hooks/dashboard/useDashboardVariables';
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
 import { updateDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
 import {
 	enqueueDescendantsOfVariable,
@@ -30,7 +29,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 		updateLocalStorageDashboardVariables,
 	} = useDashboard();
 
-	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
+	const { updateUrlVariable } = useVariablesFromUrl();
 
 	const { dashboardVariables } = useDashboardVariables();
 	const dashboardId = useDashboardVariablesSelector(
@@ -50,15 +49,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 		(state) => state.globalTime,
 	);
 
-	useEffect(() => {
-		// Initialize variables with default values if not in URL
-		initializeDefaultVariables(
-			dashboardVariables,
-			getUrlVariables,
-			updateUrlVariable,
-		);
-	}, [getUrlVariables, updateUrlVariable, dashboardVariables]);
-
 	// Memoize the order key to avoid unnecessary triggers
 	const variableOrderKey = useMemo(() => {
 		const queryVariableOrderKey = dependencyData?.order?.join(',') ?? '';

frontend/src/container/Home/Home.tsx

@@ -6,16 +6,13 @@ import { Button, Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import listUserPreferences from 'api/v1/user/preferences/list';
 import updateUserPreferenceAPI from 'api/v1/user/preferences/name/update';
-import AnnouncementBanner from 'components/AnnouncementBanner';
 import Header from 'components/Header/Header';
 import { ENTITY_VERSION_V5 } from 'constants/app';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
 import { getMetricsListQuery } from 'container/MetricsExplorer/Summary/utils';
-import { IS_SERVICE_ACCOUNTS_ENABLED } from 'container/ServiceAccountsSettings/config';
 import { useGetMetricsList } from 'hooks/metricsExplorer/useGetMetricsList';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import history from 'lib/history';
@@ -292,18 +289,6 @@ export default function Home(): JSX.Element {
 
 	return (
 		<div className="home-container">
-			{IS_SERVICE_ACCOUNTS_ENABLED && (
-				<AnnouncementBanner
-					type="warning"
-					storageKey={LOCALSTORAGE.DISMISSED_API_KEYS_DEPRECATION_BANNER}
-					message={`<strong>API Keys</strong> have been deprecated and replaced by <strong>Service Accounts</strong>. Please migrate to Service Accounts for programmatic API access.`}
-					action={{
-						label: 'Go to Service Accounts',
-						onClick: (): void => history.push(ROUTES.SERVICE_ACCOUNTS_SETTINGS),
-					}}
-				/>
-			)}
-
 			<div className="sticky-header">
 				<Header
 					leftComponent={

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -13,7 +13,6 @@ import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal
 import MembersTable, { MemberRow } from 'components/MembersTable/MembersTable';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useAppContext } from 'providers/App/App';
-import { toISOString } from 'utils/app';
 
 import { FilterMode, INVITE_PREFIX, MemberStatus } from './utils';
 
@@ -62,8 +61,8 @@ function MembersSettings(): JSX.Element {
 			email: user.email,
 			role: user.role,
 			status: MemberStatus.Active,
-			joinedOn: toISOString(user.createdAt),
-			updatedAt: toISOString(user?.updatedAt),
+			joinedOn: user.createdAt ? String(user.createdAt) : null,
+			updatedAt: user?.updatedAt ? String(user.updatedAt) : null,
 		}));
 
 		const pendingInvites: MemberRow[] = (invitesData?.data ?? []).map(
@@ -73,7 +72,7 @@ function MembersSettings(): JSX.Element {
 				email: invite.email,
 				role: invite.role,
 				status: MemberStatus.Invited,
-				joinedOn: toISOString(invite.createdAt),
+				joinedOn: invite.createdAt ? String(invite.createdAt) : null,
 				token: invite.token ?? null,
 			}),
 		);
@@ -120,7 +119,7 @@ function MembersSettings(): JSX.Element {
 			return;
 		}
 		const maxPage = Math.ceil(filteredMembers.length / PAGE_SIZE);
-		if (currentPage > maxPage || currentPage < 1) {
+		if (currentPage > maxPage) {
 			setPage(maxPage);
 		}
 	}, [filteredMembers.length, currentPage, setPage]);
@@ -210,7 +209,6 @@ function MembersSettings(): JSX.Element {
 
 					<div className="members-settings__search">
 						<Input
-							type="search"
 							placeholder="Search by name, email, or role..."
 							value={searchQuery}
 							onChange={(e): void => {
@@ -219,7 +217,6 @@ function MembersSettings(): JSX.Element {
 							}}
 							className="members-search-input"
 							color="secondary"
-							name="members-search"
 						/>
 					</div>
 

frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.styles.scss

@@ -1,5 +1,7 @@
 .column-unit-selector {
-	margin-top: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
 
 	.heading {
 		color: var(--bg-vanilla-400);
@@ -30,6 +32,11 @@
 			width: 100%;
 		}
 	}
+	&-content {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
 }
 
 .lightMode {

frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx

@@ -72,22 +72,24 @@ export function ColumnUnitSelector(
 	return (
 		<section className="column-unit-selector">
 			<Typography.Text className="heading">Column Units</Typography.Text>
-			{aggregationQueries.map(({ value, label }) => {
-				const baseQueryName = value.split('.')[0];
-				return (
-					<YAxisUnitSelectorV2
-						value={columnUnits[value] || ''}
-						onSelect={(unitValue: string): void =>
-							handleColumnUnitSelect(value, unitValue)
-						}
-						fieldLabel={label}
-						key={value}
-						selectedQueryName={baseQueryName}
-						// Update the column unit value automatically only in create mode
-						shouldUpdateYAxisUnit={isNewDashboard}
-					/>
-				);
-			})}
+			<div className="column-unit-selector-content">
+				{aggregationQueries.map(({ value, label }) => {
+					const baseQueryName = value.split('.')[0];
+					return (
+						<YAxisUnitSelectorV2
+							value={columnUnits[value] || ''}
+							onSelect={(unitValue: string): void =>
+								handleColumnUnitSelect(value, unitValue)
+							}
+							fieldLabel={label}
+							key={value}
+							selectedQueryName={baseQueryName}
+							// Update the column unit value automatically only in create mode
+							shouldUpdateYAxisUnit={isNewDashboard}
+						/>
+					);
+				})}
+			</div>
 		</section>
 	);
 }

frontend/src/container/NewWidget/RightContainer/ContextLinks/__test__/ContextLinks.test.tsx

@@ -56,9 +56,6 @@ describe('ContextLinks Component', () => {
 				/>,
 			);
 
-			// Check that the component renders
-			expect(screen.getByText('Context Links')).toBeInTheDocument();
-
 			// Check that the add button is present
 			expect(
 				screen.getByRole('button', { name: /context link/i }),

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

@@ -14,7 +14,7 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Button, Modal, Typography } from 'antd';
+import { Button, Modal } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical, Pencil, Plus, Trash2 } from 'lucide-react';
 import {
@@ -134,11 +134,16 @@ function ContextLinks({
 
 	return (
 		<div className="context-links-container">
-			<Typography.Text className="context-links-text">
-				Context Links
-			</Typography.Text>
-
 			<div className="context-links-list">
+				<Button
+					type="default"
+					className="add-context-link-button"
+					icon={<Plus size={12} />}
+					style={{ width: '100%' }}
+					onClick={handleAddContextLink}
+				>
+					Add Context Link
+				</Button>
 				<OverlayScrollbar>
 					<DndContext
 						sensors={sensors}
@@ -160,16 +165,6 @@ function ContextLinks({
 						</SortableContext>
 					</DndContext>
 				</OverlayScrollbar>
-
-				{/* button to add context link */}
-				<Button
-					type="primary"
-					className="add-context-link-button"
-					icon={<Plus size={12} />}
-					onClick={handleAddContextLink}
-				>
-					Context Link
-				</Button>
 			</div>
 
 			<Modal

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

@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
-	margin: 12px;
 }
 
 .context-links-text {
@@ -110,10 +109,7 @@
 }
 
 .add-context-link-button {
-	display: flex;
-	align-items: center;
-	margin: auto;
-	width: fit-content;
+	width: 100%;
 }
 
 .lightMode {

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

@@ -1,6 +1,7 @@
 .right-container {
 	display: flex;
 	flex-direction: column;
+	padding-bottom: 48px;
 
 	.header {
 		display: flex;
@@ -24,14 +25,14 @@
 			letter-spacing: -0.07px;
 		}
 	}
-
-	.name-description {
+	.control-container {
 		display: flex;
 		flex-direction: column;
-		padding: 12px 12px 16px 12px;
-		border-top: 1px solid var(--bg-slate-500);
-		border-bottom: 1px solid var(--bg-slate-500);
 		gap: 8px;
+	}
+
+	.name-description {
+		padding: 0 0 4px 0;
 
 		.typography {
 			color: var(--bg-vanilla-400);
@@ -88,9 +89,6 @@
 	.panel-config {
 		display: flex;
 		flex-direction: column;
-		padding: 12px 12px 16px 12px;
-		gap: 8px;
-		border-bottom: 1px solid var(--bg-slate-500);
 
 		.typography {
 			color: var(--bg-vanilla-400);
@@ -104,6 +102,7 @@
 		}
 
 		.panel-type-select {
+			width: 100%;
 			.ant-select-selector {
 				display: flex;
 				height: 32px;
@@ -137,7 +136,6 @@
 		}
 
 		.fill-gaps {
-			margin-top: 16px;
 			display: flex;
 			padding: 12px;
 			justify-content: space-between;
@@ -156,31 +154,24 @@
 				letter-spacing: 0.52px;
 				text-transform: uppercase;
 			}
+			.fill-gaps-text-description {
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 400;
+				opacity: 0.6;
+				line-height: 16px; /* 133.333% */
+			}
 		}
 
 		.log-scale,
-		.decimal-precision-selector {
-			margin-top: 16px;
-			display: flex;
-			justify-content: space-between;
-			flex-direction: column;
-			gap: 8px;
-		}
-
+		.decimal-precision-selector,
 		.legend-position {
-			margin-top: 16px;
-			display: flex;
 			justify-content: space-between;
-			flex-direction: column;
-			gap: 8px;
-		}
-
-		.legend-colors {
-			margin-top: 16px;
 		}
 
 		.panel-time-text {
-			margin-top: 16px;
 			color: var(--bg-vanilla-400);
 			font-family: 'Space Mono';
 			font-size: 13px;
@@ -193,7 +184,6 @@
 
 		.y-axis-unit-selector,
 		.y-axis-unit-selector-v2 {
-			margin-top: 16px;
 			display: flex;
 			flex-direction: column;
 			gap: 8px;
@@ -278,11 +268,8 @@
 		}
 
 		.stack-chart {
-			margin-top: 16px;
-			display: flex;
+			flex-direction: row;
 			justify-content: space-between;
-			gap: 8px;
-
 			.label {
 				color: var(--bg-vanilla-400);
 				font-family: 'Space Mono';
@@ -296,11 +283,6 @@
 		}
 
 		.bucket-config {
-			margin-top: 16px;
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-
 			.label {
 				color: var(--bg-vanilla-400);
 				font-family: 'Space Mono';
@@ -352,16 +334,13 @@
 		}
 	}
 
-	.context-links {
-		border-bottom: 1px solid var(--bg-slate-500);
-	}
-
 	.alerts {
 		display: flex;
-		padding: 12px;
 		align-items: center;
 		justify-content: space-between;
-		border-bottom: 1px solid var(--bg-slate-500);
+		padding: 12px;
+		min-height: 44px;
+		border-top: 1px solid var(--bg-slate-500);
 		cursor: pointer;
 
 		.left-section {
@@ -387,6 +366,16 @@
 			color: var(--bg-vanilla-400);
 		}
 	}
+
+	.context-links {
+		padding: 12px 12px 16px 12px;
+		border-bottom: 1px solid var(--bg-slate-500);
+	}
+
+	.thresholds-section {
+		padding: 12px 12px 16px 12px;
+		border-top: 1px solid var(--bg-slate-500);
+	}
 }
 
 .select-option {
@@ -418,9 +407,6 @@
 		}
 
 		.name-description {
-			border-top: 1px solid var(--bg-vanilla-300);
-			border-bottom: 1px solid var(--bg-vanilla-300);
-
 			.typography {
 				color: var(--bg-ink-400);
 			}
@@ -441,8 +427,6 @@
 		}
 
 		.panel-config {
-			border-bottom: 1px solid var(--bg-vanilla-300);
-
 			.typography {
 				color: var(--bg-ink-400);
 			}
@@ -478,6 +462,9 @@
 				.fill-gaps-text {
 					color: var(--bg-ink-400);
 				}
+				.fill-gaps-text-description {
+					color: var(--bg-ink-400);
+				}
 			}
 
 			.bucket-config {
@@ -530,7 +517,7 @@
 		}
 
 		.alerts {
-			border-bottom: 1px solid var(--bg-vanilla-300);
+			border-top: 1px solid var(--bg-vanilla-300);
 
 			.left-section {
 				.bell-icon {
@@ -549,6 +536,10 @@
 		.context-links {
 			border-bottom: 1px solid var(--bg-vanilla-300);
 		}
+
+		.thresholds-section {
+			border-top: 1px solid var(--bg-vanilla-300);
+		}
 	}
 
 	.select-option {

frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.styles.scss

@@ -1,5 +1,4 @@
 .threshold-selector-container {
-	padding: 12px;
 	padding-bottom: 80px;
 
 	.threshold-select {

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

@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Typography } from 'antd';
+import { Button } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryLabels } from 'hooks/useGetQueryLabels';
-import { Antenna, Plus } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { v4 as uuid } from 'uuid';
 
 import Threshold from './Threshold';
@@ -68,11 +68,14 @@ function ThresholdSelector({
 		<DndProvider backend={HTML5Backend}>
 			<div className="threshold-selector-container">
 				<div className="threshold-select" onClick={addThresholdHandler}>
-					<div className="left-section">
-						<Antenna size={14} className="icon" />
-						<Typography.Text className="text">Thresholds</Typography.Text>
-					</div>
-					<Plus size={14} onClick={addThresholdHandler} className="icon" />
+					<Button
+						type="default"
+						icon={<Plus size={14} />}
+						style={{ width: '100%' }}
+						onClick={addThresholdHandler}
+					>
+						Add Threshold
+					</Button>
 				</div>
 				{thresholds.map((threshold, idx) => (
 					<Threshold

frontend/src/container/NewWidget/RightContainer/components/SettingsSection/SettingsSection.styles.scss

@@ -0,0 +1,68 @@
+.settings-section {
+	border-top: 1px solid var(--bg-slate-500);
+}
+
+.settings-section-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	padding: 12px 12px;
+	min-height: 44px;
+	background: transparent;
+	border: none;
+	outline: none;
+	cursor: pointer;
+
+	.settings-section-title {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		color: var(--bg-vanilla-400);
+		font-family: 'Space Mono';
+		font-size: 13px;
+		font-weight: 400;
+		text-transform: uppercase;
+	}
+
+	.chevron-icon {
+		color: var(--bg-vanilla-400);
+		transition: transform 0.2s ease-in-out;
+
+		&.open {
+			transform: rotate(180deg);
+		}
+	}
+}
+
+.settings-section-content {
+	padding: 0 12px 0 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	max-height: 0;
+	overflow: hidden;
+	opacity: 0;
+	transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
+
+	&.open {
+		padding-bottom: 24px;
+		max-height: 1000px;
+		opacity: 1;
+	}
+}
+
+.lightMode {
+	.settings-section-header {
+		.chevron-icon {
+			color: var(--bg-ink-400);
+		}
+		.settings-section-title {
+			color: var(--bg-ink-400);
+		}
+	}
+
+	.settings-section {
+		border-top: 1px solid var(--bg-vanilla-300);
+	}
+}

frontend/src/container/NewWidget/RightContainer/components/SettingsSection/SettingsSection.tsx

@@ -0,0 +1,51 @@
+import { ReactNode, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+import './SettingsSection.styles.scss';
+
+export interface SettingsSectionProps {
+	title: string;
+	defaultOpen?: boolean;
+	children: ReactNode;
+	icon?: ReactNode;
+}
+
+function SettingsSection({
+	title,
+	defaultOpen = false,
+	children,
+	icon,
+}: SettingsSectionProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+
+	const toggleOpen = (): void => {
+		setIsOpen((prev) => !prev);
+	};
+
+	return (
+		<section className="settings-section">
+			<button
+				type="button"
+				className="settings-section-header"
+				onClick={toggleOpen}
+			>
+				<span className="settings-section-title">
+					{icon ? icon : null} {title}
+				</span>
+				<ChevronDown
+					size={16}
+					className={isOpen ? 'chevron-icon open' : 'chevron-icon'}
+				/>
+			</button>
+			<div
+				className={
+					isOpen ? 'settings-section-content open' : 'settings-section-content'
+				}
+			>
+				{children}
+			</div>
+		</section>
+	);
+}
+
+export default SettingsSection;

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -14,7 +14,6 @@ import {
 	Input,
 	InputNumber,
 	Select,
-	Space,
 	Switch,
 	Typography,
 } from 'antd';
@@ -28,9 +27,16 @@ import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
+	Antenna,
+	Axis3D,
 	ConciergeBell,
+	Layers,
+	LayoutDashboard,
 	LineChart,
+	Link,
+	Pencil,
 	Plus,
+	SlidersHorizontal,
 	Spline,
 	SquareArrowOutUpRight,
 } from 'lucide-react';
@@ -46,6 +52,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { ColumnUnitSelector } from './ColumnUnitSelector/ColumnUnitSelector';
+import SettingsSection from './components/SettingsSection/SettingsSection';
 import {
 	panelTypeVsBucketConfig,
 	panelTypeVsColumnUnitPreferences,
@@ -178,6 +185,21 @@ function RightContainer({
 		}));
 	}, [dashboardVariables]);
 
+	const isAxisSectionVisible = useMemo(() => allowSoftMinMax || allowLogScale, [
+		allowSoftMinMax,
+		allowLogScale,
+	]);
+
+	const isFormattingSectionVisible = useMemo(
+		() => allowYAxisUnit || allowDecimalPrecision || allowPanelColumnPreference,
+		[allowYAxisUnit, allowDecimalPrecision, allowPanelColumnPreference],
+	);
+
+	const isLegendSectionVisible = useMemo(
+		() => allowLegendPosition || allowLegendColors,
+		[allowLegendPosition, allowLegendColors],
+	);
+
 	const updateCursorAndDropdown = (value: string, pos: number): void => {
 		setCursorPos(pos);
 		const lastDollar = value.lastIndexOf('$', pos - 1);
@@ -193,6 +215,15 @@ function RightContainer({
 		}, 0);
 	};
 
+	const decimapPrecisionOptions = useMemo(() => {
+		return [
+			{ label: '0 decimals', value: PrecisionOptionsEnum.ZERO },
+			{ label: '1 decimal', value: PrecisionOptionsEnum.ONE },
+			{ label: '2 decimals', value: PrecisionOptionsEnum.TWO },
+			{ label: '3 decimals', value: PrecisionOptionsEnum.THREE },
+		];
+	}, []);
+
 	const handleInputCursor = (): void => {
 		const pos = inputRef.current?.input?.selectionStart ?? 0;
 		updateCursorAndDropdown(inputValue, pos);
@@ -263,269 +294,297 @@ function RightContainer({
 		<div className="right-container">
 			<section className="header">
 				<div className="purple-dot" />
-				<Typography.Text className="header-text">Panel details</Typography.Text>
+				<Typography.Text className="header-text">Panel Settings</Typography.Text>
 			</section>
-			<section className="name-description">
-				<Typography.Text className="typography">Name</Typography.Text>
-				<AutoComplete
-					options={dashboardVariableOptions}
-					value={inputValue}
-					onChange={onInputChange}
-					onSelect={onSelect}
-					filterOption={filterOption}
-					style={{ width: '100%' }}
-					getPopupContainer={popupContainer}
-					placeholder="Enter the panel name here..."
-					open={autoCompleteOpen}
-				>
-					<Input
-						rootClassName="name-input"
-						ref={inputRef}
-						onSelect={handleInputCursor}
-						onClick={handleInputCursor}
-						onBlur={(): void => setAutoCompleteOpen(false)}
-					/>
-				</AutoComplete>
-				<Typography.Text className="typography">Description</Typography.Text>
-				<TextArea
-					placeholder="Enter the panel description here..."
-					bordered
-					allowClear
-					value={description}
-					onChange={(event): void =>
-						onChangeHandler(setDescription, event.target.value)
-					}
-					rootClassName="description-input"
-				/>
-			</section>
-			<section className="panel-config">
-				<Typography.Text className="typography">Panel Type</Typography.Text>
-				<Select
-					onChange={setGraphHandler}
-					value={selectedGraph}
-					style={{ width: '100%' }}
-					className="panel-type-select"
-					data-testid="panel-change-select"
-					data-stacking-state={stackedBarChart ? 'true' : 'false'}
-				>
-					{graphTypes.map((item) => (
-						<Option key={item.name} value={item.name}>
-							<div className="select-option">
-								<div className="icon">{item.icon}</div>
-								<Typography.Text className="display">{item.display}</Typography.Text>
-							</div>
-						</Option>
-					))}
-				</Select>
 
-				{allowFillSpans && (
-					<Space className="fill-gaps">
-						<Typography className="fill-gaps-text">Fill gaps</Typography>
-						<Switch
-							checked={isFillSpans}
-							size="small"
-							onChange={(checked): void => setIsFillSpans(checked)}
+			<SettingsSection title="General" defaultOpen icon={<Pencil size={14} />}>
+				<section className="name-description control-container">
+					<Typography.Text className="typography">Name</Typography.Text>
+					<AutoComplete
+						options={dashboardVariableOptions}
+						value={inputValue}
+						onChange={onInputChange}
+						onSelect={onSelect}
+						filterOption={filterOption}
+						style={{ width: '100%' }}
+						getPopupContainer={popupContainer}
+						placeholder="Enter the panel name here..."
+						open={autoCompleteOpen}
+					>
+						<Input
+							rootClassName="name-input"
+							ref={inputRef}
+							onSelect={handleInputCursor}
+							onClick={handleInputCursor}
+							onBlur={(): void => setAutoCompleteOpen(false)}
 						/>
-					</Space>
-				)}
-
-				{allowPanelTimePreference && (
-					<>
-						<Typography.Text className="panel-time-text">
-							Panel Time Preference
-						</Typography.Text>
-						<TimePreference
-							{...{
-								selectedTime,
-								setSelectedTime,
-							}}
-						/>
-					</>
-				)}
-
-				{allowPanelColumnPreference && (
-					<ColumnUnitSelector
-						columnUnits={columnUnits}
-						setColumnUnits={setColumnUnits}
-						isNewDashboard={isNewDashboard}
-					/>
-				)}
-
-				{allowYAxisUnit && (
-					<DashboardYAxisUnitSelectorWrapper
-						onSelect={setYAxisUnit}
-						value={yAxisUnit || ''}
-						fieldLabel={
-							selectedGraphType === PanelDisplay.VALUE ||
-							selectedGraphType === PanelDisplay.PIE
-								? 'Unit'
-								: 'Y Axis Unit'
+					</AutoComplete>
+					<Typography.Text className="typography">Description</Typography.Text>
+					<TextArea
+						placeholder="Enter the panel description here..."
+						bordered
+						allowClear
+						value={description}
+						onChange={(event): void =>
+							onChangeHandler(setDescription, event.target.value)
 						}
-						// Only update the y-axis unit value automatically in create mode
-						shouldUpdateYAxisUnit={isNewDashboard}
+						rootClassName="description-input"
 					/>
-				)}
+				</section>
+			</SettingsSection>
 
-				{allowDecimalPrecision && (
-					<section className="decimal-precision-selector">
-						<Typography.Text className="typography">
-							Decimal Precision
-						</Typography.Text>
+			<section className="panel-config">
+				<SettingsSection
+					title="Visualization"
+					defaultOpen
+					icon={<LayoutDashboard size={14} />}
+				>
+					<section className="panel-type control-container">
+						<Typography.Text className="typography">Panel Type</Typography.Text>
 						<Select
-							options={[
-								{ label: '0 decimals', value: PrecisionOptionsEnum.ZERO },
-								{ label: '1 decimal', value: PrecisionOptionsEnum.ONE },
-								{ label: '2 decimals', value: PrecisionOptionsEnum.TWO },
-								{ label: '3 decimals', value: PrecisionOptionsEnum.THREE },
-								{ label: '4 decimals', value: PrecisionOptionsEnum.FOUR },
-								{ label: 'Full Precision', value: PrecisionOptionsEnum.FULL },
-							]}
-							value={decimalPrecision}
-							style={{ width: '100%' }}
+							onChange={setGraphHandler}
+							value={selectedGraph}
 							className="panel-type-select"
-							defaultValue={PrecisionOptionsEnum.TWO}
-							onChange={(val: PrecisionOption): void => setDecimalPrecision(val)}
-						/>
+							data-testid="panel-change-select"
+							data-stacking-state={stackedBarChart ? 'true' : 'false'}
+						>
+							{graphTypes.map((item) => (
+								<Option key={item.name} value={item.name}>
+									<div className="select-option">
+										<div className="icon">{item.icon}</div>
+										<Typography.Text className="display">{item.display}</Typography.Text>
+									</div>
+								</Option>
+							))}
+						</Select>
 					</section>
-				)}
 
-				{allowSoftMinMax && (
-					<section className="soft-min-max">
-						<section className="container">
-							<Typography.Text className="text">Soft Min</Typography.Text>
-							<InputNumber
-								type="number"
-								value={softMin}
-								onChange={softMinHandler}
-								rootClassName="input"
+					{allowPanelTimePreference && (
+						<section className="panel-time-preference control-container">
+							<Typography.Text className="panel-time-text">
+								Panel Time Preference
+							</Typography.Text>
+							<TimePreference
+								{...{
+									selectedTime,
+									setSelectedTime,
+								}}
 							/>
 						</section>
-						<section className="container">
-							<Typography.Text className="text">Soft Max</Typography.Text>
-							<InputNumber
-								value={softMax}
-								type="number"
-								rootClassName="input"
-								onChange={softMaxHandler}
+					)}
+
+					{allowStackingBarChart && (
+						<section className="stack-chart control-container">
+							<Typography.Text className="label">Stack series</Typography.Text>
+							<Switch
+								checked={stackedBarChart}
+								size="small"
+								onChange={(checked): void => setStackedBarChart(checked)}
 							/>
 						</section>
-					</section>
+					)}
+
+					{allowFillSpans && (
+						<section className="fill-gaps">
+							<div className="fill-gaps-text-container">
+								<Typography className="fill-gaps-text">Fill gaps</Typography>
+								<Typography.Text className="fill-gaps-text-description">
+									Fill gaps in data with 0 for continuity
+								</Typography.Text>
+							</div>
+							<Switch
+								checked={isFillSpans}
+								size="small"
+								onChange={(checked): void => setIsFillSpans(checked)}
+							/>
+						</section>
+					)}
+				</SettingsSection>
+
+				{isFormattingSectionVisible && (
+					<SettingsSection
+						title="Formatting & Units"
+						icon={<SlidersHorizontal size={14} />}
+					>
+						{allowYAxisUnit && (
+							<DashboardYAxisUnitSelectorWrapper
+								onSelect={setYAxisUnit}
+								value={yAxisUnit || ''}
+								fieldLabel={
+									selectedGraphType === PanelDisplay.VALUE ||
+									selectedGraphType === PanelDisplay.PIE
+										? 'Unit'
+										: 'Y Axis Unit'
+								}
+								// Only update the y-axis unit value automatically in create mode
+								shouldUpdateYAxisUnit={isNewDashboard}
+							/>
+						)}
+
+						{allowDecimalPrecision && (
+							<section className="decimal-precision-selector control-container">
+								<Typography.Text className="typography">
+									Decimal Precision
+								</Typography.Text>
+								<Select
+									options={decimapPrecisionOptions}
+									value={decimalPrecision}
+									style={{ width: '100%' }}
+									className="panel-type-select"
+									defaultValue={PrecisionOptionsEnum.TWO}
+									onChange={(val: PrecisionOption): void => setDecimalPrecision(val)}
+								/>
+							</section>
+						)}
+
+						{allowPanelColumnPreference && (
+							<ColumnUnitSelector
+								columnUnits={columnUnits}
+								setColumnUnits={setColumnUnits}
+								isNewDashboard={isNewDashboard}
+							/>
+						)}
+					</SettingsSection>
 				)}
 
-				{allowStackingBarChart && (
-					<section className="stack-chart">
-						<Typography.Text className="label">Stack series</Typography.Text>
-						<Switch
-							checked={stackedBarChart}
-							size="small"
-							onChange={(checked): void => setStackedBarChart(checked)}
-						/>
-					</section>
+				{isAxisSectionVisible && (
+					<SettingsSection title="Axes" icon={<Axis3D size={14} />}>
+						{allowSoftMinMax && (
+							<section className="soft-min-max">
+								<section className="container">
+									<Typography.Text className="text">Soft Min</Typography.Text>
+									<InputNumber
+										type="number"
+										value={softMin}
+										onChange={softMinHandler}
+										rootClassName="input"
+									/>
+								</section>
+								<section className="container">
+									<Typography.Text className="text">Soft Max</Typography.Text>
+									<InputNumber
+										value={softMax}
+										type="number"
+										rootClassName="input"
+										onChange={softMaxHandler}
+									/>
+								</section>
+							</section>
+						)}
+
+						{allowLogScale && (
+							<section className="log-scale control-container">
+								<Typography.Text className="typography">Y Axis Scale</Typography.Text>
+								<Select
+									onChange={(value): void =>
+										setIsLogScale(value === LogScale.LOGARITHMIC)
+									}
+									value={isLogScale ? LogScale.LOGARITHMIC : LogScale.LINEAR}
+									style={{ width: '100%' }}
+									className="panel-type-select"
+									defaultValue={LogScale.LINEAR}
+								>
+									<Option value={LogScale.LINEAR}>
+										<div className="select-option">
+											<div className="icon">
+												<LineChart size={16} />
+											</div>
+											<Typography.Text className="display">Linear</Typography.Text>
+										</div>
+									</Option>
+									<Option value={LogScale.LOGARITHMIC}>
+										<div className="select-option">
+											<div className="icon">
+												<Spline size={16} />
+											</div>
+											<Typography.Text className="display">Logarithmic</Typography.Text>
+										</div>
+									</Option>
+								</Select>
+							</section>
+						)}
+					</SettingsSection>
+				)}
+
+				{isLegendSectionVisible && (
+					<SettingsSection title="Legend" icon={<Layers size={14} />}>
+						{allowLegendPosition && (
+							<section className="legend-position control-container">
+								<Typography.Text className="typography">Position</Typography.Text>
+								<Select
+									onChange={(value: LegendPosition): void => setLegendPosition(value)}
+									value={legendPosition}
+									style={{ width: '100%' }}
+									className="panel-type-select"
+									defaultValue={LegendPosition.BOTTOM}
+								>
+									<Option value={LegendPosition.BOTTOM}>
+										<div className="select-option">
+											<Typography.Text className="display">Bottom</Typography.Text>
+										</div>
+									</Option>
+									<Option value={LegendPosition.RIGHT}>
+										<div className="select-option">
+											<Typography.Text className="display">Right</Typography.Text>
+										</div>
+									</Option>
+								</Select>
+							</section>
+						)}
+
+						{allowLegendColors && (
+							<section className="legend-colors">
+								<LegendColors
+									customLegendColors={customLegendColors}
+									setCustomLegendColors={setCustomLegendColors}
+									queryResponse={queryResponse}
+								/>
+							</section>
+						)}
+					</SettingsSection>
 				)}
 
 				{allowBucketConfig && (
-					<section className="bucket-config">
-						<Typography.Text className="label">Number of buckets</Typography.Text>
-						<InputNumber
-							value={bucketCount || null}
-							type="number"
-							min={0}
-							rootClassName="bucket-input"
-							placeholder="Default: 30"
-							onChange={(val): void => {
-								setBucketCount(val || 0);
-							}}
-						/>
-						<Typography.Text className="label bucket-size-label">
-							Bucket width
-						</Typography.Text>
-						<InputNumber
-							value={bucketWidth || null}
-							type="number"
-							precision={2}
-							placeholder="Default: Auto"
-							step={0.1}
-							min={0.0}
-							rootClassName="bucket-input"
-							onChange={(val): void => {
-								setBucketWidth(val || 0);
-							}}
-						/>
-						<section className="combine-hist">
-							<Typography.Text className="label">
-								Merge all series into one
-							</Typography.Text>
-							<Switch
-								checked={combineHistogram}
-								size="small"
-								onChange={(checked): void => setCombineHistogram(checked)}
+					<SettingsSection title="Histogram / Buckets">
+						<section className="bucket-config control-container">
+							<Typography.Text className="label">Number of buckets</Typography.Text>
+							<InputNumber
+								value={bucketCount || null}
+								type="number"
+								min={0}
+								rootClassName="bucket-input"
+								placeholder="Default: 30"
+								onChange={(val): void => {
+									setBucketCount(val || 0);
+								}}
 							/>
+							<Typography.Text className="label bucket-size-label">
+								Bucket width
+							</Typography.Text>
+							<InputNumber
+								value={bucketWidth || null}
+								type="number"
+								precision={2}
+								placeholder="Default: Auto"
+								step={0.1}
+								min={0.0}
+								rootClassName="bucket-input"
+								onChange={(val): void => {
+									setBucketWidth(val || 0);
+								}}
+							/>
+							<section className="combine-hist">
+								<Typography.Text className="label">
+									Merge all series into one
+								</Typography.Text>
+								<Switch
+									checked={combineHistogram}
+									size="small"
+									onChange={(checked): void => setCombineHistogram(checked)}
+								/>
+							</section>
 						</section>
-					</section>
-				)}
-
-				{allowLogScale && (
-					<section className="log-scale">
-						<Typography.Text className="typography">Y Axis Scale</Typography.Text>
-						<Select
-							onChange={(value): void => setIsLogScale(value === LogScale.LOGARITHMIC)}
-							value={isLogScale ? LogScale.LOGARITHMIC : LogScale.LINEAR}
-							style={{ width: '100%' }}
-							className="panel-type-select"
-							defaultValue={LogScale.LINEAR}
-						>
-							<Option value={LogScale.LINEAR}>
-								<div className="select-option">
-									<div className="icon">
-										<LineChart size={16} />
-									</div>
-									<Typography.Text className="display">Linear</Typography.Text>
-								</div>
-							</Option>
-							<Option value={LogScale.LOGARITHMIC}>
-								<div className="select-option">
-									<div className="icon">
-										<Spline size={16} />
-									</div>
-									<Typography.Text className="display">Logarithmic</Typography.Text>
-								</div>
-							</Option>
-						</Select>
-					</section>
-				)}
-
-				{allowLegendPosition && (
-					<section className="legend-position">
-						<Typography.Text className="typography">Legend Position</Typography.Text>
-						<Select
-							onChange={(value: LegendPosition): void => setLegendPosition(value)}
-							value={legendPosition}
-							style={{ width: '100%' }}
-							className="panel-type-select"
-							defaultValue={LegendPosition.BOTTOM}
-						>
-							<Option value={LegendPosition.BOTTOM}>
-								<div className="select-option">
-									<Typography.Text className="display">Bottom</Typography.Text>
-								</div>
-							</Option>
-							<Option value={LegendPosition.RIGHT}>
-								<div className="select-option">
-									<Typography.Text className="display">Right</Typography.Text>
-								</div>
-							</Option>
-						</Select>
-					</section>
-				)}
-
-				{allowLegendColors && (
-					<section className="legend-colors">
-						<LegendColors
-							customLegendColors={customLegendColors}
-							setCustomLegendColors={setCustomLegendColors}
-							queryResponse={queryResponse}
-						/>
-					</section>
+					</SettingsSection>
 				)}
 			</section>
 
@@ -541,17 +600,25 @@ function RightContainer({
 			)}
 
 			{allowContextLinks && (
-				<section className="context-links">
+				<SettingsSection
+					title="Context Links"
+					icon={<Link size={14} />}
+					defaultOpen={!!contextLinks.linksData.length}
+				>
 					<ContextLinks
 						contextLinks={contextLinks}
 						setContextLinks={setContextLinks}
 						selectedWidget={selectedWidget}
 					/>
-				</section>
+				</SettingsSection>
 			)}
 
 			{allowThreshold && (
-				<section>
+				<SettingsSection
+					title="Thresholds"
+					icon={<Antenna size={14} />}
+					defaultOpen={!!thresholds.length}
+				>
 					<ThresholdSelector
 						thresholds={thresholds}
 						setThresholds={setThresholds}
@@ -559,7 +626,7 @@ function RightContainer({
 						selectedGraph={selectedGraph}
 						columnUnits={columnUnits}
 					/>
-				</section>
+				</SettingsSection>
 			)}
 		</div>
 	);

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

@@ -36,7 +36,7 @@ const checkStackSeriesState = (
 	expect(getByTextUtil(container, 'Stack series')).toBeInTheDocument();
 
 	const stackSeriesSection = container.querySelector(
-		'section > .stack-chart',
+		'.stack-chart',
 	) as HTMLElement;
 	expect(stackSeriesSection).toBeInTheDocument();
 
@@ -326,7 +326,7 @@ describe('Stacking bar in new panel', () => {
 		expect(getByText('Stack series')).toBeInTheDocument();
 
 		// Verify section exists
-		const section = container.querySelector('section > .stack-chart');
+		const section = container.querySelector('.stack-chart');
 		expect(section).toBeInTheDocument();
 
 		// Verify switch is present and enabled (ant-switch-checked)

frontend/src/container/NewWidget/index.tsx

@@ -439,6 +439,19 @@ function NewWidget({
 		globalSelectedInterval,
 	]);
 
+	const navigateToDashboardPage = useCallback(() => {
+		const params = new URLSearchParams();
+
+		const urlVariablesQueryString = query.get(QueryParams.variables);
+		if (urlVariablesQueryString) {
+			params.set(QueryParams.variables, urlVariablesQueryString);
+		}
+
+		const search = params.toString() ? `?${params.toString()}` : '';
+
+		safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }) + search);
+	}, [dashboardId, query, safeNavigate]);
+
 	const onClickSaveHandler = useCallback(() => {
 		if (!selectedDashboard) {
 			return;
@@ -554,9 +567,7 @@ function NewWidget({
 		updateDashboardMutation.mutateAsync(dashboard, {
 			onSuccess: () => {
 				setToScrollWidgetId(selectedWidget?.id || '');
-				safeNavigate({
-					pathname: generatePath(ROUTES.DASHBOARD, { dashboardId }),
-				});
+				navigateToDashboardPage();
 			},
 		});
 	}, [
@@ -572,7 +583,7 @@ function NewWidget({
 		updateDashboardMutation,
 		widgets,
 		setToScrollWidgetId,
-		safeNavigate,
+		navigateToDashboardPage,
 		dashboardId,
 	]);
 
@@ -581,12 +592,12 @@ function NewWidget({
 			setDiscardModal(true);
 			return;
 		}
-		safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }));
-	}, [dashboardId, isQueryModified, safeNavigate]);
+		navigateToDashboardPage();
+	}, [isQueryModified, navigateToDashboardPage]);
 
 	const discardChanges = useCallback(() => {
-		safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }));
-	}, [dashboardId, safeNavigate]);
+		navigateToDashboardPage();
+	}, [navigateToDashboardPage]);
 
 	const setGraphHandler = (type: PANEL_TYPES): void => {
 		setIsLoadingPanelData(true);
@@ -728,12 +739,14 @@ function NewWidget({
 		}
 		const widgetId = query.get('widgetId') || '';
 		const graphType = query.get('graphType') || '';
+		const variables = query.get(QueryParams.variables) || '';
 		const queryParams = {
 			[QueryParams.expandedWidgetId]: widgetId,
 			[QueryParams.graphType]: graphType,
 			[QueryParams.compositeQuery]: encodeURIComponent(
 				JSON.stringify(currentQuery),
 			),
+			[QueryParams.variables]: variables,
 		};
 
 		const updatedSearch = createQueryParams(queryParams);
@@ -822,56 +835,54 @@ function NewWidget({
 				</LeftContainerWrapper>
 
 				<RightContainerWrapper>
-					<OverlayScrollbar>
-						<RightContainer
-							setGraphHandler={setGraphHandler}
-							title={title}
-							setTitle={setTitle}
-							description={description}
-							setDescription={setDescription}
-							stackedBarChart={stackedBarChart}
-							setStackedBarChart={setStackedBarChart}
-							opacity={opacity}
-							yAxisUnit={yAxisUnit}
-							columnUnits={columnUnits}
-							setColumnUnits={setColumnUnits}
-							bucketCount={bucketCount}
-							bucketWidth={bucketWidth}
-							combineHistogram={combineHistogram}
-							setCombineHistogram={setCombineHistogram}
-							setBucketWidth={setBucketWidth}
-							setBucketCount={setBucketCount}
-							setOpacity={setOpacity}
-							selectedNullZeroValue={selectedNullZeroValue}
-							setSelectedNullZeroValue={setSelectedNullZeroValue}
-							selectedGraph={graphType}
-							setSelectedTime={setSelectedTime}
-							selectedTime={selectedTime}
-							setYAxisUnit={setYAxisUnit}
-							decimalPrecision={decimalPrecision}
-							setDecimalPrecision={setDecimalPrecision}
-							thresholds={thresholds}
-							setThresholds={setThresholds}
-							selectedWidget={selectedWidget}
-							isFillSpans={isFillSpans}
-							setIsFillSpans={setIsFillSpans}
-							isLogScale={isLogScale}
-							setIsLogScale={setIsLogScale}
-							legendPosition={legendPosition}
-							setLegendPosition={setLegendPosition}
-							customLegendColors={customLegendColors}
-							setCustomLegendColors={setCustomLegendColors}
-							queryResponse={queryResponse}
-							softMin={softMin}
-							setSoftMin={setSoftMin}
-							softMax={softMax}
-							setSoftMax={setSoftMax}
-							contextLinks={contextLinks}
-							setContextLinks={setContextLinks}
-							enableDrillDown={enableDrillDown}
-							isNewDashboard={isNewDashboard}
-						/>
-					</OverlayScrollbar>
+					<RightContainer
+						setGraphHandler={setGraphHandler}
+						title={title}
+						setTitle={setTitle}
+						description={description}
+						setDescription={setDescription}
+						stackedBarChart={stackedBarChart}
+						setStackedBarChart={setStackedBarChart}
+						opacity={opacity}
+						yAxisUnit={yAxisUnit}
+						columnUnits={columnUnits}
+						setColumnUnits={setColumnUnits}
+						bucketCount={bucketCount}
+						bucketWidth={bucketWidth}
+						combineHistogram={combineHistogram}
+						setCombineHistogram={setCombineHistogram}
+						setBucketWidth={setBucketWidth}
+						setBucketCount={setBucketCount}
+						setOpacity={setOpacity}
+						selectedNullZeroValue={selectedNullZeroValue}
+						setSelectedNullZeroValue={setSelectedNullZeroValue}
+						selectedGraph={graphType}
+						setSelectedTime={setSelectedTime}
+						selectedTime={selectedTime}
+						setYAxisUnit={setYAxisUnit}
+						decimalPrecision={decimalPrecision}
+						setDecimalPrecision={setDecimalPrecision}
+						thresholds={thresholds}
+						setThresholds={setThresholds}
+						selectedWidget={selectedWidget}
+						isFillSpans={isFillSpans}
+						setIsFillSpans={setIsFillSpans}
+						isLogScale={isLogScale}
+						setIsLogScale={setIsLogScale}
+						legendPosition={legendPosition}
+						setLegendPosition={setLegendPosition}
+						customLegendColors={customLegendColors}
+						setCustomLegendColors={setCustomLegendColors}
+						queryResponse={queryResponse}
+						softMin={softMin}
+						setSoftMin={setSoftMin}
+						softMax={softMax}
+						setSoftMax={setSoftMax}
+						contextLinks={contextLinks}
+						setContextLinks={setContextLinks}
+						enableDrillDown={enableDrillDown}
+						isNewDashboard={isNewDashboard}
+					/>
 				</RightContainerWrapper>
 			</PanelContainer>
 			<Modal

frontend/src/container/NewWidget/styles.ts

@@ -15,7 +15,14 @@ export const RightContainerWrapper = styled(Col)`
 		overflow-y: auto;
 	}
 	&::-webkit-scrollbar {
-		width: 0rem;
+		width: 0.3rem;
+	}
+	&::-webkit-scrollbar-thumb {
+		background: rgb(136, 136, 136);
+		border-radius: 0.625rem;
+	}
+	&::-webkit-scrollbar-track {
+		background: transparent;
 	}
 `;
 

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.styles.scss

@@ -1,134 +0,0 @@
-.sa-settings {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	padding: var(--padding-4) var(--padding-2) var(--padding-6) var(--padding-4);
-	height: 100%;
-
-	&__header {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-2);
-	}
-
-	&__title {
-		font-size: var(--label-large-500-font-size);
-		font-weight: var(--label-large-500-font-weight);
-		color: var(--text-base-white);
-		letter-spacing: -0.09px;
-		line-height: var(--line-height-normal);
-		margin: 0;
-	}
-
-	&__subtitle {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--foreground);
-		letter-spacing: -0.07px;
-		line-height: var(--paragraph-base-400-line-height);
-		margin: 0;
-	}
-
-	&__learn-more {
-		color: var(--primary);
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
-	&__controls {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-4);
-	}
-
-	&__search {
-		flex: 1;
-		min-width: 0;
-	}
-}
-
-.sa-status-badge {
-	color: var(--l3-foreground);
-	border-color: var(--border);
-}
-
-.sa-settings-filter-trigger {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	border: 1px solid var(--border);
-	border-radius: 2px;
-	background-color: var(--l2-background);
-
-	> span {
-		color: var(--foreground);
-	}
-
-	&__chevron {
-		flex-shrink: 0;
-		color: var(--foreground);
-	}
-}
-
-.sa-settings-filter-dropdown {
-	.ant-dropdown-menu {
-		padding: var(--padding-3) 14px;
-		border-radius: 4px;
-		border: 1px solid var(--border);
-		background: var(--l2-background);
-		backdrop-filter: blur(20px);
-	}
-
-	.ant-dropdown-menu-item {
-		background: transparent !important;
-		padding: var(--padding-1) 0 !important;
-
-		&:hover {
-			background: transparent !important;
-		}
-	}
-}
-
-.sa-settings-filter-option {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	font-size: var(--paragraph-base-400-font-size);
-	font-weight: var(--paragraph-base-400-font-weight);
-	color: var(--foreground);
-	letter-spacing: 0.14px;
-	min-width: 170px;
-
-	&:hover {
-		color: var(--card-foreground);
-		background: transparent;
-	}
-}
-
-.sa-settings-search-input {
-	height: 32px;
-	color: var(--l1-foreground);
-	background-color: var(--l2-background);
-	border-color: var(--border);
-
-	&::placeholder {
-		color: var(--l3-foreground);
-	}
-}
-
-.lightMode {
-	.sa-settings {
-		&__title {
-			color: var(--text-base-black);
-		}
-	}
-
-	.sa-settings-filter-option {
-		&:hover {
-			color: var(--bg-neutral-light-100);
-		}
-	}
-}

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx

@@ -1,317 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { Button } from '@signozhq/button';
-import { Check, ChevronDown, Plus } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import type { MenuProps } from 'antd';
-import { Dropdown } from 'antd';
-import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
-import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import ServiceAccountDrawer from 'components/ServiceAccountDrawer/ServiceAccountDrawer';
-import ServiceAccountsTable from 'components/ServiceAccountsTable/ServiceAccountsTable';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { toISOString } from 'utils/app';
-import { toAPIError } from 'utils/errorUtils';
-
-import { FilterMode, ServiceAccountRow, ServiceAccountStatus } from './utils';
-
-import './ServiceAccountsSettings.styles.scss';
-
-const PAGE_SIZE = 20;
-
-function ServiceAccountsSettings(): 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;
-
-	const [searchQuery, setSearchQuery] = useState('');
-	const [filterMode, setFilterMode] = useState<FilterMode>(FilterMode.All);
-	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-	const [
-		selectedAccount,
-		setSelectedAccount,
-	] = useState<ServiceAccountRow | null>(null);
-
-	const {
-		data: serviceAccountsData,
-		isLoading,
-		isError,
-		error,
-		refetch,
-	} = useListServiceAccounts();
-
-	const allAccounts = useMemo(
-		(): ServiceAccountRow[] =>
-			(serviceAccountsData?.data ?? []).map((sa) => ({
-				id: sa.id,
-				name: sa.name,
-				email: sa.email,
-				roles: sa.roles,
-				status: sa.status,
-				createdAt: toISOString(sa.createdAt),
-				updatedAt: toISOString(sa.updatedAt),
-			})),
-		[serviceAccountsData],
-	);
-
-	const activeCount = useMemo(
-		() =>
-			allAccounts.filter(
-				(a) => a.status?.toUpperCase() === ServiceAccountStatus.Active,
-			).length,
-		[allAccounts],
-	);
-
-	const disabledCount = useMemo(
-		() =>
-			allAccounts.filter(
-				(a) => a.status?.toUpperCase() !== ServiceAccountStatus.Active,
-			).length,
-		[allAccounts],
-	);
-
-	const filteredAccounts = useMemo((): ServiceAccountRow[] => {
-		let result = allAccounts;
-
-		if (filterMode === FilterMode.Active) {
-			result = result.filter(
-				(a) => a.status?.toUpperCase() === ServiceAccountStatus.Active,
-			);
-		} else if (filterMode === FilterMode.Disabled) {
-			result = result.filter(
-				(a) => a.status?.toUpperCase() !== ServiceAccountStatus.Active,
-			);
-		}
-
-		if (searchQuery.trim()) {
-			const q = searchQuery.toLowerCase();
-			result = result.filter(
-				(a) =>
-					a.name?.toLowerCase().includes(q) ||
-					a.email?.toLowerCase().includes(q) ||
-					a.roles?.some((role: string) => role.toLowerCase().includes(q)),
-			);
-		}
-
-		return result;
-	}, [allAccounts, filterMode, searchQuery]);
-
-	const paginatedAccounts = useMemo((): ServiceAccountRow[] => {
-		const start = (currentPage - 1) * PAGE_SIZE;
-		return filteredAccounts.slice(start, start + PAGE_SIZE);
-	}, [filteredAccounts, currentPage]);
-
-	const setPage = useCallback(
-		(page: number): void => {
-			urlQuery.set('page', String(page));
-			history.replace({ search: urlQuery.toString() });
-		},
-		[history, urlQuery],
-	);
-
-	useEffect(() => {
-		if (filteredAccounts.length === 0) {
-			return;
-		}
-
-		const maxPage = Math.max(1, Math.ceil(filteredAccounts.length / PAGE_SIZE));
-		if (currentPage > maxPage || currentPage < 1) {
-			setPage(maxPage);
-		}
-	}, [filteredAccounts.length, currentPage, setPage]);
-
-	const totalCount = allAccounts.length;
-
-	const filterMenuItems: MenuProps['items'] = [
-		{
-			key: FilterMode.All,
-			label: (
-				<div className="sa-settings-filter-option">
-					<span>All accounts ⎯ {totalCount}</span>
-					{filterMode === FilterMode.All && <Check size={14} />}
-				</div>
-			),
-			onClick: (): void => {
-				setFilterMode(FilterMode.All);
-				setPage(1);
-			},
-		},
-		{
-			key: FilterMode.Active,
-			label: (
-				<div className="sa-settings-filter-option">
-					<span>Active ⎯ {activeCount}</span>
-					{filterMode === FilterMode.Active && <Check size={14} />}
-				</div>
-			),
-			onClick: (): void => {
-				setFilterMode(FilterMode.Active);
-				setPage(1);
-			},
-		},
-		{
-			key: FilterMode.Disabled,
-			label: (
-				<div className="sa-settings-filter-option">
-					<span>Disabled ⎯ {disabledCount}</span>
-					{filterMode === FilterMode.Disabled && <Check size={14} />}
-				</div>
-			),
-			onClick: (): void => {
-				setFilterMode(FilterMode.Disabled);
-				setPage(1);
-			},
-		},
-	];
-
-	function getFilterLabel(): string {
-		switch (filterMode) {
-			case FilterMode.Active:
-				return `Active ⎯ ${activeCount}`;
-			case FilterMode.Disabled:
-				return `Disabled ⎯ ${disabledCount}`;
-			default:
-				return `All accounts ⎯ ${totalCount}`;
-		}
-	}
-	const filterLabel = getFilterLabel();
-
-	const handleRowClick = useCallback((row: ServiceAccountRow): void => {
-		setSelectedAccount(row);
-	}, []);
-
-	useEffect(() => {
-		if (!selectedAccount) {
-			return;
-		}
-		const updated = allAccounts.find((a) => a.id === selectedAccount.id);
-		if (!updated) {
-			setSelectedAccount(null);
-			return;
-		}
-		if (JSON.stringify(updated) !== JSON.stringify(selectedAccount)) {
-			setSelectedAccount(updated);
-		}
-	}, [allAccounts, selectedAccount]);
-
-	const handleDrawerClose = useCallback((): void => {
-		setSelectedAccount(null);
-	}, []);
-
-	const handleDrawerSuccess = useCallback(
-		(options?: { closeDrawer?: boolean }): void => {
-			if (options?.closeDrawer) {
-				setSelectedAccount(null);
-			}
-			refetch();
-		},
-		[refetch],
-	);
-
-	const handleCreateSuccess = useCallback((): void => {
-		refetch();
-	}, [refetch]);
-
-	return (
-		<>
-			<div className="sa-settings">
-				<div className="sa-settings__header">
-					<h1 className="sa-settings__title">Service Accounts</h1>
-					<p className="sa-settings__subtitle">
-						Overview of service accounts added to this workspace.{' '}
-						{/* Todo: to add doc links */}
-						{/* <a
-							href="https://signoz.io/docs/service-accounts"
-							target="_blank"
-							rel="noopener noreferrer"
-							className="sa-settings__learn-more"
-						>
-							Learn more
-						</a> */}
-					</p>
-				</div>
-
-				<div className="sa-settings__controls">
-					<Dropdown
-						menu={{ items: filterMenuItems }}
-						trigger={['click']}
-						overlayClassName="sa-settings-filter-dropdown"
-					>
-						<Button
-							variant="solid"
-							size="sm"
-							color="secondary"
-							className="sa-settings-filter-trigger"
-						>
-							<span>{filterLabel}</span>
-							<ChevronDown size={12} className="sa-settings-filter-trigger__chevron" />
-						</Button>
-					</Dropdown>
-
-					<div className="sa-settings__search">
-						<Input
-							type="search"
-							name="service-accounts-search"
-							placeholder="Search by name or email..."
-							value={searchQuery}
-							onChange={(e): void => {
-								setSearchQuery(e.target.value);
-								setPage(1);
-							}}
-							className="sa-settings-search-input"
-							color="secondary"
-						/>
-					</div>
-
-					<Button
-						variant="solid"
-						size="sm"
-						color="primary"
-						onClick={(): void => setIsCreateModalOpen(true)}
-					>
-						<Plus size={12} />
-						New Service Account
-					</Button>
-				</div>
-			</div>
-
-			{isError ? (
-				<ErrorInPlace
-					error={toAPIError(
-						error,
-						'An unexpected error occurred while fetching service accounts.',
-					)}
-				/>
-			) : (
-				<ServiceAccountsTable
-					data={paginatedAccounts}
-					loading={isLoading}
-					total={filteredAccounts.length}
-					currentPage={currentPage}
-					pageSize={PAGE_SIZE}
-					searchQuery={searchQuery}
-					onPageChange={setPage}
-					onRowClick={handleRowClick}
-				/>
-			)}
-
-			<CreateServiceAccountModal
-				open={isCreateModalOpen}
-				onClose={(): void => setIsCreateModalOpen(false)}
-				onSuccess={handleCreateSuccess}
-			/>
-
-			<ServiceAccountDrawer
-				account={selectedAccount}
-				open={selectedAccount !== null}
-				onClose={handleDrawerClose}
-				onSuccess={handleDrawerSuccess}
-			/>
-		</>
-	);
-}
-
-export default ServiceAccountsSettings;

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

@@ -1,206 +0,0 @@
-import type { ReactNode } from 'react';
-import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
-import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import ServiceAccountsSettings from '../ServiceAccountsSettings';
-
-const SA_LIST_ENDPOINT = '*/api/v1/service_accounts';
-const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
-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,
-	},
-	{
-		id: 'sa-2',
-		name: 'Monitoring Agent',
-		email: 'monitor@signoz.io',
-		roles: ['signoz-viewer'],
-		status: 'ACTIVE',
-		createdAt: 1700000002,
-		updatedAt: 1700000003,
-	},
-	{
-		id: 'sa-3',
-		name: 'Legacy Bot',
-		email: 'legacy@signoz.io',
-		roles: ['signoz-editor'],
-		status: 'DISABLED',
-		createdAt: 1700000004,
-		updatedAt: 1700000005,
-	},
-];
-
-jest.mock('@signozhq/toggle-group', () => ({
-	ToggleGroup: ({
-		children,
-		className,
-	}: {
-		children: ReactNode;
-		onValueChange?: (val: string) => void;
-		value?: string;
-		type?: string;
-		className?: string;
-	}): JSX.Element => <div className={className}>{children}</div>,
-	ToggleGroupItem: ({
-		children,
-		className,
-	}: {
-		children: ReactNode;
-		value: string;
-		className?: string;
-	}): JSX.Element => <span className={className}>{children}</span>,
-}));
-
-jest.mock('@signozhq/drawer', () => ({
-	DrawerWrapper: ({
-		content,
-		open,
-	}: {
-		content?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null => (open ? <div>{content}</div> : null),
-}));
-
-jest.mock('@signozhq/dialog', () => ({
-	DialogWrapper: ({
-		children,
-		open,
-		title,
-	}: {
-		children?: ReactNode;
-		open: boolean;
-		title?: string;
-	}): JSX.Element | null =>
-		open ? (
-			<div role="dialog" aria-label={title}>
-				{children}
-			</div>
-		) : null,
-	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
-		<div>{children}</div>
-	),
-}));
-
-jest.mock('@signozhq/sonner', () => ({
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-describe('ServiceAccountsSettings (integration)', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		server.use(
-			rest.get(SA_LIST_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: mockServiceAccountsAPI })),
-			),
-			rest.get(SA_KEYS_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('loads and displays all accounts with correct ACTIVE and DISABLED badges', async () => {
-		render(<ServiceAccountsSettings />);
-
-		await screen.findByText('CI Bot');
-		expect(screen.getByText('Monitoring Agent')).toBeInTheDocument();
-		expect(screen.getByText('legacy@signoz.io')).toBeInTheDocument();
-		expect(screen.getAllByText('ACTIVE')).toHaveLength(2);
-		expect(screen.getByText('DISABLED')).toBeInTheDocument();
-	});
-
-	it('filter dropdown to "Active" hides DISABLED accounts', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<ServiceAccountsSettings />);
-
-		await screen.findByText('CI Bot');
-
-		await user.click(screen.getByRole('button', { name: /All accounts/i }));
-
-		const activeOption = await screen.findByText(/Active ⎯/i);
-		await user.click(activeOption);
-
-		await screen.findByText('CI Bot');
-		expect(screen.queryByText('Legacy Bot')).not.toBeInTheDocument();
-	});
-
-	it('search by name filters accounts in real-time', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<ServiceAccountsSettings />);
-
-		await screen.findByText('CI Bot');
-
-		await user.type(
-			screen.getByPlaceholderText(/Search by name or email/i),
-			'legacy',
-		);
-
-		await screen.findByText('Legacy Bot');
-		expect(screen.queryByText('CI Bot')).not.toBeInTheDocument();
-		expect(screen.queryByText('Monitoring Agent')).not.toBeInTheDocument();
-	});
-
-	it('clicking a row opens the drawer with account details visible', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<ServiceAccountsSettings />);
-
-		await user.click(
-			await screen.findByRole('button', {
-				name: /View service account CI Bot/i,
-			}),
-		);
-
-		expect(
-			await screen.findByRole('button', { name: /Disable Service Account/i }),
-		).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /Save Changes/i })).toBeDisabled();
-	});
-
-	it('"New Service Account" button opens the Create Service Account modal', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<ServiceAccountsSettings />);
-
-		await screen.findByText('CI Bot');
-
-		await user.click(
-			screen.getByRole('button', { name: /New Service Account/i }),
-		);
-
-		await screen.findByRole('dialog', { name: /New Service Account/i });
-		expect(screen.getByPlaceholderText('Enter a name')).toBeInTheDocument();
-	});
-	it('shows error state when API fails', async () => {
-		server.use(
-			rest.get(SA_LIST_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(500), ctx.json({ message: 'Internal Server Error' })),
-			),
-		);
-
-		render(<ServiceAccountsSettings />);
-
-		expect(
-			await screen.findByText(
-				/An unexpected error occurred while fetching service accounts/i,
-			),
-		).toBeInTheDocument();
-	});
-});

frontend/src/container/ServiceAccountsSettings/config.ts

@@ -1 +0,0 @@
-export const IS_SERVICE_ACCOUNTS_ENABLED = false;

frontend/src/container/ServiceAccountsSettings/utils.ts

@@ -1,20 +0,0 @@
-export enum FilterMode {
-	All = 'all',
-	Active = 'active',
-	Disabled = 'disabled',
-}
-
-export enum ServiceAccountStatus {
-	Active = 'ACTIVE',
-	Disabled = 'DISABLED',
-}
-
-export interface ServiceAccountRow {
-	id: string;
-	name: string;
-	email: string;
-	roles: string[];
-	status: string;
-	createdAt: string | null;
-	updatedAt: string | null;
-}

frontend/src/container/SideNav/menuItems.tsx

@@ -8,7 +8,6 @@ import {
 	BellDot,
 	Binoculars,
 	Book,
-	Bot,
 	Boxes,
 	BugIcon,
 	Building2,
@@ -359,13 +358,6 @@ export const settingsNavSections: SettingsNavSection[] = [
 				isEnabled: false,
 				itemKey: 'members',
 			},
-			{
-				key: ROUTES.SERVICE_ACCOUNTS_SETTINGS,
-				label: 'Service Accounts',
-				icon: <Bot size={16} />,
-				isEnabled: false,
-				itemKey: 'service-accounts',
-			},
 			{
 				key: ROUTES.API_KEYS,
 				label: 'API Keys',

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -154,7 +154,6 @@ export const routesToSkip = [
 	ROUTES.ALL_DASHBOARD,
 	ROUTES.ORG_SETTINGS,
 	ROUTES.MEMBERS_SETTINGS,
-	ROUTES.SERVICE_ACCOUNTS_SETTINGS,
 	ROUTES.INGESTION_SETTINGS,
 	ROUTES.API_KEYS,
 	ROUTES.ERROR_DETAIL,

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -30,6 +30,7 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { addCustomTimeRange } from 'utils/customTimeRangeUtils';
+import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
 import { normalizeTimeToMs } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -234,20 +235,7 @@ function DateTimeSelection({
 
 	const updateLocalStorageForRoutes = useCallback(
 		(value: Time | string): void => {
-			const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
-			if (preRoutes !== null) {
-				const preRoutesObject = JSON.parse(preRoutes);
-
-				const preRoute = {
-					...preRoutesObject,
-				};
-				preRoute[location.pathname] = value;
-
-				setLocalStorageKey(
-					LOCALSTORAGE.METRICS_TIME_IN_DURATION,
-					JSON.stringify(preRoute),
-				);
-			}
+			persistTimeDurationForRoute(location.pathname, String(value));
 		},
 		[location.pathname],
 	);
@@ -738,6 +726,7 @@ function DateTimeSelection({
 						showRecentlyUsed={showRecentlyUsed}
 						minTime={minTimeForDateTimePicker}
 						maxTime={maxTimeForDateTimePicker}
+						isModalTimeSelection={isModalTimeSelection}
 					/>
 
 					{showAutoRefresh && selectedTime !== 'custom' && (

frontend/src/hooks/__tests__/useZoomOut.test.ts

@@ -0,0 +1,160 @@
+import { act, renderHook } from '@testing-library/react';
+import { QueryParams } from 'constants/query';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import { useZoomOut } from '../useZoomOut';
+
+const mockDispatch = jest.fn();
+const mockSafeNavigate = jest.fn();
+const mockUrlQueryDelete = jest.fn();
+const mockUrlQuerySet = jest.fn();
+const mockUrlQueryToString = jest.fn(() => '');
+
+interface MockAppState {
+	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
+}
+
+jest.mock('react-redux', () => ({
+	useDispatch: (): jest.Mock => mockDispatch,
+	useSelector: <T>(selector: (state: MockAppState) => T): T => {
+		const mockState: MockAppState = {
+			globalTime: {
+				minTime: 15 * 60 * 1000 * 1e6, // 15 min in nanoseconds
+				maxTime: 30 * 60 * 1000 * 1e6, // 30 min in nanoseconds (mock for getNextZoomOutRange)
+			},
+		};
+		return selector(mockState);
+	},
+}));
+
+jest.mock('react-router-dom', () => ({
+	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+interface MockUrlQuery {
+	delete: typeof mockUrlQueryDelete;
+	set: typeof mockUrlQuerySet;
+	get: () => null;
+	toString: typeof mockUrlQueryToString;
+}
+
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: (): MockUrlQuery => ({
+		delete: mockUrlQueryDelete,
+		set: mockUrlQuerySet,
+		get: (): null => null,
+		toString: mockUrlQueryToString,
+	}),
+}));
+
+const mockGetNextZoomOutRange = jest.fn();
+jest.mock('lib/zoomOutUtils', () => ({
+	getNextZoomOutRange: (
+		...args: unknown[]
+	): ReturnType<typeof mockGetNextZoomOutRange> =>
+		mockGetNextZoomOutRange(...args),
+}));
+
+describe('useZoomOut', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUrlQueryToString.mockReturnValue('relativeTime=45m');
+	});
+
+	it('should do nothing when isDisabled is true', () => {
+		const { result } = renderHook(() => useZoomOut({ isDisabled: true }));
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockGetNextZoomOutRange).not.toHaveBeenCalled();
+		expect(mockDispatch).not.toHaveBeenCalled();
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('should do nothing when getNextZoomOutRange returns null', () => {
+		mockGetNextZoomOutRange.mockReturnValue(null);
+
+		const { result } = renderHook(() => useZoomOut());
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockGetNextZoomOutRange).toHaveBeenCalled();
+		expect(mockDispatch).not.toHaveBeenCalled();
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('should dispatch preset and update URL when result has preset', () => {
+		mockGetNextZoomOutRange.mockReturnValue({
+			range: [1000, 2000],
+			preset: '45m',
+		});
+
+		const { result } = renderHook(() => useZoomOut());
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringContaining('/logs-explorer'),
+		);
+	});
+
+	it('should dispatch custom range and update URL when result has no preset', () => {
+		mockGetNextZoomOutRange.mockReturnValue({
+			range: [1000000, 2000000],
+			preset: null,
+		});
+
+		const { result } = renderHook(() => useZoomOut());
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(
+			QueryParams.startTime,
+			'1000000',
+		);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.endTime, '2000000');
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.relativeTime);
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringContaining('/logs-explorer'),
+		);
+	});
+
+	it('should delete urlParamsToDelete when provided', () => {
+		mockGetNextZoomOutRange.mockReturnValue({
+			range: [1000, 2000],
+			preset: '45m',
+		});
+
+		const { result } = renderHook(() =>
+			useZoomOut({
+				urlParamsToDelete: [QueryParams.activeLogId],
+			}),
+		);
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
+	});
+});

frontend/src/hooks/dashboard/__test__/useTransformDashboardVariables.test.tsx

@@ -0,0 +1,339 @@
+import { renderHook } from '@testing-library/react';
+import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
+import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
+import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
+import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
+
+jest.mock('hooks/dashboard/useDashboardFromLocalStorage');
+jest.mock('hooks/dashboard/useVariablesFromUrl');
+
+const mockUseDashboardVariablesFromLocalStorage = useDashboardVariablesFromLocalStorage as jest.MockedFunction<
+	typeof useDashboardVariablesFromLocalStorage
+>;
+const mockUseVariablesFromUrl = useVariablesFromUrl as jest.MockedFunction<
+	typeof useVariablesFromUrl
+>;
+
+const makeVariable = (
+	overrides: Partial<IDashboardVariable> = {},
+): IDashboardVariable => ({
+	id: 'existing-id',
+	name: 'env',
+	description: '',
+	type: 'QUERY',
+	sort: 'DISABLED',
+	multiSelect: false,
+	showALLOption: false,
+	selectedValue: 'prod',
+	...overrides,
+});
+
+const makeDashboard = (
+	variables: Record<string, IDashboardVariable>,
+): Dashboard => ({
+	id: 'dash-1',
+	createdAt: '',
+	updatedAt: '',
+	createdBy: '',
+	updatedBy: '',
+	data: {
+		title: 'Test',
+		variables,
+	},
+});
+
+const setupHook = (
+	currentDashboard: Record<string, any> = {},
+	urlVariables: Record<string, any> = {},
+): ReturnType<typeof useTransformDashboardVariables> => {
+	mockUseDashboardVariablesFromLocalStorage.mockReturnValue({
+		currentDashboard,
+		updateLocalStorageDashboardVariables: jest.fn(),
+	});
+	mockUseVariablesFromUrl.mockReturnValue({
+		getUrlVariables: () => urlVariables,
+		setUrlVariables: jest.fn(),
+		updateUrlVariable: jest.fn(),
+	});
+
+	const { result } = renderHook(() => useTransformDashboardVariables('dash-1'));
+	return result.current;
+};
+
+describe('useTransformDashboardVariables', () => {
+	beforeEach(() => jest.clearAllMocks());
+
+	describe('order assignment', () => {
+		it('assigns order starting from 0 to variables that have none', () => {
+			const { transformDashboardVariables } = setupHook();
+			const dashboard = makeDashboard({
+				v1: makeVariable({ id: 'id1', name: 'v1', order: undefined }),
+				v2: makeVariable({ id: 'id2', name: 'v2', order: undefined }),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			const orders = Object.values(result.data.variables).map((v) => v.order);
+			expect(orders).toContain(0);
+			expect(orders).toContain(1);
+		});
+
+		it('preserves existing order values', () => {
+			const { transformDashboardVariables } = setupHook();
+			const dashboard = makeDashboard({
+				v1: makeVariable({ id: 'id1', name: 'v1', order: 5 }),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.order).toBe(5);
+		});
+
+		it('assigns unique orders across multiple variables that all lack an order', () => {
+			const { transformDashboardVariables } = setupHook();
+			const dashboard = makeDashboard({
+				v1: makeVariable({ id: 'id1', name: 'v1', order: undefined }),
+				v2: makeVariable({ id: 'id2', name: 'v2', order: undefined }),
+				v3: makeVariable({ id: 'id3', name: 'v3', order: undefined }),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			const orders = Object.values(result.data.variables).map((v) => v.order);
+			// All three newly assigned orders must be distinct
+			expect(new Set(orders).size).toBe(3);
+		});
+	});
+
+	describe('ID assignment', () => {
+		it('assigns a UUID to variables that have no id', () => {
+			const { transformDashboardVariables } = setupHook();
+			const variable = makeVariable({ name: 'v1' });
+			(variable as any).id = undefined;
+			const dashboard = makeDashboard({ v1: variable });
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.id).toMatch(
+				/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i,
+			);
+		});
+
+		it('preserves existing IDs', () => {
+			const { transformDashboardVariables } = setupHook();
+			const dashboard = makeDashboard({
+				v1: makeVariable({ id: 'keep-me', name: 'v1' }),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.id).toBe('keep-me');
+		});
+	});
+
+	describe('TEXTBOX backward compatibility', () => {
+		it('copies textboxValue to defaultValue when defaultValue is missing', () => {
+			const { transformDashboardVariables } = setupHook();
+			const dashboard = makeDashboard({
+				v1: makeVariable({
+					id: 'id1',
+					name: 'v1',
+					type: 'TEXTBOX',
+					textboxValue: 'hello',
+					defaultValue: undefined,
+					order: undefined,
+				}),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.defaultValue).toBe('hello');
+		});
+
+		it('does not overwrite an existing defaultValue', () => {
+			const { transformDashboardVariables } = setupHook();
+			const dashboard = makeDashboard({
+				v1: makeVariable({
+					id: 'id1',
+					name: 'v1',
+					type: 'TEXTBOX',
+					textboxValue: 'old',
+					defaultValue: 'keep',
+					order: undefined,
+				}),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.defaultValue).toBe('keep');
+		});
+	});
+
+	describe('localStorage merge', () => {
+		it('applies localStorage selectedValue over DB value', () => {
+			const { transformDashboardVariables } = setupHook({
+				env: { selectedValue: 'staging', allSelected: false },
+			});
+			const dashboard = makeDashboard({
+				v1: makeVariable({ id: 'id1', name: 'env', selectedValue: 'prod' }),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.selectedValue).toBe('staging');
+		});
+
+		it('applies localStorage allSelected over DB value', () => {
+			const { transformDashboardVariables } = setupHook({
+				env: { selectedValue: undefined, allSelected: true },
+			});
+			const dashboard = makeDashboard({
+				v1: makeVariable({
+					id: 'id1',
+					name: 'env',
+					allSelected: false,
+					showALLOption: true,
+				}),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.allSelected).toBe(true);
+		});
+	});
+
+	describe('URL variable override', () => {
+		it('sets allSelected=true when URL value is __ALL__', () => {
+			const { transformDashboardVariables } = setupHook(
+				{ env: { selectedValue: 'prod', allSelected: false } },
+				{ env: '__ALL__' },
+			);
+			const dashboard = makeDashboard({
+				v1: makeVariable({
+					id: 'id1',
+					name: 'env',
+					showALLOption: true,
+					allSelected: false,
+				}),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.allSelected).toBe(true);
+		});
+
+		it('sets selectedValue from URL and clears allSelected when showALLOption is true', () => {
+			const { transformDashboardVariables } = setupHook(
+				{ env: { selectedValue: undefined, allSelected: true } },
+				{ env: 'dev' },
+			);
+			const dashboard = makeDashboard({
+				v1: makeVariable({
+					id: 'id1',
+					name: 'env',
+					showALLOption: true,
+					allSelected: true,
+					multiSelect: false,
+				}),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.selectedValue).toBe('dev');
+			expect(result.data.variables.v1.allSelected).toBe(false);
+		});
+
+		it('does not set allSelected=false when showALLOption is false', () => {
+			const { transformDashboardVariables } = setupHook(
+				{ env: { selectedValue: undefined, allSelected: true } },
+				{ env: 'dev' },
+			);
+			const dashboard = makeDashboard({
+				v1: makeVariable({
+					id: 'id1',
+					name: 'env',
+					showALLOption: false,
+					allSelected: true,
+					multiSelect: false,
+				}),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.selectedValue).toBe('dev');
+			expect(result.data.variables.v1.allSelected).toBe(true);
+		});
+
+		it('normalizes array URL value to single value for single-select variable', () => {
+			const { transformDashboardVariables } = setupHook(
+				{},
+				{ env: ['prod', 'dev'] },
+			);
+			const dashboard = makeDashboard({
+				v1: makeVariable({
+					id: 'id1',
+					name: 'env',
+					multiSelect: false,
+				}),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.selectedValue).toBe('prod');
+		});
+
+		it('wraps single URL value in array for multi-select variable', () => {
+			const { transformDashboardVariables } = setupHook({}, { env: 'prod' });
+			const dashboard = makeDashboard({
+				v1: makeVariable({
+					id: 'id1',
+					name: 'env',
+					multiSelect: true,
+				}),
+			});
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.selectedValue).toEqual(['prod']);
+		});
+
+		it('looks up URL variable by variable id when name is absent', () => {
+			const { transformDashboardVariables } = setupHook(
+				{},
+				{ 'var-uuid': 'fallback' },
+			);
+			const variable = makeVariable({ id: 'var-uuid', multiSelect: false });
+			delete variable.name;
+			const dashboard = makeDashboard({ v1: variable });
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables.v1.selectedValue).toBe('fallback');
+		});
+	});
+
+	describe('edge cases', () => {
+		it('returns data unchanged when there are no variables', () => {
+			const { transformDashboardVariables } = setupHook();
+			const dashboard = makeDashboard({});
+
+			const result = transformDashboardVariables(dashboard);
+
+			expect(result.data.variables).toEqual({});
+		});
+
+		it('does not mutate the original dashboard', () => {
+			const { transformDashboardVariables } = setupHook({
+				env: { selectedValue: 'staging', allSelected: false },
+			});
+			const dashboard = makeDashboard({
+				v1: makeVariable({ id: 'id1', name: 'env', selectedValue: 'prod' }),
+			});
+			const originalValue = dashboard.data.variables.v1.selectedValue;
+
+			transformDashboardVariables(dashboard);
+
+			expect(dashboard.data.variables.v1.selectedValue).toBe(originalValue);
+		});
+	});
+});

frontend/src/hooks/dashboard/useDashboardFromLocalStorage.tsx

@@ -15,7 +15,7 @@ interface DashboardLocalStorageVariables {
 	[id: string]: LocalStoreDashboardVariables;
 }
 
-interface UseDashboardVariablesFromLocalStorageReturn {
+export interface UseDashboardVariablesFromLocalStorageReturn {
 	currentDashboard: LocalStoreDashboardVariables;
 	updateLocalStorageDashboardVariables: (
 		id: string,

frontend/src/hooks/dashboard/useTransformDashboardVariables.ts

@@ -0,0 +1,128 @@
+import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
+import {
+	useDashboardVariablesFromLocalStorage,
+	UseDashboardVariablesFromLocalStorageReturn,
+} from 'hooks/dashboard/useDashboardFromLocalStorage';
+import useVariablesFromUrl, {
+	UseVariablesFromUrlReturn,
+} from 'hooks/dashboard/useVariablesFromUrl';
+import { isEmpty } from 'lodash-es';
+import { normalizeUrlValueForVariable } from 'providers/Dashboard/normalizeUrlValue';
+import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
+import { v4 as generateUUID } from 'uuid';
+
+export function useTransformDashboardVariables(
+	dashboardId: string,
+): Pick<UseVariablesFromUrlReturn, 'getUrlVariables' | 'updateUrlVariable'> &
+	UseDashboardVariablesFromLocalStorageReturn & {
+		transformDashboardVariables: (data: Dashboard) => Dashboard;
+	} {
+	const {
+		currentDashboard,
+		updateLocalStorageDashboardVariables,
+	} = useDashboardVariablesFromLocalStorage(dashboardId);
+	const { getUrlVariables, updateUrlVariable } = useVariablesFromUrl();
+
+	const mergeDBWithLocalStorage = (
+		data: Dashboard,
+		localStorageVariables: any,
+	): Dashboard => {
+		const updatedData = data;
+		if (data && localStorageVariables) {
+			const updatedVariables = data.data.variables;
+			const variablesFromUrl = getUrlVariables();
+			Object.keys(data.data.variables).forEach((variable) => {
+				const variableData = data.data.variables[variable];
+
+				// values from url
+				const urlVariable = variableData?.name
+					? variablesFromUrl[variableData?.name] || variablesFromUrl[variableData.id]
+					: variablesFromUrl[variableData.id];
+
+				let updatedVariable = {
+					...data.data.variables[variable],
+					...localStorageVariables[variableData.name as any],
+				};
+
+				// respect the url variable if it is set, override the others
+				if (!isEmpty(urlVariable)) {
+					if (urlVariable === ALL_SELECTED_VALUE) {
+						updatedVariable = {
+							...updatedVariable,
+							allSelected: true,
+						};
+					} else {
+						// Normalize URL value to match variable's multiSelect configuration
+						const normalizedValue = normalizeUrlValueForVariable(
+							urlVariable,
+							variableData,
+						);
+
+						updatedVariable = {
+							...updatedVariable,
+							selectedValue: normalizedValue,
+							// Only set allSelected to false if showALLOption is available
+							...(updatedVariable?.showALLOption && { allSelected: false }),
+						};
+					}
+				}
+
+				updatedVariables[variable] = updatedVariable;
+			});
+			updatedData.data.variables = updatedVariables;
+		}
+		return updatedData;
+	};
+
+	// As we do not have order and ID's in the variables object, we have to process variables to add order and ID if they do not exist in the variables object
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const transformDashboardVariables = (data: Dashboard): Dashboard => {
+		if (data && data.data && data.data.variables) {
+			const clonedDashboardData = mergeDBWithLocalStorage(
+				JSON.parse(JSON.stringify(data)),
+				currentDashboard,
+			);
+			const { variables } = clonedDashboardData.data;
+			const existingOrders: Set<number> = new Set();
+
+			for (const key in variables) {
+				// eslint-disable-next-line no-prototype-builtins
+				if (variables.hasOwnProperty(key)) {
+					const variable: IDashboardVariable = variables[key];
+
+					// Check if 'order' property doesn't exist or is undefined
+					if (variable.order === undefined) {
+						// Find a unique order starting from 0
+						let order = 0;
+						while (existingOrders.has(order)) {
+							order += 1;
+						}
+
+						variable.order = order;
+						existingOrders.add(order);
+						// ! BWC - Specific case for backward compatibility where textboxValue was used instead of defaultValue
+						if (variable.type === 'TEXTBOX' && !variable.defaultValue) {
+							variable.defaultValue = variable.textboxValue || '';
+						}
+					}
+
+					if (variable.id === undefined) {
+						variable.id = generateUUID();
+					}
+				}
+			}
+
+			return clonedDashboardData;
+		}
+
+		return data;
+	};
+
+	return {
+		transformDashboardVariables,
+		getUrlVariables,
+		updateUrlVariable,
+		currentDashboard,
+		updateLocalStorageDashboardVariables,
+	};
+}

frontend/src/hooks/dashboard/useVariablesFromUrl.tsx

@@ -11,7 +11,7 @@ export interface LocalStoreDashboardVariables {
 		| IDashboardVariable['selectedValue'];
 }
 
-interface UseVariablesFromUrlReturn {
+export interface UseVariablesFromUrlReturn {
 	getUrlVariables: () => LocalStoreDashboardVariables;
 	setUrlVariables: (variables: LocalStoreDashboardVariables) => void;
 	updateUrlVariable: (

frontend/src/hooks/useZoomOut.ts

@@ -0,0 +1,79 @@
+import { useCallback, useRef } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { QueryParams } from 'constants/query';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { getNextZoomOutRange } from 'lib/zoomOutUtils';
+import { UpdateTimeInterval } from 'store/actions';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
+
+export interface UseZoomOutOptions {
+	/** When true, the zoom out handler does nothing (e.g. when live logs are enabled) */
+	isDisabled?: boolean;
+	/** URL params to delete when zooming out (e.g. [QueryParams.activeLogId] for logs) */
+	urlParamsToDelete?: string[];
+}
+
+/**
+ * Reusable hook for zoom-out functionality in explorers (logs, traces, etc.).
+ * Computes the next time range using the zoom-out ladder, updates Redux global time,
+ * and navigates with the new URL params.
+ */
+const EMPTY_PARAMS: string[] = [];
+
+export function useZoomOut(options: UseZoomOutOptions = {}): () => void {
+	const { isDisabled = false, urlParamsToDelete = EMPTY_PARAMS } = options;
+	const urlParamsToDeleteRef = useRef(urlParamsToDelete);
+	urlParamsToDeleteRef.current = urlParamsToDelete;
+
+	const dispatch = useDispatch();
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
+	const { safeNavigate } = useSafeNavigate();
+
+	return useCallback((): void => {
+		if (isDisabled) {
+			return;
+		}
+		const minMs = Math.floor((minTime ?? 0) / 1e6);
+		const maxMs = Math.floor((maxTime ?? 0) / 1e6);
+		const result = getNextZoomOutRange(minMs, maxMs);
+		if (!result) {
+			return;
+		}
+		const [newStartMs, newEndMs] = result.range;
+		const { preset } = result;
+
+		if (preset) {
+			dispatch(UpdateTimeInterval(preset));
+			urlQuery.delete(QueryParams.startTime);
+			urlQuery.delete(QueryParams.endTime);
+			urlQuery.set(QueryParams.relativeTime, preset);
+			persistTimeDurationForRoute(location.pathname, preset);
+		} else {
+			dispatch(UpdateTimeInterval('custom', [newStartMs, newEndMs]));
+			urlQuery.set(QueryParams.startTime, String(newStartMs));
+			urlQuery.set(QueryParams.endTime, String(newEndMs));
+			urlQuery.delete(QueryParams.relativeTime);
+		}
+		for (const param of urlParamsToDeleteRef.current) {
+			urlQuery.delete(param);
+		}
+		safeNavigate(`${location.pathname}?${urlQuery.toString()}`);
+	}, [
+		dispatch,
+		isDisabled,
+		location.pathname,
+		maxTime,
+		minTime,
+		safeNavigate,
+		urlQuery,
+	]);
+}

frontend/src/lib/__tests__/zoomOutUtils.test.ts

@@ -0,0 +1,147 @@
+import {
+	getNextDurationInLadder,
+	getNextZoomOutRange,
+	isZoomOutDisabled,
+	ZoomOutResult,
+} from '../zoomOutUtils';
+
+const MS_PER_MIN = 60 * 1000;
+const MS_PER_HOUR = 60 * MS_PER_MIN;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+const MS_PER_WEEK = 7 * MS_PER_DAY;
+
+// Fixed "now" for deterministic tests: 2024-01-15 12:00:00 UTC
+const NOW_MS = 1705312800000;
+
+describe('zoomOutUtils', () => {
+	beforeEach(() => {
+		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	describe('getNextDurationInLadder', () => {
+		it('should use 3x zoom out below 15m until reaching 15m', () => {
+			expect(getNextDurationInLadder(1 * MS_PER_MIN)).toBe(3 * MS_PER_MIN);
+			expect(getNextDurationInLadder(2 * MS_PER_MIN)).toBe(6 * MS_PER_MIN);
+			expect(getNextDurationInLadder(3 * MS_PER_MIN)).toBe(9 * MS_PER_MIN);
+			expect(getNextDurationInLadder(4 * MS_PER_MIN)).toBe(12 * MS_PER_MIN);
+			expect(getNextDurationInLadder(5 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // cap at 15m
+			expect(getNextDurationInLadder(6 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // 18m capped
+		});
+
+		it('should return next step for each ladder rung from 15m onward', () => {
+			expect(getNextDurationInLadder(10 * MS_PER_MIN)).toBe(15 * MS_PER_MIN);
+			expect(getNextDurationInLadder(15 * MS_PER_MIN)).toBe(45 * MS_PER_MIN);
+			expect(getNextDurationInLadder(45 * MS_PER_MIN)).toBe(2 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(2 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(7 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(21 * MS_PER_HOUR)).toBe(1 * MS_PER_DAY);
+			expect(getNextDurationInLadder(1 * MS_PER_DAY)).toBe(2 * MS_PER_DAY);
+			expect(getNextDurationInLadder(2 * MS_PER_DAY)).toBe(3 * MS_PER_DAY);
+			expect(getNextDurationInLadder(3 * MS_PER_DAY)).toBe(1 * MS_PER_WEEK);
+			expect(getNextDurationInLadder(1 * MS_PER_WEEK)).toBe(2 * MS_PER_WEEK);
+			expect(getNextDurationInLadder(2 * MS_PER_WEEK)).toBe(30 * MS_PER_DAY);
+		});
+
+		it('should return MAX when at or past 1 month (no wrap)', () => {
+			expect(getNextDurationInLadder(30 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
+			expect(getNextDurationInLadder(31 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
+		});
+
+		it('should return next step for duration between ladder rungs', () => {
+			expect(getNextDurationInLadder(1 * MS_PER_HOUR)).toBe(2 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(5 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(12 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
+		});
+	});
+
+	describe('getNextZoomOutRange', () => {
+		it('should return null when duration is zero or negative', () => {
+			expect(getNextZoomOutRange(NOW_MS, NOW_MS)).toBeNull();
+			expect(getNextZoomOutRange(NOW_MS, NOW_MS - 1000)).toBeNull();
+		});
+
+		it('should return center-anchored range and preset=null when new end does not exceed now (Phase 1)', () => {
+			// 15m range centered well before now so zoom to 45m keeps end <= now
+			// Center at now-30m: end = center + 22.5m = now - 7.5m <= now
+			const centerMs = NOW_MS - 30 * MS_PER_MIN;
+			const start15m = centerMs - 7.5 * MS_PER_MIN;
+			const end15m = centerMs + 7.5 * MS_PER_MIN;
+			const result = getNextZoomOutRange(start15m, end15m) as ZoomOutResult;
+
+			expect(result).not.toBeNull();
+			expect(result.preset).toBeNull(); // Phase 1: preserve center-anchored range, avoid GetMinMax "last X from now"
+			const [newStart, newEnd] = result.range;
+			expect(newEnd - newStart).toBe(45 * MS_PER_MIN);
+			const newCenter = (newStart + newEnd) / 2;
+			expect(Math.abs(newCenter - centerMs)).toBeLessThan(2000);
+			expect(newEnd).toBeLessThanOrEqual(NOW_MS + 1000);
+		});
+
+		it('should return end-anchored range when new end would exceed now (Phase 2)', () => {
+			// 22hr range ending at now - zoom to 1d (24hr) would push end past now
+			// Next ladder step from 22hr is 1d
+			const start22h = NOW_MS - 22 * MS_PER_HOUR;
+			const end22h = NOW_MS;
+			const result = getNextZoomOutRange(start22h, end22h) as ZoomOutResult;
+
+			expect(result).not.toBeNull();
+			expect(result.preset).toBe('1d');
+			const [newStart, newEnd] = result.range;
+			expect(newEnd).toBe(NOW_MS); // End anchored at now
+			expect(newStart).toBe(NOW_MS - 1 * MS_PER_DAY);
+		});
+
+		it('should return correct preset for each ladder step', () => {
+			const presets: [number, number, string][] = [
+				[15 * MS_PER_MIN, 0, '45m'],
+				[45 * MS_PER_MIN, 0, '2h'],
+				[2 * MS_PER_HOUR, 0, '7h'],
+				[7 * MS_PER_HOUR, 0, '21h'],
+				[21 * MS_PER_HOUR, 0, '1d'],
+				[1 * MS_PER_DAY, 0, '2d'],
+				[2 * MS_PER_DAY, 0, '3d'],
+				[3 * MS_PER_DAY, 0, '1w'],
+				[1 * MS_PER_WEEK, 0, '2w'],
+				[2 * MS_PER_WEEK, 0, '1month'],
+			];
+
+			presets.forEach(([durationMs, offset, expectedPreset]) => {
+				const end = NOW_MS - offset;
+				const start = end - durationMs;
+				const result = getNextZoomOutRange(start, end);
+				expect(result?.preset).toBe(expectedPreset);
+			});
+		});
+
+		it('isZoomOutDisabled returns true when duration >= 1 month', () => {
+			expect(isZoomOutDisabled(30 * MS_PER_DAY)).toBe(true);
+			expect(isZoomOutDisabled(31 * MS_PER_DAY)).toBe(true);
+			expect(isZoomOutDisabled(29 * MS_PER_DAY)).toBe(false);
+			expect(isZoomOutDisabled(15 * MS_PER_MIN)).toBe(false);
+		});
+
+		it('should return null when at 1 month (no zoom out beyond max)', () => {
+			const start1m = NOW_MS - 30 * MS_PER_DAY;
+			const end1m = NOW_MS;
+			const result = getNextZoomOutRange(start1m, end1m);
+
+			expect(result).toBeNull();
+		});
+
+		it('should zoom out 3x from 5m range to 15m then continue with ladder', () => {
+			// 5m range ending at now → 3x = 15m
+			const start5m = NOW_MS - 5 * MS_PER_MIN;
+			const end5m = NOW_MS;
+			const result = getNextZoomOutRange(start5m, end5m) as ZoomOutResult;
+
+			expect(result).not.toBeNull();
+			expect(result.preset).toBe('15m');
+			const [newStart, newEnd] = result.range;
+			expect(newEnd - newStart).toBe(15 * MS_PER_MIN);
+		});
+	});
+});

frontend/src/lib/zoomOutUtils.ts

@@ -0,0 +1,139 @@
+/**
+ * Custom Time Picker zoom-out ladder:
+ * - Until 1 day: 15m → 45m → 2hr → 7hr → 21hr
+ * - Then fixed: 1d → 2d → 3d → 1w → 2w → 1m
+ * - At 1 month: zoom out is disabled (max range)
+ */
+
+import type {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+
+const MS_PER_MIN = 60 * 1000;
+const MS_PER_HOUR = 60 * MS_PER_MIN;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+const MS_PER_WEEK = 7 * MS_PER_DAY;
+
+const ZOOM_OUT_LADDER_MS: number[] = [
+	15 * MS_PER_MIN, // 15m
+	45 * MS_PER_MIN, // 45m
+	2 * MS_PER_HOUR, // 2hr
+	7 * MS_PER_HOUR, // 7hr
+	21 * MS_PER_HOUR, // 21hr
+	1 * MS_PER_DAY, // 1d
+	2 * MS_PER_DAY, // 2d
+	3 * MS_PER_DAY, // 3d
+	1 * MS_PER_WEEK, // 1w
+	2 * MS_PER_WEEK, // 2w
+	30 * MS_PER_DAY, // 1m
+];
+
+const LADDER_LAST_INDEX = ZOOM_OUT_LADDER_MS.length - 1;
+const MAX_DURATION = ZOOM_OUT_LADDER_MS[LADDER_LAST_INDEX];
+const MIN_LADDER_DURATION_MS = ZOOM_OUT_LADDER_MS[0]; // 15m - below this we use 3x
+
+export const MAX_ZOOM_OUT_DURATION_MS = MAX_DURATION;
+
+/** Returns true when zoom out should be disabled (range at or beyond 1 month) */
+export function isZoomOutDisabled(durationMs: number): boolean {
+	return durationMs >= MAX_ZOOM_OUT_DURATION_MS;
+}
+
+/** Preset labels for ladder steps supported by GetMinMax (shows "Last 15 minutes" etc. instead of "Custom") */
+const PRESET_FOR_DURATION_MS: Record<number, Time | CustomTimeType> = {
+	[15 * MS_PER_MIN]: '15m',
+	[45 * MS_PER_MIN]: '45m',
+	[2 * MS_PER_HOUR]: '2h',
+	[7 * MS_PER_HOUR]: '7h',
+	[21 * MS_PER_HOUR]: '21h',
+	[1 * MS_PER_DAY]: '1d',
+	[2 * MS_PER_DAY]: '2d',
+	[3 * MS_PER_DAY]: '3d',
+	[1 * MS_PER_WEEK]: '1w',
+	[2 * MS_PER_WEEK]: '2w',
+	[30 * MS_PER_DAY]: '1month',
+};
+
+/**
+ * Returns the next duration in the zoom-out ladder for the given current duration.
+ * Below 15m: zoom out 3x until we reach 15m, then continue with the ladder.
+ * If at or past 1 month, returns MAX_DURATION (no zoom out - button is disabled).
+ */
+export function getNextDurationInLadder(durationMs: number): number {
+	if (durationMs >= MAX_DURATION) {
+		return MAX_DURATION; // No zoom out beyond 1 month
+	}
+
+	// Below 15m: zoom out 3x until we reach 15m
+	if (durationMs < MIN_LADDER_DURATION_MS) {
+		const next = durationMs * 3;
+		return Math.min(next, MIN_LADDER_DURATION_MS);
+	}
+
+	// At or above 15m: use the fixed ladder
+	for (let i = 0; i < ZOOM_OUT_LADDER_MS.length; i++) {
+		if (ZOOM_OUT_LADDER_MS[i] > durationMs) {
+			return ZOOM_OUT_LADDER_MS[i];
+		}
+	}
+
+	return MAX_DURATION;
+}
+
+export interface ZoomOutResult {
+	range: [number, number];
+	/** Preset key (e.g. '15m') when range matches a preset - use for display instead of "Custom Date Range" */
+	preset: Time | CustomTimeType | null;
+}
+
+/**
+ * Computes the next zoomed-out time range.
+ * Phase 1 (center-anchored): While new end <= now, expand from center.
+ * Phase 2 (end-anchored at now): When new end would exceed now, anchor end at now and move start backward.
+ *
+ * @returns ZoomOutResult with range and preset (or null if no change)
+ */
+export function getNextZoomOutRange(
+	startMs: number,
+	endMs: number,
+): ZoomOutResult | null {
+	const nowMs = Date.now();
+	const durationMs = endMs - startMs;
+
+	if (durationMs <= 0) {
+		return null;
+	}
+
+	const newDurationMs = getNextDurationInLadder(durationMs);
+
+	// No zoom out when already at max (1 month)
+	if (newDurationMs <= durationMs) {
+		return null;
+	}
+	const centerMs = startMs + durationMs / 2;
+	const computedEndMs = centerMs + newDurationMs / 2;
+
+	let newStartMs: number;
+	let newEndMs: number;
+
+	const isPhase1 = computedEndMs <= nowMs;
+	if (isPhase1) {
+		// Phase 1: center-anchored (historical range not ending at now)
+		newStartMs = centerMs - newDurationMs / 2;
+		newEndMs = computedEndMs;
+	} else {
+		// Phase 2: end-anchored at now
+		newStartMs = nowMs - newDurationMs;
+		newEndMs = nowMs;
+	}
+
+	// Phase 2 only: use preset so GetMinMax produces "last X from now".
+	// Phase 1: preset=null so the center-anchored range is preserved (GetMinMax would discard it).
+	const preset = isPhase1 ? null : PRESET_FOR_DURATION_MS[newDurationMs] ?? null;
+
+	return {
+		range: [Math.round(newStartMs), Math.round(newEndMs)],
+		preset,
+	};
+}

frontend/src/pages/DashboardWidget/__tests__/DashboardWidget.test.tsx

@@ -0,0 +1,143 @@
+import { Route } from 'react-router-dom';
+import * as getDashboardModule from 'api/v1/dashboards/id/get';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { rest, server } from 'mocks-server/server';
+import { render, screen, waitFor } from 'tests/test-utils';
+
+import DashboardWidget from '../index';
+
+const DASHBOARD_ID = 'dash-1';
+const WIDGET_ID = 'widget-abc';
+
+const mockDashboardResponse = {
+	status: 'success',
+	data: {
+		id: DASHBOARD_ID,
+		createdAt: '2024-01-01T00:00:00Z',
+		createdBy: 'test',
+		updatedAt: '2024-01-01T00:00:00Z',
+		updatedBy: 'test',
+		isLocked: false,
+		data: {
+			collapsableRowsMigrated: true,
+			description: '',
+			name: '',
+			panelMap: {},
+			tags: [],
+			title: 'Test Dashboard',
+			uploadedGrafana: false,
+			uuid: '',
+			version: '',
+			variables: {},
+			widgets: [],
+			layout: [],
+		},
+	},
+};
+
+const mockSafeNavigate = jest.fn();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('container/NewWidget', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="new-widget">NewWidget</div>,
+}));
+
+// Wrap component in a Route so useParams can resolve dashboardId.
+// Query params are passed via the URL so useUrlQuery (react-router) can read them.
+function renderAtRoute(
+	queryState: Record<string, string | null> = {},
+): ReturnType<typeof render> {
+	const params = new URLSearchParams();
+	Object.entries(queryState).forEach(([k, v]) => {
+		if (v !== null) {
+			params.set(k, v);
+		}
+	});
+	const search = params.toString() ? `?${params.toString()}` : '';
+	return render(
+		<Route path="/dashboard/:dashboardId/new">
+			<DashboardWidget />
+		</Route>,
+		undefined,
+		{ initialRoute: `/dashboard/${DASHBOARD_ID}/new${search}` },
+	);
+}
+
+beforeEach(() => {
+	mockSafeNavigate.mockClear();
+});
+
+afterEach(() => {
+	jest.restoreAllMocks();
+});
+
+describe('DashboardWidget', () => {
+	it('redirects to dashboard when widgetId is missing', async () => {
+		renderAtRoute({ graphType: PANEL_TYPES.TIME_SERIES });
+
+		await waitFor(() => {
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		const [navigatedTo] = mockSafeNavigate.mock.calls[0];
+		expect(navigatedTo).toContain(`/dashboard/${DASHBOARD_ID}`);
+	});
+
+	it('redirects to dashboard when graphType is missing', async () => {
+		renderAtRoute({ widgetId: WIDGET_ID });
+
+		await waitFor(() => {
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		const [navigatedTo] = mockSafeNavigate.mock.calls[0];
+		expect(navigatedTo).toContain(`/dashboard/${DASHBOARD_ID}`);
+	});
+
+	it('shows spinner while dashboard is loading', () => {
+		// Spy instead of MSW delay('infinite') to avoid leaving an open network handle.
+		jest
+			.spyOn(getDashboardModule, 'default')
+			.mockReturnValue(new Promise(() => {}));
+
+		renderAtRoute({ widgetId: WIDGET_ID, graphType: PANEL_TYPES.TIME_SERIES });
+
+		expect(screen.getByRole('img', { name: 'loading' })).toBeInTheDocument();
+	});
+
+	it('shows error message when dashboard fetch fails', async () => {
+		server.use(
+			rest.get(
+				`http://localhost/api/v1/dashboards/${DASHBOARD_ID}`,
+				(_req, res, ctx) => res(ctx.status(500), ctx.json({ status: 'error' })),
+			),
+		);
+
+		renderAtRoute({ widgetId: WIDGET_ID, graphType: PANEL_TYPES.TIME_SERIES });
+
+		await waitFor(() => {
+			expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+		});
+	});
+
+	it('renders NewWidget when dashboard loads successfully', async () => {
+		server.use(
+			rest.get(
+				`http://localhost/api/v1/dashboards/${DASHBOARD_ID}`,
+				(_req, res, ctx) => res(ctx.status(200), ctx.json(mockDashboardResponse)),
+			),
+		);
+
+		renderAtRoute({ widgetId: WIDGET_ID, graphType: PANEL_TYPES.TIME_SERIES });
+
+		await waitFor(() => {
+			expect(screen.getByTestId('new-widget')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/pages/DashboardWidget/index.tsx

@@ -1,29 +1,34 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { generatePath, useParams } from 'react-router-dom';
 import { Card, Typography } from 'antd';
 import getDashboard from 'api/v1/dashboards/id/get';
 import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { DASHBOARD_CACHE_TIME } from 'constants/queryCacheTime';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
 import NewWidget from 'container/NewWidget';
 import { isDrilldownEnabled } from 'container/QueryTable/Drilldown/drilldownUtils';
+import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { parseAsStringEnum, useQueryState } from 'nuqs';
+import useUrlQuery from 'hooks/useUrlQuery';
 import { setDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
+import { Dashboard } from 'types/api/dashboard/getAll';
 
 function DashboardWidget(): JSX.Element | null {
 	const { dashboardId } = useParams<{
 		dashboardId: string;
 	}>();
-	const [widgetId] = useQueryState('widgetId');
-	const [graphType] = useQueryState(
-		'graphType',
-		parseAsStringEnum<PANEL_TYPES>(Object.values(PANEL_TYPES)),
-	);
+	const query = useUrlQuery();
+	const { graphType, widgetId } = useMemo(() => {
+		return {
+			graphType: query.get(QueryParams.graphType) as PANEL_TYPES,
+			widgetId: query.get(QueryParams.widgetId),
+		};
+	}, [query]);
 
 	const { safeNavigate } = useSafeNavigate();
 
@@ -57,8 +62,15 @@ function DashboardWidgetInternal({
 	widgetId: string;
 	graphType: PANEL_TYPES;
 }): JSX.Element | null {
+	const [selectedDashboard, setSelectedDashboard] = useState<
+		Dashboard | undefined
+	>(undefined);
+
+	const { transformDashboardVariables } = useTransformDashboardVariables(
+		dashboardId,
+	);
+
 	const {
-		data: dashboardResponse,
 		isFetching: isFetchingDashboardResponse,
 		isError: isErrorDashboardResponse,
 	} = useQuery([REACT_QUERY_KEY.DASHBOARD_BY_ID, dashboardId, widgetId], {
@@ -70,17 +82,15 @@ function DashboardWidgetInternal({
 		refetchOnWindowFocus: false,
 		cacheTime: DASHBOARD_CACHE_TIME,
 		onSuccess: (response) => {
+			const updatedDashboardData = transformDashboardVariables(response.data);
+			setSelectedDashboard(updatedDashboardData);
 			setDashboardVariablesStore({
 				dashboardId,
-				variables: response.data.data.variables,
+				variables: updatedDashboardData.data.variables,
 			});
 		},
 	});
 
-	const selectedDashboard = useMemo(() => dashboardResponse?.data, [
-		dashboardResponse?.data,
-	]);
-
 	if (isFetchingDashboardResponse) {
 		return <Spinner tip="Loading.." />;
 	}

frontend/src/pages/ServiceAccountsSettings/index.tsx

@@ -1 +0,0 @@
-export { default } from 'container/ServiceAccountsSettings/ServiceAccountsSettings';

frontend/src/pages/Settings/Settings.tsx

@@ -5,7 +5,6 @@ import logEvent from 'api/common/logEvent';
 import RouteTab from 'components/RouteTab';
 import { FeatureKeys } from 'constants/features';
 import ROUTES from 'constants/routes';
-import { IS_SERVICE_ACCOUNTS_ENABLED } from 'container/ServiceAccountsSettings/config';
 import { routeConfig } from 'container/SideNav/config';
 import { getQueryString } from 'container/SideNav/helper';
 import { settingsNavSections } from 'container/SideNav/menuItems';
@@ -86,8 +85,6 @@ function SettingsPage(): JSX.Element {
 							item.key === ROUTES.INGESTION_SETTINGS ||
 							item.key === ROUTES.ORG_SETTINGS ||
 							item.key === ROUTES.MEMBERS_SETTINGS ||
-							(IS_SERVICE_ACCOUNTS_ENABLED &&
-								item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS) ||
 							item.key === ROUTES.SHORTCUTS
 								? true
 								: item.isEnabled,
@@ -119,8 +116,6 @@ function SettingsPage(): JSX.Element {
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
 							item.key === ROUTES.MEMBERS_SETTINGS ||
-							(IS_SERVICE_ACCOUNTS_ENABLED &&
-								item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS) ||
 							item.key === ROUTES.INGESTION_SETTINGS
 								? true
 								: item.isEnabled,
@@ -146,9 +141,7 @@ function SettingsPage(): JSX.Element {
 						isEnabled:
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
-							item.key === ROUTES.MEMBERS_SETTINGS ||
-							(IS_SERVICE_ACCOUNTS_ENABLED &&
-								item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS)
+							item.key === ROUTES.MEMBERS_SETTINGS
 								? true
 								: item.isEnabled,
 					}));

frontend/src/pages/Settings/config.tsx

@@ -17,7 +17,6 @@ import { TFunction } from 'i18next';
 import {
 	Backpack,
 	BellDot,
-	Bot,
 	Building,
 	Cpu,
 	CreditCard,
@@ -31,7 +30,6 @@ import {
 } from 'lucide-react';
 import ChannelsEdit from 'pages/ChannelsEdit';
 import MembersSettings from 'pages/MembersSettings';
-import ServiceAccountsSettings from 'pages/ServiceAccountsSettings';
 import Shortcuts from 'pages/Shortcuts';
 
 export const organizationSettings = (t: TFunction): RouteTabProps['routes'] => [
@@ -205,21 +203,6 @@ export const mySettings = (t: TFunction): RouteTabProps['routes'] => [
 	},
 ];
 
-export const serviceAccountsSettings = (
-	t: TFunction,
-): RouteTabProps['routes'] => [
-	{
-		Component: ServiceAccountsSettings,
-		name: (
-			<div className="periscope-tab">
-				<Bot size={16} /> {t('routes:service_accounts').toString()}
-			</div>
-		),
-		route: ROUTES.SERVICE_ACCOUNTS_SETTINGS,
-		key: ROUTES.SERVICE_ACCOUNTS_SETTINGS,
-	},
-];
-
 export const createAlertChannels = (t: TFunction): RouteTabProps['routes'] => [
 	{
 		Component: (): JSX.Element => (

frontend/src/pages/Settings/utils.ts

@@ -1,5 +1,4 @@
 import { RouteTabProps } from 'components/RouteTab/types';
-import { IS_SERVICE_ACCOUNTS_ENABLED } from 'container/ServiceAccountsSettings/config';
 import { TFunction } from 'i18next';
 import { ROLES, USER_ROLES } from 'types/roles';
 
@@ -18,7 +17,6 @@ import {
 	organizationSettings,
 	roleDetails,
 	rolesSettings,
-	serviceAccountsSettings,
 } from './config';
 
 export const getRoutes = (
@@ -65,10 +63,6 @@ export const getRoutes = (
 
 	if (isAdmin) {
 		settings.push(...apiKeys(t), ...membersSettings(t));
-
-		if (IS_SERVICE_ACCOUNTS_ENABLED) {
-			settings.push(...serviceAccountsSettings(t));
-		}
 	}
 
 	// todo: Sagar - check the condition for role list and details page, to whom we want to serve

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -17,21 +17,18 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Modal } from 'antd';
 import getDashboard from 'api/v1/dashboards/id/get';
 import locked from 'api/v1/dashboards/id/lock';
-import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import dayjs, { Dayjs } from 'dayjs';
-import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
-import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
+import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
 import useTabVisibility from 'hooks/useTabFocus';
 import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout';
 import { getMinMaxForSelectedTime } from 'lib/getMinMax';
-import { defaultTo, isEmpty } from 'lodash-es';
+import { defaultTo } from 'lodash-es';
 import isEqual from 'lodash-es/isEqual';
 import isUndefined from 'lodash-es/isUndefined';
 import omitBy from 'lodash-es/omitBy';
 import { useAppContext } from 'providers/App/App';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
-import { normalizeUrlValueForVariable } from 'providers/Dashboard/normalizeUrlValue';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 // eslint-disable-next-line no-restricted-imports
 import { Dispatch } from 'redux';
@@ -39,10 +36,9 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
 import { SuccessResponseV2 } from 'types/api';
-import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
+import { Dashboard } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { v4 as generateUUID } from 'uuid';
 
 import {
 	DASHBOARD_CACHE_TIME,
@@ -137,9 +133,10 @@ export function DashboardProvider({
 	const {
 		currentDashboard,
 		updateLocalStorageDashboardVariables,
-	} = useDashboardVariablesFromLocalStorage(dashboardId);
-
-	const { getUrlVariables, updateUrlVariable } = useVariablesFromUrl();
+		getUrlVariables,
+		updateUrlVariable,
+		transformDashboardVariables,
+	} = useTransformDashboardVariables(dashboardId);
 
 	const updatedTimeRef = useRef<Dayjs | null>(null); // Using ref to store the updated time
 	const modalRef = useRef<any>(null);
@@ -151,99 +148,6 @@ export function DashboardProvider({
 
 	const [isDashboardFetching, setIsDashboardFetching] = useState<boolean>(false);
 
-	const mergeDBWithLocalStorage = (
-		data: Dashboard,
-		localStorageVariables: any,
-	): Dashboard => {
-		const updatedData = data;
-		if (data && localStorageVariables) {
-			const updatedVariables = data.data.variables;
-			const variablesFromUrl = getUrlVariables();
-			Object.keys(data.data.variables).forEach((variable) => {
-				const variableData = data.data.variables[variable];
-
-				// values from url
-				const urlVariable = variableData?.name
-					? variablesFromUrl[variableData?.name] || variablesFromUrl[variableData.id]
-					: variablesFromUrl[variableData.id];
-
-				let updatedVariable = {
-					...data.data.variables[variable],
-					...localStorageVariables[variableData.name as any],
-				};
-
-				// respect the url variable if it is set, override the others
-				if (!isEmpty(urlVariable)) {
-					if (urlVariable === ALL_SELECTED_VALUE) {
-						updatedVariable = {
-							...updatedVariable,
-							allSelected: true,
-						};
-					} else {
-						// Normalize URL value to match variable's multiSelect configuration
-						const normalizedValue = normalizeUrlValueForVariable(
-							urlVariable,
-							variableData,
-						);
-
-						updatedVariable = {
-							...updatedVariable,
-							selectedValue: normalizedValue,
-							// Only set allSelected to false if showALLOption is available
-							...(updatedVariable?.showALLOption && { allSelected: false }),
-						};
-					}
-				}
-
-				updatedVariables[variable] = updatedVariable;
-			});
-			updatedData.data.variables = updatedVariables;
-		}
-		return updatedData;
-	};
-	// As we do not have order and ID's in the variables object, we have to process variables to add order and ID if they do not exist in the variables object
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const transformDashboardVariables = (data: Dashboard): Dashboard => {
-		if (data && data.data && data.data.variables) {
-			const clonedDashboardData = mergeDBWithLocalStorage(
-				JSON.parse(JSON.stringify(data)),
-				currentDashboard,
-			);
-			const { variables } = clonedDashboardData.data;
-			const existingOrders: Set<number> = new Set();
-
-			for (const key in variables) {
-				// eslint-disable-next-line no-prototype-builtins
-				if (variables.hasOwnProperty(key)) {
-					const variable: IDashboardVariable = variables[key];
-
-					// Check if 'order' property doesn't exist or is undefined
-					if (variable.order === undefined) {
-						// Find a unique order starting from 0
-						let order = 0;
-						while (existingOrders.has(order)) {
-							order += 1;
-						}
-
-						variable.order = order;
-						existingOrders.add(order);
-						// ! BWC - Specific case for backward compatibility where textboxValue was used instead of defaultValue
-						if (variable.type === 'TEXTBOX' && !variable.defaultValue) {
-							variable.defaultValue = variable.textboxValue || '';
-						}
-					}
-
-					if (variable.id === undefined) {
-						variable.id = generateUUID();
-					}
-				}
-			}
-
-			return clonedDashboardData;
-		}
-
-		return data;
-	};
 	const dashboardResponse = useQuery(
 		[
 			REACT_QUERY_KEY.DASHBOARD_BY_ID,
@@ -274,13 +178,14 @@ export function DashboardProvider({
 			},
 
 			onSuccess: (data: SuccessResponseV2<Dashboard>) => {
-				// if the url variable is not set for any variable, set it to the default value
-				const variables = data?.data?.data?.variables;
+				const updatedDashboardData = transformDashboardVariables(data?.data);
+
+				// initialize URL variables after dashboard state is set to avoid race conditions
+				const variables = updatedDashboardData?.data?.variables;
 				if (variables) {
 					initializeDefaultVariables(variables, getUrlVariables, updateUrlVariable);
 				}
 
-				const updatedDashboardData = transformDashboardVariables(data?.data);
 				const updatedDate = dayjs(updatedDashboardData?.updatedAt);
 
 				setIsDashboardLocked(updatedDashboardData?.locked || false);

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

@@ -381,6 +381,7 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 							multiSelect: false,
 							allSelected: false,
 							showALLOption: true,
+							order: 0,
 						},
 						services: {
 							id: 'svc-id',
@@ -388,6 +389,7 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 							multiSelect: true,
 							allSelected: false,
 							showALLOption: true,
+							order: 1,
 						},
 					},
 					mockGetUrlVariables,

frontend/src/utils/app.ts

@@ -1,7 +1,6 @@
 import getLocalStorage from 'api/browser/localstorage/get';
 import { FeatureKeys } from 'constants/features';
 import { SKIP_ONBOARDING } from 'constants/onboarding';
-import dayjs from 'dayjs';
 import { get } from 'lodash-es';
 import { getLocation } from 'utils/getLocation';
 
@@ -74,19 +73,3 @@ export function buildAbsolutePath({
 }
 
 export const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-export function toISOString(
-	date: Date | string | number | null | undefined,
-): string | null {
-	if (date == null) {
-		return null;
-	}
-
-	const d = dayjs(date);
-
-	if (!d.isValid()) {
-		return null;
-	}
-
-	return d.toISOString();
-}

frontend/src/utils/metricsTimeStorageUtils.ts

@@ -0,0 +1,28 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+/**
+ * Updates the stored time duration for a route in localStorage.
+ * Used by both DateTimeSelectionV2 (manual time pick) and useZoomOut (zoom out button).
+ *
+ * @param pathname - The route path (e.g. /infrastructure-monitoring/hosts)
+ * @param value - The time value to store (preset string like '1w' or JSON string for custom range)
+ */
+export function persistTimeDurationForRoute(
+	pathname: string,
+	value: string,
+): void {
+	const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
+	let preRoutesObject: Record<string, string> = {};
+	try {
+		preRoutesObject = preRoutes ? JSON.parse(preRoutes) : {};
+	} catch {
+		preRoutesObject = {};
+	}
+	const preRoute = { ...preRoutesObject, [pathname]: value };
+	setLocalStorageKey(
+		LOCALSTORAGE.METRICS_TIME_IN_DURATION,
+		JSON.stringify(preRoute),
+	);
+}

frontend/src/utils/permission/index.ts

@@ -100,7 +100,6 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	ROLES_SETTINGS: ['ADMIN'],
 	ROLE_DETAILS: ['ADMIN'],
 	MEMBERS_SETTINGS: ['ADMIN'],
-	SERVICE_ACCOUNTS_SETTINGS: ['ADMIN'],
 	BILLING: ['ADMIN'],
 	SUPPORT: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SOMETHING_WENT_WRONG: ['ADMIN', 'EDITOR', 'VIEWER'],