Merge branch 'main' into nv/dashboard-migration

docs/api/openapi.yml

@@ -2682,7 +2682,6 @@ components:
         unit:
           type: string
         value:
-          format: double
           type: number
       required:
       - value
@@ -3649,7 +3648,6 @@ components:
         unit:
           type: string
         value:
-          format: double
           type: number
       required:
       - value
@@ -3686,7 +3684,6 @@ components:
         unit:
           type: string
         value:
-          format: double
           type: number
       required:
       - value

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -3395,7 +3395,6 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	unit?: string;
 	/**
 	 * @type number
-	 * @format double
 	 */
 	value: number;
 }
@@ -3923,7 +3922,6 @@ export interface DashboardtypesComparisonThresholdDTO {
 	unit?: string;
 	/**
 	 * @type number
-	 * @format double
 	 */
 	value: number;
 }
@@ -4212,7 +4210,6 @@ export interface DashboardtypesTableThresholdDTO {
 	unit?: string;
 	/**
 	 * @type number
-	 * @format double
 	 */
 	value: number;
 }

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -2,7 +2,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
@@ -134,17 +134,18 @@ function CreateServiceAccountModal(): JSX.Element {
 					Cancel
 				</Button>
 
-				<AuthZButton
-					checks={[SACreatePermission]}
-					type="submit"
-					form="create-sa-form"
-					variant="solid"
-					color="primary"
-					loading={isSubmitting}
-					disabled={!isValid}
-				>
-					Create Service Account
-				</AuthZButton>
+				<AuthZTooltip checks={[SACreatePermission]}>
+					<Button
+						type="submit"
+						form="create-sa-form"
+						variant="solid"
+						color="primary"
+						loading={isSubmitting}
+						disabled={!isValid}
+					>
+						Create Service Account
+					</Button>
+				</AuthZTooltip>
 			</DialogFooter>
 		</DialogWrapper>
 	);

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -20,7 +20,6 @@ function OtherFiltersSkeleton(): JSX.Element {
 				<Skeleton.Input
 					active
 					size="small"
-					className="qf-other-filters-skeleton"
 					// eslint-disable-next-line react/no-array-index-key
 					key={index}
 				/>

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

@@ -4,7 +4,7 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
@@ -109,21 +109,24 @@ function KeyFormPhase({
 					<Button variant="solid" color="secondary" onClick={onClose}>
 						Cancel
 					</Button>
-					<AuthZButton
+					<AuthZTooltip
 						checks={[
 							APIKeyCreatePermission,
 							buildSAAttachPermission(accountId ?? ''),
 						]}
-						authZEnabled={!!accountId}
-						type="submit"
-						form={FORM_ID}
-						variant="solid"
-						color="primary"
-						loading={isSubmitting}
-						disabled={!isValid}
+						enabled={!!accountId}
 					>
-						Create Key
-					</AuthZButton>
+						<Button
+							type="submit"
+							form={FORM_ID}
+							variant="solid"
+							color="primary"
+							loading={isSubmitting}
+							disabled={!isValid}
+						>
+							Create Key
+						</Button>
+					</AuthZTooltip>
 				</div>
 			</div>
 		</>

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -1,7 +1,7 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { buildSADeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
@@ -84,17 +84,20 @@ function DeleteAccountModal(): JSX.Element {
 				<X size={12} />
 				Cancel
 			</Button>
-			<AuthZButton
+			<AuthZTooltip
 				checks={[buildSADeletePermission(accountId ?? '')]}
-				authZEnabled={!!accountId}
-				variant="solid"
-				color="destructive"
-				loading={isDeleting}
-				onClick={handleConfirm}
+				enabled={!!accountId}
 			>
-				<Trash2 size={12} />
-				Delete
-			</AuthZButton>
+				<Button
+					variant="solid"
+					color="destructive"
+					loading={isDeleting}
+					onClick={handleConfirm}
+				>
+					<Trash2 size={12} />
+					Delete
+				</Button>
+			</AuthZTooltip>
 		</div>
 	);
 

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

@@ -7,7 +7,6 @@ import { Input } from '@signozhq/ui/input';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	buildAPIKeyDeletePermission,
@@ -159,36 +158,38 @@ function EditKeyForm({
 			</form>
 
 			<div className="edit-key-modal__footer">
-				<AuthZButton
+				<AuthZTooltip
 					checks={[
 						buildAPIKeyDeletePermission(keyItem?.id ?? ''),
 						buildSADetachPermission(accountId ?? ''),
 					]}
-					authZEnabled={!!accountId && !!keyItem?.id}
-					variant="link"
-					color="destructive"
-					onClick={onRevokeClick}
+					enabled={!!accountId && !!keyItem?.id}
 				>
-					<Trash2 size={12} />
-					Revoke Key
-				</AuthZButton>
+					<Button variant="link" color="destructive" onClick={onRevokeClick}>
+						<Trash2 size={12} />
+						Revoke Key
+					</Button>
+				</AuthZTooltip>
 				<div className="edit-key-modal__footer-right">
 					<Button variant="solid" color="secondary" onClick={onClose}>
 						<X size={12} />
 						Cancel
 					</Button>
-					<AuthZButton
+					<AuthZTooltip
 						checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
-						authZEnabled={!!accountId && !!keyItem?.id}
-						type="submit"
-						form={FORM_ID}
-						variant="solid"
-						color="primary"
-						loading={isSaving}
-						disabled={!isDirty}
+						enabled={!!accountId && !!keyItem?.id}
 					>
-						Save Changes
-					</AuthZButton>
+						<Button
+							type="submit"
+							form={FORM_ID}
+							variant="solid"
+							color="primary"
+							loading={isSaving}
+							disabled={!isDirty}
+						>
+							Save Changes
+						</Button>
+					</AuthZTooltip>
 				</div>
 			</div>
 		</>

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,13 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
 import { KeyRound, X } from '@signozhq/icons';
-import { Pagination, Skeleton, Table, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
-import { withAuthZContent } from 'lib/authz/components/withAuthZ/withAuthZContent';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	APIKeyCreatePermission,
-	APIKeyListPermission,
 	buildAPIKeyDeletePermission,
 	buildSAAttachPermission,
 	buildSADetachPermission,
@@ -25,10 +24,10 @@ interface KeysTabProps {
 	keys: ServiceaccounttypesGettableFactorAPIKeyDTO[];
 	isLoading: boolean;
 	isDisabled?: boolean;
+	canUpdate?: boolean;
 	accountId?: string;
 	currentPage: number;
 	pageSize: number;
-	onPageChange: (page: number) => void;
 }
 
 interface BuildColumnsParams {
@@ -114,26 +113,29 @@ function buildColumns({
 			render: (_, record): JSX.Element => {
 				const tooltipTitle = isDisabled ? 'Service account disabled' : 'Revoke Key';
 				return (
-					<Tooltip title={tooltipTitle}>
-						<AuthZButton
-							checks={[
-								buildAPIKeyDeletePermission(record.id),
-								buildSADetachPermission(accountId),
-							]}
-							authZEnabled={!isDisabled && !!accountId}
-							variant="ghost"
-							size="sm"
-							color="destructive"
-							disabled={isDisabled}
-							onClick={(e): void => {
-								e.stopPropagation();
-								onRevokeClick(record.id);
-							}}
-							className="keys-tab__revoke-btn"
-						>
-							<X size={12} />
-						</AuthZButton>
-					</Tooltip>
+					<AuthZTooltip
+						checks={[
+							buildAPIKeyDeletePermission(record.id),
+							buildSADetachPermission(accountId),
+						]}
+						enabled={!isDisabled && !!accountId}
+					>
+						<Tooltip title={tooltipTitle}>
+							<Button
+								variant="ghost"
+								size="sm"
+								color="destructive"
+								disabled={isDisabled}
+								onClick={(e): void => {
+									e.stopPropagation();
+									onRevokeClick(record.id);
+								}}
+								className="keys-tab__revoke-btn"
+							>
+								<X size={12} />
+							</Button>
+						</Tooltip>
+					</AuthZTooltip>
 				);
 			},
 		},
@@ -147,7 +149,6 @@ function KeysTab({
 	accountId = '',
 	currentPage,
 	pageSize,
-	onPageChange,
 }: KeysTabProps): JSX.Element {
 	const [, setIsAddKeyOpen] = useQueryState(
 		'add-key',
@@ -211,18 +212,21 @@ function KeysTab({
 						Learn more
 					</a>
 				</p>
-				<AuthZButton
+				<AuthZTooltip
 					checks={[APIKeyCreatePermission, buildSAAttachPermission(accountId)]}
-					authZEnabled={!isDisabled && !!accountId}
-					variant="link"
-					color="primary"
-					onClick={async (): Promise<void> => {
-						await setIsAddKeyOpen(true);
-					}}
-					disabled={isDisabled}
+					enabled={!isDisabled && !!accountId}
 				>
-					+ Add your first key
-				</AuthZButton>
+					<Button
+						variant="link"
+						color="primary"
+						onClick={async (): Promise<void> => {
+							await setIsAddKeyOpen(true);
+						}}
+						disabled={isDisabled}
+					>
+						+ Add your first key
+					</Button>
+				</AuthZTooltip>
 			</div>
 		);
 	}
@@ -274,24 +278,6 @@ function KeysTab({
 				})}
 			/>
 
-			<Pagination
-				current={currentPage}
-				pageSize={pageSize}
-				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={onPageChange}
-				className="sa-drawer__keys-pagination"
-			/>
-
 			<EditKeyModal keyItem={editKey} />
 
 			<RevokeKeyModal />
@@ -299,7 +285,4 @@ function KeysTab({
 	);
 }
 
-export default withAuthZContent(KeysTab, {
-	checks: [APIKeyListPermission],
-	fallbackOnLoading: <Skeleton active paragraph={{ rows: 6 }} />,
-});
+export default KeysTab;

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -6,20 +6,15 @@ import { Input } from '@signozhq/ui/input';
 import { useCopyToClipboard } from 'react-use';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { withAuthZContent } from 'lib/authz/components/withAuthZ/withAuthZContent';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-import {
-	buildSAReadPermission,
-	buildSAUpdatePermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import { buildSAUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
 
 import SaveErrorItem from './SaveErrorItem';
 import type { SaveError } from './utils';
-import { Skeleton } from 'antd';
 
 interface OverviewTabProps {
 	account: ServiceAccountRow;
@@ -28,6 +23,7 @@ interface OverviewTabProps {
 	localRoles: string[];
 	onRolesChange: (v: string[]) => void;
 	isDisabled: boolean;
+	canUpdate?: boolean;
 	availableRoles: AuthtypesRoleDTO[];
 	rolesLoading?: boolean;
 	rolesError?: boolean;
@@ -43,6 +39,7 @@ function OverviewTab({
 	localRoles,
 	onRolesChange,
 	isDisabled,
+	canUpdate = true,
 	availableRoles,
 	rolesLoading,
 	rolesError,
@@ -89,22 +86,23 @@ function OverviewTab({
 				<label className="sa-drawer__label" htmlFor="sa-name">
 					Name
 				</label>
-				{isDisabled ? (
-					<AuthZTooltip checks={[buildSAUpdatePermission(account.id)]}>
+				{isDisabled || !canUpdate ? (
+					<AuthZTooltip
+						checks={[buildSAUpdatePermission(account.id)]}
+						enabled={!isDisabled && !canUpdate}
+					>
 						<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>
 					</AuthZTooltip>
 				) : (
-					<AuthZTooltip checks={[buildSAUpdatePermission(account.id)]}>
-						<Input
-							id="sa-name"
-							value={localName}
-							onChange={(e): void => onNameChange(e.target.value)}
-							placeholder="Enter name"
-						/>
-					</AuthZTooltip>
+					<Input
+						id="sa-name"
+						value={localName}
+						onChange={(e): void => onNameChange(e.target.value)}
+						placeholder="Enter name"
+					/>
 				)}
 			</div>
 
@@ -222,9 +220,4 @@ function OverviewTab({
 	);
 }
 
-export default withAuthZContent(OverviewTab, {
-	checks: (props): ReturnType<typeof buildSAReadPermission>[] => [
-		buildSAReadPermission(props.account.id),
-	],
-	fallbackOnLoading: <Skeleton active paragraph={{ rows: 6 }} />,
-});
+export default OverviewTab;

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -1,7 +1,7 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	buildAPIKeyDeletePermission,
 	buildSADetachPermission,
@@ -45,20 +45,23 @@ export function RevokeKeyFooter({
 				<X size={12} />
 				Cancel
 			</Button>
-			<AuthZButton
+			<AuthZTooltip
 				checks={[
 					buildAPIKeyDeletePermission(keyId ?? ''),
 					buildSADetachPermission(accountId ?? ''),
 				]}
-				authZEnabled={!!accountId && !!keyId}
-				variant="solid"
-				color="destructive"
-				loading={isRevoking}
-				onClick={onConfirm}
+				enabled={!!accountId && !!keyId}
 			>
-				<Trash2 size={12} />
-				Revoke Key
-			</AuthZButton>
+				<Button
+					variant="solid"
+					color="destructive"
+					loading={isRevoking}
+					onClick={onConfirm}
+				>
+					<Trash2 size={12} />
+					Revoke Key
+				</Button>
+			</AuthZTooltip>
 		</>
 	);
 }
@@ -108,7 +111,7 @@ function RevokeKeyModal(): JSX.Element {
 	}
 
 	function handleCancel(): void {
-		void setRevokeKeyId(null);
+		setRevokeKeyId(null);
 	}
 
 	return (

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,17 +1,11 @@
-import React, {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { toast } from '@signozhq/ui/sonner';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Skeleton } from 'antd';
+import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountsQueryKey,
@@ -22,6 +16,7 @@ import {
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedCallout from 'lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout';
 import { useRoles } from 'components/RolesSelect';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import {
@@ -33,13 +28,15 @@ import {
 	RoleUpdateFailure,
 	useServiceAccountRoleManager,
 } from 'hooks/serviceAccount/useServiceAccountRoleManager';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import {
 	APIKeyCreatePermission,
+	APIKeyListPermission,
 	buildSAAttachPermission,
 	buildSADeletePermission,
+	buildSAReadPermission,
 	buildSAUpdatePermission,
 } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -50,6 +47,7 @@ import {
 import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';
 
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
 import KeysTab from './KeysTab';
@@ -72,12 +70,14 @@ function toSaveApiError(err: unknown): APIError {
 	);
 }
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function ServiceAccountDrawer({
 	onSuccess,
 }: ServiceAccountDrawerProps): JSX.Element {
 	const [selectedAccountId, setSelectedAccountId] = useQueryState(
 		SA_QUERY_PARAMS.ACCOUNT,
 	);
+	const open = !!selectedAccountId;
 	const [activeTab, setActiveTab] = useQueryState(
 		SA_QUERY_PARAMS.TAB,
 		parseAsStringEnum<ServiceAccountDrawerTab>(
@@ -100,14 +100,28 @@ function ServiceAccountDrawer({
 		SA_QUERY_PARAMS.DELETE_SA,
 		parseAsBoolean.withDefault(false),
 	);
-
 	const [localName, setLocalName] = useState('');
 	const [localRoles, setLocalRoles] = useState<string[]>([]);
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
 
 	const queryClient = useQueryClient();
-	const open = !!selectedAccountId;
+
+	const { permissions: drawerPermissions, isLoading: isAuthZLoading } = useAuthZ(
+		selectedAccountId
+			? [
+					buildSAReadPermission(selectedAccountId),
+					buildSAUpdatePermission(selectedAccountId),
+					buildSADeletePermission(selectedAccountId),
+					APIKeyListPermission,
+				]
+			: [],
+		{ enabled: !!selectedAccountId },
+	);
+
+	const canRead =
+		drawerPermissions?.[buildSAReadPermission(selectedAccountId ?? '')]
+			?.isGranted ?? false;
 
 	const {
 		data: accountData,
@@ -117,7 +131,7 @@ function ServiceAccountDrawer({
 		refetch: refetchAccount,
 	} = useGetServiceAccount(
 		{ id: selectedAccountId ?? '' },
-		{ query: { enabled: !!selectedAccountId } },
+		{ query: { enabled: canRead && !!selectedAccountId } },
 	);
 
 	const account = useMemo(
@@ -131,7 +145,7 @@ function ServiceAccountDrawer({
 		isLoading: isRolesLoading,
 		applyDiff,
 	} = useServiceAccountRoleManager(selectedAccountId ?? '', {
-		enabled: !!selectedAccountId,
+		enabled: canRead && !!selectedAccountId,
 	});
 
 	const roleSessionRef = useRef<string | null>(null);
@@ -180,9 +194,16 @@ function ServiceAccountDrawer({
 		refetch: refetchRoles,
 	} = useRoles();
 
+	const canListKeys =
+		drawerPermissions?.[APIKeyListPermission]?.isGranted ?? false;
+
+	const canUpdate =
+		drawerPermissions?.[buildSAUpdatePermission(selectedAccountId ?? '')]
+			?.isGranted ?? true;
+
 	const { data: keysData, isLoading: keysLoading } = useListServiceAccountKeys(
 		{ id: selectedAccountId ?? '' },
-		{ query: { enabled: !!selectedAccountId } },
+		{ query: { enabled: !!selectedAccountId && canListKeys } },
 	);
 	const keys = keysData?.data ?? [];
 
@@ -196,6 +217,7 @@ function ServiceAccountDrawer({
 		}
 	}, [keysLoading, keys.length, keysPage, setKeysPage]);
 
+	// the retry for this mutation is safe due to the api being idempotent on backend
 	const { mutateAsync: updateMutateAsync } = useUpdateServiceAccount();
 
 	const retryNameUpdate = useCallback(async (): Promise<void> => {
@@ -353,71 +375,23 @@ function ServiceAccountDrawer({
 	]);
 
 	const handleClose = useCallback((): void => {
-		setSaveErrors([]);
+		void setIsDeleteOpen(null);
+		void setIsAddKeyOpen(null);
+		void setSelectedAccountId(null);
 		void setActiveTab(null);
 		void setKeysPage(null);
 		void setEditKeyId(null);
-		void setIsAddKeyOpen(null);
-		void setIsDeleteOpen(null);
-		void setSelectedAccountId(null);
+		setSaveErrors([]);
 	}, [
+		setSelectedAccountId,
 		setActiveTab,
 		setKeysPage,
 		setEditKeyId,
 		setIsAddKeyOpen,
 		setIsDeleteOpen,
-		setSelectedAccountId,
 	]);
 
-	const footer = useMemo(
-		() =>
-			activeTab === ServiceAccountDrawerTab.Overview && !isDeleted && open ? (
-				<div className="sa-drawer__footer">
-					<AuthZButton
-						checks={[buildSADeletePermission(selectedAccountId ?? '')]}
-						authZEnabled={!!selectedAccountId}
-						variant="link"
-						color="destructive"
-						onClick={(): void => {
-							void setIsDeleteOpen(true);
-						}}
-					>
-						<Trash2 size={12} />
-						Delete Service Account
-					</AuthZButton>
-					<div className="sa-drawer__footer-right">
-						<Button variant="outlined" color="secondary" onClick={handleClose}>
-							<X size={14} />
-							Cancel
-						</Button>
-						<AuthZButton
-							checks={[buildSAUpdatePermission(selectedAccountId ?? '')]}
-							authZEnabled={!!selectedAccountId}
-							variant="solid"
-							color="primary"
-							loading={isSaving}
-							disabled={!isDirty}
-							onClick={handleSave}
-						>
-							Save Changes
-						</AuthZButton>
-					</div>
-				</div>
-			) : null,
-		[
-			activeTab,
-			isDeleted,
-			open,
-			selectedAccountId,
-			isSaving,
-			isDirty,
-			handleClose,
-			handleSave,
-			setIsDeleteOpen,
-		],
-	);
-
-	const body = (
+	const drawerContent = (
 		<div className="sa-drawer__layout">
 			<div className="sa-drawer__tabs">
 				<ToggleGroupSimple
@@ -459,23 +433,26 @@ function ServiceAccountDrawer({
 					]}
 				/>
 				{activeTab === ServiceAccountDrawerTab.Keys && (
-					<AuthZButton
+					<AuthZTooltip
 						checks={[
 							APIKeyCreatePermission,
 							buildSAAttachPermission(selectedAccountId ?? ''),
 						]}
-						authZEnabled={!isDeleted && !!selectedAccountId}
-						variant="outlined"
-						size="sm"
-						color="secondary"
-						disabled={isDeleted}
-						onClick={(): void => {
-							void setIsAddKeyOpen(true);
-						}}
+						enabled={!isDeleted && !!selectedAccountId}
 					>
-						<Plus size={12} />
-						Add Key
-					</AuthZButton>
+						<Button
+							variant="outlined"
+							size="sm"
+							color="secondary"
+							disabled={isDeleted}
+							onClick={(): void => {
+								void setIsAddKeyOpen(true);
+							}}
+						>
+							<Plus size={12} />
+							Add Key
+						</Button>
+					</AuthZTooltip>
 				)}
 			</div>
 
@@ -484,7 +461,9 @@ function ServiceAccountDrawer({
 					activeTab === ServiceAccountDrawerTab.Keys ? ' sa-drawer__body--keys' : ''
 				}`}
 			>
-				{isAccountLoading && <Skeleton active paragraph={{ rows: 6 }} />}
+				{(isAuthZLoading || isAccountLoading) && (
+					<Skeleton active paragraph={{ rows: 6 }} />
+				)}
 				{isAccountError && (
 					<ErrorInPlace
 						error={toAPIError(
@@ -493,73 +472,141 @@ function ServiceAccountDrawer({
 						)}
 					/>
 				)}
-				{!isAccountLoading && !isAccountError && (
-					<>
-						{activeTab === ServiceAccountDrawerTab.Overview &&
-							(account ? (
-								<OverviewTab
-									account={account}
-									localName={localName}
-									onNameChange={handleNameChange}
-									localRoles={localRoles}
-									onRolesChange={(roles): void => {
-										setLocalRoles(roles);
-										clearRoleErrors();
-									}}
-									isDisabled={isDeleted}
-									availableRoles={availableRoles}
-									rolesLoading={rolesLoading}
-									rolesError={rolesError}
-									rolesErrorObj={rolesErrorObj}
-									onRefetchRoles={refetchRoles}
-									saveErrors={saveErrors}
-								/>
-							) : (
-								<Skeleton active />
-							))}
-						{activeTab === ServiceAccountDrawerTab.Keys && (
-							<KeysTab
-								keys={keys}
-								isLoading={keysLoading}
-								isDisabled={isDeleted}
-								accountId={selectedAccountId ?? ''}
-								currentPage={keysPage}
-								pageSize={PAGE_SIZE}
-								onPageChange={(page): void => {
-									void setKeysPage(page);
-								}}
-							/>
-						)}
-					</>
-				)}
+				{!isAuthZLoading &&
+					!isAccountLoading &&
+					!isAccountError &&
+					selectedAccountId && (
+						<>
+							{activeTab === ServiceAccountDrawerTab.Overview &&
+								(canRead && account ? (
+									<OverviewTab
+										account={account}
+										localName={localName}
+										onNameChange={handleNameChange}
+										localRoles={localRoles}
+										onRolesChange={(roles): void => {
+											setLocalRoles(roles);
+											clearRoleErrors();
+										}}
+										isDisabled={isDeleted}
+										canUpdate={canUpdate}
+										availableRoles={availableRoles}
+										rolesLoading={rolesLoading}
+										rolesError={rolesError}
+										rolesErrorObj={rolesErrorObj}
+										onRefetchRoles={refetchRoles}
+										saveErrors={saveErrors}
+									/>
+								) : (
+									<PermissionDeniedCallout permissionName="serviceaccount:read" />
+								))}
+							{activeTab === ServiceAccountDrawerTab.Keys &&
+								(canListKeys ? (
+									<KeysTab
+										keys={keys}
+										isLoading={keysLoading}
+										isDisabled={isDeleted}
+										canUpdate={canUpdate}
+										accountId={selectedAccountId}
+										currentPage={keysPage}
+										pageSize={PAGE_SIZE}
+									/>
+								) : (
+									<PermissionDeniedCallout permissionName="factor-api-key:list" />
+								))}
+						</>
+					)}
 			</div>
 		</div>
 	);
 
-	return (
-		<DrawerWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					handleClose();
-				}
-			}}
-			direction="right"
-			showCloseButton
-			showOverlay={false}
-			title="Service Account Details"
-			className="sa-drawer"
-			width="wide"
-			footer={footer}
-		>
-			{open && (
+	const footer = (
+		<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 => {
+						void setKeysPage(page);
+					}}
+					className="sa-drawer__keys-pagination"
+				/>
+			) : (
 				<>
-					{body}
-					<DeleteAccountModal />
-					<AddKeyModal />
+					{!isDeleted && (
+						<AuthZTooltip
+							checks={[buildSADeletePermission(selectedAccountId ?? '')]}
+							enabled={!!selectedAccountId}
+						>
+							<Button
+								variant="link"
+								color="destructive"
+								onClick={(): void => {
+									void setIsDeleteOpen(true);
+								}}
+							>
+								<Trash2 size={12} />
+								Delete Service Account
+							</Button>
+						</AuthZTooltip>
+					)}
+					{!isDeleted && (
+						<div className="sa-drawer__footer-right">
+							<Button variant="outlined" color="secondary" onClick={handleClose}>
+								<X size={14} />
+								Cancel
+							</Button>
+							<Button
+								variant="solid"
+								color="primary"
+								loading={isSaving}
+								disabled={!isDirty}
+								onClick={handleSave}
+							>
+								Save Changes
+							</Button>
+						</div>
+					)}
 				</>
 			)}
-		</DrawerWrapper>
+		</div>
+	);
+
+	return (
+		<>
+			<DrawerWrapper
+				open={open}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						handleClose();
+					}
+				}}
+				direction="right"
+				showCloseButton
+				showOverlay={false}
+				title="Service Account Details"
+				className="sa-drawer"
+				width="wide"
+				footer={footer}
+			>
+				{drawerContent}
+			</DrawerWrapper>
+
+			<DeleteAccountModal />
+
+			<AddKeyModal />
+		</>
 	);
 }
 

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

@@ -1,5 +1,4 @@
 import { toast } from '@signozhq/ui/sonner';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import {
@@ -60,7 +59,6 @@ describe('AddKeyModal', () => {
 			rest.post(SA_KEYS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(201), ctx.json(createdKeyResponse)),
 			),
-			setupAuthzAdmin(),
 		);
 	});
 

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

@@ -1,6 +1,5 @@
 import { toast } from '@signozhq/ui/sonner';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -62,7 +61,6 @@ describe('EditKeyModal (URL-controlled)', () => {
 			rest.delete(SA_KEY_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
-			setupAuthzAdmin(),
 		);
 	});
 

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

@@ -1,6 +1,5 @@
 import { toast } from '@signozhq/ui/sonner';
 import { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -36,7 +35,7 @@ const keys: ServiceaccounttypesGettableFactorAPIKeyDTO[] = [
 	{
 		id: 'key-2',
 		name: 'Staging Key',
-		expiresAt: 1924948800, // 2030-12-31 12:00 UTC (noon to avoid timezone issues)
+		expiresAt: 1924905600, // 2030-12-31
 		lastObservedAt: '2026-03-10T10:00:00Z',
 		serviceAccountId: 'sa-1',
 	},
@@ -48,7 +47,6 @@ const defaultProps = {
 	isDisabled: false,
 	currentPage: 1,
 	pageSize: 10,
-	onPageChange: jest.fn(),
 };
 
 function renderKeysTab(
@@ -69,7 +67,6 @@ describe('KeysTab', () => {
 			rest.delete(SA_KEY_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
-			setupAuthzAdmin(),
 		);
 	});
 
@@ -77,12 +74,9 @@ describe('KeysTab', () => {
 		server.resetHandlers();
 	});
 
-	it('renders loading state', async () => {
+	it('renders loading state', () => {
 		renderKeysTab({ isLoading: true });
-		// Wait for authz to complete, then check for skeleton
-		await waitFor(() => {
-			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
-		});
+		expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
 	});
 
 	it('renders empty state when no keys and clicking add sets add-key param', async () => {
@@ -97,9 +91,9 @@ describe('KeysTab', () => {
 			</NuqsTestingAdapter>,
 		);
 
-		await expect(
-			screen.findByText(/No keys. Start by creating one./i),
-		).resolves.toBeInTheDocument();
+		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(onUrlUpdate).toHaveBeenCalledWith(
@@ -109,12 +103,10 @@ describe('KeysTab', () => {
 		);
 	});
 
-	it('renders table with keys', async () => {
+	it('renders table with keys', () => {
 		renderKeysTab();
 
-		await expect(
-			screen.findByText('Production Key'),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByText('Production Key')).toBeInTheDocument();
 		expect(screen.getByText('Staging Key')).toBeInTheDocument();
 		expect(screen.getByText('Never')).toBeInTheDocument();
 		expect(screen.getByText('Dec 31, 2030')).toBeInTheDocument();
@@ -130,7 +122,7 @@ describe('KeysTab', () => {
 			</NuqsTestingAdapter>,
 		);
 
-		const row = (await screen.findByText('Production Key')).closest('tr');
+		const row = screen.getByText('Production Key').closest('tr');
 		if (!row) {
 			throw new Error('Row not found');
 		}
@@ -154,8 +146,6 @@ describe('KeysTab', () => {
 			</NuqsTestingAdapter>,
 		);
 
-		// Wait for authz to complete and table to render
-		await screen.findByText('Production Key');
 		const revokeBtns = screen
 			.getAllByRole('button')
 			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
@@ -173,8 +163,7 @@ describe('KeysTab', () => {
 
 		renderKeysTab();
 
-		// Wait for authz to complete and table to render
-		await screen.findByText('Production Key');
+		// Seed the keys cache so RevokeKeyModal can read the key name
 		const revokeBtns = screen
 			.getAllByRole('button')
 			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
@@ -188,11 +177,9 @@ describe('KeysTab', () => {
 		});
 	});
 
-	it('disables actions when isDisabled is true', async () => {
+	it('disables actions when isDisabled is true', () => {
 		renderKeysTab({ isDisabled: true });
 
-		// Wait for authz to complete and table to render
-		await screen.findByText('Production Key');
 		const revokeBtns = screen
 			.getAllByRole('button')
 			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -31,6 +32,30 @@ const activeAccountResponse = {
 	updatedAt: '2026-01-02T00:00:00Z',
 };
 
+jest.mock('@signozhq/ui/drawer', () => ({
+	...jest.requireActual('@signozhq/ui/drawer'),
+	DrawerWrapper: ({
+		children,
+		footer,
+		open,
+	}: {
+		children?: ReactNode;
+		footer?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null =>
+		open ? (
+			<div>
+				{children}
+				{footer}
+			</div>
+		) : null,
+}));
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
 function renderDrawer(
 	searchParams: Record<string, string> = { account: 'sa-1' },
 ): ReturnType<typeof render> {
@@ -93,7 +118,7 @@ describe('ServiceAccountDrawer — permissions', () => {
 		renderDrawer();
 
 		await waitFor(() => {
-			expect(screen.getByText(/read:serviceaccount/)).toBeInTheDocument();
+			expect(screen.getByText(/serviceaccount:read/)).toBeInTheDocument();
 		});
 	});
 
@@ -115,7 +140,7 @@ describe('ServiceAccountDrawer — permissions', () => {
 		fireEvent.click(screen.getByRole('radio', { name: /keys/i }));
 
 		await waitFor(() => {
-			expect(screen.getByText(/list:factor-api-key/)).toBeInTheDocument();
+			expect(screen.getByText(/factor-api-key:list/)).toBeInTheDocument();
 		});
 	});
 

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -6,6 +7,30 @@ import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 
+jest.mock('@signozhq/ui/drawer', () => ({
+	...jest.requireActual('@signozhq/ui/drawer'),
+	DrawerWrapper: ({
+		children,
+		footer,
+		open,
+	}: {
+		children?: ReactNode;
+		footer?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null =>
+		open ? (
+			<div>
+				{children}
+				{footer}
+			</div>
+		) : null,
+}));
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
 const ROLES_ENDPOINT = '*/api/v1/roles';
 const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
 const SA_ENDPOINT = '*/api/v1/service_accounts/sa-1';

frontend/src/container/MembersSettings/MembersSettings.styles.scss

@@ -33,8 +33,7 @@
 		color: var(--foreground);
 		letter-spacing: -0.07px;
 		line-height: var(--paragraph-base-400-line-height);
-		margin-bottom: var(--spacing-8);
-		margin-top: 0;
+		margin: 0;
 	}
 
 	&__controls {

frontend/src/container/RolesSettings/CreateEditRolePage/CreateEditRolePage.tsx

@@ -7,48 +7,19 @@ import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useNavigationBlocker } from 'hooks/useNavigationBlocker';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
-import { withAuthZPage } from 'lib/authz/components/withAuthZ/withAuthZPage';
-import { RouterContext } from 'lib/authz/components/withAuthZ/withAuthZ';
-import {
-	buildRoleReadPermission,
-	buildRoleUpdatePermission,
-	RoleCreatePermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import APIError from 'types/api/error';
 
 import PermissionEditor from './components/PermissionEditor';
 import { useCreateEditRolePageActions } from './useCreateEditRolePageActions';
+import { useNavigationBlocker } from 'hooks/useNavigationBlocker';
 
 import styles from './CreateEditRolePage.module.scss';
-import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
 
-function authzCheckFn(
-	_props: object,
-	router: RouterContext,
-): BrandedPermission[] {
-	const match = router.matchPath<{ roleId: string }>(ROUTES.ROLE_DETAILS);
-	const roleId = match?.roleId ?? 'new';
-	const roleName = router.searchParams.get('name') ?? '';
-	const isCreateMode = roleId === 'new';
-
-	if (isCreateMode) {
-		return [RoleCreatePermission];
-	}
-	if (roleName) {
-		return [
-			buildRoleReadPermission(roleName),
-			buildRoleUpdatePermission(roleName),
-		];
-	}
-	return [];
-}
-
-function CreateEditRolePageContent(): JSX.Element {
+function CreateEditRolePage(): JSX.Element {
 	const history = useHistory();
 	const { pathname } = useLocation();
 	const urlQuery = useUrlQuery();
@@ -76,6 +47,9 @@ function CreateEditRolePageContent(): JSX.Element {
 		saveError,
 		validationErrors,
 		isCreateMode,
+		hasRequiredPermission,
+		isAuthZLoading,
+		deniedPermission,
 		loadError,
 	} = useCreateEditRolePageActions(roleId, roleName);
 
@@ -107,6 +81,10 @@ function CreateEditRolePageContent(): JSX.Element {
 		roleName,
 	]);
 
+	if (!hasRequiredPermission && !isAuthZLoading) {
+		return <PermissionDeniedFullPage permissionName={deniedPermission} />;
+	}
+
 	if (!isRolesEnabled && !isFeatureGateLoading) {
 		return (
 			<div
@@ -149,7 +127,7 @@ function CreateEditRolePageContent(): JSX.Element {
 		);
 	}
 
-	if ((isLoading && !isCreateMode) || isFeatureGateLoading) {
+	if (isAuthZLoading || (isLoading && !isCreateMode) || isFeatureGateLoading) {
 		return (
 			<div className={styles.createEditRolePage}>
 				<Skeleton active paragraph={{ rows: 8 }} />
@@ -217,12 +195,7 @@ function CreateEditRolePageContent(): JSX.Element {
 							</Typography>
 						</div>
 					)}
-					<AuthZButton
-						checks={
-							isCreateMode
-								? [RoleCreatePermission]
-								: [buildRoleUpdatePermission(roleName)]
-						}
+					<Button
 						variant="solid"
 						color="primary"
 						onClick={handleSaveAndNavigate}
@@ -231,7 +204,7 @@ function CreateEditRolePageContent(): JSX.Element {
 						data-testid="save-button"
 					>
 						{isCreateMode ? 'Create role' : 'Save changes'}
-					</AuthZButton>
+					</Button>
 				</div>
 			</div>
 
@@ -317,11 +290,4 @@ function CreateEditRolePageContent(): JSX.Element {
 	);
 }
 
-export default withAuthZPage(CreateEditRolePageContent, {
-	checks: authzCheckFn,
-	fallbackOnLoading: (
-		<div className={styles.createEditRolePage}>
-			<Skeleton active paragraph={{ rows: 8 }} />
-		</div>
-	),
-});
+export default CreateEditRolePage;

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateEditRolePage.featureGate.test.tsx

@@ -1,21 +1,24 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import { FeatureKeys } from 'constants/features';
-import { server } from 'mocks-server/server';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
 import {
 	invalidLicense,
-	setupAuthzAdmin,
+	mockUseAuthZGrantAll,
 } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 beforeEach(() => {
-	server.use(setupAuthzAdmin());
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 });
 
 afterEach(() => {
-	server.resetHandlers();
+	jest.clearAllMocks();
 });
 
 function renderCreatePage(
@@ -68,9 +71,7 @@ describe('CreateEditRolePage - Feature Gate', () => {
 				),
 			});
 
-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
@@ -79,9 +80,7 @@ describe('CreateEditRolePage - Feature Gate', () => {
 		it('shows error when license is invalid', async () => {
 			renderCreatePage({ activeLicense: invalidLicense });
 
-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
@@ -93,19 +92,16 @@ describe('CreateEditRolePage - Feature Gate', () => {
 			await expect(screen.findByText('Create Role')).resolves.toBeInTheDocument();
 		});
 
-		it('shows back button when feature disabled', async () => {
+		it('shows back button when feature disabled', () => {
 			renderCreatePage({ activeLicense: invalidLicense });
 
-			await expect(
-				screen.findByTestId('cancel-button'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
 		});
 
-		it('back button is enabled when feature disabled', async () => {
+		it('back button is enabled when feature disabled', () => {
 			renderCreatePage({ activeLicense: invalidLicense });
 
-			const cancelButton = await screen.findByTestId('cancel-button');
-			expect(cancelButton).not.toBeDisabled();
+			expect(screen.getByTestId('cancel-button')).not.toBeDisabled();
 		});
 	});
 
@@ -122,9 +118,7 @@ describe('CreateEditRolePage - Feature Gate', () => {
 				),
 			});
 
-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
@@ -133,9 +127,7 @@ describe('CreateEditRolePage - Feature Gate', () => {
 		it('shows error when license is invalid', async () => {
 			renderEditPage(ROLE_ID, ROLE_NAME, { activeLicense: invalidLicense });
 
-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateRolePage.authz.test.tsx

@@ -1,17 +1,16 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { render, screen } from 'tests/test-utils';
-import {
-	setupAuthzAdmin,
-	setupAuthzDenyAll,
-} from 'lib/authz/utils/authz-test-utils';
+import { mockUseAuthZDenyAll } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 afterEach(() => {
-	server.resetHandlers();
+	jest.clearAllMocks();
 });
 
 function renderCreatePage(): ReturnType<typeof render> {
@@ -32,7 +31,7 @@ function renderCreatePage(): ReturnType<typeof render> {
 describe('CreateRolePage - AuthZ', () => {
 	describe('permission denied', () => {
 		it('shows PermissionDeniedFullPage when create permission denied', async () => {
-			server.use(setupAuthzDenyAll());
+			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
 
 			renderCreatePage();
 
@@ -44,31 +43,19 @@ describe('CreateRolePage - AuthZ', () => {
 
 	describe('loading state', () => {
 		it('shows skeleton while checking permissions', () => {
-			server.use(
-				rest.post('*/api/v1/authz/check', (_req, res, ctx) =>
-					res(
-						ctx.delay(200),
-						ctx.status(200),
-						ctx.json({ data: [], status: 'success' }),
-					),
-				),
-			);
+			mockUseAuthZ.mockReturnValue({
+				isLoading: true,
+				isFetching: true,
+				error: null,
+				permissions: null,
+				allowed: false,
+				deniedPermissions: [],
+				refetchPermissions: jest.fn(),
+			});
 
 			renderCreatePage();
 
 			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
 		});
 	});
-
-	describe('permission granted', () => {
-		it('renders create page when create permission granted', async () => {
-			server.use(setupAuthzAdmin());
-
-			renderCreatePage();
-
-			await expect(
-				screen.findByTestId('role-name-input'),
-			).resolves.toBeInTheDocument();
-		});
-	});
 });

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateRolePage.test.tsx

@@ -3,22 +3,27 @@ import ROUTES from 'constants/routes';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 const rolesApiBase = '*/api/v1/roles';
 
 beforeEach(() => {
-	server.use(setupAuthzAdmin());
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 });
 
 afterEach(() => {
+	jest.clearAllMocks();
 	server.resetHandlers();
 });
 
-async function renderCreatePage(): Promise<ReturnType<typeof render>> {
-	const result = render(
+function renderCreatePage(): ReturnType<typeof render> {
+	return render(
 		<Switch>
 			<Route path={ROUTES.ROLES_SETTINGS} exact>
 				<div data-testid="roles-list-redirect" />
@@ -30,63 +35,61 @@ async function renderCreatePage(): Promise<ReturnType<typeof render>> {
 		undefined,
 		{ initialRoute: '/settings/roles/new' },
 	);
-	await screen.findByTestId('create-edit-role-page');
-	return result;
 }
 
 describe('CreateRolePage', () => {
 	describe('initial render', () => {
-		it('renders create role page with testId', async () => {
-			await renderCreatePage();
+		it('renders create role page with testId', () => {
+			renderCreatePage();
 
 			expect(screen.getByTestId('create-edit-role-page')).toBeInTheDocument();
 		});
 
-		it('shows breadcrumb with "Create role" as current page', async () => {
-			await renderCreatePage();
+		it('shows breadcrumb with "Create role" as current page', () => {
+			renderCreatePage();
 
 			const page = screen.getByTestId('create-edit-role-page');
 			const breadcrumbs = within(page).getAllByText('Create role');
 			expect(breadcrumbs.length).toBeGreaterThanOrEqual(1);
 		});
 
-		it('renders empty name input', async () => {
-			await renderCreatePage();
+		it('renders empty name input', () => {
+			renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			expect(nameInput).toHaveValue('');
 		});
 
-		it('renders empty description input', async () => {
-			await renderCreatePage();
+		it('renders empty description input', () => {
+			renderCreatePage();
 
 			const descInput = screen.getByTestId('role-description-input');
 			expect(descInput).toHaveValue('');
 		});
 
-		it('name input is enabled in create mode', async () => {
-			await renderCreatePage();
+		it('name input is enabled in create mode', () => {
+			renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			expect(nameInput).not.toBeDisabled();
 		});
 
-		it('save button shows "Create role" text', async () => {
-			await renderCreatePage();
+		it('save button shows "Create role" text', () => {
+			renderCreatePage();
 
 			const saveBtn = screen.getByTestId('save-button');
 			expect(saveBtn).toHaveTextContent('Create role');
 		});
 
-		it('save button is disabled when no changes', async () => {
-			await renderCreatePage();
+		it('save button is disabled when no changes', () => {
+			renderCreatePage();
 
 			const saveBtn = screen.getByTestId('save-button');
 			expect(saveBtn).toBeDisabled();
 		});
 
-		it('does not show unsaved indicator initially', async () => {
-			await renderCreatePage();
+		it('does not show unsaved indicator initially', () => {
+			renderCreatePage();
 
 			expect(screen.queryByText('Unsaved changes')).not.toBeInTheDocument();
 		});
@@ -95,7 +98,7 @@ describe('CreateRolePage', () => {
 	describe('form interactions', () => {
 		it('enables save button when name is entered', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'test-role');
@@ -106,7 +109,7 @@ describe('CreateRolePage', () => {
 
 		it('shows unsaved indicator when form modified', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'my-role');
@@ -118,7 +121,7 @@ describe('CreateRolePage', () => {
 
 		it('enables save button when description is entered', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();
 
 			const descInput = screen.getByTestId('role-description-input');
 			await user.type(descInput, 'Some description');
@@ -131,7 +134,7 @@ describe('CreateRolePage', () => {
 	describe('cancel action', () => {
 		it('navigates to roles list on cancel', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();
 
 			const cancelBtn = screen.getByTestId('cancel-button');
 			await user.click(cancelBtn);
@@ -160,7 +163,7 @@ describe('CreateRolePage', () => {
 			);
 
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'my-custom-role');
@@ -197,7 +200,7 @@ describe('CreateRolePage', () => {
 			);
 
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();
 
 			const descInput = screen.getByTestId('role-description-input');
 			await user.type(descInput, 'Description only');
@@ -215,7 +218,7 @@ describe('CreateRolePage', () => {
 
 		it('shows error banner with "Role name is required" when saving with empty name', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();
 
 			const descInput = screen.getByTestId('role-description-input');
 			await user.type(descInput, 'Description only');
@@ -234,7 +237,7 @@ describe('CreateRolePage', () => {
 
 		it('clears error banner when user starts typing in name field', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();
 
 			const descInput = screen.getByTestId('role-description-input');
 			await user.type(descInput, 'Description only');
@@ -267,7 +270,7 @@ describe('CreateRolePage', () => {
 			);
 
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'duplicate-role');
@@ -288,7 +291,7 @@ describe('CreateRolePage', () => {
 	describe('validation errors', () => {
 		it('shows validation error when Only Selected has no items', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/EditRolePage.authz.test.tsx

@@ -1,43 +1,22 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { render, screen } from 'tests/test-utils';
 import {
-	setupAuthzAdmin,
-	setupAuthzDenyAll,
-	setupAuthzDeny,
+	mockUseAuthZDenyAll,
+	mockUseAuthZGrantByPrefix,
 } from 'lib/authz/utils/authz-test-utils';
-import { buildRoleUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 const EDIT_ROLE_ID = 'test-role-123';
 const EDIT_ROLE_NAME = 'test-role';
-const rolesApiBase = '*/api/v1/roles';
-
-beforeEach(() => {
-	server.use(
-		rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({
-					status: 'success',
-					data: {
-						id: EDIT_ROLE_ID,
-						name: EDIT_ROLE_NAME,
-						description: 'Test role description',
-						type: 'custom',
-						transactionGroups: [],
-					},
-				}),
-			),
-		),
-	);
-});
 
 afterEach(() => {
-	server.resetHandlers();
+	jest.clearAllMocks();
 });
 
 function renderEditPage(): ReturnType<typeof render> {
@@ -58,7 +37,7 @@ function renderEditPage(): ReturnType<typeof render> {
 describe('EditRolePage - AuthZ', () => {
 	describe('permission denied', () => {
 		it('shows PermissionDeniedFullPage when read permission denied', async () => {
-			server.use(setupAuthzDenyAll());
+			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
 
 			renderEditPage();
 
@@ -68,7 +47,7 @@ describe('EditRolePage - AuthZ', () => {
 		});
 
 		it('shows PermissionDeniedFullPage when update permission denied but read granted', async () => {
-			server.use(setupAuthzDeny(buildRoleUpdatePermission(EDIT_ROLE_NAME)));
+			mockUseAuthZ.mockImplementation(mockUseAuthZGrantByPrefix('read'));
 
 			renderEditPage();
 
@@ -76,35 +55,36 @@ describe('EditRolePage - AuthZ', () => {
 				screen.findByText(/You are not authorized/i),
 			).resolves.toBeInTheDocument();
 		});
+
+		it('checks both read and update permissions for edit mode', () => {
+			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
+
+			renderEditPage();
+
+			expect(mockUseAuthZ).toHaveBeenCalledWith(
+				expect.arrayContaining([
+					expect.stringContaining('read'),
+					expect.stringContaining('update'),
+				]),
+			);
+		});
 	});
 
 	describe('loading state', () => {
-		it('shows skeleton while checking permissions', async () => {
-			server.use(
-				rest.post('*/api/v1/authz/check', (_req, res, ctx) =>
-					res(
-						ctx.delay(200),
-						ctx.status(200),
-						ctx.json({ data: [], status: 'success' }),
-					),
-				),
-			);
+		it('shows skeleton while checking permissions', () => {
+			mockUseAuthZ.mockReturnValue({
+				isLoading: true,
+				isFetching: true,
+				error: null,
+				permissions: null,
+				allowed: false,
+				deniedPermissions: [],
+				refetchPermissions: jest.fn(),
+			});
 
 			renderEditPage();
 
 			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
 		});
 	});
-
-	describe('permission granted', () => {
-		it('renders edit page when both read and update permissions granted', async () => {
-			server.use(setupAuthzAdmin());
-
-			renderEditPage();
-
-			await expect(
-				screen.findByText(`Role - ${EDIT_ROLE_NAME}`),
-			).resolves.toBeInTheDocument();
-		});
-	});
 });

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/EditRolePage.test.tsx

@@ -4,10 +4,14 @@ import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 const CUSTOM_ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';
 const rolesApiBase = '*/api/v1/roles';
 
@@ -28,8 +32,8 @@ const roleWithTransactionGroups = {
 };
 
 beforeEach(() => {
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 	server.use(
-		setupAuthzAdmin(),
 		rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
 			res(ctx.status(200), ctx.json(roleWithTransactionGroups)),
 		),
@@ -37,6 +41,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
+	jest.clearAllMocks();
 	server.resetHandlers();
 });
 
@@ -111,9 +116,9 @@ describe('EditRolePage', () => {
 
 			renderEditPage();
 
-			await expect(
-				screen.findByTestId('cancel-button'),
-			).resolves.toBeInTheDocument();
+			await waitFor(() => {
+				expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
+			});
 		});
 
 		it('navigates to view page when cancel clicked in error state', async () => {
@@ -127,8 +132,10 @@ describe('EditRolePage', () => {
 
 			renderEditPage();
 
-			const cancelButton = await screen.findByTestId('cancel-button');
-			await user.click(cancelButton);
+			await waitFor(async () => {
+				const cancelButton = await screen.findByTestId('cancel-button');
+				await user.click(cancelButton);
+			});
 
 			await expect(
 				screen.findByTestId('role-details-redirect'),

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/JsonEditor.test.tsx

@@ -1,18 +1,21 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { server } from 'mocks-server/server';
 import { render, screen, userEvent, within } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 beforeEach(() => {
-	server.use(setupAuthzAdmin());
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 });
 
 afterEach(() => {
-	server.resetHandlers();
+	jest.clearAllMocks();
 });
 
 function renderPage(): ReturnType<typeof render> {
@@ -34,13 +37,13 @@ function renderPage(): ReturnType<typeof render> {
 
 async function switchToJsonMode(): Promise<void> {
 	const user = userEvent.setup();
-	const jsonRadio = await screen.findByTestId('permission-editor-mode-json');
+	const jsonRadio = screen.getByTestId('permission-editor-mode-json');
 	await user.click(jsonRadio);
 }
 
 async function switchToInteractiveMode(): Promise<void> {
 	const user = userEvent.setup();
-	const interactiveRadio = await screen.findByTestId(
+	const interactiveRadio = screen.getByTestId(
 		'permission-editor-mode-interactive',
 	);
 	await user.click(interactiveRadio);

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/PermissionEditor.test.tsx

@@ -1,28 +1,31 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 async function expandAllCards(): Promise<void> {
 	const user = userEvent.setup();
-	const expandButton = await screen.findByTestId('expand-all-button');
+	const expandButton = screen.getByTestId('expand-all-button');
 	await user.click(expandButton);
 }
 
 beforeEach(() => {
-	server.use(setupAuthzAdmin());
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 });
 
 afterEach(() => {
-	server.resetHandlers();
+	jest.clearAllMocks();
 });
 
-async function renderPage(): Promise<ReturnType<typeof render>> {
-	const result = render(
+function renderPage(): ReturnType<typeof render> {
+	return render(
 		<TooltipProvider>
 			<Switch>
 				<Route path={ROUTES.ROLES_SETTINGS} exact>
@@ -36,20 +39,18 @@ async function renderPage(): Promise<ReturnType<typeof render>> {
 		undefined,
 		{ initialRoute: '/settings/roles/new' },
 	);
-	await screen.findByTestId('permission-editor');
-	return result;
 }
 
 describe('PermissionEditor', () => {
 	describe('mode toggle', () => {
-		it('renders permission editor with testId', async () => {
-			await renderPage();
+		it('renders permission editor with testId', () => {
+			renderPage();
 
 			expect(screen.getByTestId('permission-editor')).toBeInTheDocument();
 		});
 
-		it('defaults to interactive mode', async () => {
-			await renderPage();
+		it('defaults to interactive mode', () => {
+			renderPage();
 
 			const interactiveRadio = screen.getByTestId(
 				'permission-editor-mode-interactive',
@@ -59,7 +60,7 @@ describe('PermissionEditor', () => {
 
 		it('switches to JSON mode when clicked', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 
 			const jsonRadio = screen.getByTestId('permission-editor-mode-json');
 			await user.click(jsonRadio);
@@ -70,7 +71,7 @@ describe('PermissionEditor', () => {
 
 		it('switches back to interactive mode', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 
 			const jsonRadio = screen.getByTestId('permission-editor-mode-json');
 			await user.click(jsonRadio);
@@ -86,8 +87,8 @@ describe('PermissionEditor', () => {
 	});
 
 	describe('resource cards', () => {
-		it('renders all resource cards', async () => {
-			await renderPage();
+		it('renders all resource cards', () => {
+			renderPage();
 
 			expect(
 				screen.getByTestId('resource-card-factor-api-key'),
@@ -98,8 +99,8 @@ describe('PermissionEditor', () => {
 			).toBeInTheDocument();
 		});
 
-		it('resource cards are collapsed by default', async () => {
-			await renderPage();
+		it('resource cards are collapsed by default', () => {
+			renderPage();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const header = within(apiKeyCard).getByTestId(
@@ -111,7 +112,7 @@ describe('PermissionEditor', () => {
 
 		it('expands resource card when header clicked', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const header = within(apiKeyCard).getByTestId(
@@ -125,7 +126,7 @@ describe('PermissionEditor', () => {
 
 		it('collapses expanded resource card when header clicked again', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const header = within(apiKeyCard).getByTestId(
@@ -139,7 +140,7 @@ describe('PermissionEditor', () => {
 		});
 
 		it('shows granted count in resource card header', async () => {
-			await renderPage();
+			renderPage();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			await expect(
@@ -150,7 +151,7 @@ describe('PermissionEditor', () => {
 
 	describe('action toggles', () => {
 		it('renders action toggles for each available action', async () => {
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -169,7 +170,7 @@ describe('PermissionEditor', () => {
 		});
 
 		it('defaults all actions to None scope', async () => {
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -187,7 +188,7 @@ describe('PermissionEditor', () => {
 
 		it('changes scope to All when clicked', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -208,7 +209,7 @@ describe('PermissionEditor', () => {
 
 		it('updates granted count when scope changed', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -227,7 +228,7 @@ describe('PermissionEditor', () => {
 	describe('Only Selected scope', () => {
 		it('shows item input selector when Only Selected is chosen', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -244,7 +245,7 @@ describe('PermissionEditor', () => {
 
 		it('adds item when typed and Enter pressed', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -262,7 +263,7 @@ describe('PermissionEditor', () => {
 
 		it('adds item when Add button clicked', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -283,7 +284,7 @@ describe('PermissionEditor', () => {
 
 		it('adds multiple items separated by comma', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -303,7 +304,7 @@ describe('PermissionEditor', () => {
 
 		it('adds multiple items separated by space', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -323,7 +324,7 @@ describe('PermissionEditor', () => {
 
 		it('does not add duplicate items', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -343,7 +344,7 @@ describe('PermissionEditor', () => {
 
 		it('removes item when X clicked', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -366,7 +367,7 @@ describe('PermissionEditor', () => {
 
 		it('shows Add button disabled when input is empty', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -384,7 +385,7 @@ describe('PermissionEditor', () => {
 	describe('scope change confirmation dialog', () => {
 		it('shows confirm dialog when leaving Only Selected with items', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -406,7 +407,7 @@ describe('PermissionEditor', () => {
 
 		it('clears items when confirmed', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -433,7 +434,7 @@ describe('PermissionEditor', () => {
 
 		it('keeps items when cancelled', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -460,7 +461,7 @@ describe('PermissionEditor', () => {
 
 		it('does not show dialog when leaving Only Selected with no items', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -479,7 +480,7 @@ describe('PermissionEditor', () => {
 
 	describe('verbs without Only Selected option', () => {
 		it('does not show Only Selected for list verb', async () => {
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -500,8 +501,8 @@ describe('PermissionEditor', () => {
 	});
 
 	describe('collapse/expand all resources', () => {
-		it('shows expand/collapse toggle group', async () => {
-			await renderPage();
+		it('shows expand/collapse toggle group', () => {
+			renderPage();
 
 			expect(screen.getByTestId('toggle-all-group')).toBeInTheDocument();
 			expect(screen.getByTestId('expand-all-button')).toBeInTheDocument();
@@ -509,7 +510,7 @@ describe('PermissionEditor', () => {
 		});
 
 		it('expands all cards when expand button clicked', async () => {
-			await renderPage();
+			renderPage();
 			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -523,7 +524,7 @@ describe('PermissionEditor', () => {
 	describe('resource card error states', () => {
 		it('shows error border on collapsed card with validation error', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');
@@ -553,7 +554,7 @@ describe('PermissionEditor', () => {
 
 		it('hides error border when card is expanded', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');
@@ -590,7 +591,7 @@ describe('PermissionEditor', () => {
 
 		it('clears validation error when permission is changed', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');

frontend/src/container/RolesSettings/CreateEditRolePage/useCreateEditRolePageActions.ts

@@ -16,6 +16,7 @@ import {
 	useRolePermissions,
 	useUpdateRolePermissions,
 } from '../hooks/useRolePermissions';
+import { useRoleAuthZ } from '../hooks/useRoleAuthZ';
 import {
 	useRoleUnsavedChanges,
 	type RoleFormData,
@@ -42,6 +43,9 @@ interface UseCreateEditRolePageCallbacksResult {
 	saveError: APIError | null;
 	clearSaveError: () => void;
 	validationErrors: Set<string>;
+	hasRequiredPermission: boolean;
+	isAuthZLoading: boolean;
+	deniedPermission: string;
 }
 
 export function useCreateEditRolePageActions(
@@ -51,6 +55,23 @@ export function useCreateEditRolePageActions(
 	const history = useHistory();
 	const isCreateMode = roleId === 'new';
 
+	const {
+		hasCreatePermission,
+		hasReadPermission,
+		hasUpdatePermission,
+		isAuthZLoading,
+	} = useRoleAuthZ(roleName);
+
+	const deniedPermission = useMemo(() => {
+		if (isCreateMode) {
+			return 'role:create';
+		}
+		if (roleName) {
+			return `role:${roleName}:update`;
+		}
+		return `role:<missing-rule-name>:update`;
+	}, [isCreateMode, roleName]);
+
 	const [formData, setFormData] = useState<RoleFormData>({
 		name: '',
 		description: '',
@@ -240,5 +261,10 @@ export function useCreateEditRolePageActions(
 		saveError,
 		clearSaveError,
 		validationErrors,
+		hasRequiredPermission: isCreateMode
+			? hasCreatePermission
+			: hasReadPermission && hasUpdatePermission,
+		isAuthZLoading,
+		deniedPermission,
 	};
 }

frontend/src/container/RolesSettings/DeleteRoleModal/useDeleteRoleModal.ts

@@ -13,6 +13,7 @@ import APIError from 'types/api/error';
 interface UseDeleteRoleModalProps {
 	roleId?: string | null;
 	isManaged: boolean;
+	hasDeletePermission: boolean;
 	onDeleteSuccess?: () => void;
 }
 
@@ -30,7 +31,7 @@ interface UseDeleteRoleModalResult {
 export function useDeleteRoleModal(
 	props: UseDeleteRoleModalProps,
 ): UseDeleteRoleModalResult {
-	const { roleId, isManaged, onDeleteSuccess } = props;
+	const { roleId, isManaged, hasDeletePermission, onDeleteSuccess } = props;
 	const queryClient = useQueryClient();
 
 	const [deleteTargetRoleId, setDeleteTargetRoleId] = useState<string | null>(
@@ -78,8 +79,10 @@ export function useDeleteRoleModal(
 
 	const isDeleteModalOpen = deleteTargetRoleId !== null;
 
-	const isDeleteDisabled = isManaged;
-	const deleteDisabledReason = 'Managed roles cannot be deleted';
+	const isDeleteDisabled = isManaged || !hasDeletePermission;
+	const deleteDisabledReason = isManaged
+		? 'Managed roles cannot be deleted'
+		: 'You do not have permission to delete this role';
 
 	return {
 		isDeleteModalOpen,

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

@@ -5,11 +5,12 @@ import { Pagination, Skeleton } from 'antd';
 import { useListRoles } from 'api/generated/services/role';
 import { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
+import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { withAuthZPage } from 'lib/authz/components/withAuthZ/withAuthZPage';
-import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
 import { useTimezone } from 'providers/Timezone';
 import { RoleType } from 'types/roles';
@@ -23,14 +24,23 @@ type DisplayItem =
 	| { type: 'section'; label: string; count?: number }
 	| { type: 'role'; role: AuthtypesRoleDTO };
 
-interface RolesListContentProps {
+interface RolesListingTableProps {
 	searchQuery: string;
 }
 
-function RolesListContent({ searchQuery }: RolesListContentProps): JSX.Element {
+function RolesListingTable({
+	searchQuery,
+}: RolesListingTableProps): JSX.Element {
 	const { isRolesEnabled } = useRolesFeatureGate();
 
-	const { data, isLoading, isError, error } = useListRoles();
+	const { permissions: listPerms, isLoading: isAuthZLoading } = useAuthZ([
+		RoleListPermission,
+	]);
+	const hasListPermission = listPerms?.[RoleListPermission]?.isGranted ?? false;
+
+	const { data, isLoading, isError, error } = useListRoles({
+		query: { enabled: hasListPermission },
+	});
 	const { formatTimezoneAdjustedTimestampOptional } = useTimezone();
 	const history = useHistory();
 	const urlQuery = useUrlQuery();
@@ -145,7 +155,11 @@ function RolesListContent({ searchQuery }: RolesListContentProps): JSX.Element {
 		</>
 	);
 
-	if (isLoading) {
+	if (!hasListPermission && listPerms !== null) {
+		return <PermissionDeniedFullPage permissionName="role:list" />;
+	}
+
+	if (isAuthZLoading || isLoading) {
 		return (
 			<div className={styles.rolesListingTable}>
 				<Skeleton active paragraph={{ rows: 5 }} />
@@ -267,11 +281,4 @@ function RolesListContent({ searchQuery }: RolesListContentProps): JSX.Element {
 	);
 }
 
-export default withAuthZPage<RolesListContentProps>(RolesListContent, {
-	checks: [RoleListPermission],
-	fallbackOnLoading: (
-		<div className={styles.rolesListingTable}>
-			<Skeleton active paragraph={{ rows: 5 }} />
-		</div>
-	),
-});
+export default RolesListingTable;

frontend/src/container/RolesSettings/RolesSettings.tsx

@@ -1,14 +1,11 @@
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import ROUTES from 'constants/routes';
-import {
-	RoleCreatePermission,
-	RoleListPermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import { RoleCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 
 import RolesListingTable from './RolesComponents/RolesListingTable';
@@ -40,25 +37,24 @@ function RolesSettings(): JSX.Element {
 			</div>
 			<div className={styles.rolesSettingsContent}>
 				<div className={styles.rolesSettingsToolbar}>
-					<AuthZTooltip checks={[RoleListPermission]}>
-						<Input
-							type="search"
-							placeholder="Search for roles..."
-							value={searchQuery}
-							onChange={(e): void => setSearchQuery(e.target.value)}
-						/>
-					</AuthZTooltip>
+					<Input
+						type="search"
+						placeholder="Search for roles..."
+						value={searchQuery}
+						onChange={(e): void => setSearchQuery(e.target.value)}
+					/>
 					{isRolesEnabled && (
-						<AuthZButton
-							checks={[RoleCreatePermission]}
-							variant="solid"
-							color="primary"
-							className={styles.roleSettingsToolbarButton}
-							onClick={(): void => history.push(ROUTES.ROLE_CREATE)}
-						>
-							<Plus size={14} />
-							Custom role
-						</AuthZButton>
+						<AuthZTooltip checks={[RoleCreatePermission]}>
+							<Button
+								variant="solid"
+								color="primary"
+								className={styles.roleSettingsToolbarButton}
+								onClick={(): void => history.push(ROUTES.ROLE_CREATE)}
+							>
+								<Plus size={14} />
+								Custom role
+							</Button>
+						</AuthZTooltip>
 					)}
 				</div>
 				<RolesListingTable searchQuery={searchQuery} />

frontend/src/container/RolesSettings/ViewRolePage/ViewRolePage.tsx

@@ -10,17 +10,11 @@ import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
 import { useGetRole } from 'api/generated/services/role';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import { useDeleteRoleModal } from 'container/RolesSettings/DeleteRoleModal/useDeleteRoleModal';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { useRoleAuthZ } from 'container/RolesSettings/hooks/useRoleAuthZ';
 import { transformApiToRolePermissions } from 'container/RolesSettings/hooks/useRolePermissions';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
-import { withAuthZPage } from 'lib/authz/components/withAuthZ/withAuthZPage';
-import { RouterContext } from 'lib/authz/components/withAuthZ/withAuthZ';
-import {
-	buildRoleDeletePermission,
-	buildRoleReadPermission,
-	buildRoleUpdatePermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
 import { RoleType } from 'types/roles';
@@ -33,7 +27,7 @@ import { useViewRolePageActions } from './useViewRolePageActions';
 
 import styles from './ViewRolePage.module.scss';
 
-function ViewRolePageContent(): JSX.Element {
+function ViewRolePage(): JSX.Element {
 	const { formatTimezoneAdjustedTimestampOptional } = useTimezone();
 	const { isRolesEnabled, isLoading: isFeatureGateLoading } =
 		useRolesFeatureGate();
@@ -51,15 +45,26 @@ function ViewRolePageContent(): JSX.Element {
 		handleTabChange,
 	} = useViewRolePageActions();
 
+	const {
+		hasReadPermission,
+		readRolePermission,
+		hasUpdatePermission,
+		updateRolePermission,
+		hasDeletePermission,
+		isAuthZLoading,
+	} = useRoleAuthZ(roleName);
+
 	const { data, isLoading, error } = useGetRole(
 		{ id: roleId ?? '' },
-		{ query: { enabled: !!roleId } },
+		{ query: { enabled: !!roleId && hasReadPermission } },
 	);
 	const role = data?.data;
 	const isManaged = role?.type === RoleType.MANAGED;
 
 	const {
 		isDeleteModalOpen,
+		isDeleteDisabled,
+		deleteDisabledReason,
 		deleteError,
 		handleOpenDeleteModal,
 		handleCloseDeleteModal,
@@ -67,6 +72,7 @@ function ViewRolePageContent(): JSX.Element {
 	} = useDeleteRoleModal({
 		roleId,
 		isManaged: isManaged ?? false,
+		hasDeletePermission,
 		onDeleteSuccess: handleCancel,
 	});
 
@@ -138,6 +144,12 @@ function ViewRolePageContent(): JSX.Element {
 		],
 	);
 
+	if (!hasReadPermission && !isAuthZLoading) {
+		return (
+			<PermissionDeniedFullPage permissionName={readRolePermission.object} />
+		);
+	}
+
 	if (!isRolesEnabled && !isFeatureGateLoading) {
 		return (
 			<div className={styles.viewRolePage} data-testid="view-role-page">
@@ -175,7 +187,7 @@ function ViewRolePageContent(): JSX.Element {
 		);
 	}
 
-	if (isLoading || isFeatureGateLoading) {
+	if (isAuthZLoading || isLoading || isFeatureGateLoading) {
 		return (
 			<div className={styles.viewRolePage}>
 				<Skeleton active paragraph={{ rows: 8 }} />
@@ -232,55 +244,47 @@ function ViewRolePageContent(): JSX.Element {
 				</div>
 
 				<div className={styles.viewRolePageActions}>
-					{isManaged ? (
-						<TooltipSimple title="Managed roles cannot be deleted">
-							<Button
-								variant="link"
-								color="destructive"
-								disabled
-								data-testid="delete-button"
-								className={styles.deleteButton}
-							>
-								Delete
-							</Button>
-						</TooltipSimple>
-					) : (
-						<AuthZButton
-							checks={[buildRoleDeletePermission(roleName)]}
+					<TooltipSimple
+						title={isDeleteDisabled ? deleteDisabledReason : 'Open delete modal'}
+					>
+						<Button
 							variant="link"
 							color="destructive"
 							onClick={handleOpenDeleteModal}
+							disabled={isDeleteDisabled}
 							data-testid="delete-button"
 							className={styles.deleteButton}
 						>
 							Delete
-						</AuthZButton>
-					)}
+						</Button>
+					</TooltipSimple>
 
 					<Divider type="vertical" />
 
-					{isManaged ? (
-						<TooltipSimple title="Managed roles cannot be updated">
-							<Button
-								variant="solid"
-								color="primary"
-								disabled
-								data-testid="save-button"
-							>
-								Update
-							</Button>
-						</TooltipSimple>
-					) : (
-						<AuthZButton
-							checks={[buildRoleUpdatePermission(roleName)]}
+					<TooltipSimple
+						title={
+							isManaged
+								? 'Managed roles cannot be updated'
+								: hasUpdatePermission
+									? 'Open update page'
+									: `You are not authorized to perform ${updateRolePermission.object}`
+						}
+					>
+						<Button
 							variant="solid"
 							color="primary"
 							data-testid="save-button"
+							disabled={isManaged || !hasUpdatePermission}
 							onClick={handleRedirectToUpdate}
+							style={
+								isManaged || !hasUpdatePermission
+									? { pointerEvents: 'auto' }
+									: undefined
+							}
 						>
 							Update
-						</AuthZButton>
-					)}
+						</Button>
+					</TooltipSimple>
 				</div>
 			</div>
 
@@ -332,14 +336,4 @@ function ViewRolePageContent(): JSX.Element {
 	);
 }
 
-export default withAuthZPage(ViewRolePageContent, {
-	checks: (_props: object, router: RouterContext) => {
-		const roleName = router.searchParams.get('name') ?? '';
-		return roleName ? [buildRoleReadPermission(roleName)] : [];
-	},
-	fallbackOnLoading: (
-		<div className={styles.viewRolePage}>
-			<Skeleton active paragraph={{ rows: 8 }} />
-		</div>
-	),
-});
+export default ViewRolePage;

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.actions.test.tsx

@@ -37,7 +37,7 @@ describe('ViewRolePage - Actions', () => {
 			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
 		);
 
-		const cancelBtn = await screen.findByTestId('cancel-button');
+		const cancelBtn = screen.getByTestId('cancel-button');
 		await user.click(cancelBtn);
 
 		await expect(
@@ -61,10 +61,7 @@ describe('ViewRolePage - Actions', () => {
 			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
 		);
 
-		const updateBtn = await screen.findByTestId('save-button');
-		await waitFor(() => {
-			expect(updateBtn).not.toBeDisabled();
-		});
+		const updateBtn = screen.getByTestId('save-button');
 		await user.click(updateBtn);
 
 		await expect(
@@ -79,10 +76,7 @@ describe('ViewRolePage - Actions', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		const deleteBtn = await screen.findByTestId('delete-button');
-		await waitFor(() => {
-			expect(deleteBtn).not.toBeDisabled();
-		});
+		const deleteBtn = screen.getByTestId('delete-button');
 		await user.click(deleteBtn);
 
 		await expect(
@@ -111,11 +105,7 @@ describe('ViewRolePage - Actions', () => {
 			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
 		);
 
-		const deleteBtn = await screen.findByTestId('delete-button');
-		await waitFor(() => {
-			expect(deleteBtn).not.toBeDisabled();
-		});
-		await user.click(deleteBtn);
+		await user.click(screen.getByTestId('delete-button'));
 
 		await expect(
 			screen.findByText(/Are you sure you want to delete the role/),

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.authz.test.tsx

@@ -1,17 +1,15 @@
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import userEvent from '@testing-library/user-event';
 import * as roleApi from 'api/generated/services/role';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	customRoleResponse,
 	managedRoleResponse,
 } from 'mocks-server/__mockdata__/roles';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
 import {
-	AUTHZ_CHECK_URL,
-	setupAuthzAdmin,
-	setupAuthzDenyAll,
-	setupAuthzGrantByPrefix,
+	mockUseAuthZDenyAll,
+	mockUseAuthZGrantAll,
+	mockUseAuthZGrantByPrefix,
 } from 'lib/authz/utils/authz-test-utils';
 import { render, screen, waitFor } from 'tests/test-utils';
 
@@ -27,15 +25,25 @@ import {
 	mockPermissionsData,
 } from './testUtils';
 
+const mockUseAuthZGrantReadDeleteDenied = mockUseAuthZGrantByPrefix(
+	'read',
+	'update',
+);
+const mockUseAuthZGrantReadUpdateDenied = mockUseAuthZGrantByPrefix(
+	'read',
+	'delete',
+);
+
 describe('ViewRolePage - AuthZ', () => {
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
 	describe('permission denied', () => {
 		it('shows permission denied page when read permission denied', async () => {
-			server.use(setupAuthzDenyAll());
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZDenyAll);
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: undefined,
@@ -55,8 +63,10 @@ describe('ViewRolePage - AuthZ', () => {
 	});
 
 	describe('update button visibility', () => {
-		it('enables Update button when update permission granted', async () => {
-			server.use(setupAuthzAdmin());
+		it('enables Update button when update permission granted', () => {
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantAll);
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -82,13 +92,13 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			await expect(
-				screen.findByTestId('save-button'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('save-button')).toBeInTheDocument();
 		});
 
-		it('disables Update button when update permission denied', async () => {
-			server.use(setupAuthzGrantByPrefix('read', 'delete'));
+		it('disables Update button when update permission denied', () => {
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantReadUpdateDenied);
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -114,13 +124,13 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			await waitFor(() => {
-				expect(screen.getByTestId('save-button')).toBeDisabled();
-			});
+			expect(screen.getByTestId('save-button')).toBeDisabled();
 		});
 
-		it('disables Update button when role is managed', async () => {
-			server.use(setupAuthzAdmin());
+		it('disables Update button when role is managed', () => {
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantAll);
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: managedRoleResponse,
@@ -150,15 +160,15 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			await waitFor(() => {
-				expect(screen.getByTestId('save-button')).toBeDisabled();
-			});
+			expect(screen.getByTestId('save-button')).toBeDisabled();
 		});
 
 		it('shows managed role tooltip when update button hovered on managed role', async () => {
 			const user = userEvent.setup();
 
-			server.use(setupAuthzAdmin());
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantAll);
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: managedRoleResponse,
@@ -188,7 +198,7 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			const updateButton = await screen.findByTestId('save-button');
+			const updateButton = screen.getByTestId('save-button');
 			await user.hover(updateButton);
 
 			await waitFor(() => {
@@ -198,8 +208,12 @@ describe('ViewRolePage - AuthZ', () => {
 			});
 		});
 
-		it('disables and shows denial attribute when update permission denied', async () => {
-			server.use(setupAuthzGrantByPrefix('read', 'delete'));
+		it('shows authorization tooltip when update permission denied', async () => {
+			const user = userEvent.setup();
+
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantReadUpdateDenied);
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -225,17 +239,22 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
+			const updateButton = screen.getByTestId('save-button');
+			await user.hover(updateButton);
+
 			await waitFor(() => {
-				const updateButton = screen.getByTestId('save-button');
-				expect(updateButton).toBeDisabled();
-				expect(updateButton).toHaveAttribute('data-denied-permissions');
+				expect(screen.getByRole('tooltip')).toHaveTextContent(
+					/You are not authorized to perform/,
+				);
 			});
 		});
 	});
 
 	describe('delete button visibility', () => {
-		it('disables Delete button when delete permission denied', async () => {
-			server.use(setupAuthzGrantByPrefix('read', 'update'));
+		it('disables Delete button when delete permission denied', () => {
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantReadDeleteDenied);
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -261,13 +280,13 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			await waitFor(() => {
-				expect(screen.getByTestId('delete-button')).toBeDisabled();
-			});
+			expect(screen.getByTestId('delete-button')).toBeDisabled();
 		});
 
-		it('enables Delete button when delete permission granted', async () => {
-			server.use(setupAuthzAdmin());
+		it('enables Delete button when delete permission granted', () => {
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantAll);
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -293,13 +312,15 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			await waitFor(() => {
-				expect(screen.getByTestId('delete-button')).not.toBeDisabled();
-			});
+			expect(screen.getByTestId('delete-button')).not.toBeDisabled();
 		});
 
-		it('disables and shows denial attribute when delete permission denied', async () => {
-			server.use(setupAuthzGrantByPrefix('read', 'update'));
+		it('shows permission denied tooltip when delete permission denied', async () => {
+			const user = userEvent.setup();
+
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantReadDeleteDenied);
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -325,17 +346,22 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
+			const deleteButton = screen.getByTestId('delete-button');
+			await user.hover(deleteButton);
+
 			await waitFor(() => {
-				const deleteButton = screen.getByTestId('delete-button');
-				expect(deleteButton).toBeDisabled();
-				expect(deleteButton).toHaveAttribute('data-denied-permissions');
+				expect(screen.getByRole('tooltip')).toHaveTextContent(
+					'You do not have permission to delete this role',
+				);
 			});
 		});
 
 		it('shows managed role tooltip when role is managed', async () => {
 			const user = userEvent.setup();
 
-			server.use(setupAuthzAdmin());
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantAll);
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: managedRoleResponse,
@@ -365,7 +391,7 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			const deleteButton = await screen.findByTestId('delete-button');
+			const deleteButton = screen.getByTestId('delete-button');
 			await user.hover(deleteButton);
 
 			await waitFor(() => {
@@ -378,9 +404,15 @@ describe('ViewRolePage - AuthZ', () => {
 
 	describe('loading state', () => {
 		it('shows skeleton while checking permissions', () => {
-			server.use(
-				rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => res(ctx.delay('infinite'))),
-			);
+			jest.spyOn(useAuthZModule, 'useAuthZ').mockReturnValue({
+				isLoading: true,
+				isFetching: true,
+				error: null,
+				permissions: null,
+				allowed: false,
+				deniedPermissions: [],
+				refetchPermissions: jest.fn(),
+			});
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: undefined,

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.customRole.test.tsx

@@ -38,32 +38,28 @@ describe('ViewRolePage - Custom Role', () => {
 		).resolves.toBeInTheDocument();
 	});
 
-	it('shows Update button for custom roles', async () => {
+	it('shows Update button for custom roles', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await expect(screen.findByTestId('save-button')).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('save-button')).toBeInTheDocument();
 	});
 
-	it('shows Cancel button', async () => {
+	it('shows Cancel button', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await expect(
-			screen.findByTestId('cancel-button'),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
 	});
 
-	it('shows Delete button', async () => {
+	it('shows Delete button', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await expect(
-			screen.findByTestId('delete-button'),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('delete-button')).toBeInTheDocument();
 	});
 
 	it('renders created/updated timestamps labels', async () => {

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.edgeCases.test.tsx

@@ -1,7 +1,7 @@
 import * as roleApi from 'api/generated/services/role';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { server } from 'mocks-server/server';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { render, screen } from 'tests/test-utils';
 
 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
@@ -16,12 +16,13 @@ import {
 
 describe('ViewRolePage - Edge Cases', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 	});
 
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
 	it('shows fallback for missing description', async () => {
@@ -52,7 +53,7 @@ describe('ViewRolePage - Edge Cases', () => {
 		await expect(screen.findByText('Description')).resolves.toBeInTheDocument();
 	});
 
-	it('shows fallback for invalid timestamps', async () => {
+	it('shows fallback for invalid timestamps', () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: {
 				status: 'success',
@@ -78,14 +79,11 @@ describe('ViewRolePage - Edge Cases', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await expect(
-			screen.findByTestId('view-role-page'),
-		).resolves.toBeInTheDocument();
 		const dashes = screen.getAllByText('—');
 		expect(dashes.length).toBeGreaterThanOrEqual(2);
 	});
 
-	it('shows fallback for undefined timestamps', async () => {
+	it('shows fallback for undefined timestamps', () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: {
 				status: 'success',
@@ -111,9 +109,6 @@ describe('ViewRolePage - Edge Cases', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await expect(
-			screen.findByTestId('view-role-page'),
-		).resolves.toBeInTheDocument();
 		const dashes = screen.getAllByText('—');
 		expect(dashes.length).toBeGreaterThanOrEqual(2);
 	});

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.error.test.tsx

@@ -1,10 +1,10 @@
 import { Route, Switch } from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
 import * as roleApi from 'api/generated/services/role';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { server } from 'mocks-server/server';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
-import { render, screen, waitFor } from 'tests/test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
+import { render, screen } from 'tests/test-utils';
 
 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
 import ViewRolePage from '../ViewRolePage';
@@ -18,15 +18,16 @@ import {
 
 describe('ViewRolePage - Error State', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 	});
 
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
-	it('displays error component when API has error but role data exists', async () => {
+	it('displays error component when API has error but role data exists', () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: customRoleResponse,
 			isLoading: false,
@@ -45,9 +46,7 @@ describe('ViewRolePage - Error State', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitFor(() => {
-			expect(document.querySelector('.error-in-place')).toBeInTheDocument();
-		});
+		expect(document.querySelector('.error-in-place')).toBeInTheDocument();
 	});
 
 	it('displays error state with title when API fails without role data', async () => {
@@ -65,12 +64,10 @@ describe('ViewRolePage - Error State', () => {
 		await expect(
 			screen.findByText('Failed to load role'),
 		).resolves.toBeInTheDocument();
-		await waitFor(() => {
-			expect(document.querySelector('.error-in-place')).toBeInTheDocument();
-		});
+		expect(document.querySelector('.error-in-place')).toBeInTheDocument();
 	});
 
-	it('shows back button on error state', async () => {
+	it('shows back button on error state', () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: undefined,
 			isLoading: false,
@@ -82,9 +79,7 @@ describe('ViewRolePage - Error State', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await expect(
-			screen.findByTestId('cancel-button'),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
 	});
 
 	it('navigates to roles list when back button clicked on error state', async () => {
@@ -110,7 +105,7 @@ describe('ViewRolePage - Error State', () => {
 			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
 		);
 
-		const cancelButton = await screen.findByTestId('cancel-button');
+		const cancelButton = screen.getByTestId('cancel-button');
 		await user.click(cancelButton);
 
 		await expect(

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.featureGate.test.tsx

@@ -1,10 +1,10 @@
 import * as roleApi from 'api/generated/services/role';
 import { FeatureKeys } from 'constants/features';
-import { server } from 'mocks-server/server';
-import { defaultFeatureFlags, render, screen, waitFor } from 'tests/test-utils';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
 import {
 	invalidLicense,
-	setupAuthzAdmin,
+	mockUseAuthZGrantAll,
 } from 'lib/authz/utils/authz-test-utils';
 
 import ViewRolePage from '../ViewRolePage';
@@ -17,7 +17,9 @@ import {
 
 describe('ViewRolePage - Feature Gate', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: undefined,
@@ -29,7 +31,6 @@ describe('ViewRolePage - Feature Gate', () => {
 
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
 	describe('feature disabled', () => {
@@ -45,9 +46,7 @@ describe('ViewRolePage - Feature Gate', () => {
 				},
 			});
 
-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
@@ -59,34 +58,28 @@ describe('ViewRolePage - Feature Gate', () => {
 				appContextOverrides: { activeLicense: invalidLicense },
 			});
 
-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
 		});
 
-		it('shows back button when feature disabled', async () => {
+		it('shows back button when feature disabled', () => {
 			render(<ViewRolePage />, undefined, {
 				initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 				appContextOverrides: { activeLicense: invalidLicense },
 			});
 
-			await expect(
-				screen.findByTestId('cancel-button'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
 		});
 
-		it('back button is enabled when feature disabled', async () => {
+		it('back button is enabled when feature disabled', () => {
 			render(<ViewRolePage />, undefined, {
 				initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 				appContextOverrides: { activeLicense: invalidLicense },
 			});
 
-			await waitFor(() => {
-				expect(screen.getByTestId('cancel-button')).not.toBeDisabled();
-			});
+			expect(screen.getByTestId('cancel-button')).not.toBeDisabled();
 		});
 	});
 });

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.loading.test.tsx

@@ -1,6 +1,6 @@
 import * as roleApi from 'api/generated/services/role';
-import { server } from 'mocks-server/server';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { render } from 'tests/test-utils';
 
 import ViewRolePage from '../ViewRolePage';
@@ -13,12 +13,13 @@ import {
 
 describe('ViewRolePage - Loading State', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 	});
 
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
 	it('shows skeleton while fetching role', () => {

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.managedRole.test.tsx

@@ -1,5 +1,5 @@
 import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { render, screen, waitFor } from 'tests/test-utils';
+import { render, screen } from 'tests/test-utils';
 
 import ViewRolePage from '../ViewRolePage';
 
@@ -19,7 +19,7 @@ describe('ViewRolePage - Managed Role', () => {
 		jest.restoreAllMocks();
 	});
 
-	it('disables Delete button for managed roles', async () => {
+	it('disables Delete button for managed roles', () => {
 		render(
 			<TooltipProvider>
 				<ViewRolePage />
@@ -30,12 +30,10 @@ describe('ViewRolePage - Managed Role', () => {
 			},
 		);
 
-		await waitFor(() => {
-			expect(screen.getByTestId('delete-button')).toBeDisabled();
-		});
+		expect(screen.getByTestId('delete-button')).toBeDisabled();
 	});
 
-	it('disables Update button for managed roles', async () => {
+	it('disables Update button for managed roles', () => {
 		render(
 			<TooltipProvider>
 				<ViewRolePage />
@@ -46,12 +44,10 @@ describe('ViewRolePage - Managed Role', () => {
 			},
 		);
 
-		await waitFor(() => {
-			expect(screen.getByTestId('save-button')).toBeDisabled();
-		});
+		expect(screen.getByTestId('save-button')).toBeDisabled();
 	});
 
-	it('still shows Cancel button for managed roles', async () => {
+	it('still shows Cancel button for managed roles', () => {
 		render(
 			<TooltipProvider>
 				<ViewRolePage />
@@ -62,8 +58,6 @@ describe('ViewRolePage - Managed Role', () => {
 			},
 		);
 
-		await expect(
-			screen.findByTestId('cancel-button'),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
 	});
 });

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.permissionOverview.test.tsx

@@ -1,7 +1,7 @@
 import * as roleApi from 'api/generated/services/role';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { server } from 'mocks-server/server';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import userEvent from '@testing-library/user-event';
 import { render, screen, within } from 'tests/test-utils';
 
@@ -17,15 +17,8 @@ import {
 	mockPermissionsData,
 } from './testUtils';
 
-async function waitForPageReady(): Promise<void> {
-	await expect(
-		screen.findByTestId('view-role-page'),
-	).resolves.toBeInTheDocument();
-}
-
 async function expandAllCards(): Promise<void> {
 	const user = userEvent.setup();
-	await waitForPageReady();
 	const expandButton = screen.getByTestId('expand-all-button');
 	await user.click(expandButton);
 }
@@ -37,7 +30,6 @@ describe('ViewRolePage - Permission Overview', () => {
 
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
 	it('renders Transaction Groups section label', async () => {
@@ -50,21 +42,19 @@ describe('ViewRolePage - Permission Overview', () => {
 		).resolves.toBeInTheDocument();
 	});
 
-	it('renders permission overview container', async () => {
+	it('renders permission overview container', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(screen.getByTestId('permission-overview')).toBeInTheDocument();
 	});
 
-	it('shows resource permission cards', async () => {
+	it('shows resource permission cards', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(
 			screen.getByTestId('resource-section-factor-api-key'),
 		).toBeInTheDocument();
@@ -74,12 +64,11 @@ describe('ViewRolePage - Permission Overview', () => {
 		).toBeInTheDocument();
 	});
 
-	it('displays granted count for each resource', async () => {
+	it('displays granted count for each resource', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(
 			screen.getByTestId('granted-count-factor-api-key'),
 		).toBeInTheDocument();
@@ -88,15 +77,16 @@ describe('ViewRolePage - Permission Overview', () => {
 
 describe('ViewRolePage - Permission Overview Loading State', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 	});
 
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
-	it('shows skeleton when permissions are loading', async () => {
+	it('shows skeleton when permissions are loading', () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: customRoleResponse,
 			isLoading: false,
@@ -115,22 +105,22 @@ describe('ViewRolePage - Permission Overview Loading State', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(screen.getByTestId('permission-overview-loading')).toBeInTheDocument();
 	});
 });
 
 describe('ViewRolePage - Permission Overview Error State', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 	});
 
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
-	it('shows error when permissions fail to load', async () => {
+	it('shows error when permissions fail to load', () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: customRoleResponse,
 			isLoading: false,
@@ -149,19 +139,19 @@ describe('ViewRolePage - Permission Overview Error State', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(screen.getByTestId('permission-overview-error')).toBeInTheDocument();
 	});
 });
 
 describe('ViewRolePage - Scope: ALL permissions', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 	});
 
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
 	it('shows "All" badge for actions with ALL scope', async () => {
@@ -192,7 +182,7 @@ describe('ViewRolePage - Scope: ALL permissions', () => {
 		expect(screen.getByTestId('scope-badge-create')).toHaveTextContent('All');
 	});
 
-	it('shows full granted count when all actions are ALL', async () => {
+	it('shows full granted count when all actions are ALL', () => {
 		mockHooksWithPermissions({
 			...mockPermissionsData,
 			resources: [
@@ -215,7 +205,6 @@ describe('ViewRolePage - Scope: ALL permissions', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(screen.getByTestId('granted-count-role')).toHaveTextContent(
 			'3 / 3 granted',
 		);
@@ -223,13 +212,8 @@ describe('ViewRolePage - Scope: ALL permissions', () => {
 });
 
 describe('ViewRolePage - Scope: NONE permissions', () => {
-	beforeEach(() => {
-		server.use(setupAuthzAdmin());
-	});
-
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
 	it('shows "None" badge for actions with NONE scope', async () => {
@@ -260,7 +244,7 @@ describe('ViewRolePage - Scope: NONE permissions', () => {
 		expect(screen.getByTestId('scope-badge-delete')).toHaveTextContent('None');
 	});
 
-	it('shows zero granted count when all actions are NONE', async () => {
+	it('shows zero granted count when all actions are NONE', () => {
 		mockHooksWithPermissions({
 			...mockPermissionsData,
 			resources: [
@@ -284,7 +268,6 @@ describe('ViewRolePage - Scope: NONE permissions', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(screen.getByTestId('granted-count-factor-api-key')).toHaveTextContent(
 			'0 / 4 granted',
 		);
@@ -292,13 +275,8 @@ describe('ViewRolePage - Scope: NONE permissions', () => {
 });
 
 describe('ViewRolePage - Scope: ONLY_SELECTED permissions', () => {
-	beforeEach(() => {
-		server.use(setupAuthzAdmin());
-	});
-
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
 	it('shows "Only selected" badge with count', async () => {
@@ -362,7 +340,7 @@ describe('ViewRolePage - Scope: ONLY_SELECTED permissions', () => {
 		await expect(screen.findByText('key-def-456')).resolves.toBeInTheDocument();
 	});
 
-	it('counts ONLY_SELECTED as granted in count', async () => {
+	it('counts ONLY_SELECTED as granted in count', () => {
 		mockHooksWithPermissions({
 			...mockPermissionsData,
 			resources: [
@@ -384,7 +362,6 @@ describe('ViewRolePage - Scope: ONLY_SELECTED permissions', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(screen.getByTestId('granted-count-serviceaccount')).toHaveTextContent(
 			'1 / 2 granted',
 		);
@@ -431,13 +408,8 @@ describe('ViewRolePage - Scope: ONLY_SELECTED permissions', () => {
 });
 
 describe('ViewRolePage - Mixed permission scopes', () => {
-	beforeEach(() => {
-		server.use(setupAuthzAdmin());
-	});
-
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
 	it('renders all three scope types in single resource card', async () => {
@@ -486,7 +458,7 @@ describe('ViewRolePage - Mixed permission scopes', () => {
 		);
 	});
 
-	it('renders multiple resources with different scope combinations', async () => {
+	it('renders multiple resources with different scope combinations', () => {
 		mockHooksWithPermissions({
 			...mockPermissionsData,
 			resources: [
@@ -530,7 +502,6 @@ describe('ViewRolePage - Mixed permission scopes', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(screen.getByTestId('granted-count-factor-api-key')).toHaveTextContent(
 			'2 / 2 granted',
 		);
@@ -544,13 +515,8 @@ describe('ViewRolePage - Mixed permission scopes', () => {
 });
 
 describe('ViewRolePage - Unknown resources', () => {
-	beforeEach(() => {
-		server.use(setupAuthzAdmin());
-	});
-
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
 	it('renders unknown resource with fallback label', async () => {
@@ -574,7 +540,6 @@ describe('ViewRolePage - Unknown resources', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(
 			screen.getByTestId('resource-section-future-resource'),
 		).toBeInTheDocument();
@@ -611,7 +576,7 @@ describe('ViewRolePage - Unknown resources', () => {
 		).resolves.toBeInTheDocument();
 	});
 
-	it('handles resource with empty actions', async () => {
+	it('handles resource with empty actions', () => {
 		mockHooksWithPermissions({
 			...mockPermissionsData,
 			resources: [
@@ -630,7 +595,6 @@ describe('ViewRolePage - Unknown resources', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(
 			screen.getByTestId('resource-section-empty-resource'),
 		).toBeInTheDocument();
@@ -647,15 +611,13 @@ describe('ViewRolePage - View mode toggle', () => {
 
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
-	it('renders Interactive/JSON toggle', async () => {
+	it('renders Interactive/JSON toggle', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(screen.getByTestId('permission-view-mode-list')).toBeInTheDocument();
 		expect(screen.getByTestId('permission-view-mode-json')).toBeInTheDocument();
 	});
@@ -667,7 +629,6 @@ describe('ViewRolePage - View mode toggle', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		expect(screen.getByTestId('permission-overview')).toBeInTheDocument();
 
 		const jsonToggle = screen.getByTestId('permission-view-mode-json');
@@ -684,7 +645,6 @@ describe('ViewRolePage - JSON Viewer Copy Button', () => {
 
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
 	it('renders copy button in JSON view', async () => {
@@ -694,7 +654,6 @@ describe('ViewRolePage - JSON Viewer Copy Button', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		const jsonToggle = screen.getByTestId('permission-view-mode-json');
 		await user.click(jsonToggle);
 
@@ -710,7 +669,6 @@ describe('ViewRolePage - JSON Viewer Copy Button', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});
 
-		await waitForPageReady();
 		const jsonToggle = screen.getByTestId('permission-view-mode-json');
 		await user.click(jsonToggle);
 

frontend/src/container/RolesSettings/ViewRolePage/__tests__/testUtils.ts

@@ -3,12 +3,12 @@ import {
 	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import * as roleApi from 'api/generated/services/role';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	customRoleResponse,
 	managedRoleResponse,
 } from 'mocks-server/__mockdata__/roles';
-import { server } from 'mocks-server/server';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 
 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
 
@@ -79,7 +79,9 @@ export const mockPermissionsData = {
 };
 
 export function mockHooksForCustomRole(): void {
-	server.use(setupAuthzAdmin());
+	jest
+		.spyOn(useAuthZModule, 'useAuthZ')
+		.mockImplementation(mockUseAuthZGrantAll);
 
 	jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 		data: customRoleResponse,
@@ -97,7 +99,9 @@ export function mockHooksForCustomRole(): void {
 }
 
 export function mockHooksWithPermissions(permissions: unknown): void {
-	server.use(setupAuthzAdmin());
+	jest
+		.spyOn(useAuthZModule, 'useAuthZ')
+		.mockImplementation(mockUseAuthZGrantAll);
 
 	jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 		data: customRoleResponse,
@@ -115,7 +119,9 @@ export function mockHooksWithPermissions(permissions: unknown): void {
 }
 
 export function mockHooksForManagedRole(): void {
-	server.use(setupAuthzAdmin());
+	jest
+		.spyOn(useAuthZModule, 'useAuthZ')
+		.mockImplementation(mockUseAuthZGrantAll);
 
 	jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 		data: managedRoleResponse,

frontend/src/container/RolesSettings/__tests__/RolesSettings.authz.test.tsx

@@ -11,21 +11,23 @@ import {
 	userEvent,
 } from 'tests/test-utils';
 import { FeatureKeys } from 'constants/features';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	invalidLicense,
-	setupAuthzAdmin,
-	setupAuthzDeny,
+	mockUseAuthZGrantAll,
 } from 'lib/authz/utils/authz-test-utils';
-import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 
 import RolesSettings from '../RolesSettings';
 
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 const rolesApiURL = 'http://localhost/api/v1/roles';
 
 describe('RolesSettings', () => {
 	beforeEach(() => {
+		mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 		server.use(
-			setupAuthzAdmin(),
 			rest.get(rolesApiURL, (_req, res, ctx) =>
 				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
 			),
@@ -33,6 +35,7 @@ describe('RolesSettings', () => {
 	});
 
 	afterEach(() => {
+		jest.clearAllMocks();
 		server.resetHandlers();
 	});
 
@@ -270,18 +273,4 @@ describe('RolesSettings', () => {
 		// Total dashes expected: 2 (for both dates)
 		expect(dashFallback.length).toBeGreaterThanOrEqual(2);
 	});
-
-	it('disables search input when user lacks list permission', async () => {
-		server.use(
-			setupAuthzDeny(RoleListPermission),
-			rest.get(rolesApiURL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-
-		render(<RolesSettings />);
-
-		const searchInput = await screen.findByPlaceholderText('Search for roles...');
-		expect(searchInput).toBeDisabled();
-	});
 });

frontend/src/container/RolesSettings/hooks/useRoleAuthZ.ts

@@ -0,0 +1,88 @@
+import { useMemo } from 'react';
+import {
+	buildRoleDeletePermission,
+	buildRoleReadPermission,
+	buildRoleUpdatePermission,
+	RoleCreatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import {
+	ParsedPermissionObject,
+	parsePermission,
+} from 'lib/authz/hooks/useAuthZ/utils';
+
+interface UseRoleAuthZResult {
+	readRolePermission: ParsedPermissionObject;
+	updateRolePermission: ParsedPermissionObject;
+	deleteRolePermission: ParsedPermissionObject;
+	hasCreatePermission: boolean;
+	hasReadPermission: boolean;
+	hasUpdatePermission: boolean;
+	hasDeletePermission: boolean;
+	isAuthZLoading: boolean;
+}
+
+export function useRoleAuthZ(roleName: string): UseRoleAuthZResult {
+	const readRolePermissionName = buildRoleReadPermission(roleName);
+	const updateRolePermissionName = buildRoleUpdatePermission(roleName);
+	const deleteRolePermissionName = buildRoleDeletePermission(roleName);
+
+	const permissionsToCheck = useMemo(() => {
+		const perms = [RoleCreatePermission];
+		if (roleName) {
+			perms.push(
+				readRolePermissionName,
+				updateRolePermissionName,
+				deleteRolePermissionName,
+			);
+		}
+		return perms;
+	}, [
+		roleName,
+		readRolePermissionName,
+		updateRolePermissionName,
+		deleteRolePermissionName,
+	]);
+
+	const { permissions, isLoading: isAuthZLoading } =
+		useAuthZ(permissionsToCheck);
+
+	const hasCreatePermission = useMemo(() => {
+		if (permissions === null) {
+			return false;
+		}
+		return permissions[RoleCreatePermission]?.isGranted ?? false;
+	}, [permissions]);
+
+	const hasReadPermission = useMemo(() => {
+		if (!roleName || permissions === null) {
+			return true;
+		}
+		return permissions[buildRoleReadPermission(roleName)]?.isGranted ?? true;
+	}, [permissions, roleName]);
+
+	const hasUpdatePermission = useMemo(() => {
+		if (!roleName || permissions === null) {
+			return true;
+		}
+		return permissions[buildRoleUpdatePermission(roleName)]?.isGranted ?? true;
+	}, [permissions, roleName]);
+
+	const hasDeletePermission = useMemo(() => {
+		if (!roleName || permissions === null) {
+			return true;
+		}
+		return permissions[buildRoleDeletePermission(roleName)]?.isGranted ?? true;
+	}, [permissions, roleName]);
+
+	return {
+		readRolePermission: parsePermission(readRolePermissionName),
+		updateRolePermission: parsePermission(updateRolePermissionName),
+		deleteRolePermission: parsePermission(deleteRolePermissionName),
+		hasCreatePermission,
+		hasReadPermission,
+		hasUpdatePermission,
+		hasDeletePermission,
+		isAuthZLoading,
+	};
+}

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.authz.test.tsx

@@ -28,7 +28,7 @@ describe('ServiceAccountsSettings — FGA', () => {
 		);
 	});
 
-	it('shows denied callout when list permission is denied', async () => {
+	it('shows PermissionDeniedFullPage when list permission is denied', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
 				const payload = await req.json();
@@ -47,40 +47,14 @@ describe('ServiceAccountsSettings — FGA', () => {
 		renderPage();
 
 		await waitFor(() => {
-			expect(screen.getByText(/is not authorized to perform/)).toBeInTheDocument();
+			expect(
+				screen.getByText('Uh-oh! You are not authorized'),
+			).toBeInTheDocument();
 		});
 
 		expect(screen.queryByRole('table')).not.toBeInTheDocument();
 	});
 
-	it('shows page header and disables search when list permission is denied', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(
-						authzMockResponse(
-							payload,
-							payload.map(() => false),
-						),
-					),
-				);
-			}),
-		);
-
-		renderPage();
-
-		await waitFor(() => {
-			expect(screen.getByText(/is not authorized to perform/)).toBeInTheDocument();
-		});
-
-		expect(screen.getByText('Service Accounts')).toBeInTheDocument();
-		expect(
-			screen.getByPlaceholderText('Search by name or email...'),
-		).toBeDisabled();
-	});
-
 	it('shows table when list permission is granted', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
@@ -104,7 +78,7 @@ describe('ServiceAccountsSettings — FGA', () => {
 		});
 
 		expect(
-			screen.queryByText(/is not authorized to perform/),
+			screen.queryByText('Uh-oh! You are not authorized'),
 		).not.toBeInTheDocument();
 	});
 

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

@@ -44,7 +44,6 @@
 		display: flex;
 		align-items: center;
 		gap: var(--spacing-4);
-		padding-bottom: var(--spacing-6);
 	}
 
 	&__search {

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx

@@ -1,17 +1,14 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { useQueryClient } from 'react-query';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
 import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
-import { invalidateListServiceAccounts } from 'api/generated/services/serviceaccount';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
-import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import Spinner from 'components/Spinner';
 import ServiceAccountDrawer from 'components/ServiceAccountDrawer/ServiceAccountDrawer';
 import ServiceAccountsTable, {
 	PAGE_SIZE,
@@ -20,6 +17,7 @@ import {
 	SACreatePermission,
 	SAListPermission,
 } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -40,13 +38,6 @@ import {
 import './ServiceAccountsSettings.styles.scss';
 
 function ServiceAccountsSettings(): JSX.Element {
-	const queryClient = useQueryClient();
-	const { permissions: authzPermissions, isLoading: isAuthZLoading } = useAuthZ([
-		SAListPermission,
-	]);
-	const canListServiceAccounts =
-		authzPermissions?.[SAListPermission]?.isGranted ?? false;
-	const [, setSelectedAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [currentPage, setPage] = useQueryState(
 		SA_QUERY_PARAMS.PAGE,
 		parseAsInteger.withDefault(1),
@@ -61,19 +52,25 @@ function ServiceAccountsSettings(): JSX.Element {
 			FilterMode.All,
 		),
 	);
+	const [, setSelectedAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [, setIsCreateModalOpen] = useQueryState(
 		SA_QUERY_PARAMS.CREATE_SA,
 		parseAsBoolean.withDefault(false),
 	);
 
+	const { permissions: listPerms, isLoading: isAuthZLoading } = useAuthZ([
+		SAListPermission,
+	]);
+
+	const hasListPermission = listPerms?.[SAListPermission]?.isGranted ?? false;
+
 	const {
 		data: serviceAccountsData,
 		isLoading,
 		isError,
 		error,
-	} = useListServiceAccounts({ query: { enabled: canListServiceAccounts } });
-
-	const controlsDisabled = isAuthZLoading || !canListServiceAccounts;
+		refetch: handleCreateSuccess,
+	} = useListServiceAccounts({ query: { enabled: hasListPermission } });
 
 	const allAccounts = useMemo(
 		(): ServiceAccountRow[] =>
@@ -202,9 +199,9 @@ function ServiceAccountsSettings(): JSX.Element {
 			if (options?.closeDrawer) {
 				void setSelectedAccountId(null);
 			}
-			void invalidateListServiceAccounts(queryClient);
+			void handleCreateSuccess();
 		},
-		[queryClient, setSelectedAccountId],
+		[handleCreateSuccess, setSelectedAccountId],
 	);
 
 	return (
@@ -226,32 +223,31 @@ function ServiceAccountsSettings(): JSX.Element {
 				</div>
 			</div>
 
-			<div className="sa-settings__list-section">
-				<div className="sa-settings__controls">
-					<AuthZTooltip checks={[SAListPermission]}>
-						<span>
-							<DropdownMenuSimple
-								menu={{ items: filterMenuItems }}
-								className="sa-settings-filter-dropdown"
+			{isAuthZLoading || isLoading ? (
+				<Spinner height="50vh" />
+			) : !hasListPermission ? (
+				<PermissionDeniedFullPage permissionName="serviceaccount:list" />
+			) : (
+				<div className="sa-settings__list-section">
+					<div className="sa-settings__controls">
+						<DropdownMenuSimple
+							menu={{ items: filterMenuItems }}
+							className="sa-settings-filter-dropdown"
+						>
+							<Button
+								variant="solid"
+								color="secondary"
+								className="sa-settings-filter-trigger"
 							>
-								<Button
-									variant="solid"
-									color="secondary"
-									className="sa-settings-filter-trigger"
-									disabled={controlsDisabled}
-								>
-									<span>{filterLabel}</span>
-									<ChevronDown
-										size={12}
-										className="sa-settings-filter-trigger__chevron"
-									/>
-								</Button>
-							</DropdownMenuSimple>
-						</span>
-					</AuthZTooltip>
+								<span>{filterLabel}</span>
+								<ChevronDown
+									size={12}
+									className="sa-settings-filter-trigger__chevron"
+								/>
+							</Button>
+						</DropdownMenuSimple>
 
-					<div className="sa-settings__search">
-						<AuthZTooltip checks={[SAListPermission]}>
+						<div className="sa-settings__search">
 							<Input
 								type="search"
 								name="service-accounts-search"
@@ -262,25 +258,23 @@ function ServiceAccountsSettings(): JSX.Element {
 									void setPage(1);
 								}}
 								className="sa-settings-search-input"
-								disabled={controlsDisabled}
 							/>
+						</div>
+
+						<AuthZTooltip checks={[SACreatePermission]}>
+							<Button
+								variant="solid"
+								color="primary"
+								onClick={async (): Promise<void> => {
+									await setIsCreateModalOpen(true);
+								}}
+							>
+								<Plus size={12} />
+								New Service Account
+							</Button>
 						</AuthZTooltip>
 					</div>
 
-					<AuthZButton
-						checks={[SACreatePermission]}
-						variant="solid"
-						color="primary"
-						onClick={async (): Promise<void> => {
-							await setIsCreateModalOpen(true);
-						}}
-					>
-						<Plus size={12} />
-						New Service Account
-					</AuthZButton>
-				</div>
-
-				<AuthZGuardContent checks={[SAListPermission]}>
 					{isError ? (
 						<ErrorInPlace
 							error={toAPIError(
@@ -295,8 +289,8 @@ function ServiceAccountsSettings(): JSX.Element {
 							onRowClick={handleRowClick}
 						/>
 					)}
-				</AuthZGuardContent>
-			</div>
+				</div>
+			)}
 
 			<CreateServiceAccountModal />
 

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import userEvent from '@testing-library/user-event';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
@@ -13,6 +14,46 @@ const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
 const SA_ROLES_ENDPOINT = '*/api/v1/service_accounts/:id/roles';
 const ROLES_ENDPOINT = '*/api/v1/roles';
 
+jest.mock('@signozhq/ui/drawer', () => ({
+	...jest.requireActual('@signozhq/ui/drawer'),
+	DrawerWrapper: ({
+		children,
+		footer,
+		open,
+	}: {
+		children?: ReactNode;
+		footer?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null =>
+		open ? (
+			<div>
+				{children}
+				{footer}
+			</div>
+		) : null,
+}));
+
+jest.mock('@signozhq/ui/dialog', () => ({
+	...jest.requireActual('@signozhq/ui/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>
+	),
+}));
+
 const mockServiceAccountsAPI = [
 	{
 		id: 'sa-1',
@@ -132,11 +173,11 @@ describe('ServiceAccountsSettings (integration)', () => {
 			</NuqsTestingAdapter>,
 		);
 
-		const viewButton = await screen.findByRole('button', {
-			name: /View service account CI Bot/i,
-		});
-
-		fireEvent.click(viewButton);
+		fireEvent.click(
+			await screen.findByRole('button', {
+				name: /View service account CI Bot/i,
+			}),
+		);
 
 		await expect(
 			screen.findByRole('button', { name: /Delete Service Account/i }),

pkg/transition/migrate_common.go

@@ -10,6 +10,7 @@ import (
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/telemetrytraces"
+	"github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 )
 
 type migrateCommon struct {
@@ -23,119 +24,10 @@ func NewMigrateCommon(logger *slog.Logger) *migrateCommon {
 	}
 }
 
+// WrapInV5Envelope delegates to querybuildertypesv5.WrapInV5Envelope; the
+// transform is stateless and shared with the v1→v2 dashboard conversion.
 func (migration *migrateCommon) WrapInV5Envelope(name string, queryMap map[string]any, queryType string) map[string]any {
-	// Create a properly structured v5 query
-	v5Query := map[string]any{
-		"name":     name,
-		"disabled": queryMap["disabled"],
-		"legend":   queryMap["legend"],
-	}
-
-	if name != queryMap["expression"] {
-		// formula
-		queryType = "builder_formula"
-		v5Query["expression"] = queryMap["expression"]
-		if functions, ok := queryMap["functions"]; ok {
-			v5Query["functions"] = functions
-		}
-		return map[string]any{
-			"type": queryType,
-			"spec": v5Query,
-		}
-	}
-
-	// Add signal based on data source
-	if dataSource, ok := queryMap["dataSource"].(string); ok {
-		switch dataSource {
-		case "traces":
-			v5Query["signal"] = "traces"
-		case "logs":
-			v5Query["signal"] = "logs"
-		case "metrics":
-			v5Query["signal"] = "metrics"
-		}
-	}
-
-	if stepInterval, ok := queryMap["stepInterval"]; ok {
-		v5Query["stepInterval"] = stepInterval
-	}
-
-	if aggregations, ok := queryMap["aggregations"]; ok {
-		v5Query["aggregations"] = aggregations
-	}
-
-	if filter, ok := queryMap["filter"]; ok {
-		v5Query["filter"] = filter
-	}
-
-	// Copy groupBy with proper structure
-	if groupBy, ok := queryMap["groupBy"].([]any); ok {
-		v5GroupBy := make([]any, len(groupBy))
-		for i, gb := range groupBy {
-			if gbMap, ok := gb.(map[string]any); ok {
-				v5GroupBy[i] = map[string]any{
-					"name":          gbMap["key"],
-					"fieldDataType": gbMap["dataType"],
-					"fieldContext":  gbMap["type"],
-				}
-			}
-		}
-		v5Query["groupBy"] = v5GroupBy
-	}
-
-	// Copy orderBy with proper structure
-	if orderBy, ok := queryMap["orderBy"].([]any); ok {
-		v5OrderBy := make([]any, len(orderBy))
-		for i, ob := range orderBy {
-			if obMap, ok := ob.(map[string]any); ok {
-				v5OrderBy[i] = map[string]any{
-					"key": map[string]any{
-						"name":          obMap["columnName"],
-						"fieldDataType": obMap["dataType"],
-						"fieldContext":  obMap["type"],
-					},
-					"direction": obMap["order"],
-				}
-			}
-		}
-		v5Query["order"] = v5OrderBy
-	}
-
-	// Copy selectColumns as selectFields
-	if selectColumns, ok := queryMap["selectColumns"].([]any); ok {
-		v5SelectFields := make([]any, len(selectColumns))
-		for i, col := range selectColumns {
-			if colMap, ok := col.(map[string]any); ok {
-				v5SelectFields[i] = map[string]any{
-					"name":          colMap["key"],
-					"fieldDataType": colMap["dataType"],
-					"fieldContext":  colMap["type"],
-				}
-			}
-		}
-		v5Query["selectFields"] = v5SelectFields
-	}
-
-	// Copy limit and offset
-	if limit, ok := queryMap["limit"]; ok {
-		v5Query["limit"] = limit
-	}
-	if offset, ok := queryMap["offset"]; ok {
-		v5Query["offset"] = offset
-	}
-
-	if having, ok := queryMap["having"]; ok {
-		v5Query["having"] = having
-	}
-
-	if functions, ok := queryMap["functions"]; ok {
-		v5Query["functions"] = functions
-	}
-
-	return map[string]any{
-		"type": queryType,
-		"spec": v5Query,
-	}
+	return querybuildertypesv5.WrapInV5Envelope(name, queryMap, queryType)
 }
 
 func (mc *migrateCommon) updateQueryData(ctx context.Context, queryData map[string]any, version, widgetType string) bool {

pkg/transition/migrate_shape_safe.go

@@ -0,0 +1,353 @@
+// nolint
+package transition
+
+import (
+	"context"
+	"log/slog"
+)
+
+// ══════════════════════════════════════════════
+// Shape-safe (idempotent) migration
+// ══════════════════════════════════════════════
+//
+// A copy of the Migrate → updateWidget → updateQueryData chain with the
+// "uniformly v4 input" assumption removed, so it is safe on a dashboard whose
+// `version` tag lies (a "v5"-labelled dashboard with un-upgraded, possibly mixed,
+// bodies — the v1→v2 converter's case). Versus the original: no version gate, and
+// each step acts only on the pre-v5 shape (leaving a v5 field alone), so it is
+// idempotent. The original Migrate is left unchanged (battle-tested, no test net).
+// The *ShapeSafe methods below each note the original they copy; the reused steps
+// (createFilterExpression, fixGroupBy, buildAggregationExpression, orderByExpr) are
+// already v5-safe.
+
+// MigrateQueryDataShapeSafe is the per-query entry point (the core of
+// updateQueryDataShapeSafe) for callers that process queries one at a time (the
+// v1→v2 converter). widgetType is the v1 panelTypes (metric reduceTo on tables);
+// "" is safe.
+func (m *dashboardMigrateV5) MigrateQueryDataShapeSafe(ctx context.Context, queryData map[string]any, widgetType string) bool {
+	return m.updateQueryDataShapeSafe(ctx, queryData, widgetType)
+}
+
+// updateQueryDataShapeSafe copies updateQueryData, with each destructive step
+// guarded to act only on the pre-v5 shape (see the file header).
+func (mc *migrateCommon) updateQueryDataShapeSafe(ctx context.Context, queryData map[string]any, widgetType string) bool {
+	updated := false
+
+	aggregateOp, _ := queryData["aggregateOperator"].(string)
+	hasAggregation := aggregateOp != "" && aggregateOp != "noop"
+
+	if mc.createAggregationsShapeSafe(ctx, queryData, widgetType) {
+		updated = true
+	}
+
+	// createFilterExpression only touches v4 `filters`; skip if a v5 `filter` exists.
+	if _, hasFilter := queryData["filter"]; !hasFilter {
+		if mc.createFilterExpression(ctx, queryData) {
+			updated = true
+		}
+	}
+
+	if mc.fixGroupBy(queryData) {
+		updated = true
+	}
+
+	if mc.createHavingExpressionShapeSafe(queryData) {
+		updated = true
+	}
+
+	if hasAggregation {
+		if orderBy, ok := queryData["orderBy"].([]any); ok && orderByIsPreV5(orderBy) {
+			newOrderBy := make([]any, 0)
+			for _, order := range orderBy {
+				if orderMap, ok := order.(map[string]any); ok {
+					columnName, _ := orderMap["columnName"].(string)
+					// skip timestamp, id (logs, traces), samples(metrics) ordering for aggregation queries
+					if columnName != "timestamp" && columnName != "samples" && columnName != "id" {
+						if columnName == "#SIGNOZ_VALUE" {
+							if expr, has := mc.orderByExpr(queryData); has {
+								orderMap["columnName"] = expr
+							}
+						} else {
+							// if the order by key is not part of the group by keys, remove it
+							present := false
+
+							groupBy, ok := queryData["groupBy"].([]any)
+							if !ok {
+								return false
+							}
+
+							for idx := range groupBy {
+								item, ok := groupBy[idx].(map[string]any)
+								if !ok {
+									continue
+								}
+								key, ok := item["key"].(string)
+								if !ok {
+									continue
+								}
+								if key == columnName {
+									present = true
+								}
+							}
+
+							if !present {
+								mc.logger.WarnContext(ctx, "found a order by without group by, skipping", slog.String("order_col_name", columnName))
+								continue
+							}
+						}
+						newOrderBy = append(newOrderBy, orderMap)
+					}
+				}
+			}
+			queryData["orderBy"] = newOrderBy
+			updated = true
+		}
+	} else {
+		dataSource, _ := queryData["dataSource"].(string)
+
+		if orderBy, ok := queryData["orderBy"].([]any); ok && orderByIsPreV5(orderBy) {
+			newOrderBy := make([]any, 0)
+			for _, order := range orderBy {
+				if orderMap, ok := order.(map[string]any); ok {
+					columnName, _ := orderMap["columnName"].(string)
+					// skip id and timestamp for (traces)
+					if (columnName == "id" || columnName == "timestamp") && dataSource == "traces" {
+						mc.logger.InfoContext(ctx, "skipping `id` order by for traces")
+						continue
+					}
+
+					// skip id for (logs)
+					if (columnName == "id" || columnName == "timestamp") && dataSource == "logs" {
+						mc.logger.InfoContext(ctx, "skipping `id`/`timestamp` order by for logs")
+						continue
+					}
+
+					newOrderBy = append(newOrderBy, orderMap)
+				}
+			}
+			queryData["orderBy"] = newOrderBy
+			updated = true
+		}
+	}
+
+	// Only the `&& functionsArePreV5(functions)` guard differs from updateQueryData.
+	if functions, ok := queryData["functions"].([]any); ok && functionsArePreV5(functions) {
+		v5Functions := make([]any, len(functions))
+		for i, fn := range functions {
+			if fnMap, ok := fn.(map[string]any); ok {
+				v5Function := map[string]any{
+					"name": fnMap["name"],
+				}
+
+				// Convert args from v4 format to v5 FunctionArg format
+				if args, ok := fnMap["args"].([]any); ok {
+					v5Args := make([]any, len(args))
+					for j, arg := range args {
+						// In v4, args were just values. In v5, they are FunctionArg objects
+						v5Args[j] = map[string]any{
+							"name":  "", // v4 didn't have named args
+							"value": arg,
+						}
+					}
+					v5Function["args"] = v5Args
+				}
+
+				// Handle namedArgs if present (some functions might have used this)
+				if namedArgs, ok := fnMap["namedArgs"].(map[string]any); ok {
+					// Convert named args to the new format
+					existingArgs, _ := v5Function["args"].([]any)
+					if existingArgs == nil {
+						existingArgs = []any{}
+					}
+
+					for name, value := range namedArgs {
+						existingArgs = append(existingArgs, map[string]any{
+							"name":  name,
+							"value": value,
+						})
+					}
+					v5Function["args"] = existingArgs
+				}
+
+				v5Functions[i] = v5Function
+			}
+		}
+		queryData["functions"] = v5Functions
+		updated = true
+	}
+
+	delete(queryData, "aggregateOperator")
+	delete(queryData, "aggregateAttribute")
+	delete(queryData, "temporality")
+	delete(queryData, "timeAggregation")
+	delete(queryData, "spaceAggregation")
+	delete(queryData, "reduceTo")
+	delete(queryData, "filters")
+	delete(queryData, "ShiftBy")
+	delete(queryData, "IsAnomaly")
+	delete(queryData, "QueriesUsedInFormula")
+	delete(queryData, "seriesAggregation")
+
+	return updated
+}
+
+// createHavingExpressionShapeSafe copies createHavingExpression but leaves an
+// already-v5 having:{expression} alone instead of wiping it.
+func (mc *migrateCommon) createHavingExpressionShapeSafe(queryData map[string]any) bool {
+	if _, ok := queryData["having"].(map[string]any); ok {
+		return false // already v5-shaped
+	}
+	having, ok := queryData["having"].([]any)
+	if !ok || len(having) == 0 {
+		queryData["having"] = map[string]any{"expression": ""}
+		return true
+	}
+
+	dataSource, _ := queryData["dataSource"].(string)
+
+	for idx := range having {
+		if havingItem, ok := having[idx].(map[string]any); ok {
+			havingCol, has := mc.orderByExpr(queryData)
+			if has {
+				havingItem["columnName"] = havingCol
+				havingItem["key"] = map[string]any{"key": havingCol}
+			}
+			having[idx] = havingItem
+		}
+	}
+	queryData["having"] = map[string]any{"expression": mc.buildExpression(context.Background(), having, "AND", dataSource)}
+	return true
+}
+
+// createAggregationsShapeSafe copies createAggregations but skips a query that
+// already has a v5 aggregations[], and picks the metric time/space aggregation
+// from the body's shape (has timeAggregation/spaceAggregation?) rather than the
+// version tag.
+func (mc *migrateCommon) createAggregationsShapeSafe(ctx context.Context, queryData map[string]any, widgetType string) bool {
+	if aggs, ok := queryData["aggregations"].([]any); ok && len(aggs) > 0 {
+		return false // already v5-shaped
+	}
+
+	aggregateOp, hasOp := queryData["aggregateOperator"].(string)
+	aggregateAttr, hasAttr := queryData["aggregateAttribute"].(map[string]any)
+	dataSource, _ := queryData["dataSource"].(string)
+
+	if aggregateOp == "noop" && dataSource != "metrics" {
+		return false
+	}
+	if !hasOp || !hasAttr {
+		return false
+	}
+
+	var aggregation map[string]any
+
+	switch dataSource {
+	case "metrics":
+		_, hasTime := queryData["timeAggregation"]
+		_, hasSpace := queryData["spaceAggregation"]
+		if hasTime || hasSpace { // acts as a check for v4 shape: the body carries its own time/space aggregation.
+			if _, ok := queryData["spaceAggregation"]; !ok {
+				queryData["spaceAggregation"] = aggregateOp
+			}
+			aggregation = map[string]any{
+				"metricName":       aggregateAttr["key"],
+				"temporality":      queryData["temporality"],
+				"timeAggregation":  queryData["timeAggregation"],
+				"spaceAggregation": queryData["spaceAggregation"],
+			}
+			if reduceTo, ok := queryData["reduceTo"].(string); ok {
+				aggregation["reduceTo"] = reduceTo
+			}
+		} else {
+			// v3 shape: derive time/space from the compound operator.
+			var timeAgg, spaceAgg, reduceTo string
+			switch aggregateOp {
+			case "sum_rate", "rate_sum":
+				timeAgg, spaceAgg, reduceTo = "rate", "sum", "sum"
+			case "avg_rate", "rate_avg":
+				timeAgg, spaceAgg, reduceTo = "rate", "avg", "avg"
+			case "min_rate", "rate_min":
+				timeAgg, spaceAgg, reduceTo = "rate", "min", "min"
+			case "max_rate", "rate_max":
+				timeAgg, spaceAgg, reduceTo = "rate", "max", "max"
+			case "hist_quantile_50":
+				timeAgg, spaceAgg, reduceTo = "", "p50", "avg"
+			case "hist_quantile_75":
+				timeAgg, spaceAgg, reduceTo = "", "p75", "avg"
+			case "hist_quantile_90":
+				timeAgg, spaceAgg, reduceTo = "", "p90", "avg"
+			case "hist_quantile_95":
+				timeAgg, spaceAgg, reduceTo = "", "p95", "avg"
+			case "hist_quantile_99":
+				timeAgg, spaceAgg, reduceTo = "", "p99", "avg"
+			case "rate":
+				timeAgg, spaceAgg, reduceTo = "rate", "sum", "sum"
+			case "p99", "p90", "p75", "p50", "p25", "p20", "p10", "p05":
+				mc.logger.InfoContext(ctx, "found invalid config")
+				timeAgg, spaceAgg, reduceTo = "avg", "avg", "avg"
+			case "min":
+				timeAgg, spaceAgg, reduceTo = "min", "min", "min"
+			case "max":
+				timeAgg, spaceAgg, reduceTo = "max", "max", "max"
+			case "avg":
+				timeAgg, spaceAgg, reduceTo = "avg", "avg", "avg"
+			case "sum":
+				timeAgg, spaceAgg, reduceTo = "sum", "sum", "sum"
+			case "count":
+				timeAgg, spaceAgg, reduceTo = "count", "sum", "sum"
+			case "count_distinct":
+				timeAgg, spaceAgg, reduceTo = "count_distinct", "sum", "sum"
+			case "noop":
+				mc.logger.WarnContext(ctx, "noop found in the aggregation data")
+				timeAgg, spaceAgg, reduceTo = "max", "max", "max"
+			}
+			aggregation = map[string]any{
+				"metricName":       aggregateAttr["key"],
+				"temporality":      queryData["temporality"],
+				"timeAggregation":  timeAgg,
+				"spaceAggregation": spaceAgg,
+			}
+			if widgetType == "table" {
+				aggregation["reduceTo"] = reduceTo
+			} else if reduceTo, ok := queryData["reduceTo"].(string); ok {
+				aggregation["reduceTo"] = reduceTo
+			}
+		}
+	case "logs", "traces":
+		aggregation = map[string]any{"expression": mc.buildAggregationExpression(aggregateOp, aggregateAttr)}
+	default:
+		return false
+	}
+
+	queryData["aggregations"] = []any{aggregation}
+	return true
+}
+
+// orderByIsPreV5 reports whether an orderBy slice is still in the v4 shape (an
+// entry carries "columnName"); a v5 orderBy uses {key:{name}, direction}.
+func orderByIsPreV5(orderBy []any) bool {
+	for _, o := range orderBy {
+		if m, ok := o.(map[string]any); ok {
+			if _, has := m["columnName"]; has {
+				return true
+			}
+		}
+	}
+	return false
+}
+
+// functionsArePreV5 reports whether a functions slice is still in the v4 shape
+// (args are raw values); a v5 function's args are {name,value} objects.
+func functionsArePreV5(functions []any) bool {
+	for _, f := range functions {
+		if m, ok := f.(map[string]any); ok {
+			args, ok := m["args"].([]any)
+			if !ok || len(args) == 0 {
+				continue
+			}
+			_, argIsObject := args[0].(map[string]any)
+			return !argIsObject
+		}
+	}
+	return false
+}

pkg/types/dashboardtypes/dashboard.go

@@ -7,7 +7,6 @@ import (
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/transition"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/valuer"
@@ -22,6 +21,7 @@ var (
 	ErrCodeDashboardInvalidSource      = errors.MustNewCode("dashboard_invalid_source")
 	ErrCodeDashboardImmutable          = errors.MustNewCode("dashboard_immutable")
 	ErrCodeDashboardInvalidPatch       = errors.MustNewCode("dashboard_invalid_patch")
+	ErrCodeDashboardMigrationFailed    = errors.MustNewCode("dashboard_migration_failed")
 )
 
 type StorableDashboard struct {
@@ -406,27 +406,26 @@ func (dashboard *Dashboard) GetWidgetQuery(startTime, endTime, widgetIndex uint6
 	widgetData := data.Widgets[widgetIndex]
 	switch widgetData.Query.QueryType {
 	case "builder":
-		migrate := transition.NewMigrateCommon(logger)
 		for _, query := range widgetData.Query.Builder.QueryData {
 			queryName, ok := query["queryName"].(string)
 			if !ok {
 				return nil, errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "cannot type cast query name as string")
 			}
-			compositeQueries = append(compositeQueries, migrate.WrapInV5Envelope(queryName, query, "builder_query"))
+			compositeQueries = append(compositeQueries, querybuildertypesv5.WrapInV5Envelope(queryName, query, "builder_query"))
 		}
 		for _, query := range widgetData.Query.Builder.QueryFormulas {
 			queryName, ok := query["queryName"].(string)
 			if !ok {
 				return nil, errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "cannot type cast query name as string")
 			}
-			compositeQueries = append(compositeQueries, migrate.WrapInV5Envelope(queryName, query, "builder_formula"))
+			compositeQueries = append(compositeQueries, querybuildertypesv5.WrapInV5Envelope(queryName, query, "builder_formula"))
 		}
 		for _, query := range widgetData.Query.Builder.QueryTraceOperator {
 			queryName, ok := query["queryName"].(string)
 			if !ok {
 				return nil, errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "cannot type cast query name as string")
 			}
-			compositeQueries = append(compositeQueries, migrate.WrapInV5Envelope(queryName, query, "builder_trace_operator"))
+			compositeQueries = append(compositeQueries, querybuildertypesv5.WrapInV5Envelope(queryName, query, "builder_trace_operator"))
 		}
 	case "clickhouse_sql":
 		for _, query := range widgetData.Query.ClickhouseSQL {

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -1060,6 +1060,34 @@ func TestValidateRequiredFields(t *testing.T) {
 	}
 }
 
+// TestThresholdZeroValueAcceptedMissingRejected documents the *float64 Value:
+// a threshold at 0 (or 0.0) is valid, because the pointer lets validate:"required"
+// tell a present zero (non-nil) from an absent value (nil) — while a genuinely
+// missing value is still rejected.
+func TestThresholdZeroValueAcceptedMissingRejected(t *testing.T) {
+	numberPanel := func(thresholdSpec string) string {
+		return `{
+			"panels": {"p1": {"kind": "Panel", "spec": {
+				"plugin": {"kind": "signoz/NumberPanel", "spec": {"thresholds": [` + thresholdSpec + `]}},
+				"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+			}}},
+			"layouts": []
+		}`
+	}
+
+	_, errZero := unmarshalDashboard([]byte(numberPanel(`{"value": 0, "operator": "above", "format": "text", "color": "Red"}`)))
+	require.NoError(t, errZero, `a threshold "value": 0 is valid`)
+
+	// "value": 0.0 is the same float64 zero as "value": 0 — JSON has one number
+	// type — and is accepted identically.
+	_, errZeroFloat := unmarshalDashboard([]byte(numberPanel(`{"value": 0.0, "operator": "above", "format": "text", "color": "Red"}`)))
+	require.NoError(t, errZeroFloat, `"value": 0.0 is the same valid zero`)
+
+	_, errMissing := unmarshalDashboard([]byte(numberPanel(`{"operator": "above", "format": "text", "color": "Red"}`)))
+	require.Error(t, errMissing, "a genuinely missing value is still rejected")
+	require.Contains(t, errMissing.Error(), "Value")
+}
+
 func TestTimeSeriesPanelDefaults(t *testing.T) {
 	data := []byte(`{
 		"panels": {

pkg/types/dashboardtypes/perses_signoz_plugins.go

@@ -251,14 +251,20 @@ type Legend struct {
 }
 
 type ThresholdWithLabel struct {
-	Value float64 `json:"value" validate:"required" required:"true"`
-	Unit  string  `json:"unit"`
-	Color string  `json:"color" validate:"required" required:"true"`
-	Label string  `json:"label"`
+	// Value is a pointer so a threshold at 0 is valid: validate:"required" treats
+	// the float64 zero as "missing", but a non-nil *float64 to 0 passes (and nil
+	// still fails, so a genuinely absent value is still rejected). nullable:"false"
+	// keeps it a plain required number in the schema — it is never null in valid
+	// data (validation rejects nil), so the pointer must not leak as `number|null`.
+	Value *float64 `json:"value" validate:"required" required:"true" nullable:"false"`
+	Unit  string   `json:"unit"`
+	Color string   `json:"color" validate:"required" required:"true"`
+	Label string   `json:"label"`
 }
 
 type ComparisonThreshold struct {
-	Value    float64            `json:"value" validate:"required" required:"true"`
+	// Value is a pointer so a threshold at 0 is valid (see ThresholdWithLabel.Value).
+	Value    *float64           `json:"value" validate:"required" required:"true" nullable:"false"`
 	Operator ComparisonOperator `json:"operator"`
 	Unit     string             `json:"unit"`
 	Color    string             `json:"color" validate:"required" required:"true"`

pkg/types/dashboardtypes/perses_v1_to_v2.go

@@ -0,0 +1,94 @@
+package dashboardtypes
+
+import (
+	"encoding/json"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+)
+
+// V1 → V2 migration. The v1 storable shape is the frontend's `DashboardData`
+// (see frontend/src/types/api/dashboard/getAll.ts); v2 is DashboardV2 /
+// DashboardSpec.
+//
+// Assumes the v1 widget query data has already been migrated to v5 shape
+// (transition.dashboardMigrateV5). Pre-v5 builder queries will produce
+// invalid v2 envelopes — run the v4→v5 migration first.
+//
+// The conversion is split across sibling files by concern:
+//   - perses_v1_to_v2_tags.go      tags
+//   - perses_v1_to_v2_panels.go    widgets → panels (+ panel field mappers)
+//   - perses_v1_to_v2_queries.go   widget queries
+//   - perses_v1_to_v2_layouts.go   grid layouts and sections
+//   - perses_v1_to_v2_variables.go variables
+//   - perses_v1_to_v2_decoder.go   v1Decoder: typed field reads + malformed-field detection
+
+// ══════════════════════════════════════════════
+// Entry point
+// ══════════════════════════════════════════════
+
+func (storable StorableDashboard) IsV2() bool {
+	metadata, _ := storable.Data["metadata"].(map[string]any)
+	if metadata == nil {
+		return false
+	}
+	version, _ := metadata["schemaVersion"].(string)
+	return version == SchemaVersion
+}
+
+func (storable StorableDashboard) ConvertV1ToV2() (result *DashboardV2, err error) {
+	// Legacy v1 data can be arbitrarily malformed. The accessors degrade
+	// gracefully, but recover from any unforeseen panic so one bad dashboard
+	// surfaces as an error (to be logged and skipped) rather than crashing the run.
+	defer func() {
+		if r := recover(); r != nil {
+			result, err = nil, errors.Newf(errors.TypeInternal, ErrCodeDashboardMigrationFailed, "panic converting dashboard %s: %v", storable.ID, r)
+		}
+	}()
+
+	if storable.IsV2() {
+		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardMigrationFailed, "dashboard %s is already in %s schema", storable.ID, SchemaVersion)
+	}
+
+	d := &v1Decoder{}
+	title := d.readString(storable.Data, "title")
+	description := d.readString(storable.Data, "description")
+	image := d.readString(storable.Data, "image")
+
+	panels := d.convertV1Panels(storable.Data["widgets"])
+	spec := DashboardSpec{
+		Display:   Display{Name: title, Description: description},
+		Variables: d.convertV1Variables(storable.Data["variables"]),
+		Panels:    panels,
+		Layouts:   d.convertV1Layouts(storable.Data, panels),
+	}
+
+	// marshal and unmarshal cycle to confirm full validation
+	raw, marshalErr := json.Marshal(spec)
+	if marshalErr != nil {
+		return nil, errors.WrapInternalf(marshalErr, errors.CodeInternal, "marshal converted dashboard %s", storable.ID)
+	}
+	if err := json.Unmarshal(raw, new(DashboardSpec)); err != nil {
+		return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardMigrationFailed, "converted dashboard %s is invalid", storable.ID)
+	}
+	tags := d.convertV1TagsForOrg(storable.OrgID, storable.Data["tags"])
+
+	if err := d.errIfHasMalformedFields(); err != nil {
+		return nil, err
+	}
+
+	return &DashboardV2{
+		Identifiable:  storable.Identifiable,
+		TimeAuditable: storable.TimeAuditable,
+		UserAuditable: storable.UserAuditable,
+		OrgID:         storable.OrgID,
+		Locked:        storable.Locked,
+		Source:        storable.Source,
+		DashboardV2MetadataBase: DashboardV2MetadataBase{
+			SchemaVersion: SchemaVersion,
+			Image:         image,
+		},
+		Name: generateDashboardName(title),
+		Tags: tags,
+		Spec: spec,
+	}, nil
+}

pkg/types/dashboardtypes/perses_v1_to_v2_decoder.go

@@ -0,0 +1,168 @@
+package dashboardtypes
+
+import (
+	"encoding/json"
+	"fmt"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+)
+
+// ══════════════════════════════════════════════
+// v1 decoder
+// ══════════════════════════════════════════════
+
+// v1Decoder reads fields out of the untyped v1 dashboard blob. Every read*
+// method follows the same contract: a field that is absent or null yields the
+// zero value; a field present with the wrong type yields zero AND records a
+// malformed-field error. Conversion proceeds (so one bad field doesn't abort
+// the rest) and ConvertV1ToV2 returns d.malformedFieldsErr() at the end so the
+// dashboard is logged and skipped.
+//
+// Polymorphic v1 fields (spanGaps bool|number, selectedValue string|array, …)
+// are read with a type switch on the already-extracted value, never through
+// these accessors, so they stay lenient by construction.
+type v1Decoder struct {
+	bad  []string
+	seen map[string]struct{}
+}
+
+// note records a decoding problem (malformed field, unknown value, swallowed
+// sub-parse error), deduping identical messages. ConvertV1ToV2 surfaces these
+// via errIfHasMalformedFields.
+func (d *v1Decoder) note(format string, args ...any) {
+	msg := fmt.Sprintf(format, args...)
+	if _, dup := d.seen[msg]; dup {
+		return
+	}
+	if d.seen == nil {
+		d.seen = make(map[string]struct{})
+	}
+	d.seen[msg] = struct{}{}
+	d.bad = append(d.bad, msg)
+}
+
+// noteMalformedField records a v1 field present with the wrong Go type.
+func (d *v1Decoder) noteMalformedField(field string, raw any) {
+	d.note("%q has unexpected type %T", field, raw)
+}
+
+// detailErr renders an error for a diagnostic note, unfolding the structured
+// detail our JSON binding attaches via WithAdditional. A plain %v on these
+// errors prints only the innermost message ("request body contains invalid
+// field value") and drops the field/type context that says which field was
+// wrong — the part that actually tells you what to fix.
+func detailErr(err error) string {
+	if err == nil {
+		return ""
+	}
+	j := errors.AsJSON(err)
+	if len(j.Errors) == 0 {
+		return err.Error()
+	}
+	details := make([]string, 0, len(j.Errors))
+	for _, e := range j.Errors {
+		details = append(details, e.Message)
+	}
+	return j.Message + ": " + strings.Join(details, "; ")
+}
+
+func (d *v1Decoder) errIfHasMalformedFields() error {
+	if len(d.bad) == 0 {
+		return nil
+	}
+	// One field per line: these lists run long (a bad widget query is reported
+	// once per widget), and a single "; "-joined line is an unscannable wall.
+	return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidData, "malformed v1 dashboard fields:\n  %s", strings.Join(d.bad, "\n  "))
+}
+
+func readField[T any](d *v1Decoder, m map[string]any, key string) T {
+	var zero T
+	v, present := m[key]
+	if !present || v == nil {
+		return zero
+	}
+	t, ok := v.(T)
+	if !ok {
+		d.noteMalformedField(key, v)
+		return zero
+	}
+	return t
+}
+
+func (d *v1Decoder) readString(m map[string]any, key string) string {
+	return readField[string](d, m, key)
+}
+func (d *v1Decoder) readFloat(m map[string]any, key string) float64 {
+	return readField[float64](d, m, key)
+}
+func (d *v1Decoder) readBool(m map[string]any, key string) bool   { return readField[bool](d, m, key) }
+func (d *v1Decoder) readArray(m map[string]any, key string) []any { return readField[[]any](d, m, key) }
+func (d *v1Decoder) readObject(m map[string]any, key string) map[string]any {
+	return readField[map[string]any](d, m, key)
+}
+
+// readInt narrows a numeric field to int (JSON numbers decode as float64).
+func (d *v1Decoder) readInt(m map[string]any, key string) int { return int(d.readFloat(m, key)) }
+
+func (d *v1Decoder) readFloatPtr(m map[string]any, key string) *float64 {
+	v, present := m[key]
+	if !present || v == nil {
+		return nil
+	}
+	f, ok := v.(float64)
+	if !ok {
+		d.noteMalformedField(key, v)
+		return nil
+	}
+	return &f
+}
+
+func (d *v1Decoder) readStringMap(m map[string]any, key string) map[string]string {
+	raw := d.readObject(m, key)
+	if len(raw) == 0 {
+		return nil
+	}
+	out := make(map[string]string, len(raw))
+	for k, v := range raw {
+		s, ok := v.(string)
+		if !ok {
+			d.noteMalformedField(key+"."+k, v)
+			continue
+		}
+		out[k] = s
+	}
+	return out
+}
+
+func (d *v1Decoder) readObjects(m map[string]any, key string) []map[string]any {
+	raw := d.readArray(m, key)
+	if len(raw) == 0 {
+		return nil
+	}
+	out := make([]map[string]any, 0, len(raw))
+	for i, item := range raw {
+		obj, ok := item.(map[string]any)
+		if !ok {
+			d.noteMalformedField(fmt.Sprintf("%s[%d]", key, i), item)
+			continue
+		}
+		out = append(out, obj)
+	}
+	return out
+}
+
+// decodeMapInto converts an untyped map[string]any into a typed T by
+// round-tripping through JSON, letting encoding/json (struct tags, custom
+// UnmarshalJSON) do the field mapping instead of hand-copying out of the map.
+func decodeMapInto[T any](src map[string]any) (T, error) {
+	var dst T
+	bytes, err := json.Marshal(src)
+	if err != nil {
+		return dst, err
+	}
+	if err := json.Unmarshal(bytes, &dst); err != nil {
+		return dst, err
+	}
+	return dst, nil
+}

pkg/types/dashboardtypes/perses_v1_to_v2_layouts.go

@@ -0,0 +1,230 @@
+package dashboardtypes
+
+import (
+	"fmt"
+	"sort"
+
+	"github.com/perses/spec/go/common"
+	"github.com/perses/spec/go/dashboard"
+)
+
+// ══════════════════════════════════════════════
+// Layouts (data.layout + data.panelMap)
+// ══════════════════════════════════════════════
+
+// convertV1Layouts groups v1 react-grid-layout entries into v2 grid layouts.
+// Membership is positional (as the frontend renders): each row widget owns the
+// panels below it until the next row; panels above the first row form an unnamed
+// grid with no section header. Collapsed rows are the exception — their children
+// live in panelMap[rowID].widgets, not `layout`.
+func (d *v1Decoder) convertV1Layouts(data StorableDashboardData, panels map[string]*Panel) []Layout {
+	layout := d.readObjects(data, "layout")
+	if len(layout) == 0 {
+		return nil
+	}
+
+	// react-grid-layout can persist the same widget id more than once. Drop the
+	// duplicates, mirroring the frontend's getUpdatedLayout: keep the first
+	// occurrence in stored order and discard the rest (the losing entry's
+	// geometry is thrown away, not merged). Dedupe here, before sortByPosition,
+	// so "first" means first-in-stored-order as the frontend sees it — not
+	// topmost. Entries with no id are left for the main loop to drop.
+	seenWidgetIds := make(map[string]bool, len(layout))
+	dedupedLayouts := layout[:0]
+	for _, item := range layout {
+		if id := d.readString(item, "i"); id != "" {
+			if seenWidgetIds[id] {
+				continue
+			}
+			seenWidgetIds[id] = true
+		}
+		dedupedLayouts = append(dedupedLayouts, item)
+	}
+	layout = dedupedLayouts
+
+	rows := d.extractRowsAndCollapsedWidgets(data)
+
+	// Skip collapsed-row children a malformed dashboard lists in `layout` too.
+	isWidgetCollapsed := make(map[string]bool)
+	for _, row := range rows {
+		for _, child := range row.collapsedWidgets {
+			if id := d.readString(child, "i"); id != "" {
+				isWidgetCollapsed[id] = true
+				break
+			}
+		}
+	}
+
+	d.sortByPosition(layout)
+
+	type section struct {
+		row   *rowInfo // nil for the unnamed grid of ungrouped panels
+		items []map[string]any
+	}
+	topSectionWithoutHeader := &section{}
+	sectionsWithHeader := make([]*section, 0, len(rows))
+	currentRowHeader := topSectionWithoutHeader
+	for _, item := range layout {
+		id := d.readString(item, "i")
+		if id == "" || isWidgetCollapsed[id] {
+			// widgets in collapsed sectinos will be added when those sections' row widgets are handled.
+			continue
+		}
+		if row, ok := rows[id]; ok {
+			newRowHeader := &section{row: row, items: d.extractValidLayoutItemsForCollapsedSection(row.collapsedWidgets, panels)}
+			sectionsWithHeader = append(sectionsWithHeader, newRowHeader)
+			// A collapsed row owns only its stashed children; later panels → ungrouped.
+			if row.collapsed {
+				currentRowHeader = topSectionWithoutHeader
+			} else {
+				currentRowHeader = newRowHeader
+			}
+			continue
+		}
+		// Keep a layout entry only if its widget became a panel; otherwise (skipped
+		// widget, deleted id, or the "__dropping-elem__" drag placeholder) it would
+		// reference a panel that does not exist. Rows are handled above.
+		if _, ok := panels[id]; !ok {
+			continue
+		}
+		currentRowHeader.items = append(currentRowHeader.items, item)
+	}
+
+	out := make([]Layout, 0, len(sectionsWithHeader)+1)
+	if len(topSectionWithoutHeader.items) > 0 {
+		out = append(out, d.buildV2GridLayout(nil, topSectionWithoutHeader.items))
+	}
+	for _, sec := range sectionsWithHeader {
+		out = append(out, d.buildV2GridLayout(sec.row, sec.items))
+	}
+	return out
+}
+
+// extractValidLayoutItemsForCollapsedSection keeps only the collapsed-row children
+// backed by a real panel, dropping ghosts. These come from panelMap and skip the
+// main loop's per-item panel check, so a grid never references a missing panel.
+func (d *v1Decoder) extractValidLayoutItemsForCollapsedSection(items []map[string]any, panels map[string]*Panel) []map[string]any {
+	out := make([]map[string]any, 0, len(items))
+	for _, item := range items {
+		if id := d.readString(item, "i"); id != "" {
+			if _, ok := panels[id]; ok {
+				out = append(out, item)
+			}
+		}
+	}
+	return out
+}
+
+type rowInfo struct {
+	title            string
+	collapsed        bool
+	collapsedWidgets []map[string]any
+}
+
+// extractRowsAndCollapsedWidgets returns the row widgets keyed by id; collapsed
+// rows also carry their children stashed under panelMap[id].widgets.
+func (d *v1Decoder) extractRowsAndCollapsedWidgets(data StorableDashboardData) map[string]*rowInfo {
+	panelMap := d.readObject(data, "panelMap")
+	rows := make(map[string]*rowInfo)
+	for _, w := range d.readObjects(data, "widgets") {
+		id := d.readString(w, "id")
+		if d.readString(w, "panelTypes") != "row" || id == "" {
+			continue
+		}
+		row := &rowInfo{title: d.readString(w, "title")}
+		// Some templates store panelMap[id] as a bare []widgetID instead of the
+		// canonical {widgets, collapsed}. The frontend treats such a non-object
+		// entry as "not collapsed" (see GridCardLayout), so read it leniently: a
+		// non-map yields nil, which reads as not collapsed.
+		pm, _ := panelMap[id].(map[string]any)
+		if d.readBool(pm, "collapsed") {
+			row.collapsed = true
+			row.collapsedWidgets = d.readObjects(pm, "widgets")
+		}
+		rows[id] = row
+	}
+	return rows
+}
+
+// buildV2GridLayout builds one v2 grid. row is nil for the unnamed grid (no
+// display); otherwise the grid takes the row's title and collapse state. Items are
+// sorted by (y, x) then vertically compacted (see compactGridItemsVertically).
+func (d *v1Decoder) buildV2GridLayout(row *rowInfo, items []map[string]any) Layout {
+	d.sortByPosition(items)
+
+	spec := dashboard.GridLayoutSpec{Items: make([]dashboard.GridItem, 0, len(items))}
+	if row != nil {
+		spec.Display = &dashboard.GridLayoutDisplay{
+			Title:    row.title,
+			Collapse: &dashboard.GridLayoutCollapse{Open: !row.collapsed},
+		}
+	}
+
+	for _, item := range items {
+		spec.Items = append(spec.Items, dashboard.GridItem{
+			X:       d.readInt(item, "x"),
+			Y:       d.readInt(item, "y"),
+			Width:   d.readInt(item, "w"),
+			Height:  d.readInt(item, "h"),
+			Content: &common.JSONRef{Ref: fmt.Sprintf("#/spec/panels/%s", d.readString(item, "i"))},
+		})
+	}
+	compactGridItemsVertically(spec.Items)
+	return Layout{Kind: dashboard.KindGridLayout, Spec: &spec}
+}
+
+// compactGridItemsVertically mirrors react-grid-layout's correctBounds+compact
+// (compactType "vertical", allowOverlap false): clamp each item into the grid (x,y>=0;
+// x+width<=cols by shifting left), then move sorted-first items up to fill space and
+// down past collisions. Fixes overlaps, gaps, and out-of-bounds coords so the migrated
+// grid matches the v1 UI and passes v2 validation.
+func compactGridItemsVertically(items []dashboard.GridItem) {
+	collides := func(a, b dashboard.GridItem) bool {
+		return a.X < b.X+b.Width && b.X < a.X+a.Width && a.Y < b.Y+b.Height && b.Y < a.Y+a.Height
+	}
+	firstCollision := func(l dashboard.GridItem, placed []dashboard.GridItem) (dashboard.GridItem, bool) {
+		for _, p := range placed {
+			if collides(l, p) {
+				return p, true
+			}
+		}
+		return dashboard.GridItem{}, false
+	}
+	for i := range items {
+		l := items[i]
+		if l.X+l.Width > gridColumnCount { // overflows right → shift left to fit
+			l.X = gridColumnCount - l.Width
+		}
+		if l.X < 0 {
+			l.X = 0
+		}
+		if l.Y < 0 {
+			l.Y = 0
+		}
+		for l.Y > 0 { // move up to fill space above
+			up := l
+			up.Y--
+			if _, hit := firstCollision(up, items[:i]); hit {
+				break
+			}
+			l.Y--
+		}
+		for { // then down past any collision with an already-placed item
+			c, hit := firstCollision(l, items[:i])
+			if !hit {
+				break
+			}
+			l.Y = c.Y + c.Height
+		}
+		items[i] = l
+	}
+}
+
+func (d *v1Decoder) sortByPosition(items []map[string]any) {
+	sort.SliceStable(items, func(i, j int) bool {
+		if yi, yj := d.readInt(items[i], "y"), d.readInt(items[j], "y"); yi != yj {
+			return yi < yj
+		}
+		return d.readInt(items[i], "x") < d.readInt(items[j], "x")
+	})
+}

pkg/types/dashboardtypes/perses_v1_to_v2_panels.go

@@ -0,0 +1,473 @@
+package dashboardtypes
+
+import (
+	"encoding/json"
+	"fmt"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+// ══════════════════════════════════════════════
+// Widgets → Panels
+// ══════════════════════════════════════════════
+
+// convertV1Panels walks the v1 `widgets` array and produces v2 panels keyed by
+// the v1 widget id. WidgetRow entries (panelTypes == "row") are dropped here
+// and consumed by convertV1Layouts as section headers.
+func (d *v1Decoder) convertV1Panels(raw any) map[string]*Panel {
+	if raw == nil {
+		return nil
+	}
+	widgetsRaw, ok := raw.([]any)
+	if !ok {
+		d.noteMalformedField("widgets", raw)
+		return nil
+	}
+	panels := make(map[string]*Panel, len(widgetsRaw))
+	for i, widgetRaw := range widgetsRaw {
+		widget, ok := widgetRaw.(map[string]any)
+		if !ok {
+			d.noteMalformedField(fmt.Sprintf("widgets[%d]", i), widgetRaw)
+			continue
+		}
+		id := d.readString(widget, "id")
+		if id == "" {
+			// dead widget that can't be referenced anywhere, skipping.
+			continue
+		}
+		var panel *Panel
+		panelType := d.readString(widget, "panelTypes")
+		switch panelType {
+		case "graph":
+			panel = d.convertGraphWidget(widget)
+		case "bar":
+			panel = d.convertBarWidget(widget)
+		case "value":
+			panel = d.convertValueWidget(widget)
+		case "pie":
+			panel = d.convertPieWidget(widget)
+		case "table":
+			panel = d.convertTableWidget(widget)
+		case "histogram":
+			panel = d.convertHistogramWidget(widget)
+		case "list":
+			panel = d.convertListWidget(widget)
+		case "row":
+			// "row" (section header) is handled by the layout pass;
+			continue
+		default:
+			d.note("widgets[%d] has unknown panel type %q", i, panelType)
+		}
+		if panel == nil {
+			continue
+		}
+		panels[id] = panel
+	}
+	return panels
+}
+
+func (d *v1Decoder) convertGraphWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindTimeSeries,
+				Spec: &TimeSeriesPanelSpec{
+					Visualization: TimeSeriesVisualization{
+						BasicVisualization: d.basicVisualization(w),
+						FillSpans:          d.readBool(w, "fillSpans"),
+					},
+					Formatting: d.panelFormatting(w),
+					ChartAppearance: TimeSeriesChartAppearance{
+						LineInterpolation: mapV1Enum(d.readString(w, "lineInterpolation"), LineInterpolationSpline,
+							LineInterpolationLinear, LineInterpolationSpline, LineInterpolationStepAfter, LineInterpolationStepBefore),
+						ShowPoints: d.readBool(w, "showPoints"),
+						LineStyle:  mapV1Enum(d.readString(w, "lineStyle"), LineStyleSolid, LineStyleSolid, LineStyleDashed),
+						FillMode:   mapV1Enum(d.readString(w, "fillMode"), FillModeNone, FillModeSolid, FillModeGradient, FillModeNone),
+						SpanGaps:   mapV1SpanGaps(w["spanGaps"]),
+					},
+					Axes:       d.axesFromWidget(w),
+					Legend:     d.legendFromWidget(w),
+					Thresholds: d.mapV1ThresholdsWithLabel(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindTimeSeries),
+		},
+	}
+}
+
+func (d *v1Decoder) convertBarWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindBarChart,
+				Spec: &BarChartPanelSpec{
+					Visualization: BarChartVisualization{
+						BasicVisualization: d.basicVisualization(w),
+						FillSpans:          d.readBool(w, "fillSpans"),
+						StackedBarChart:    d.readBool(w, "stackedBarChart"),
+					},
+					Formatting: d.panelFormatting(w),
+					Axes:       d.axesFromWidget(w),
+					Legend:     d.legendFromWidget(w),
+					Thresholds: d.mapV1ThresholdsWithLabel(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindBarChart),
+		},
+	}
+}
+
+func (d *v1Decoder) convertValueWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindNumber,
+				Spec: &NumberPanelSpec{
+					Visualization: d.basicVisualization(w),
+					Formatting:    d.panelFormatting(w),
+					Thresholds:    d.mapV1ComparisonThresholds(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindNumber),
+		},
+	}
+}
+
+func (d *v1Decoder) convertPieWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindPieChart,
+				Spec: &PieChartPanelSpec{
+					Visualization: d.basicVisualization(w),
+					Formatting:    d.panelFormatting(w),
+					Legend:        d.legendFromWidget(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindPieChart),
+		},
+	}
+}
+
+func (d *v1Decoder) convertTableWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindTable,
+				Spec: &TablePanelSpec{
+					Visualization: d.basicVisualization(w),
+					Formatting: TableFormatting{
+						ColumnUnits:      d.readStringMap(w, "columnUnits"),
+						DecimalPrecision: mapV1Precision(w["decimalPrecision"]),
+					},
+					Thresholds: d.mapV1TableThresholds(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindTable),
+		},
+	}
+}
+
+func (d *v1Decoder) convertHistogramWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindHistogram,
+				Spec: &HistogramPanelSpec{
+					HistogramBuckets: HistogramBuckets{
+						BucketCount:           d.readFloatPtr(w, "bucketCount"),
+						BucketWidth:           d.readFloatPtr(w, "bucketWidth"),
+						MergeAllActiveQueries: d.readBool(w, "mergeAllActiveQueries"),
+					},
+					Legend: d.legendFromWidget(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindHistogram),
+		},
+	}
+}
+
+func (d *v1Decoder) convertListWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindList,
+				Spec: &ListPanelSpec{
+					SelectFields: d.mapV1SelectFields(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindList),
+		},
+	}
+}
+
+// ══════════════════════════════════════════════
+// Panel-spec shared helpers
+// ══════════════════════════════════════════════
+
+func (d *v1Decoder) widgetDisplay(w map[string]any) Display {
+	return Display{Name: d.readString(w, "title"), Description: d.readString(w, "description")}
+}
+
+func (d *v1Decoder) basicVisualization(w map[string]any) BasicVisualization {
+	return BasicVisualization{TimePreference: mapV1TimePreference(d.readString(w, "timePreferance"))}
+}
+
+func (d *v1Decoder) panelFormatting(w map[string]any) PanelFormatting {
+	return PanelFormatting{Unit: d.readString(w, "yAxisUnit"), DecimalPrecision: mapV1Precision(w["decimalPrecision"])}
+}
+
+func (d *v1Decoder) axesFromWidget(w map[string]any) Axes {
+	return Axes{
+		SoftMin:    d.readFloatPtr(w, "softMin"),
+		SoftMax:    d.readFloatPtr(w, "softMax"),
+		IsLogScale: d.readBool(w, "isLogScale"),
+	}
+}
+
+func (d *v1Decoder) legendFromWidget(w map[string]any) Legend {
+	return Legend{
+		Position:     mapV1Enum(d.readString(w, "legendPosition"), LegendPositionBottom, LegendPositionBottom, LegendPositionRight),
+		CustomColors: d.readStringMap(w, "customLegendColors"),
+	}
+}
+
+func (d *v1Decoder) mapV1SelectFields(w map[string]any) []telemetrytypes.TelemetryFieldKey {
+	field := "selectedLogFields"
+	raw := d.readArray(w, field)
+	if len(raw) == 0 {
+		field = "selectedTracesFields"
+		raw = d.readArray(w, field)
+	}
+	if len(raw) == 0 {
+		return nil
+	}
+	normalizePreV5FieldKeys(raw)
+	fields, err := decodeTelemetryFields(raw)
+	if err != nil {
+		d.note("widget %q has malformed %s: %v", d.readString(w, "id"), field, err)
+		return nil
+	}
+	// Drop nameless entries (blank column rows) — v2 requires a name, and the v1
+	// UI renders nothing for them anyway.
+	out := fields[:0]
+	for _, f := range fields {
+		if f.Name != "" {
+			out = append(out, f)
+		}
+	}
+	return out
+}
+
+func decodeTelemetryFields(raw []any) ([]telemetrytypes.TelemetryFieldKey, error) {
+	bytes, err := json.Marshal(raw)
+	if err != nil {
+		return nil, err
+	}
+	var fields []telemetrytypes.TelemetryFieldKey
+	if err := json.Unmarshal(bytes, &fields); err != nil {
+		return nil, err
+	}
+	return fields, nil
+}
+
+// ══════════════════════════════════════════════
+// Panel field mappers
+// ══════════════════════════════════════════════
+
+// v1 stores timePreferance as `GLOBAL_TIME`, `LAST_5_MIN`, … (see
+// frontend/src/container/NewWidget/RightContainer/timeItems.ts). v2 uses the
+// lowercase form, so the translation is just downcase.
+func mapV1TimePreference(s string) TimePreference {
+	if s == "" {
+		return TimePreferenceGlobalTime
+	}
+	candidate := TimePreference{valuer.NewString(strings.ToLower(s))}
+	for _, allowed := range candidate.Enum() {
+		if allowed == candidate {
+			return candidate
+		}
+	}
+	return TimePreferenceGlobalTime
+}
+
+// mapV1Precision is polymorphic (string|number), so it type-switches the raw
+// value rather than reading through a typed accessor.
+func mapV1Precision(raw any) PrecisionOption {
+	switch v := raw.(type) {
+	case string:
+		candidate := PrecisionOption{valuer.NewString(v)}
+		for _, allowed := range candidate.Enum() {
+			if allowed == candidate {
+				return candidate
+			}
+		}
+	case float64:
+		n := int(v)
+		if n >= 0 && n <= 4 {
+			return PrecisionOption{valuer.NewString(strconv.Itoa(n))}
+		}
+	}
+	return PrecisionOption2
+}
+
+// mapV1Enum picks the v1 string value if it matches one of the allowed v2
+// values, otherwise returns the fallback. v1 frontend enums (lineInterpolation,
+// lineStyle, fillMode, legendPosition) already use the v2 lowercase form.
+func mapV1Enum[T interface{ StringValue() string }](s string, fallback T, allowed ...T) T {
+	if s == "" {
+		return fallback
+	}
+	for _, a := range allowed {
+		if a.StringValue() == s {
+			return a
+		}
+	}
+	return fallback
+}
+
+// v1 spanGaps is `boolean | number`. true → span every gap; false → never span;
+// a number is interpreted (per frontend SeriesProps.spanGaps docs) as an
+// X-axis threshold in seconds. Polymorphic, so it type-switches the raw value.
+func mapV1SpanGaps(raw any) SpanGaps {
+	switch v := raw.(type) {
+	case bool:
+		if v {
+			return SpanGaps{FillOnlyBelow: false}
+		}
+		return SpanGaps{FillOnlyBelow: true}
+	case float64:
+		dur, err := valuer.ParseTextDuration(time.Duration(v * float64(time.Second)).String())
+		if err != nil {
+			return SpanGaps{FillOnlyBelow: false}
+		}
+		return SpanGaps{FillOnlyBelow: true, FillLessThan: dur}
+	}
+	return SpanGaps{FillOnlyBelow: false}
+}
+
+func (d *v1Decoder) mapV1ThresholdsWithLabel(w map[string]any) []ThresholdWithLabel {
+	rawSlice := d.readObjects(w, "thresholds")
+	if len(rawSlice) == 0 {
+		return nil
+	}
+	out := make([]ThresholdWithLabel, 0, len(rawSlice))
+	for _, t := range rawSlice {
+		color := d.readString(t, "thresholdColor")
+		label := d.readString(t, "thresholdLabel")
+		if color == "" || label == "" {
+			// v2 ThresholdWithLabel requires both; drop entries that wouldn't validate.
+			continue
+		}
+		value := d.readFloat(t, "thresholdValue")
+		out = append(out, ThresholdWithLabel{Value: &value, Unit: d.readString(t, "thresholdUnit"), Color: color, Label: label})
+	}
+	if len(out) == 0 {
+		return nil
+	}
+	return out
+}
+
+func (d *v1Decoder) mapV1ComparisonThresholds(w map[string]any) []ComparisonThreshold {
+	rawSlice := d.readObjects(w, "thresholds")
+	if len(rawSlice) == 0 {
+		return nil
+	}
+	out := make([]ComparisonThreshold, 0, len(rawSlice))
+	for _, t := range rawSlice {
+		color := d.readString(t, "thresholdColor")
+		if color == "" {
+			continue
+		}
+		value := d.readFloat(t, "thresholdValue")
+		out = append(out, ComparisonThreshold{
+			Value:    &value,
+			Operator: d.mapV1ComparisonOperator(d.readString(t, "thresholdOperator")),
+			Unit:     d.readString(t, "thresholdUnit"),
+			Color:    color,
+			Format:   mapV1ThresholdFormat(d.readString(t, "thresholdFormat")),
+		})
+	}
+	if len(out) == 0 {
+		return nil
+	}
+	return out
+}
+
+func (d *v1Decoder) mapV1TableThresholds(w map[string]any) []TableThreshold {
+	rawSlice := d.readObjects(w, "thresholds")
+	if len(rawSlice) == 0 {
+		return nil
+	}
+	out := make([]TableThreshold, 0, len(rawSlice))
+	for _, t := range rawSlice {
+		color := d.readString(t, "thresholdColor")
+		columnName := d.readString(t, "thresholdTableOptions")
+		if color == "" || columnName == "" {
+			continue
+		}
+		value := d.readFloat(t, "thresholdValue")
+		out = append(out, TableThreshold{
+			ComparisonThreshold: ComparisonThreshold{
+				Value:    &value,
+				Operator: d.mapV1ComparisonOperator(d.readString(t, "thresholdOperator")),
+				Unit:     d.readString(t, "thresholdUnit"),
+				Color:    color,
+				Format:   mapV1ThresholdFormat(d.readString(t, "thresholdFormat")),
+			},
+			ColumnName: columnName,
+		})
+	}
+	if len(out) == 0 {
+		return nil
+	}
+	return out
+}
+
+func (d *v1Decoder) mapV1ComparisonOperator(s string) ComparisonOperator {
+	switch s {
+	case ">":
+		return ComparisonOperatorAbove
+	case ">=":
+		return ComparisonOperatorAboveOrEqual
+	case "<":
+		return ComparisonOperatorBelow
+	case "<=":
+		return ComparisonOperatorBelowOrEqual
+	case "=":
+		return ComparisonOperatorEqual
+	case "!=":
+		return ComparisonOperatorNotEqual
+	default:
+		d.note("threshold has unknown comparison operator %q", s)
+		return ComparisonOperatorAbove
+	}
+}
+
+func mapV1ThresholdFormat(s string) ThresholdFormat {
+	switch strings.ToLower(s) {
+	case "background":
+		return ThresholdFormatBackground
+	case "text":
+		return ThresholdFormatText
+	}
+	return ThresholdFormatText
+}

pkg/types/dashboardtypes/perses_v1_to_v2_queries.go

@@ -0,0 +1,258 @@
+package dashboardtypes
+
+import (
+	"encoding/json"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+// ══════════════════════════════════════════════
+// Queries
+// ══════════════════════════════════════════════
+
+// convertV1WidgetQuery returns exactly one Query (per Spec.Validate). The kind
+// chosen depends on the v1 widget query shape:
+//   - a single query (promql / clickhouse_sql / builder) → its native kind
+//   - multiple queries                                   → signoz/CompositeQuery
+//
+// A single query is never wrapped in a CompositeQuery; in particular List
+// panels accept only a bare signoz/BuilderQuery. Builder queries are routed
+// through qb.WrapInV5Envelope (in collectV1QueryEnvelopes), which translates v4
+// builder-field names (orderBy/selectColumns/dataSource) into their v5
+// equivalents and adds the `signal` field required by BuilderQuerySpec's
+// per-signal dispatch.
+func (d *v1Decoder) convertV1WidgetQuery(widget map[string]any, panelKind PanelPluginKind) []Query {
+	envelopes, signal := d.collectV1QueryEnvelopes(widget, panelKind)
+	if len(envelopes) == 0 {
+		return nil
+	}
+	requestType := requestTypeForPanel(panelKind)
+
+	// A single query keeps its native kind — never wrapped in a CompositeQuery.
+	if len(envelopes) == 1 {
+		if q := singleQueryFromEnvelope(envelopes[0], requestType, signal); q != nil {
+			return []Query{*q}
+		}
+	}
+
+	// Default: wrap in CompositeQuery.
+	composite, err := parseCompositeFromEnvelopes(envelopes)
+	if err != nil || composite == nil {
+		d.note("widget %q: could not build query from %d envelope(s): %s", d.readString(widget, "id"), len(envelopes), detailErr(err))
+		return nil
+	}
+	return []Query{{
+		Kind: requestType,
+		Spec: QuerySpec{
+			Plugin: QueryPlugin{Kind: QueryKindComposite, Spec: composite},
+		},
+	}}
+}
+
+// requestTypeForPanel maps a v2 panel plugin kind to the request type (result
+// shape) its queries produce. Mirrors the frontend's panelTypeToRequestType
+// (buildQueryRangeRequest.ts): time series for line/bar/histogram (histogram
+// bins client-side from raw time series, V1 parity), scalar for
+// number/pie/table, raw rows for list.
+func requestTypeForPanel(panelKind PanelPluginKind) qb.RequestType {
+	switch panelKind {
+	case PanelKindTimeSeries, PanelKindBarChart, PanelKindHistogram:
+		return qb.RequestTypeTimeSeries
+	case PanelKindNumber, PanelKindPieChart, PanelKindTable:
+		return qb.RequestTypeScalar
+	case PanelKindList:
+		return qb.RequestTypeRaw
+	}
+	return qb.RequestTypeTimeSeries
+}
+
+// collectV1QueryEnvelopes inspects widget.query.queryType and produces a
+// flattened list of v5-shaped envelopes. The returned signal is the dominant
+// builder signal (if any), used for typed builder-query dispatch.
+func (d *v1Decoder) collectV1QueryEnvelopes(widget map[string]any, panelKind PanelPluginKind) ([]map[string]any, telemetrytypes.Signal) {
+	queryMap := d.readObject(widget, "query")
+	if queryMap == nil {
+		return nil, telemetrytypes.Signal{}
+	}
+	rowLimitPanel := panelKind == PanelKindList || panelKind == PanelKindTable
+	// Raw (list) panels legitimately have no aggregation; every other panel needs one.
+	needsAggregation := requestTypeForPanel(panelKind) != qb.RequestTypeRaw
+
+	queryType := d.readString(queryMap, "queryType")
+	switch queryType {
+	case "promql":
+		var out []map[string]any
+		for _, q := range d.readObjects(queryMap, "promql") {
+			out = append(out, promQLEnvelope(q))
+		}
+		return out, telemetrytypes.Signal{}
+
+	case "clickhouse_sql":
+		var out []map[string]any
+		for _, q := range d.readObjects(queryMap, "clickhouse_sql") {
+			out = append(out, clickhouseEnvelope(q))
+		}
+		return out, telemetrytypes.Signal{}
+
+	case "builder":
+		builder := d.readObject(queryMap, "builder")
+		if builder == nil {
+			return nil, telemetrytypes.Signal{}
+		}
+		var out []map[string]any
+		var signal telemetrytypes.Signal
+		widgetType := d.readString(widget, "panelTypes")
+		for _, q := range d.readObjects(builder, "queryData") {
+			normalizePreV5QueryData(q, widgetType)
+			normalizePreV5SelectColumns(q)
+			normalizePreV5PageSize(q, rowLimitPanel)
+			if needsAggregation {
+				ensureDefaultAggregation(q)
+			}
+			name := d.readString(q, "queryName")
+			out = append(out, qb.WrapInV5Envelope(name, q, string(qb.QueryTypeBuilder.StringValue())))
+			if signal.IsZero() {
+				signal = signalFromDataSource(q["dataSource"])
+			}
+		}
+		for _, f := range d.readObjects(builder, "queryFormulas") {
+			normalizePreV5QueryData(f, widgetType)
+			name := d.readString(f, "queryName")
+			out = append(out, qb.WrapInV5Envelope(name, f, string(qb.QueryTypeFormula.StringValue())))
+		}
+		for _, op := range d.readObjects(builder, "queryTraceOperator") {
+			normalizePreV5QueryData(op, widgetType)
+			name := d.readString(op, "queryName")
+			out = append(out, qb.WrapInV5Envelope(name, op, string(qb.QueryTypeTraceOperator.StringValue())))
+		}
+		return out, signal
+	default:
+		d.note("widget %q has unknown queryType %q", d.readString(widget, "id"), queryType)
+	}
+	return nil, telemetrytypes.Signal{}
+}
+
+func promQLEnvelope(q map[string]any) map[string]any {
+	return map[string]any{
+		"type": qb.QueryTypePromQL.StringValue(),
+		"spec": map[string]any{
+			"name":     q["name"],
+			"query":    q["query"],
+			"disabled": q["disabled"],
+			"legend":   q["legend"],
+		},
+	}
+}
+
+func clickhouseEnvelope(q map[string]any) map[string]any {
+	return map[string]any{
+		"type": qb.QueryTypeClickHouseSQL.StringValue(),
+		"spec": map[string]any{
+			"name":     q["name"],
+			"query":    q["query"],
+			"disabled": q["disabled"],
+			"legend":   q["legend"],
+		},
+	}
+}
+
+// singleQueryFromEnvelope returns a typed Query for one envelope, using its
+// native query kind (promql/clickhouse_sql/builder) rather than wrapping it in
+// a CompositeQuery. A bare signoz/BuilderQuery is valid for every panel kind
+// and is the only kind List panels accept.
+func singleQueryFromEnvelope(envelope map[string]any, requestType qb.RequestType, signal telemetrytypes.Signal) *Query {
+	t, _ := envelope["type"].(string)
+	spec, _ := envelope["spec"].(map[string]any)
+	switch t {
+	case qb.QueryTypePromQL.StringValue():
+		prom, err := decodeMapInto[qb.PromQuery](spec)
+		if err != nil {
+			return nil
+		}
+		return &Query{
+			Kind: requestType,
+			Spec: QuerySpec{
+				Name:   prom.Name,
+				Plugin: QueryPlugin{Kind: QueryKindPromQL, Spec: &prom},
+			},
+		}
+	case qb.QueryTypeClickHouseSQL.StringValue():
+		ch, err := decodeMapInto[qb.ClickHouseQuery](spec)
+		if err != nil {
+			return nil
+		}
+		return &Query{
+			Kind: requestType,
+			Spec: QuerySpec{
+				Name:   ch.Name,
+				Plugin: QueryPlugin{Kind: QueryKindClickHouseSQL, Spec: &ch},
+			},
+		}
+	case qb.QueryTypeBuilder.StringValue():
+		builderSpec := parseBuilderQuerySpec(spec, signal)
+		if builderSpec == nil {
+			return nil
+		}
+		name, _ := spec["name"].(string)
+		return &Query{
+			Kind: requestType,
+			Spec: QuerySpec{
+				Name:   name,
+				Plugin: QueryPlugin{Kind: QueryKindBuilder, Spec: &BuilderQuerySpec{Spec: builderSpec}},
+			},
+		}
+	}
+	return nil
+}
+
+func parseCompositeFromEnvelopes(envelopes []map[string]any) (*CompositeQuerySpec, error) {
+	bytes, err := json.Marshal(envelopes)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "marshal v1 query envelopes")
+	}
+	var parsed []qb.QueryEnvelope
+	if err := json.Unmarshal(bytes, &parsed); err != nil {
+		return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidWidgetQuery, "decode v5 query envelopes")
+	}
+	return &CompositeQuerySpec{Queries: parsed}, nil
+}
+
+func parseBuilderQuerySpec(rawSpec any, signal telemetrytypes.Signal) any {
+	spec, ok := rawSpec.(map[string]any)
+	if !ok {
+		return nil
+	}
+	if !signal.IsZero() {
+		spec["signal"] = signal.StringValue()
+	}
+	bytes, err := json.Marshal(spec)
+	if err != nil {
+		return nil
+	}
+	parsed, err := qb.UnmarshalBuilderQueryBySignal(bytes)
+	if err != nil {
+		return nil
+	}
+	return parsed
+}
+
+// signalFromDataSource maps a v1 data-source string to a v5 signal. Casing
+// varies by source: builder queries store lowercase ("traces"), while variable
+// `dynamicVariablesSource` stores capitalized ("Traces"), so match
+// case-insensitively. Unknown values (e.g. "All telemetry") map to the zero
+// Signal.
+func signalFromDataSource(raw any) telemetrytypes.Signal {
+	s, _ := raw.(string)
+	switch strings.ToLower(s) {
+	case "traces":
+		return telemetrytypes.SignalTraces
+	case "logs":
+		return telemetrytypes.SignalLogs
+	case "metrics":
+		return telemetrytypes.SignalMetrics
+	}
+	return telemetrytypes.Signal{}
+}

pkg/types/dashboardtypes/perses_v1_to_v2_queries_malformed.go

@@ -0,0 +1,182 @@
+package dashboardtypes
+
+import (
+	"context"
+	"log/slog"
+	"regexp"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/transition"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+// ══════════════════════════════════════════════
+// Malformed-field normalization
+// ══════════════════════════════════════════════
+//
+// Pre-v5 query-body reshapes for dashboards whose bodies aren't actually v5-shaped
+// (e.g. stamped version:"v5" but never upgraded). The bulk of the upgrade is
+// delegated to transition.MigrateQueryDataShapeSafe (see normalizePreV5QueryData);
+// this file keeps only the reshapes it doesn't cover.
+
+// preV5Migrator runs transition's shape-safe (idempotent) v4→v5 upgrade. Stateless
+// after construction, so a shared instance with a discard logger / no ambiguity
+// keys is fine.
+var preV5Migrator = transition.NewDashboardMigrateV5(slog.New(slog.DiscardHandler), nil, nil)
+
+// normalizePreV5QueryData upgrades one builder queryData/formula in place: the
+// shared migrator, then a reshape of any existing aggregations[] it leaves alone.
+func normalizePreV5QueryData(query map[string]any, widgetType string) {
+	preV5Migrator.MigrateQueryDataShapeSafe(context.Background(), query, widgetType)
+	normalizePreV5LogTraceAggregations(query)
+}
+
+// aggExprRe matches one "func(args)" with an optional "as alias". Mirrors the
+// frontend's parseAggregations regex; matching only well-formed func(args)
+// discards trailing junk ("sum(x) ) )" → "sum(x)").
+var aggExprRe = regexp.MustCompile(`([a-zA-Z0-9_]+\([^)]*\))(?:\s*as\s+('[^']*'|"[^"]*"|[a-zA-Z0-9_-]+))?`)
+
+// normalizePreV5LogTraceAggregations reshapes an existing logs/traces aggregations[]
+// via parseAggregations (extract func(args), lift inline "as alias", split
+// multi-part, drop metric-only fields; empty → count()). Covers the case the
+// migrator skips: it builds from flat fields but leaves a present-but-malformed
+// aggregations[] alone. A query with none is left as-is.
+func normalizePreV5LogTraceAggregations(query map[string]any) {
+	switch signalFromDataSource(query["dataSource"]) {
+	case telemetrytypes.SignalLogs, telemetrytypes.SignalTraces:
+	default:
+		return
+	}
+	aggs, ok := query["aggregations"].([]any)
+	if !ok || len(aggs) == 0 {
+		return
+	}
+	out := make([]any, 0, len(aggs))
+	for _, a := range aggs {
+		agg, ok := a.(map[string]any)
+		if !ok {
+			continue
+		}
+		expr, _ := agg["expression"].(string)
+		alias, _ := agg["alias"].(string)
+		parsed := parseAggregations(expr, alias)
+		if len(parsed) == 0 {
+			parsed = []any{map[string]any{"expression": "count()"}}
+		}
+		out = append(out, parsed...)
+	}
+	query["aggregations"] = out
+}
+
+// ensureDefaultAggregation defaults an empty logs/traces aggregations[] to count(),
+// mirroring the frontend. Callers gate this to aggregation panels. Metrics are skipped:
+// count() can't stand in for a missing metricName.
+func ensureDefaultAggregation(query map[string]any) {
+	switch signalFromDataSource(query["dataSource"]) {
+	case telemetrytypes.SignalLogs, telemetrytypes.SignalTraces:
+	default:
+		return
+	}
+	if aggs, ok := query["aggregations"].([]any); ok && len(aggs) > 0 {
+		return
+	}
+	query["aggregations"] = []any{map[string]any{"expression": "count()"}}
+}
+
+// parseAggregations pulls every func(args) (with inline or passed-through alias,
+// quotes stripped) out of a v1 expression. Mirrors the frontend's
+// parseAggregations; empty result if none.
+func parseAggregations(expression, availableAlias string) []any {
+	matches := aggExprRe.FindAllStringSubmatch(expression, -1)
+	out := make([]any, 0, len(matches))
+	for _, m := range matches {
+		alias := m[2]
+		if alias == "" {
+			alias = availableAlias
+		}
+		agg := map[string]any{"expression": m[1]}
+		if alias != "" {
+			agg["alias"] = strings.Trim(alias, `'"`)
+		}
+		out = append(out, agg)
+	}
+	return out
+}
+
+// normalizePreV5SelectColumns lets WrapInV5Envelope (which reads the old
+// {key,dataType,type}) handle selectColumns stored the v5 way ({name,…}): backfill
+// key/dataType/type from name/fieldDataType/fieldContext, drop columns with no
+// resolvable key. Inverse of normalizePreV5FieldKeys (the two consumers want
+// opposite shapes).
+func normalizePreV5SelectColumns(query map[string]any) {
+	cols, ok := query["selectColumns"].([]any)
+	if !ok {
+		return
+	}
+	out := make([]any, 0, len(cols))
+	for _, c := range cols {
+		col, ok := c.(map[string]any)
+		if !ok {
+			continue
+		}
+		if _, ok := col["key"]; !ok {
+			if name, ok := col["name"]; ok {
+				col["key"] = name
+			}
+		}
+		if _, ok := col["dataType"]; !ok {
+			if fdt, ok := col["fieldDataType"]; ok {
+				col["dataType"] = fdt
+			}
+		}
+		if _, ok := col["type"]; !ok {
+			if fc, ok := col["fieldContext"]; ok {
+				col["type"] = fc
+			}
+		}
+		if key, _ := col["key"].(string); key == "" {
+			continue
+		}
+		out = append(out, col)
+	}
+	query["selectColumns"] = out
+}
+
+// normalizePreV5FieldKeys renames list-panel field keys {key,dataType,type} →
+// {name,fieldDataType,fieldContext} in place (as WrapInV5Envelope does for
+// groupBy/orderBy). Entries already carrying "name" are left as-is.
+func normalizePreV5FieldKeys(fields []any) {
+	for _, f := range fields {
+		field, ok := f.(map[string]any)
+		if !ok {
+			continue
+		}
+		if _, hasName := field["name"]; hasName {
+			continue
+		}
+		if key, ok := field["key"]; ok {
+			field["name"] = key
+		}
+		if dataType, ok := field["dataType"]; ok {
+			field["fieldDataType"] = dataType
+		}
+		if typ, ok := field["type"]; ok {
+			field["fieldContext"] = typ
+		}
+	}
+}
+
+// normalizePreV5PageSize backfills limit from the legacy pageSize (frontend's
+// `limit || pageSize`), for row-limited panels (list/table) only. Leaves a query
+// that already has limit, or a non-row-limited panel, untouched.
+func normalizePreV5PageSize(query map[string]any, rowLimitPanel bool) {
+	if !rowLimitPanel {
+		return
+	}
+	if limit, ok := query["limit"]; ok && limit != nil {
+		return
+	}
+	if ps, ok := query["pageSize"]; ok {
+		query["limit"] = ps
+	}
+}

pkg/types/dashboardtypes/perses_v1_to_v2_tags.go

@@ -0,0 +1,122 @@
+package dashboardtypes
+
+import (
+	"fmt"
+	"regexp"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+// ══════════════════════════════════════════════
+// Tags
+// ══════════════════════════════════════════════
+
+// v1 carries tags as a flat []string; v2 tags are (key, value) pairs. Each v1
+// string is normalized into a pair (separator split, empty-side fallback,
+// reserved-key prefix, `/` scrub). Tags that normalize to the same
+// (lower(key), lower(value)) within a dashboard are collapsed, first occurrence
+// winning the display casing.
+//
+// Characters still illegal after normalization (spaces, punctuation) are molded
+// to fit the tag validators: disallowed runs collapse to "_" (see moldTagField).
+
+// defaultV1TagKey is the key assigned when a v1 tag string has no usable
+// separator (or one side of the split is empty).
+const defaultV1TagKey = "tag"
+
+func (d *v1Decoder) convertV1TagsForOrg(orgID valuer.UUID, raw any) []*tagtypes.Tag {
+	if raw == nil {
+		return nil
+	}
+	rawTagsList, ok := raw.([]any)
+	if !ok {
+		d.noteMalformedField("tags", raw)
+		return nil
+	}
+	seen := make(map[string]struct{}, len(rawTagsList))
+	tagsV2 := make([]*tagtypes.Tag, 0, len(rawTagsList))
+	for i, rawTag := range rawTagsList {
+		s, ok := rawTag.(string)
+		if !ok {
+			d.noteMalformedField(fmt.Sprintf("tags[%d]", i), rawTag)
+			continue
+		}
+		key, value, ok := normalizeV1Tag(s)
+		if !ok {
+			continue
+		}
+		dedupKey := strings.ToLower(key) + "\x00" + strings.ToLower(value)
+		if _, dup := seen[dedupKey]; dup {
+			continue
+		}
+		seen[dedupKey] = struct{}{}
+		tagsV2 = append(tagsV2, tagtypes.NewTag(orgID, coretypes.KindDashboard, key, value))
+	}
+	return tagsV2
+}
+
+// normalizeV1Tag derives a (key, value) pair from one v1 tag string. After
+// splitting and molding both sides, a lone survivor becomes a value under the
+// default key; ok is false if neither survives.
+func normalizeV1Tag(s string) (string, string, bool) {
+	s = strings.TrimSpace(s)
+	if s == "" {
+		return "", "", false
+	}
+
+	var rawKey, rawValue string
+	switch {
+	case strings.Contains(s, ":"):
+		rawKey, rawValue, _ = strings.Cut(s, ":")
+		// Only the first ":" separates key from value; collapse the rest.
+		rawValue = strings.ReplaceAll(rawValue, ":", "_")
+	case strings.Contains(s, "/"):
+		rawKey, rawValue, _ = strings.Cut(s, "/")
+	default:
+		rawValue = s
+	}
+	rawKey = strings.TrimSpace(rawKey)
+	rawValue = strings.TrimSpace(rawValue)
+
+	// Reserved-key collision: prefix "_" so the list-query DSL stays unambiguous.
+	if _, reserved := reservedDSLKeys[DSLKey(strings.ToLower(rawKey))]; rawKey != "" && reserved {
+		rawKey = "_" + rawKey
+	}
+
+	key := moldTagField(rawKey, tagKeyDisallowed, tagKeyNotLead, tagtypes.MAX_LEN_TAG_KEY)
+	value := moldTagField(rawValue, tagValueDisallowed, nil, tagtypes.MAX_LEN_TAG_VALUE)
+	switch {
+	case key == "" && value == "":
+		return "", "", false
+	case key == "":
+		return defaultV1TagKey, value, true
+	case value == "":
+		return defaultV1TagKey, key, true
+	default:
+		return key, value, true
+	}
+}
+
+// Inverse of tagKeyRegex/tagValueRegex ("/" always rejected); tagKeyNotLead
+// matches a bad first char for a key. TestMoldedV1TagsPassValidation guards drift.
+var (
+	tagKeyDisallowed   = regexp.MustCompile(`[^a-zA-Z0-9$_@#{}:-]+`)
+	tagValueDisallowed = regexp.MustCompile(`[^a-zA-Z0-9$_@#{}:.+=-]+`)
+	tagKeyNotLead      = regexp.MustCompile(`^[^a-zA-Z$_@{#]`)
+)
+
+// moldTagField collapses disallowed runs to "_", prefixes "_" if notLead hits
+// the first char, and caps at max. Keeps a leading "_", trims a trailing one.
+func moldTagField(s string, disallowed, notLead *regexp.Regexp, max int) string {
+	s = strings.TrimRight(disallowed.ReplaceAllString(s, "_"), "_")
+	if s != "" && notLead != nil && notLead.MatchString(s) {
+		s = "_" + s
+	}
+	if len(s) > max {
+		s = strings.TrimRight(s[:max], "_")
+	}
+	return s
+}

pkg/types/dashboardtypes/perses_v1_to_v2_variables.go

@@ -0,0 +1,177 @@
+package dashboardtypes
+
+import (
+	"sort"
+
+	"github.com/perses/spec/go/dashboard/variable"
+)
+
+// ══════════════════════════════════════════════
+// Variables
+// ══════════════════════════════════════════════
+
+// convertV1Variables walks the v1 `variables` map (UUID-keyed) and produces an
+// ordered []Variable. Variables sort by `order` first, then by id for stable
+// output. v1 variable types map as follows:
+//
+//	QUERY    → ListVariable + signoz/QueryVariable
+//	CUSTOM   → ListVariable + signoz/CustomVariable
+//	DYNAMIC  → ListVariable + signoz/DynamicVariable
+//	TEXTBOX  → TextVariable
+func (d *v1Decoder) convertV1Variables(raw any) []Variable {
+	if raw == nil {
+		return nil
+	}
+	rawVariablesMap, ok := raw.(map[string]any)
+	if !ok {
+		// An empty list isn't the expected map encoding, but tolerate it as "no variables".
+		if rawSlice, isSlice := raw.([]any); isSlice && len(rawSlice) == 0 {
+			return nil
+		}
+		d.noteMalformedField("variables", raw)
+		return nil
+	}
+	type ordered struct {
+		variableID      string
+		variableContent map[string]any
+		order           float64
+	}
+	entries := make([]ordered, 0, len(rawVariablesMap))
+	for variableID, variableContentRaw := range rawVariablesMap {
+		variableContent, ok := variableContentRaw.(map[string]any)
+		if !ok {
+			d.noteMalformedField("variables."+variableID, variableContentRaw)
+			continue
+		}
+		entries = append(entries, ordered{variableID: variableID, variableContent: variableContent, order: d.readFloat(variableContent, "order")})
+	}
+	sort.SliceStable(entries, func(i, j int) bool {
+		if entries[i].order != entries[j].order {
+			return entries[i].order < entries[j].order
+		}
+		return entries[i].variableID < entries[j].variableID
+	})
+
+	variablesV2 := make([]Variable, 0, len(entries))
+	for _, e := range entries {
+		v, ok := d.convertV1Variable(e.variableContent)
+		if !ok {
+			continue
+		}
+		variablesV2 = append(variablesV2, v)
+	}
+	return variablesV2
+}
+
+func (d *v1Decoder) convertV1Variable(v map[string]any) (Variable, bool) {
+	name := d.readString(v, "name")
+	if name == "" {
+		return Variable{}, false
+	}
+	description := d.readString(v, "description")
+	kind := d.readString(v, "type")
+
+	switch kind {
+	case "TEXTBOX":
+		spec := &TextVariableSpec{
+			Display: Display{Name: name, Description: description},
+			Value:   d.readString(v, "textboxValue"),
+			Name:    name,
+		}
+		return Variable{Kind: variable.KindText, Spec: spec}, true
+
+	case "QUERY", "CUSTOM", "DYNAMIC":
+		// Drop (don't fail on) a dynamic variable with no attribute — it can't resolve.
+		if kind == "DYNAMIC" && d.readString(v, "dynamicVariablesAttribute") == "" {
+			return Variable{}, false
+		}
+		listSpec := &ListVariableSpec{
+			Display:         Display{Name: name, Description: description},
+			AllowAllValue:   d.readBool(v, "showALLOption"),
+			AllowMultiple:   d.readBool(v, "multiSelect"),
+			CustomAllValue:  d.readString(v, "customAllValue"),
+			CapturingRegexp: d.readString(v, "capturingRegexp"),
+			Sort:            mapV1Sort(d.readString(v, "sort")),
+			Plugin:          d.variablePluginFor(kind, v),
+			Name:            name,
+		}
+		if dv := mapV1VariableDefault(v); dv != nil {
+			listSpec.DefaultValue = dv
+		}
+		return Variable{Kind: variable.KindList, Spec: listSpec}, true
+
+	default:
+		d.note("variable %q has unknown type %q", name, kind)
+		return Variable{}, false
+	}
+}
+
+func (d *v1Decoder) variablePluginFor(kind string, v map[string]any) VariablePlugin {
+	switch kind {
+	case "QUERY":
+		return VariablePlugin{
+			Kind: VariableKindQuery,
+			Spec: &QueryVariableSpec{QueryValue: d.readString(v, "queryValue")},
+		}
+	case "CUSTOM":
+		return VariablePlugin{
+			Kind: VariableKindCustom,
+			Spec: &CustomVariableSpec{CustomValue: d.readString(v, "customValue")},
+		}
+	case "DYNAMIC":
+		spec := &DynamicVariableSpec{Name: d.readString(v, "dynamicVariablesAttribute")}
+		if signal := signalFromDataSource(v["dynamicVariablesSource"]); !signal.IsZero() {
+			spec.Signal = signal
+		}
+		return VariablePlugin{Kind: VariableKindDynamic, Spec: spec}
+	}
+	return VariablePlugin{}
+}
+
+// mapV1VariableDefault reads selectedValue/defaultValue, both polymorphic
+// (string|array), so it indexes the raw value and lets defaultValueFromAny
+// type-switch — no typed accessor, intentionally lenient.
+func mapV1VariableDefault(v map[string]any) *VariableDefaultValue {
+	if raw, ok := v["selectedValue"]; ok {
+		return defaultValueFromAny(raw)
+	}
+	if raw, ok := v["defaultValue"]; ok {
+		return defaultValueFromAny(raw)
+	}
+	return nil
+}
+
+func defaultValueFromAny(raw any) *VariableDefaultValue {
+	switch v := raw.(type) {
+	case string:
+		if v == "" {
+			return nil
+		}
+		return &VariableDefaultValue{variable.DefaultValue{SingleValue: v}}
+	case []any:
+		if len(v) == 0 {
+			return nil
+		}
+		values := make([]string, 0, len(v))
+		for _, item := range v {
+			if s, ok := item.(string); ok && s != "" {
+				values = append(values, s)
+			}
+		}
+		if len(values) == 0 {
+			return nil
+		}
+		return &VariableDefaultValue{variable.DefaultValue{SliceValues: values}}
+	}
+	return nil
+}
+
+func mapV1Sort(s string) ListVariableSpecSort {
+	switch s {
+	case "ASC":
+		return SortAlphabeticalAsc
+	case "DESC":
+		return SortAlphabeticalDesc
+	}
+	return ListVariableSpecSort{} // zero (omitzero) — SortNone is the implicit default
+}

pkg/types/querybuildertypes/querybuildertypesv5/migrate_envelope.go

@@ -0,0 +1,127 @@
+package querybuildertypesv5
+
+// WrapInV5Envelope translates a single v4 builder query/formula map into a
+// v5 query envelope ({"type": ..., "spec": ...}). It is a pure shape transform
+// over untyped maps: v4 builder field names (groupBy/orderBy/selectColumns/
+// dataSource) are rewritten to their v5 equivalents and a `signal` is derived
+// from the data source. queryType selects the envelope type, except a formula
+// (detected when name != queryMap["expression"]) is always emitted as
+// "builder_formula".
+//
+// Migration code (pkg/transition) and the v1→v2 dashboard conversion both
+// produce v5 envelopes, so this lives here with the v5 query types rather than
+// in an infra-level package.
+func WrapInV5Envelope(name string, queryMap map[string]any, queryType string) map[string]any {
+	// Create a properly structured v5 query
+	v5Query := map[string]any{
+		"name":     name,
+		"disabled": queryMap["disabled"],
+		"legend":   queryMap["legend"],
+	}
+
+	if name != queryMap["expression"] {
+		// formula
+		queryType = "builder_formula"
+		v5Query["expression"] = queryMap["expression"]
+		if functions, ok := queryMap["functions"]; ok {
+			v5Query["functions"] = functions
+		}
+		return map[string]any{
+			"type": queryType,
+			"spec": v5Query,
+		}
+	}
+
+	// Add signal based on data source
+	if dataSource, ok := queryMap["dataSource"].(string); ok {
+		switch dataSource {
+		case "traces":
+			v5Query["signal"] = "traces"
+		case "logs":
+			v5Query["signal"] = "logs"
+		case "metrics":
+			v5Query["signal"] = "metrics"
+		}
+	}
+
+	if stepInterval, ok := queryMap["stepInterval"]; ok {
+		v5Query["stepInterval"] = stepInterval
+	}
+
+	if aggregations, ok := queryMap["aggregations"]; ok {
+		v5Query["aggregations"] = aggregations
+	}
+
+	if filter, ok := queryMap["filter"]; ok {
+		v5Query["filter"] = filter
+	}
+
+	// Copy groupBy with proper structure
+	if groupBy, ok := queryMap["groupBy"].([]any); ok {
+		v5GroupBy := make([]any, len(groupBy))
+		for i, gb := range groupBy {
+			if gbMap, ok := gb.(map[string]any); ok {
+				v5GroupBy[i] = map[string]any{
+					"name":          gbMap["key"],
+					"fieldDataType": gbMap["dataType"],
+					"fieldContext":  gbMap["type"],
+				}
+			}
+		}
+		v5Query["groupBy"] = v5GroupBy
+	}
+
+	// Copy orderBy with proper structure
+	if orderBy, ok := queryMap["orderBy"].([]any); ok {
+		v5OrderBy := make([]any, len(orderBy))
+		for i, ob := range orderBy {
+			if obMap, ok := ob.(map[string]any); ok {
+				v5OrderBy[i] = map[string]any{
+					"key": map[string]any{
+						"name":          obMap["columnName"],
+						"fieldDataType": obMap["dataType"],
+						"fieldContext":  obMap["type"],
+					},
+					"direction": obMap["order"],
+				}
+			}
+		}
+		v5Query["order"] = v5OrderBy
+	}
+
+	// Copy selectColumns as selectFields
+	if selectColumns, ok := queryMap["selectColumns"].([]any); ok {
+		v5SelectFields := make([]any, len(selectColumns))
+		for i, col := range selectColumns {
+			if colMap, ok := col.(map[string]any); ok {
+				v5SelectFields[i] = map[string]any{
+					"name":          colMap["key"],
+					"fieldDataType": colMap["dataType"],
+					"fieldContext":  colMap["type"],
+				}
+			}
+		}
+		v5Query["selectFields"] = v5SelectFields
+	}
+
+	// Copy limit and offset
+	if limit, ok := queryMap["limit"]; ok {
+		v5Query["limit"] = limit
+	}
+	if offset, ok := queryMap["offset"]; ok {
+		v5Query["offset"] = offset
+	}
+
+	if having, ok := queryMap["having"]; ok {
+		v5Query["having"] = having
+	}
+
+	if functions, ok := queryMap["functions"]; ok {
+		v5Query["functions"] = functions
+	}
+
+	return map[string]any{
+		"type": queryType,
+		"spec": v5Query,
+	}
+}

tests/e2e/helpers/quick-filters.ts

@@ -1,172 +0,0 @@
-import { expect, type Locator, type Page } from '@playwright/test';
-
-import { authToken } from './common';
-
-export const LOGS_EXPLORER_PATH = '/logs/logs-explorer';
-
-const SETTINGS_PANEL_TITLE = 'Edit quick filters';
-const SETTINGS_ICON_TEST_ID = 'settings-icon';
-const ANNOUNCEMENT_DISMISSED_KEY = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT';
-/**
- * Conservative lower bound for the open panel width. The panel is 342px in
- * QuickFiltersSettings.styles.scss; 300 leaves slack for sub-pixel rounding.
- */
-const SETTINGS_PANEL_MIN_WIDTH_PX = 300;
-
-// Pages that already had the announcement-dismissal init script registered.
-// addInitScript re-runs on every navigation, so registering once per Page keeps
-// the callback from stacking up across repeated helper calls.
-const announcementDismissed = new WeakSet<Page>();
-
-export type QuickFilterSignal = 'logs' | 'traces';
-
-export interface QuickFilterDefinition {
-	key: string;
-	dataType: string;
-	type: string;
-}
-
-export const DEFAULT_CUSTOM_FILTERS: QuickFilterDefinition[] = [
-	{
-		key: 'service.name',
-		dataType: 'string',
-		type: 'resource',
-	},
-	{
-		key: 'deployment.environment',
-		dataType: 'string',
-		type: 'resource',
-	},
-];
-
-function settingsPanel(page: Page): Locator {
-	return page
-		.locator('.quick-filters-settings')
-		.filter({ hasText: SETTINGS_PANEL_TITLE });
-}
-
-function settingsGearContainer(page: Page): Locator {
-	return page.getByTestId(SETTINGS_ICON_TEST_ID).locator('..');
-}
-
-/** Minimal filter set so `isDynamicFilters` is true and the settings gear renders. */
-export async function seedCustomFiltersViaApi(
-	page: Page,
-	signal: QuickFilterSignal,
-	filters: QuickFilterDefinition[] = DEFAULT_CUSTOM_FILTERS,
-): Promise<void> {
-	const token = await authToken(page);
-	const res = await page.request.put('/api/v1/orgs/me/filters', {
-		data: { signal, filters },
-		headers: { Authorization: `Bearer ${token}` },
-	});
-	if (!res.ok()) {
-		throw new Error(
-			`PUT /api/v1/orgs/me/filters ${res.status()}: ${await res.text()}`,
-		);
-	}
-}
-
-/**
- * Hide the one-off announcement tooltip so it cannot intercept the gear click.
- * Registered via addInitScript (not page.evaluate) so it runs in the app's own
- * origin on every navigation — evaluate() before goto() would set localStorage
- * on the pre-navigation about:blank origin, which the app never reads. Must be
- * called before the first goto(). Guarded to once per Page to avoid stacking.
- */
-export async function dismissQuickFiltersAnnouncement(
-	page: Page,
-): Promise<void> {
-	if (announcementDismissed.has(page)) {
-		return;
-	}
-	await page.addInitScript((key) => {
-		// Runs in the browser; Node's tsc has no DOM globals on this callback.
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		(globalThis as any).localStorage.setItem(key, 'false');
-	}, ANNOUNCEMENT_DISMISSED_KEY);
-	announcementDismissed.add(page);
-}
-
-export async function gotoExplorerWithQuickFilters(
-	page: Page,
-	path: string,
-): Promise<void> {
-	await dismissQuickFiltersAnnouncement(page);
-	await page.goto(path);
-	await page.getByTestId(SETTINGS_ICON_TEST_ID).waitFor({ state: 'visible' });
-}
-
-/** Settings drawer is closed — content unmounted and gear not active. */
-export async function assertQuickFiltersSettingsDrawerClosed(
-	page: Page,
-): Promise<void> {
-	await expect(page.getByText(SETTINGS_PANEL_TITLE)).toBeHidden();
-	await expect(settingsGearContainer(page)).not.toHaveClass(/active/);
-	// Collapsed panel keeps the `hidden` class (width: 0). Assert the class, not
-	// toBeVisible() — a zero-width element is never "visible" to Playwright.
-	await expect(page.locator('.quick-filters-settings')).toHaveClass(/hidden/);
-}
-
-/**
- * Click the settings gear. Pair with `assertQuickFiltersSettingsDrawerOpen` for
- * visibility/layout checks that guard overflow clipping regressions.
- */
-export async function openQuickFiltersSettingsPanel(page: Page): Promise<void> {
-	await assertQuickFiltersSettingsDrawerClosed(page);
-	await page.getByTestId(SETTINGS_ICON_TEST_ID).click();
-}
-
-/**
- * Assert the customization drawer is open, painted on screen, and populated with
- * the seeded filters — not merely present in the DOM.
- */
-export async function assertQuickFiltersSettingsDrawerOpen(
-	page: Page,
-	seededFilters: QuickFilterDefinition[] = DEFAULT_CUSTOM_FILTERS,
-): Promise<void> {
-	const panel = settingsPanel(page);
-	const filtersColumn = page.locator('.quick-filters');
-
-	await expect(settingsGearContainer(page)).toHaveClass(/active/);
-	await expect(panel).toBeVisible();
-	await expect(panel).not.toHaveClass(/hidden/);
-	await expect(page.getByText(SETTINGS_PANEL_TITLE)).toBeVisible();
-	await expect(page.getByPlaceholder('Search for a filter...')).toBeVisible();
-	await expect(panel.locator('.qf-header-icon')).toBeVisible();
-
-	const addedList = panel.locator('.qf-added-filters-list');
-	await expect(panel.getByText('ADDED FILTERS')).toBeVisible();
-	for (const filter of seededFilters) {
-		await expect(addedList.getByText(filter.key, { exact: true })).toBeVisible();
-	}
-
-	// Footer only mounts after edits — absent on first open.
-	await expect(panel.getByRole('button', { name: 'Discard' })).toBeHidden();
-	await expect(panel.getByRole('button', { name: 'Save changes' })).toBeHidden();
-
-	// OTHER FILTERS loads asynchronously from attribute/aggregate suggestions.
-	await expect(panel.locator('.qf-other-filters-skeleton')).toHaveCount(0);
-	await expect(panel.getByText('OTHER FILTERS')).toBeVisible();
-	await expect(
-		panel.locator('.qf-other-filters-list .other-filters-item').first(),
-	).toBeVisible();
-
-	const [panelBox, columnBox] = await Promise.all([
-		panel.boundingBox(),
-		filtersColumn.boundingBox(),
-	]);
-	expect(panelBox?.width ?? 0).toBeGreaterThanOrEqual(
-		SETTINGS_PANEL_MIN_WIDTH_PX,
-	);
-	expect(columnBox).not.toBeNull();
-	expect(panelBox!.x).toBeGreaterThanOrEqual(columnBox!.x);
-}
-
-/** Close via the drawer header X and confirm state resets. */
-export async function closeQuickFiltersSettingsPanel(
-	page: Page,
-): Promise<void> {
-	await settingsPanel(page).locator('.qf-header-icon').click();
-	await assertQuickFiltersSettingsDrawerClosed(page);
-}

tests/e2e/tests/quick-filters/settings.spec.ts

@@ -1,24 +0,0 @@
-import { test, expect } from '../../fixtures/auth';
-import {
-	assertQuickFiltersSettingsDrawerOpen,
-	closeQuickFiltersSettingsPanel,
-	DEFAULT_CUSTOM_FILTERS,
-	gotoExplorerWithQuickFilters,
-	LOGS_EXPLORER_PATH,
-	openQuickFiltersSettingsPanel,
-	seedCustomFiltersViaApi,
-} from '../../helpers/quick-filters';
-
-// smoke tests for settings drawer in quick filters
-test.describe('Quick Filters — settings drawer', () => {
-	test('TC-01 logs explorer — settings gear opens a visible, populated drawer', async ({
-		authedPage: page,
-	}) => {
-		await seedCustomFiltersViaApi(page, 'logs', DEFAULT_CUSTOM_FILTERS);
-		await gotoExplorerWithQuickFilters(page, LOGS_EXPLORER_PATH);
-		await openQuickFiltersSettingsPanel(page);
-		await assertQuickFiltersSettingsDrawerOpen(page, DEFAULT_CUSTOM_FILTERS);
-		await closeQuickFiltersSettingsPanel(page);
-		await expect(page.locator('.quick-filters')).toBeVisible();
-	});
-});