fix: ui fixes for panel selection modal

Wire the `/substitute_vars` round-trip into the panel create-alert flow so
`$var` / dynamic variable references resolve to the values selected in the
variable bar before the alert is seeded — V1 parity with `useCreateAlerts`,
which the previous V2 path skipped (it shipped variable refs verbatim).

When the dashboard has resolved variables, `useCreateAlertFromPanel` builds a
V5 query-range request (panel queries + resolved variables) and POSTs it through
the generated `useReplaceVariables` hook; on success the substituted envelopes
are translated to the V1 `Query` the alert page reads. With no variables to
substitute the round-trip is a no-op, so we keep seeding synchronously and the
new tab stays tied to the click.

- persesQueryAdapters: extract `envelopesToQuery` from `fromPerses` (the
  substitute response hands back envelopes, not panel-query wrappers)
- buildCreateAlertUrl: export `buildAlertUrl` + `readPanelUnit` so the sync and
  substituted paths share URL assembly

.github/CODEOWNERS

@@ -109,7 +109,10 @@ go.mod @therealpandey
 /pkg/modules/role/ @therealpandey
 /pkg/types/coretypes/ @therealpandey @vikrantgupta25
 
-/frontend/src/lib/authz/ @H4ad
+/frontend/src/hooks/useAuthZ/ @H4ad
+/frontend/src/components/GuardAuthZ/ @H4ad
+/frontend/src/components/AuthZTooltip/ @H4ad
+/frontend/src/components/createGuardedRoute/ @H4ad
 /frontend/src/container/RolesSettings/ @H4ad
 /frontend/src/components/RolesSelect/ @H4ad
 /frontend/src/pages/MembersSettings/ @H4ad

cmd/authz.go

@@ -12,7 +12,7 @@ import (
 	"github.com/spf13/cobra"
 )
 
-const permissionsTypePath = "frontend/src/lib/authz/hooks/useAuthZ/permissions.type.ts"
+const permissionsTypePath = "frontend/src/hooks/useAuthZ/permissions.type.ts"
 
 var permissionsTypeTemplate = template.Must(template.New("permissions").Parse(
 	`// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY cmd/enterprise/*.go generate authz

frontend/.oxlintrc.json

@@ -328,6 +328,11 @@
           {
             "name": "immer",
             "message": "[State mgmt] Direct immer usage is deprecated. Use Zustand (which integrates immer via the immer middleware) instead."
+          },
+          {
+            "name": "api/generated/services/dashboard",
+            "importNames": ["patchDashboardV2", "usePatchDashboardV2"],
+            "message": "[dashboard-v2] Don't call patchDashboardV2/usePatchDashboardV2 directly — use useOptimisticPatch().patchAsync so spec edits update the react-query cache optimistically and reconcile on settle."
           }
         ]
       }

frontend/AGENTS.md

@@ -25,7 +25,6 @@ You are operating within a constrained context window and strict system prompts.
 - Never create barrel files.
 - When writing new css, prefer CSS Modules
   - Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.
-- When writing code that could need authorization checks, read ./src/lib/authz/README.md
 
 3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:
 - Run `pnpm tsgo --noEmit`

frontend/__mocks__/lib/env.ts

@@ -1,3 +0,0 @@
-export const IS_DEV = false;
-export const IS_PROD = true;
-export const MODE = 'test';

frontend/jest.config.ts

@@ -29,7 +29,6 @@ const config: Config.InitialOptions = {
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',
-		'^lib/env$': '<rootDir>/__mocks__/lib/env.ts',
 		'^test-mocks/(.*)$': '<rootDir>/__mocks__/$1',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',

frontend/pnpm-lock.yaml

@@ -432,9 +432,6 @@ importers:
       '@typescript/native-preview':
         specifier: 7.0.0-dev.20260430.1
         version: 7.0.0-dev.20260430.1
-      babel-plugin-transform-import-meta:
-        specifier: ^2.3.3
-        version: 2.3.3(@babel/core@7.29.0)
       eslint-plugin-sonarjs:
         specifier: 4.0.2
         version: 4.0.2(eslint@10.2.1(jiti@2.6.1))
@@ -4092,11 +4089,6 @@ packages:
   babel-plugin-syntax-jsx@6.18.0:
     resolution: {integrity: sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==}
 
-  babel-plugin-transform-import-meta@2.3.3:
-    resolution: {integrity: sha512-bbh30qz1m6ZU1ybJoNOhA2zaDvmeXMnGNBMVMDOJ1Fni4+wMBoy/j7MTRVmqAUCIcy54/rEnr9VEBsfcgbpm3Q==}
-    peerDependencies:
-      '@babel/core': ^7.10.0
-
   babel-preset-current-node-syntax@1.2.0:
     resolution: {integrity: sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg==}
     peerDependencies:
@@ -13005,12 +12997,6 @@ snapshots:
 
   babel-plugin-syntax-jsx@6.18.0: {}
 
-  babel-plugin-transform-import-meta@2.3.3(@babel/core@7.29.0):
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/template': 7.28.6
-      tslib: 2.8.1
-
   babel-preset-current-node-syntax@1.2.0(@babel/core@7.29.0):
     dependencies:
       '@babel/core': 7.29.0

frontend/src/components/AuthZTooltip/AuthZTooltip.authz.test.tsx

@@ -1,14 +1,11 @@
 import { ReactElement } from 'react';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
-import type {
-	AuthZObject,
-	BrandedPermission,
-} from 'lib/authz/hooks/useAuthZ/types';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { buildPermission } from 'hooks/useAuthZ/utils';
+import type { AuthZObject, BrandedPermission } from 'hooks/useAuthZ/types';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import AuthZTooltip from './AuthZTooltip';
 
-jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+jest.mock('hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
 
 const noPermissions = {
@@ -16,8 +13,6 @@ const noPermissions = {
 	isFetching: false,
 	error: null,
 	permissions: null,
-	allowed: false,
-	deniedPermissions: [] as BrandedPermission[],
 	refetchPermissions: jest.fn(),
 };
 

frontend/src/components/AuthZTooltip/AuthZTooltip.module.scss

@@ -1,3 +1,7 @@
+.wrapper {
+	cursor: not-allowed;
+}
+
 .errorContent {
 	background: var(--callout-error-background) !important;
 	border-color: var(--callout-error-border) !important;

frontend/src/components/AuthZTooltip/AuthZTooltip.tsx

@@ -1,23 +1,16 @@
-import { CSSProperties, ReactElement, cloneElement, useMemo } from 'react';
+import { ReactElement, cloneElement, useMemo } from 'react';
 import {
 	TooltipRoot,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger,
 } from '@signozhq/ui/tooltip';
-import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
+import type { BrandedPermission } from 'hooks/useAuthZ/types';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { formatPermission } from 'hooks/useAuthZ/utils';
 import { useAppContext } from 'providers/App/App';
 import styles from './AuthZTooltip.module.scss';
 
-const DISABLED_STYLE: CSSProperties = {
-	pointerEvents: 'all',
-	cursor: 'not-allowed',
-};
-
-const noOp = (): void => {};
-
 interface AuthZTooltipProps {
 	checks: BrandedPermission[];
 	children: ReactElement;
@@ -56,13 +49,11 @@ function AuthZTooltip({
 	}, [checks, permissions]);
 
 	if (shouldCheck && isLoading) {
-		return cloneElement(children, {
-			disabled: true,
-			style: DISABLED_STYLE,
-			onClick: noOp,
-			onMouseDown: noOp,
-			onPointerDown: noOp,
-		});
+		return (
+			<span className={styles.wrapper}>
+				{cloneElement(children, { disabled: true })}
+			</span>
+		);
 	}
 
 	if (!shouldCheck || deniedPermissions.length === 0) {
@@ -73,14 +64,12 @@ function AuthZTooltip({
 		<TooltipProvider>
 			<TooltipRoot>
 				<TooltipTrigger asChild>
-					{cloneElement(children, {
-						disabled: true,
-						style: DISABLED_STYLE,
-						onClick: noOp,
-						onMouseDown: noOp,
-						onPointerDown: noOp,
-						'data-denied-permissions': deniedPermissions.join(','),
-					})}
+					<span
+						className={styles.wrapper}
+						data-denied-permissions={deniedPermissions.join(',')}
+					>
+						{cloneElement(children, { disabled: true })}
+					</span>
 				</TooltipTrigger>
 				<TooltipContent className={styles.errorContent}>
 					{formatDeniedMessage(deniedPermissions, user.id, tooltipMessage)}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -2,8 +2,8 @@ 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 { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import { SACreatePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
 import { toast } from '@signozhq/ui/sonner';
@@ -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/CreateServiceAccountModal/__tests__/CreateServiceAccountModal.test.tsx

@@ -11,7 +11,7 @@ import {
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
-jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
+jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
 	__esModule: true,
 	default: ({
 		children,

frontend/src/components/GuardAuthZ/GuardAuthZ.authz.test.tsx

@@ -0,0 +1,260 @@
+import { ReactElement } from 'react';
+import { BrandedPermission } from 'hooks/useAuthZ/types';
+import { buildPermission } from 'hooks/useAuthZ/utils';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, waitFor } from 'tests/test-utils';
+import { AUTHZ_CHECK_URL, authzMockResponse } from 'tests/authz-test-utils';
+
+import { GuardAuthZ } from './GuardAuthZ';
+
+describe('GuardAuthZ', () => {
+	const TestChild = (): ReactElement => <div>Protected Content</div>;
+	const LoadingFallback = (): ReactElement => <div>Loading...</div>;
+	const NoPermissionFallback = (_response: {
+		requiredPermissionName: BrandedPermission;
+	}): ReactElement => <div>Access denied</div>;
+	const NoPermissionFallbackWithSuggestions = (response: {
+		requiredPermissionName: BrandedPermission;
+	}): ReactElement => (
+		<div>
+			Access denied. Required permission: {response.requiredPermissionName}
+		</div>
+	);
+
+	it('should render children when permission is granted', 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, [true])));
+			}),
+		);
+
+		render(
+			<GuardAuthZ relation="read" object="role:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+	});
+
+	it('should render fallbackOnLoading when loading', () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
+				return res(
+					ctx.delay('infinite'),
+					ctx.status(200),
+					ctx.json({ data: [], status: 'success' }),
+				);
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="read"
+				object="role:*"
+				fallbackOnLoading={<LoadingFallback />}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		expect(screen.getByText('Loading...')).toBeInTheDocument();
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render null when loading and no fallbackOnLoading provided', () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
+				return res(
+					ctx.delay('infinite'),
+					ctx.status(200),
+					ctx.json({ data: [], status: 'success' }),
+				);
+			}),
+		);
+
+		const { container } = render(
+			<GuardAuthZ relation="read" object="role:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		expect(container.firstChild).toBeNull();
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render children when API error occurs and no fallbackOnError provided (fail open)', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
+			}),
+		);
+
+		render(
+			<GuardAuthZ relation="read" object="role:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+	});
+
+	it('should render fallbackOnError when API error occurs and fallbackOnError is provided', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="read"
+				object="role:*"
+				fallbackOnError={<div>Custom error fallback</div>}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Custom error fallback')).toBeInTheDocument();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render fallbackOnNoPermissions when 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, [false])));
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="update"
+				object="role:123"
+				fallbackOnNoPermissions={NoPermissionFallback}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Access denied')).toBeInTheDocument();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render null when permission is denied and no fallbackOnNoPermissions provided', 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, [false])));
+			}),
+		);
+
+		const { container } = render(
+			<GuardAuthZ relation="update" object="role:123">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(container.firstChild).toBeNull();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render null when permissions object is null', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(200), ctx.json({ data: [], status: 'success' }));
+			}),
+		);
+
+		const { container } = render(
+			<GuardAuthZ relation="read" object="role:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(container.firstChild).toBeNull();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should pass requiredPermissionName to fallbackOnNoPermissions', async () => {
+		const permission = buildPermission('update', 'role:123');
+
+		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, [false])));
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="update"
+				object="role:123"
+				fallbackOnNoPermissions={NoPermissionFallbackWithSuggestions}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByText(/Access denied. Required permission:/),
+			).toBeInTheDocument();
+		});
+
+		expect(
+			screen.getAllByText(
+				new RegExp(permission.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')),
+			).length,
+		).toBeGreaterThan(0);
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should handle different relation and object combinations', 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, [true])));
+			}),
+		);
+
+		const { rerender } = render(
+			<GuardAuthZ relation="read" object="role:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+
+		rerender(
+			<GuardAuthZ relation="delete" object="role:456">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/GuardAuthZ/GuardAuthZ.tsx

@@ -0,0 +1,50 @@
+import { ReactElement } from 'react';
+import {
+	AuthZObject,
+	AuthZRelation,
+	BrandedPermission,
+} from 'hooks/useAuthZ/types';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { buildPermission } from 'hooks/useAuthZ/utils';
+
+export type GuardAuthZProps<R extends AuthZRelation> = {
+	children: ReactElement;
+	relation: R;
+	object: AuthZObject<R>;
+	fallbackOnLoading?: JSX.Element;
+	fallbackOnError?: JSX.Element;
+	fallbackOnNoPermissions?: (response: {
+		requiredPermissionName: BrandedPermission;
+	}) => JSX.Element;
+};
+
+export function GuardAuthZ<R extends AuthZRelation>({
+	children,
+	relation,
+	object,
+	fallbackOnLoading,
+	fallbackOnError,
+	fallbackOnNoPermissions,
+}: GuardAuthZProps<R>): JSX.Element | null {
+	const permission = buildPermission<R>(relation, object);
+
+	const { permissions, isLoading, error } = useAuthZ([permission]);
+
+	if (isLoading) {
+		return fallbackOnLoading ?? null;
+	}
+
+	if (error) {
+		return fallbackOnError ?? children;
+	}
+
+	if (!permissions?.[permission]?.isGranted) {
+		return (
+			fallbackOnNoPermissions?.({
+				requiredPermissionName: permission,
+			}) ?? null
+		);
+	}
+
+	return children;
+}

frontend/src/components/PermissionDeniedCallout/PermissionDeniedCallout.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from 'tests/test-utils';
+import PermissionDeniedCallout from './PermissionDeniedCallout';
+
+describe('PermissionDeniedCallout', () => {
+	it('renders the permission name in the callout message', () => {
+		render(<PermissionDeniedCallout permissionName="serviceaccount:attach" />);
+
+		expect(screen.getByText(/is not authorized/)).toBeInTheDocument();
+		expect(screen.getByText(/serviceaccount:attach/)).toBeInTheDocument();
+	});
+
+	it('accepts an optional className', () => {
+		const { container } = render(
+			<PermissionDeniedCallout
+				permissionName="serviceaccount:read"
+				className="custom-class"
+			/>,
+		);
+		expect(container.firstChild).toHaveClass('custom-class');
+	});
+});

frontend/src/components/PermissionDeniedCallout/PermissionDeniedCallout.tsx

@@ -3,20 +3,17 @@ import cx from 'classnames';
 import styles from './PermissionDeniedCallout.module.scss';
 import { useAppContext } from 'providers/App/App';
 import { Typography } from '@signozhq/ui/typography';
-import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
 
 interface PermissionDeniedCalloutProps {
-	deniedPermissions: BrandedPermission[];
+	permissionName: string;
 	className?: string;
 }
 
 function PermissionDeniedCallout({
-	deniedPermissions,
+	permissionName,
 	className,
 }: PermissionDeniedCalloutProps): JSX.Element {
 	const { user } = useAppContext();
-	const formattedPermissions = deniedPermissions.map(formatPermission);
 
 	return (
 		<Callout
@@ -28,12 +25,7 @@ function PermissionDeniedCallout({
 			<Typography.Text className={styles.permission}>
 				<code className={styles.permissionCode}>user/{user.id}</code> is not
 				authorized to perform{' '}
-				{formattedPermissions.map((perm, idx) => (
-					<span key={perm}>
-						<code className={styles.permissionCode}>{perm}</code>
-						{idx < formattedPermissions.length - 1 && ', '}
-					</span>
-				))}
+				<code className={styles.permissionCode}>{permissionName}</code>
 			</Typography.Text>
 		</Callout>
 	);

frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from 'tests/test-utils';
+import PermissionDeniedFullPage from './PermissionDeniedFullPage';
+
+describe('PermissionDeniedFullPage', () => {
+	it('renders the title and subtitle with the permissionName interpolated', () => {
+		render(<PermissionDeniedFullPage permissionName="serviceaccount:list" />);
+
+		expect(screen.getByText('Uh-oh! You are not authorized')).toBeInTheDocument();
+		expect(screen.getByText(/serviceaccount:list/)).toBeInTheDocument();
+		expect(screen.getByText(/is not authorized to perform/)).toBeInTheDocument();
+	});
+
+	it('renders with a different permissionName', () => {
+		render(<PermissionDeniedFullPage permissionName="role:read" />);
+		expect(screen.getByText(/role:read/)).toBeInTheDocument();
+	});
+});

frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.tsx

@@ -3,18 +3,15 @@ import { CircleSlash2 } from '@signozhq/icons';
 import styles from './PermissionDeniedFullPage.module.scss';
 import { Style } from '@signozhq/design-tokens';
 import { useAppContext } from 'providers/App/App';
-import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
 
 interface PermissionDeniedFullPageProps {
-	deniedPermissions: BrandedPermission[];
+	permissionName: string;
 }
 
 function PermissionDeniedFullPage({
-	deniedPermissions,
+	permissionName,
 }: PermissionDeniedFullPageProps): JSX.Element {
 	const { user } = useAppContext();
-	const formattedPermissions = deniedPermissions.map(formatPermission);
 
 	return (
 		<div className={styles.container}>
@@ -25,13 +22,7 @@ function PermissionDeniedFullPage({
 				<p className={styles.title}>Uh-oh! You are not authorized</p>
 				<p className={styles.subtitle}>
 					<code className={styles.permission}>user/{user.id}</code> is not authorized
-					to perform{' '}
-					{formattedPermissions.map((perm, idx) => (
-						<span key={perm}>
-							<code className={styles.permission}>{perm}</code>
-							{idx < formattedPermissions.length - 1 && ', '}
-						</span>
-					))}
+					to perform <code className={styles.permission}>{permissionName}</code>
 				</p>
 			</div>
 		</div>

frontend/src/components/RouteTab/types.ts

@@ -1,11 +1,10 @@
-import { ComponentType } from 'react';
 import { TabsProps } from 'antd';
 import { History } from 'history';
 
 export type TabRoutes = {
 	name: React.ReactNode;
 	route: string;
-	Component: ComponentType;
+	Component: () => JSX.Element;
 	key: string;
 };
 

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

@@ -4,11 +4,11 @@ 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 'components/AuthZTooltip/AuthZTooltip';
 import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { disabledDate } from '../utils';
@@ -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,8 +1,8 @@
 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 { buildSADeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import { buildSADeletePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -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,13 +7,12 @@ 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 AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import {
 	buildAPIKeyDeletePermission,
 	buildAPIKeyUpdatePermission,
 	buildSADetachPermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { disabledDate, formatLastObservedAt } from '../utils';
@@ -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/EditKeyModal/index.tsx

@@ -16,8 +16,8 @@ import type {
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import dayjs from 'dayjs';
-import { buildAPIKeyUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { buildAPIKeyUpdatePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import { parseAsString, useQueryState } from 'nuqs';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,17 +1,16 @@
 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 'components/AuthZTooltip/AuthZTooltip';
 import {
 	APIKeyCreatePermission,
-	APIKeyListPermission,
 	buildAPIKeyDeletePermission,
 	buildSAAttachPermission,
 	buildSADetachPermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs';
@@ -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

@@ -5,21 +5,16 @@ import { Button } from '@signozhq/ui/button';
 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 AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 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 '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,11 +1,11 @@
 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 'components/AuthZTooltip/AuthZTooltip';
 import {
 	buildAPIKeyDeletePermission,
 	buildSADetachPermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -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 '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';
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from '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 '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,70 +375,23 @@ function ServiceAccountDrawer({
 	]);
 
 	const handleClose = useCallback((): void => {
+		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
@@ -458,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>
 
@@ -483,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(
@@ -492,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,13 +1,12 @@
 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';
 
 import EditKeyModal from '../EditKeyModal';
 
-jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
+jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
 	__esModule: true,
 	default: ({
 		children,
@@ -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,13 +1,12 @@
 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';
 
 import KeysTab from '../KeysTab';
 
-jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
+jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
 	__esModule: true,
 	default: ({
 		children,
@@ -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';
@@ -6,11 +7,11 @@ import {
 	setupAuthzAdmin,
 	setupAuthzDeny,
 	setupAuthzDenyAll,
-} from 'lib/authz/utils/authz-test-utils';
+} from 'tests/authz-test-utils';
 import {
 	APIKeyListPermission,
 	buildSADeletePermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 
@@ -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,11 +1,36 @@
+import type { ReactNode } from 'react';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { setupAuthzAdmin } from 'tests/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/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { SolidAlertTriangle } from '@signozhq/icons';
 import { Select, Tooltip } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select';
-import classNames from 'classnames';
+import cx from 'classnames';
 
 import { UniversalYAxisUnitMappings } from './constants';
 import { UniversalYAxisUnit, YAxisUnitSelectorProps } from './types';
@@ -72,9 +72,7 @@ function YAxisUnitSelector({
 	}, [categoriesOverride, source]);
 
 	return (
-		<div
-			className={classNames('y-axis-unit-selector-component', containerClassName)}
-		>
+		<div className={cx('y-axis-unit-selector-component', containerClassName)}>
 			<Select
 				showSearch
 				value={universalUnit}
@@ -84,12 +82,17 @@ function YAxisUnitSelector({
 				loading={loading}
 				suffixIcon={
 					incompatibleUnitMessage ? (
-						<Tooltip title={incompatibleUnitMessage}>
-							<SolidAlertTriangle role="img" aria-label="warning" size="md" />
+						<Tooltip
+							title={incompatibleUnitMessage}
+							overlayClassName="y-axis-unit-warning-tooltip"
+						>
+							<span className="y-axis-unit-warning" role="img" aria-label="warning">
+								<SolidAlertTriangle size="md" />
+							</span>
 						</Tooltip>
 					) : undefined
 				}
-				className={classNames({
+				className={cx({
 					'warning-state': incompatibleUnitMessage,
 				})}
 				data-testid={dataTestId}

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

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { YAxisCategoryNames } from '../constants';
 import { UniversalYAxisUnit, YAxisSource } from '../types';
@@ -6,9 +7,13 @@ import YAxisUnitSelector from '../YAxisUnitSelector';
 
 describe('YAxisUnitSelector', () => {
 	const mockOnChange = jest.fn();
+	// antd injects its `pointer-events` styles via cssinjs in jsdom, but the SCSS
+	// overrides aren't loaded — skip the pointer-events check so hovers/clicks register.
+	let user: ReturnType<typeof userEvent.setup>;
 
 	beforeEach(() => {
 		mockOnChange.mockClear();
+		user = userEvent.setup({ pointerEventsCheck: 0 });
 	});
 
 	it('renders with default placeholder', () => {
@@ -34,7 +39,7 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.queryByText('Custom placeholder')).toBeInTheDocument();
 	});
 
-	it('calls onChange when a value is selected', () => {
+	it('calls onChange when a value is selected', async () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -44,9 +49,8 @@ describe('YAxisUnitSelector', () => {
 		);
 		const select = screen.getByRole('combobox');
 
-		fireEvent.mouseDown(select);
-		const option = screen.getByText('Bytes (B)');
-		fireEvent.click(option);
+		await user.click(select);
+		await user.click(screen.getByText('Bytes (B)'));
 
 		expect(mockOnChange).toHaveBeenCalledWith('By', {
 			children: 'Bytes (B)',
@@ -55,7 +59,7 @@ describe('YAxisUnitSelector', () => {
 		});
 	});
 
-	it('filters options based on search input', () => {
+	it('filters options based on search input', async () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -65,14 +69,13 @@ describe('YAxisUnitSelector', () => {
 		);
 		const select = screen.getByRole('combobox');
 
-		fireEvent.mouseDown(select);
-		const input = screen.getByRole('combobox');
-		fireEvent.change(input, { target: { value: 'bytes/sec' } });
+		await user.click(select);
+		await user.type(select, 'bytes/sec');
 
 		expect(screen.getByText('Bytes/sec')).toBeInTheDocument();
 	});
 
-	it('shows all categories and their units', () => {
+	it('shows all categories and their units', async () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -80,9 +83,8 @@ describe('YAxisUnitSelector', () => {
 				source={YAxisSource.ALERTS}
 			/>,
 		);
-		const select = screen.getByRole('combobox');
 
-		fireEvent.mouseDown(select);
+		await user.click(screen.getByRole('combobox'));
 
 		// Check for category headers
 		expect(screen.getByText('Data')).toBeInTheDocument();
@@ -93,7 +95,7 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.getByText('Seconds (s)')).toBeInTheDocument();
 	});
 
-	it('shows warning message when incompatible unit is selected', () => {
+	it('shows warning message when incompatible unit is selected', async () => {
 		render(
 			<YAxisUnitSelector
 				source={YAxisSource.ALERTS}
@@ -104,12 +106,12 @@ describe('YAxisUnitSelector', () => {
 		);
 		const warningIcon = screen.getByLabelText('warning');
 		expect(warningIcon).toBeInTheDocument();
-		fireEvent.mouseOver(warningIcon);
-		return screen
-			.findByText(
+		await user.hover(warningIcon);
+		await expect(
+			screen.findByText(
 				'Unit mismatch. The metric was sent with unit Seconds (s), but Bytes (B) is selected.',
-			)
-			.then((el) => expect(el).toBeInTheDocument());
+			),
+		).resolves.toBeInTheDocument();
 	});
 
 	it('does not show warning message when compatible unit is selected', () => {
@@ -125,7 +127,7 @@ describe('YAxisUnitSelector', () => {
 		expect(warningIcon).not.toBeInTheDocument();
 	});
 
-	it('uses categories override to render custom units', () => {
+	it('uses categories override to render custom units', async () => {
 		const customCategories = [
 			{
 				name: YAxisCategoryNames.Data,
@@ -147,9 +149,7 @@ describe('YAxisUnitSelector', () => {
 			/>,
 		);
 
-		const select = screen.getByRole('combobox');
-
-		fireEvent.mouseDown(select);
+		await user.click(screen.getByRole('combobox'));
 
 		expect(screen.getByText('Custom Bytes (B)')).toBeInTheDocument();
 		expect(screen.queryByText('Bytes (B)')).not.toBeInTheDocument();

frontend/src/components/YAxisUnitSelector/styles.scss

@@ -4,6 +4,13 @@
 	}
 }
 
+// Re-enable hover on the warning icon: its `.ant-select-arrow` parent sets
+// `pointer-events: none`, which would otherwise suppress the tooltip.
+.y-axis-unit-warning {
+	display: inline-flex;
+	pointer-events: auto;
+}
+
 .warning-state {
 	.ant-select-selector {
 		border-color: var(--bg-amber-400) !important;
@@ -17,3 +24,7 @@
 		right: 28px;
 	}
 }
+
+.y-axis-unit-warning-tooltip {
+	max-width: 240px;
+}

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -22,7 +22,6 @@ import {
 } from 'container/AIAssistant/store/useAIAssistantStore';
 import { useThemeMode } from 'hooks/useDarkMode';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { IS_DEV } from 'lib/env';
 import history from 'lib/history';
 import { ROLES as UserRole } from 'types/roles';
 
@@ -31,33 +30,6 @@ import { useCmdK } from '../../providers/cmdKProvider';
 
 import './cmdKPalette.scss';
 
-const AuthZDevModal = IS_DEV
-	? React.lazy(() =>
-			import('lib/authz/devtools/AuthZDevModal/AuthZDevModal').then((m) => ({
-				default: m.AuthZDevModal,
-			})),
-		)
-	: null;
-
-const AuthZDevFloatingIndicator = IS_DEV
-	? React.lazy(() =>
-			import('lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator').then(
-				(m) => ({
-					default: m.AuthZDevFloatingIndicator,
-				}),
-			),
-		)
-	: null;
-
-const openAuthZDevModal = IS_DEV
-	? (): void => {
-			void import('lib/authz/devtools/useAuthZDevStore').then((m) => {
-				m.openAuthZDevModal();
-				return m;
-			});
-		}
-	: undefined;
-
 type CmdAction = {
 	id: string;
 	name: string;
@@ -138,7 +110,6 @@ export function CmdKPalette({
 		aiAssistant: isAIAssistantEnabled
 			? { open: handleOpenAIAssistant }
 			: undefined,
-		authzDevTools: openAuthZDevModal ? { open: openAuthZDevModal } : undefined,
 	});
 
 	// RBAC filter: show action if no roles set OR current user role is included
@@ -175,57 +146,37 @@ export function CmdKPalette({
 	};
 
 	return (
-		<>
-			<CommandDialog
-				open={open}
-				onOpenChange={setOpen}
-				position="top"
-				offset={110}
-			>
-				<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
-				<CommandList className="cmdk-list-scroll">
-					<CommandEmpty>No results</CommandEmpty>
-					{grouped.map(([section, items]) => (
-						<CommandGroup
-							key={section}
-							heading={section}
-							className="cmdk-section-heading"
-						>
-							{items.map((it) => (
-								<CommandItem
-									key={it.id}
-									onSelect={(): void => handleInvoke(it)}
-									value={it.name}
-									className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
+		<CommandDialog open={open} onOpenChange={setOpen} position="top" offset={110}>
+			<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
+			<CommandList className="cmdk-list-scroll">
+				<CommandEmpty>No results</CommandEmpty>
+				{grouped.map(([section, items]) => (
+					<CommandGroup
+						key={section}
+						heading={section}
+						className="cmdk-section-heading"
+					>
+						{items.map((it) => (
+							<CommandItem
+								key={it.id}
+								onSelect={(): void => handleInvoke(it)}
+								value={it.name}
+								className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
+							>
+								<span
+									className={cx('cmd-item-icon', it.id === 'ai-assistant' && 'noz-icon')}
 								>
-									<span
-										className={cx(
-											'cmd-item-icon',
-											it.id === 'ai-assistant' && 'noz-icon',
-										)}
-									>
-										{it.icon}
-									</span>
-									{it.name}
-									{it.shortcut && it.shortcut.length > 0 && (
-										<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
-									)}
-								</CommandItem>
-							))}
-						</CommandGroup>
-					))}
-				</CommandList>
-			</CommandDialog>
-			{IS_DEV && AuthZDevModal && (
-				<React.Suspense fallback={null}>
-					<AuthZDevModal />
-				</React.Suspense>
-			)}
-			{IS_DEV && AuthZDevFloatingIndicator && (
-				<React.Suspense fallback={null}>
-					<AuthZDevFloatingIndicator />
-				</React.Suspense>
-			)}
-		</>
+									{it.icon}
+								</span>
+								{it.name}
+								{it.shortcut && it.shortcut.length > 0 && (
+									<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
+								)}
+							</CommandItem>
+						))}
+					</CommandGroup>
+				))}
+			</CommandList>
+		</CommandDialog>
 	);
 }

frontend/src/components/createGuardedRoute/createGuardedRoute.authz.test.tsx

@@ -0,0 +1,437 @@
+import { ReactElement } from 'react';
+import type { RouteComponentProps } from 'react-router-dom';
+import type {
+	AuthtypesGettableTransactionDTO,
+	AuthtypesTransactionDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, waitFor } from 'tests/test-utils';
+import { AUTHZ_CHECK_URL, authzMockResponse } from 'tests/authz-test-utils';
+
+import { createGuardedRoute } from './createGuardedRoute';
+
+describe('createGuardedRoute', () => {
+	const TestComponent = ({ testProp }: { testProp: string }): ReactElement => (
+		<div>Test Component: {testProp}</div>
+	);
+
+	it('should render component when permission is granted', 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, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should substitute route parameters in object string', 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, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'role:{id}',
+		);
+
+		const mockMatch = {
+			params: { id: '123' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/123',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should handle multiple route parameters', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = (await req.json()) as AuthtypesTransactionDTO[];
+				const txn = payload[0];
+				const responseData: AuthtypesGettableTransactionDTO[] = [
+					{
+						relation: txn.relation,
+						object: {
+							resource: {
+								kind: txn.object.resource.kind,
+								type: txn.object.resource.type,
+							},
+							selector: '123:456',
+						},
+						authorized: true,
+					},
+				];
+				return res(
+					ctx.status(200),
+					ctx.json({ data: responseData, status: 'success' }),
+				);
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'update',
+			'role:{id}:{version}',
+		);
+
+		const mockMatch = {
+			params: { id: '123', version: '456' },
+			isExact: true,
+			path: '/dashboard/:id/:version',
+			url: '/dashboard/123/456',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should keep placeholder when route parameter is missing', 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, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'role:{id}',
+		);
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should render loading fallback when loading', () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
+				return res(
+					ctx.delay('infinite'),
+					ctx.status(200),
+					ctx.json({ data: [], status: 'success' }),
+				);
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		expect(screen.getByText('SigNoz')).toBeInTheDocument();
+		expect(
+			screen.queryByText('Test Component: test-value'),
+		).not.toBeInTheDocument();
+	});
+
+	it('should render the component when API error occurs (fail open)', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should render no permissions fallback when 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, [false])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'update',
+			'role:{id}',
+		);
+
+		const mockMatch = {
+			params: { id: '123' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/123',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			const heading = document.querySelector('h3');
+			expect(heading).toBeInTheDocument();
+			expect(heading?.textContent).toMatch(/not authorized/i);
+		});
+
+		expect(screen.getByText(/update:role:123/)).toBeInTheDocument();
+		expect(
+			screen.queryByText('Test Component: test-value'),
+		).not.toBeInTheDocument();
+	});
+
+	it('should pass all props to wrapped component', 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, [true])));
+			}),
+		);
+
+		const ComponentWithMultipleProps = ({
+			prop1,
+			prop2,
+			prop3,
+		}: {
+			prop1: string;
+			prop2: number;
+			prop3: boolean;
+		}): ReactElement => (
+			<div>
+				{prop1} - {prop2} - {prop3.toString()}
+			</div>
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			ComponentWithMultipleProps,
+			'read',
+			'role:*',
+		);
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			prop1: 'value1',
+			prop2: 42,
+			prop3: true,
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('value1 - 42 - true')).toBeInTheDocument();
+		});
+	});
+
+	it('should memoize resolved object based on route params', async () => {
+		let requestCount = 0;
+		const requestedObjects: string[] = [];
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				requestCount++;
+				const payload = (await req.json()) as AuthtypesTransactionDTO[];
+				const obj = payload[0]?.object;
+				const kind = obj?.resource?.kind;
+				const selector = obj?.selector ?? '*';
+				const objectStr = `${kind}:${selector}`;
+				requestedObjects.push(objectStr ?? '');
+
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'role:{id}',
+		);
+
+		const mockMatch1 = {
+			params: { id: '123' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/123',
+		};
+
+		const props1 = {
+			testProp: 'test-value-1',
+			match: mockMatch1,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		const { unmount } = render(<GuardedComponent {...props1} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value-1')).toBeInTheDocument();
+		});
+
+		expect(requestCount).toBe(1);
+		expect(requestedObjects).toContain('role:123');
+
+		unmount();
+
+		const mockMatch2 = {
+			params: { id: '456' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/456',
+		};
+
+		const props2 = {
+			testProp: 'test-value-2',
+			match: mockMatch2,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props2} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value-2')).toBeInTheDocument();
+		});
+
+		expect(requestCount).toBe(2);
+		expect(requestedObjects).toContain('role:456');
+	});
+
+	it('should handle different relation types', 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, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'delete',
+			'role:{id}',
+		);
+
+		const mockMatch = {
+			params: { id: '789' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/789',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/createGuardedRoute/createGuardedRoute.styles.scss

@@ -0,0 +1,41 @@
+.guard-authz-error-no-authz {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: 100%;
+	height: 100%;
+
+	padding: 24px;
+
+	.guard-authz-error-no-authz-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		gap: 8px;
+		max-width: 500px;
+	}
+
+	img {
+		width: 32px;
+		height: 32px;
+	}
+
+	h3 {
+		font-size: 18px;
+		color: var(--l1-foreground);
+		line-height: 18px;
+	}
+
+	p {
+		font-size: 14px;
+		color: var(--l3-foreground);
+		line-height: 18px;
+
+		span {
+			background-color: var(--l3-background);
+			white-space: nowrap;
+			padding: 0 2px;
+		}
+	}
+}

frontend/src/components/createGuardedRoute/createGuardedRoute.tsx

@@ -0,0 +1,67 @@
+import { ComponentType, ReactElement, useMemo } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import {
+	AuthZObject,
+	AuthZRelation,
+	BrandedPermission,
+} from 'hooks/useAuthZ/types';
+import { formatPermission } from 'hooks/useAuthZ/utils';
+import { useAppContext } from 'providers/App/App';
+
+import noDataUrl from '@/assets/Icons/no-data.svg';
+
+import AppLoading from '../AppLoading/AppLoading';
+import { GuardAuthZ } from '../GuardAuthZ/GuardAuthZ';
+
+import './createGuardedRoute.styles.scss';
+
+function OnNoPermissionsFallback(response: {
+	requiredPermissionName: BrandedPermission;
+}): ReactElement {
+	const { user } = useAppContext();
+
+	return (
+		<div className="guard-authz-error-no-authz">
+			<div className="guard-authz-error-no-authz-content">
+				<img src={noDataUrl} alt="No permission" />
+				<h3>Uh-oh! You are not authorized</h3>
+				<p>
+					<code>user/{user.id}</code> is not authorized to perform{' '}
+					<code>{formatPermission(response.requiredPermissionName)}</code>
+				</p>
+			</div>
+		</div>
+	);
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function createGuardedRoute<P extends object, R extends AuthZRelation>(
+	Component: ComponentType<P>,
+	relation: R,
+	object: AuthZObject<R>,
+): ComponentType<P & RouteComponentProps<Record<string, string>>> {
+	return function GuardedRouteComponent(
+		props: P & RouteComponentProps<Record<string, string>>,
+	): ReactElement {
+		const resolvedObject = useMemo(() => {
+			const paramPattern = /\{([^}]+)\}/g;
+			return object.replace(paramPattern, (match, paramName) => {
+				const paramValue = props.match?.params?.[paramName];
+				return paramValue !== undefined ? paramValue : match;
+			}) as AuthZObject<R>;
+		}, [props.match?.params]);
+
+		return (
+			<GuardAuthZ
+				relation={relation}
+				object={resolvedObject}
+				fallbackOnLoading={<AppLoading />}
+				fallbackOnNoPermissions={(response): ReactElement => (
+					<OnNoPermissionsFallback {...response} />
+				)}
+			>
+				<Component {...props} />
+			</GuardAuthZ>
+		);
+	};
+}

frontend/src/constants/shortcutActions.tsx

@@ -43,17 +43,10 @@ type ActionDeps = {
 	aiAssistant?: {
 		open: () => void;
 	};
-	/**
-	 * Provided only in development mode. Opens the AuthZ DevTools modal
-	 * for testing permission overrides.
-	 */
-	authzDevTools?: {
-		open: () => void;
-	};
 };
 
 export function createShortcutActions(deps: ActionDeps): CmdAction[] {
-	const { navigate, handleThemeChange, aiAssistant, authzDevTools } = deps;
+	const { navigate, handleThemeChange, aiAssistant } = deps;
 
 	const actions: CmdAction[] = [
 		{
@@ -309,17 +302,5 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 		});
 	}
 
-	if (authzDevTools) {
-		actions.push({
-			id: 'authz-devtools',
-			name: 'AuthZ DevTools',
-			keywords: 'authz permissions rbac debug devtools override testing',
-			section: 'Dev',
-			icon: <Settings size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
-			perform: authzDevTools.open,
-		});
-	}
-
 	return actions;
 }

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

@@ -16,7 +16,6 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacing-2);
-		padding-bottom: var(--spacing-8);
 	}
 
 	&__title {

frontend/src/container/PublicDashboardContainer/Panel.tsx

@@ -79,13 +79,11 @@ function Panel({
 		},
 		ENTITY_VERSION_V5,
 		{
-			queryKey: [
-				widget?.query,
-				widget?.panelTypes,
-				requestData,
-				startTime,
-				endTime,
-			],
+			// Public data is fetched by index and the payload redacts each widget's
+			// filters, so query bodies are identical across panels. Key on panel
+			// identity + time — the only inputs that determine the response — so
+			// panels don't collapse onto one cache entry.
+			queryKey: [widget?.id, index, startTime, endTime],
 			retry(failureCount, error): boolean {
 				if (
 					String(error).includes('status: error') &&

frontend/src/container/PublicDashboardContainer/__tests__/Panel.test.tsx

@@ -0,0 +1,79 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { render } from 'tests/test-utils';
+import { Widgets } from 'types/api/dashboard/getAll';
+
+import Panel from '../Panel';
+
+const useGetQueryRangeMock = jest.fn();
+
+jest.mock('hooks/queryBuilder/useGetQueryRange', () => ({
+	useGetQueryRange: (...args: unknown[]): unknown => {
+		useGetQueryRangeMock(...args);
+		return {
+			data: undefined,
+			isFetching: false,
+			isLoading: false,
+			isSuccess: true,
+			isError: false,
+		};
+	},
+}));
+
+jest.mock('container/GridCardLayout/GridCard/WidgetGraphComponent', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="widget-graph" />,
+}));
+
+const buildWidget = (id: string): Widgets =>
+	({
+		id,
+		panelTypes: PANEL_TYPES.LIST,
+		query: {
+			builder: {
+				queryData: [{ dataSource: 'logs', limit: 100, orderBy: [] }],
+			},
+		},
+		timePreferance: 'GLOBAL_TIME',
+	}) as unknown as Widgets;
+
+describe('Public dashboard Panel', () => {
+	beforeEach(() => {
+		useGetQueryRangeMock.mockClear();
+	});
+
+	it('keys each panel by widget id + index so identical queries do not collide (bug 5503)', () => {
+		render(
+			<>
+				<Panel
+					widget={buildWidget('widget-a')}
+					index={2}
+					dashboardId="dash-1"
+					startTime={100}
+					endTime={200}
+				/>
+				<Panel
+					widget={buildWidget('widget-b')}
+					index={62}
+					dashboardId="dash-1"
+					startTime={100}
+					endTime={200}
+				/>
+			</>,
+		);
+
+		const [callA, callB] = useGetQueryRangeMock.mock.calls;
+		const queryKeyA = callA[2].queryKey;
+		const metaA = callA[4];
+		const queryKeyB = callB[2].queryKey;
+		const metaB = callB[4];
+
+		// Key is panel identity + time only — the redacted query body is not part
+		// of it, so identical query bodies can't collapse two panels onto one key.
+		expect(queryKeyA).toStrictEqual(['widget-a', 2, 100, 200]);
+		expect(queryKeyB).toStrictEqual(['widget-b', 62, 100, 200]);
+		expect(queryKeyA).not.toStrictEqual(queryKeyB);
+
+		expect(metaA.widgetIndex).toBe(2);
+		expect(metaB.widgetIndex).toBe(62);
+	});
+});

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 '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,21 @@
 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 'hooks/useAuthZ/useAuthZ';
 import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
-import {
-	invalidLicense,
-	setupAuthzAdmin,
-} from 'lib/authz/utils/authz-test-utils';
+import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
+jest.mock('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 +68,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 +77,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 +89,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 +115,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 +124,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 'hooks/useAuthZ/useAuthZ';
 import { render, screen } from 'tests/test-utils';
-import {
-	setupAuthzAdmin,
-	setupAuthzDenyAll,
-} from 'lib/authz/utils/authz-test-utils';
+import { mockUseAuthZDenyAll } from 'tests/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
+jest.mock('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,17 @@ 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,
+				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 'hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
+jest.mock('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 'hooks/useAuthZ/useAuthZ';
 import { render, screen } from 'tests/test-utils';
 import {
-	setupAuthzAdmin,
-	setupAuthzDenyAll,
-	setupAuthzDeny,
-} from 'lib/authz/utils/authz-test-utils';
-import { buildRoleUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+	mockUseAuthZDenyAll,
+	mockUseAuthZGrantByPrefix,
+} from 'tests/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
+jest.mock('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,34 @@ 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,
+				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 'hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
+jest.mock('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();
 });
 

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 'hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 
+jest.mock('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 'hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
+jest.mock('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/components/ActionToggle.tsx

@@ -9,7 +9,7 @@ import { getResourcePanel } from '../../permissions.config';
 import ItemInputSelector from './ItemInputSelector';
 
 import styles from './ActionToggle.module.scss';
-import { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
+import { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
 import { getActionLabel } from 'container/RolesSettings/ViewRolePage/components/permissionDisplay.utils';
 
 const SCOPE_LABELS: Record<PermissionScope, string> = {

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

@@ -5,7 +5,7 @@ import { ConfirmDialog } from '@signozhq/ui/dialog';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
-import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
 
 import { PermissionScope, ResourcePermissions } from '../../types';
 import type { EditorMode, JsonEditorRef } from './JsonEditor.types';

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

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { ChevronDown, ChevronRight } from '@signozhq/icons';
-import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
 
 import { Typography } from '@signozhq/ui/typography';
 

frontend/src/container/RolesSettings/CreateEditRolePage/components/jsonSchema.config.ts

@@ -1,5 +1,5 @@
 import type { Monaco } from '@monaco-editor/react';
-import permissionsType from 'lib/authz/hooks/useAuthZ/permissions.type';
+import permissionsType from 'hooks/useAuthZ/permissions.type';
 import transactionGroupSchema from 'schemas/generated/transactionGroups.schema.json';
 
 export const TRANSACTION_GROUP_SCHEMA = transactionGroupSchema;

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/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 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
+import { RoleListPermission } from 'hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from '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 AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import ROUTES from 'constants/routes';
-import {
-	RoleCreatePermission,
-	RoleListPermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import { RoleCreatePermission } from '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 '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,7 +72,7 @@ function ViewRolePageContent(): JSX.Element {
 	} = useDeleteRoleModal({
 		roleId,
 		isManaged: isManaged ?? false,
-		hasDeletePermission: true,
+		hasDeletePermission,
 		onDeleteSuccess: handleCancel,
 	});
 
@@ -139,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">
@@ -176,7 +187,7 @@ function ViewRolePageContent(): JSX.Element {
 		);
 	}
 
-	if (isLoading || isFeatureGateLoading) {
+	if (isAuthZLoading || isLoading || isFeatureGateLoading) {
 		return (
 			<div className={styles.viewRolePage}>
 				<Skeleton active paragraph={{ rows: 8 }} />
@@ -233,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>
 
@@ -333,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,18 +1,16 @@
 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 '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,
-} from 'lib/authz/utils/authz-test-utils';
+	mockUseAuthZDenyAll,
+	mockUseAuthZGrantAll,
+	mockUseAuthZGrantByPrefix,
+} from 'tests/authz-test-utils';
 import { render, screen, waitFor } from 'tests/test-utils';
 
 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
@@ -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 waitFor(() => {
-				expect(screen.getByTestId('save-button')).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,10 +198,6 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			await waitFor(() => {
-				expect(screen.getByTestId('save-button')).toBeInTheDocument();
-			});
-
 			const updateButton = screen.getByTestId('save-button');
 			await user.hover(updateButton);
 
@@ -202,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,
@@ -229,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,
@@ -265,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,
@@ -297,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,
@@ -329,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,
@@ -369,10 +391,6 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);
 
-			await waitFor(() => {
-				expect(screen.getByTestId('delete-button')).toBeInTheDocument();
-			});
-
 			const deleteButton = screen.getByTestId('delete-button');
 			await user.hover(deleteButton);
 
@@ -386,9 +404,13 @@ 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,
+				refetchPermissions: jest.fn(),
+			});
 
 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: undefined,

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

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from 'tests/test-utils';
+import { render, screen } from 'tests/test-utils';
 
 import ViewRolePage from '../ViewRolePage';
 
@@ -38,34 +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 waitFor(() => {
-			expect(screen.getByTestId('save-button')).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 waitFor(() => {
-			expect(screen.getByTestId('cancel-button')).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 waitFor(() => {
-			expect(screen.getByTestId('delete-button')).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,8 +1,8 @@
 import * as roleApi from 'api/generated/services/role';
+import * as useAuthZModule from '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 'tests/authz-test-utils';
+import { render, screen } from 'tests/test-utils';
 
 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
 import ViewRolePage from '../ViewRolePage';
@@ -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 waitFor(() => {
-			expect(screen.getByTestId('view-role-page')).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 waitFor(() => {
-			expect(screen.getByTestId('view-role-page')).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 '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 'tests/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 waitFor(() => {
-			expect(screen.getByTestId('cancel-button')).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,11 +1,8 @@
 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 {
-	invalidLicense,
-	setupAuthzAdmin,
-} from 'lib/authz/utils/authz-test-utils';
+import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
+import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
 
 import ViewRolePage from '../ViewRolePage';
 
@@ -17,7 +14,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 +28,6 @@ describe('ViewRolePage - Feature Gate', () => {
 
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});
 
 	describe('feature disabled', () => {
@@ -45,9 +43,7 @@ describe('ViewRolePage - Feature Gate', () => {
 				},
 			});
 
-			await waitFor(() => {
-				expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
-			});
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
@@ -59,34 +55,28 @@ describe('ViewRolePage - Feature Gate', () => {
 				appContextOverrides: { activeLicense: invalidLicense },
 			});
 
-			await waitFor(() => {
-				expect(screen.getByTestId('feature-gate-error-banner')).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 waitFor(() => {
-				expect(screen.getByTestId('cancel-button')).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 'hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'tests/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 waitFor(() => {
-			expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
-		});
+		expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
 	});
 });

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

@@ -1,9 +1,9 @@
 import * as roleApi from 'api/generated/services/role';
+import * as useAuthZModule from '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 'tests/authz-test-utils';
 import userEvent from '@testing-library/user-event';
-import { render, screen, waitFor, within } from 'tests/test-utils';
+import { render, screen, within } from 'tests/test-utils';
 
 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
 import ViewRolePage from '../ViewRolePage';
@@ -17,15 +17,8 @@ import {
 	mockPermissionsData,
 } from './testUtils';
 
-async function waitForPageReady(): Promise<void> {
-	await waitFor(() => {
-		expect(screen.getByTestId('view-role-page')).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 '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 'tests/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,20 @@ import {
 	userEvent,
 } from 'tests/test-utils';
 import { FeatureKeys } from 'constants/features';
-import {
-	invalidLicense,
-	setupAuthzAdmin,
-	setupAuthzDeny,
-} from 'lib/authz/utils/authz-test-utils';
-import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
 
 import RolesSettings from '../RolesSettings';
 
+jest.mock('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 +32,7 @@ describe('RolesSettings', () => {
 	});
 
 	afterEach(() => {
+		jest.clearAllMocks();
 		server.resetHandlers();
 	});
 
@@ -270,18 +270,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/__tests__/useRolePermissions.test.ts

@@ -4,7 +4,7 @@ import {
 	CoretypesKindDTO,
 	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
 
 import {
 	ActionConfig,

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

@@ -4,12 +4,9 @@ import {
 	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';
+} from 'hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { ParsedPermissionObject, parsePermission } from 'hooks/useAuthZ/utils';
 
 interface UseRoleAuthZResult {
 	readRolePermission: ParsedPermissionObject;

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

@@ -18,7 +18,7 @@ import {
 	useGetRole,
 	useUpdateRole,
 } from 'api/generated/services/role';
-import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
 
 import {
 	getResourcePanel,

frontend/src/container/RolesSettings/permissions.config.ts

@@ -1,12 +1,12 @@
 import { Bot, Key, Shield } from '@signozhq/icons';
 
-import permissionsType from 'lib/authz/hooks/useAuthZ/permissions.type';
+import permissionsType from 'hooks/useAuthZ/permissions.type';
 import {
 	AuthZResource,
 	AuthZVerb,
 	OBJECT_SCOPED_VERBS,
 	ObjectScopedVerb,
-} from 'lib/authz/hooks/useAuthZ/types';
+} from 'hooks/useAuthZ/types';
 import { CoretypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 
 /** Shared shape of the icon components exported by `@signozhq/icons`. */
@@ -84,7 +84,7 @@ export function getResourceVerbs(
 	}
 
 	// Role resource cannot have assignee verb
-	// TODO(H4ad): Remove this once we get rid of frontend/lib/authz/hooks/useAuthZ/legacy.ts
+	// TODO(H4ad): Remove this once we get rid of frontend/src/hooks/useAuthZ/legacy.ts
 	if (resource === 'role') {
 		return match.allowedVerbs.filter((verb) => verb !== 'assignee');
 	}

frontend/src/container/RolesSettings/types.ts

@@ -1,4 +1,4 @@
-import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
 import { CoretypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 
 export enum PermissionScope {

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

@@ -3,10 +3,7 @@ import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, waitFor } from 'tests/test-utils';
-import {
-	AUTHZ_CHECK_URL,
-	authzMockResponse,
-} from 'lib/authz/utils/authz-test-utils';
+import { AUTHZ_CHECK_URL, authzMockResponse } from 'tests/authz-test-utils';
 import ServiceAccountsSettings from './ServiceAccountsSettings';
 
 const SA_LIST_URL = 'http://localhost/api/v1/service_accounts';
@@ -28,7 +25,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 +44,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 +75,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 AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import Spinner from 'components/Spinner';
 import ServiceAccountDrawer from 'components/ServiceAccountDrawer/ServiceAccountDrawer';
 import ServiceAccountsTable, {
 	PAGE_SIZE,
@@ -19,7 +16,8 @@ import ServiceAccountsTable, {
 import {
 	SACreatePermission,
 	SAListPermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -40,10 +38,6 @@ import {
 import './ServiceAccountsSettings.styles.scss';
 
 function ServiceAccountsSettings(): JSX.Element {
-	const queryClient = useQueryClient();
-	const { allowed: canListServiceAccounts, isLoading: isAuthZLoading } =
-		useAuthZ([SAListPermission]);
-	const [, setSelectedAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [currentPage, setPage] = useQueryState(
 		SA_QUERY_PARAMS.PAGE,
 		parseAsInteger.withDefault(1),
@@ -58,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[] =>
@@ -199,9 +199,9 @@ function ServiceAccountsSettings(): JSX.Element {
 			if (options?.closeDrawer) {
 				void setSelectedAccountId(null);
 			}
-			void invalidateListServiceAccounts(queryClient);
+			void handleCreateSuccess();
 		},
-		[queryClient, setSelectedAccountId],
+		[handleCreateSuccess, setSelectedAccountId],
 	);
 
 	return (
@@ -223,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"
@@ -259,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(
@@ -292,8 +289,8 @@ function ServiceAccountsSettings(): JSX.Element {
 							onRowClick={handleRowClick}
 						/>
 					)}
-				</AuthZGuardContent>
-			</div>
+				</div>
+			)}
 
 			<CreateServiceAccountModal />
 

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

@@ -1,9 +1,10 @@
+import type { ReactNode } from 'react';
 import userEvent from '@testing-library/user-event';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { setupAuthzAdmin } from 'tests/authz-test-utils';
 
 import ServiceAccountsSettings from '../ServiceAccountsSettings';
 
@@ -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 }),

frontend/src/hooks/useAuthZ/types.ts

@@ -89,13 +89,5 @@ export type UseAuthZResult = {
 	isFetching: boolean;
 	error: Error | null;
 	permissions: AuthZCheckResponse | null;
-	/**
-	 * True if every check is granted. False while loading or on error.
-	 */
-	allowed: boolean;
-	/**
-	 * Checks that resolved as not granted (empty while loading/error).
-	 */
-	deniedPermissions: BrandedPermission[];
 	refetchPermissions: () => void;
 };

frontend/src/hooks/useAuthZ/useAuthZ.authz.test.tsx

@@ -1,13 +1,9 @@
 import { ReactElement } from 'react';
-import { renderHook, waitFor, act } from '@testing-library/react';
-import { useQueryClient } from 'react-query';
+import { renderHook, waitFor } from '@testing-library/react';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { AllTheProviders } from 'tests/test-utils';
-import {
-	AUTHZ_CHECK_URL,
-	authzMockResponse,
-} from 'lib/authz/utils/authz-test-utils';
+import { AUTHZ_CHECK_URL, authzMockResponse } from 'tests/authz-test-utils';
 
 import { BrandedPermission } from './types';
 import { useAuthZ } from './useAuthZ';
@@ -47,16 +43,12 @@ describe('useAuthZ', () => {
 
 		expect(result.current.isLoading).toBe(true);
 		expect(result.current.permissions).toBeNull();
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.deniedPermissions).toStrictEqual([]);
 
 		await waitFor(() => {
 			expect(result.current.isLoading).toBe(false);
 		});
 
 		expect(result.current.permissions).toStrictEqual(expectedResponse);
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.deniedPermissions).toStrictEqual([permission2]);
 	});
 
 	it('should return error and null permissions when API errors', async () => {
@@ -78,89 +70,6 @@ describe('useAuthZ', () => {
 
 		expect(result.current.error).not.toBeNull();
 		expect(result.current.permissions).toBeNull();
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.deniedPermissions).toStrictEqual([]);
-	});
-
-	it('should set allowed to true when all permissions are granted', async () => {
-		const permission1 = buildPermission('read', 'role:*');
-		const permission2 = buildPermission('update', 'role:123');
-
-		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, [true, true])),
-				);
-			}),
-		);
-
-		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
-			wrapper,
-		});
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(result.current.allowed).toBe(true);
-		expect(result.current.deniedPermissions).toStrictEqual([]);
-	});
-
-	it('should collect all denied permissions when multiple are denied', async () => {
-		const permission1 = buildPermission('read', 'role:*');
-		const permission2 = buildPermission('update', 'role:123');
-
-		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, [false, false])),
-				);
-			}),
-		);
-
-		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
-			wrapper,
-		});
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.deniedPermissions).toStrictEqual([
-			permission1,
-			permission2,
-		]);
-	});
-
-	it('should not fetch when enabled is false', async () => {
-		let requestCount = 0;
-		const permission = buildPermission('read', 'role:*');
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				requestCount += 1;
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		const { result } = renderHook(
-			() => useAuthZ([permission], { enabled: false }),
-			{ wrapper },
-		);
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(requestCount).toBe(0);
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.permissions).toStrictEqual({});
 	});
 
 	it('should refetch when permissions array changes', async () => {
@@ -562,120 +471,3 @@ describe('useAuthZ', () => {
 		expect(result2.current.permissions).not.toHaveProperty(permission1);
 	});
 });
-
-describe('useAuthZ cache invalidation', () => {
-	it('should re-render with updated data when query is invalidated', async () => {
-		const permission = buildPermission('read', 'role:*');
-
-		let requestCount = 0;
-		let shouldGrant = true;
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				requestCount++;
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [shouldGrant])),
-				);
-			}),
-		);
-
-		const { result } = renderHook(
-			() => {
-				const queryClient = useQueryClient();
-				const authz = useAuthZ([permission]);
-				return { authz, queryClient };
-			},
-			{ wrapper },
-		);
-
-		await waitFor(() => {
-			expect(result.current.authz.isLoading).toBe(false);
-		});
-
-		expect(requestCount).toBe(1);
-		expect(result.current.authz.allowed).toBe(true);
-		expect(result.current.authz.permissions).toStrictEqual({
-			[permission]: { isGranted: true },
-		});
-
-		// Change server response and reset query (forces refetch)
-		shouldGrant = false;
-
-		await act(async () => {
-			await result.current.queryClient.resetQueries(['authz', permission]);
-		});
-
-		await waitFor(() => {
-			expect(result.current.authz.allowed).toBe(false);
-		});
-
-		expect(requestCount).toBe(2);
-		expect(result.current.authz.permissions).toStrictEqual({
-			[permission]: { isGranted: false },
-		});
-	});
-
-	it('should re-render all components using the same permission when invalidated', async () => {
-		const permission = buildPermission('update', 'role:123');
-
-		let requestCount = 0;
-		let shouldGrant = true;
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				requestCount++;
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [shouldGrant])),
-				);
-			}),
-		);
-
-		// Two separate hooks using the same permission
-		const { result: result1 } = renderHook(
-			() => {
-				const queryClient = useQueryClient();
-				const authz = useAuthZ([permission]);
-				return { authz, queryClient };
-			},
-			{ wrapper },
-		);
-
-		const { result: result2 } = renderHook(() => useAuthZ([permission]), {
-			wrapper,
-		});
-
-		await waitFor(() => {
-			expect(result1.current.authz.isLoading).toBe(false);
-			expect(result2.current.isLoading).toBe(false);
-		});
-
-		// Both should show granted, single batched request
-		expect(requestCount).toBe(1);
-		expect(result1.current.authz.allowed).toBe(true);
-		expect(result2.current.allowed).toBe(true);
-
-		// Change server response and reset query (forces refetch)
-		shouldGrant = false;
-
-		await act(async () => {
-			await result1.current.queryClient.resetQueries(['authz', permission]);
-		});
-
-		// Both hooks should update
-		await waitFor(() => {
-			expect(result1.current.authz.allowed).toBe(false);
-			expect(result2.current.allowed).toBe(false);
-		});
-
-		expect(result1.current.authz.permissions).toStrictEqual({
-			[permission]: { isGranted: false },
-		});
-		expect(result2.current.permissions).toStrictEqual({
-			[permission]: { isGranted: false },
-		});
-	});
-});

frontend/src/hooks/useAuthZ/useAuthZ.tsx

@@ -1,15 +1,13 @@
 import { useCallback, useMemo } from 'react';
 import { useQueries } from 'react-query';
-import { isAxiosError } from 'axios';
 import { authzCheck } from 'api/generated/services/authz';
 import type {
 	CoretypesObjectDTO,
 	AuthtypesTransactionDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { IS_DEV } from 'lib/env';
 
 import { AUTHZ_CACHE_TIME, SINGLE_FLIGHT_WAIT_TIME_MS } from './constants';
-import type {
+import {
 	AuthZCheckResponse,
 	BrandedPermission,
 	UseAuthZOptions,
@@ -20,59 +18,6 @@ import {
 	permissionToTransactionDto,
 } from './utils';
 
-let devStoreRef:
-	| typeof import('../../devtools/useAuthZDevStore').useAuthZDevStore
-	| null = null;
-type OverrideState = 'granted' | 'denied' | 'delay' | 'error' | 'reset';
-
-if (IS_DEV) {
-	void import('../../devtools/useAuthZDevStore').then((mod) => {
-		devStoreRef = mod.useAuthZDevStore;
-		return mod;
-	});
-}
-
-const DEV_DELAY_MS = 2000;
-
-function getDevOverride(permission: BrandedPermission): OverrideState | null {
-	if (!IS_DEV || !devStoreRef) {
-		return null;
-	}
-	return devStoreRef.getState().overrides[permission] ?? null;
-}
-
-async function applyDevOverrideToQuery(
-	permission: BrandedPermission,
-	fetchFn: () => Promise<AuthZCheckResponse>,
-): Promise<AuthZCheckResponse> {
-	const override = getDevOverride(permission);
-
-	if (override === 'error') {
-		throw new Error(`[AuthZ DevTools] Simulated error for: ${permission}`);
-	}
-
-	if (override === 'delay') {
-		await new Promise((resolve) => setTimeout(resolve, DEV_DELAY_MS));
-	}
-
-	const response = await fetchFn();
-
-	if (IS_DEV && devStoreRef) {
-		const apiValue = response[permission]?.isGranted ?? false;
-		devStoreRef.getState().registerObserved(permission, apiValue);
-	}
-
-	if (override === 'granted') {
-		return { [permission]: { isGranted: true } };
-	}
-
-	if (override === 'denied') {
-		return { [permission]: { isGranted: false } };
-	}
-
-	return response;
-}
-
 let ctx: Promise<AuthZCheckResponse> | null;
 let pendingPermissions: BrandedPermission[] = [];
 
@@ -82,11 +27,10 @@ function dispatchPermission(
 	pendingPermissions.push(permission);
 
 	if (!ctx) {
-		let promiseResolve: (v: AuthZCheckResponse) => void,
-			promiseReject: (reason?: unknown) => void;
-		ctx = new Promise<AuthZCheckResponse>((resolve, reject) => {
-			promiseResolve = resolve;
-			promiseReject = reject;
+		let resolve: (v: AuthZCheckResponse) => void, reject: (reason?: any) => void;
+		ctx = new Promise<AuthZCheckResponse>((r, re) => {
+			resolve = r;
+			reject = re;
 		});
 
 		setTimeout(() => {
@@ -94,9 +38,7 @@ function dispatchPermission(
 			pendingPermissions = [];
 			ctx = null;
 
-			fetchManyPermissions(copiedPermissions)
-				.then(promiseResolve)
-				.catch(promiseReject);
+			fetchManyPermissions(copiedPermissions).then(resolve).catch(reject);
 		}, SINGLE_FLIGHT_WAIT_TIME_MS);
 	}
 
@@ -143,44 +85,19 @@ export function useAuthZ(
 			return {
 				queryKey: ['authz', permission],
 				cacheTime: AUTHZ_CACHE_TIME,
-				staleTime: AUTHZ_CACHE_TIME,
-				// Keep errored state in cache instead of refetching when new observers subscribe
-				retryOnMount: false,
-				retry: (failureCount: number, error: unknown): boolean => {
-					// Don't retry simulated dev errors - they will always fail
-					if (error instanceof Error && error.message.includes('[AuthZ DevTools]')) {
-						return false;
-					}
-					// Don't retry server errors (5xx) - they won't recover
-					if (
-						isAxiosError(error) &&
-						error.response?.status &&
-						error.response.status >= 500
-					) {
-						return false;
-					}
-					return failureCount < 3;
-				},
 				refetchOnMount: false,
 				refetchIntervalInBackground: false,
 				refetchOnWindowFocus: false,
 				refetchOnReconnect: true,
 				enabled,
 				queryFn: async (): Promise<AuthZCheckResponse> => {
-					const fetchFn = async (): Promise<AuthZCheckResponse> => {
-						const response = await dispatchPermission(permission);
-						return {
-							[permission]: {
-								isGranted: response[permission].isGranted,
-							},
-						};
+					const response = await dispatchPermission(permission);
+
+					return {
+						[permission]: {
+							isGranted: response[permission].isGranted,
+						},
 					};
-
-					if (IS_DEV) {
-						return applyDevOverrideToQuery(permission, fetchFn);
-					}
-
-					return fetchFn();
 				},
 			};
 		}),
@@ -190,7 +107,6 @@ export function useAuthZ(
 		() => queryResults.some((q) => q.isLoading),
 		[queryResults],
 	);
-
 	const isFetching = useMemo(
 		() => queryResults.some((q) => q.isFetching),
 		[queryResults],
@@ -223,31 +139,15 @@ export function useAuthZ(
 
 	const refetchPermissions = useCallback(() => {
 		for (const query of queryResults) {
-			void query.refetch();
+			query.refetch();
 		}
 	}, [queryResults]);
 
-	const allowed = useMemo(() => {
-		if (isLoading || error || !data) {
-			return false;
-		}
-		return permissions.every((check) => data[check]?.isGranted === true);
-	}, [permissions, data, isLoading, error]);
-
-	const deniedPermissions = useMemo(() => {
-		if (!data) {
-			return [];
-		}
-		return permissions.filter((check) => data[check]?.isGranted !== true);
-	}, [permissions, data]);
-
 	return {
 		isLoading,
 		isFetching,
 		error,
 		permissions: data ?? null,
-		allowed,
-		deniedPermissions,
 		refetchPermissions,
 	};
 }

frontend/src/hooks/useAuthZ/utils.ts

@@ -3,7 +3,7 @@ import {
 	CoretypesTypeDTO,
 	AuthtypesRelationDTO,
 	CoretypesKindDTO,
-} from '../../../../api/generated/services/sigNoz.schemas';
+} from '../../api/generated/services/sigNoz.schemas';
 import permissionsType from './permissions.type';
 import {
 	AuthZObject,

frontend/src/lib/authz/README.md

@@ -1,21 +0,0 @@
-# AuthZ
-
-Permission-based authorization system for SigNoz frontend.
-
-## Supported Resources
-
-See [hooks/useAuthZ/permissions.type.ts](./hooks/useAuthZ/permissions.type.ts) for available resources and verbs.
-
-If your page/content represents a resource not listed there, skip authz implementation — the backend doesn't enforce it yet.
-
-## UI Gating
-
-Need to gate UI based on permissions? See [components/README.md](./components/README.md).
-
-Covers: AuthZButton, AuthZTooltip, withAuthZ*, AuthZGuard*, when to use each.
-
-## Testing
-
-Need to test authz behavior? See [utils/README.md](./utils/README.md).
-
-Covers: MSW handlers, mock hooks, test patterns.

frontend/src/lib/authz/components/AuthZButton/AuthZButton.authz.test.tsx

@@ -1,81 +0,0 @@
-import { ReactElement } from 'react';
-import { render, screen } from 'tests/test-utils';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import type { AuthZObject } from 'lib/authz/hooks/useAuthZ/types';
-import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
-
-import AuthZButton from './AuthZButton';
-
-// AuthZButton is a thin composition over AuthZTooltip + Button. The denial
-// tooltip / disabled-on-deny UX is owned and tested by AuthZTooltip; here we
-// assert AuthZButton forwards the right props and renders a Button child.
-jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip');
-const mockTooltip = AuthZTooltip as unknown as jest.Mock;
-
-const createPerm = buildPermission(
-	'create',
-	'serviceaccount:*' as AuthZObject<'create'>,
-);
-
-describe('AuthZButton', () => {
-	beforeEach(() => {
-		mockTooltip.mockImplementation(
-			({ children }: { children: ReactElement }) => children,
-		);
-	});
-
-	afterEach(() => {
-		mockTooltip.mockReset();
-	});
-
-	it('renders a Button child with forwarded props', () => {
-		render(
-			<AuthZButton checks={[createPerm]} testId="create-btn">
-				Create
-			</AuthZButton>,
-		);
-
-		expect(screen.getByTestId('create-btn')).toBeInTheDocument();
-		expect(screen.getByTestId('create-btn').tagName).toBe('BUTTON');
-	});
-
-	it('forwards checks and enables the check by default', () => {
-		render(
-			<AuthZButton checks={[createPerm]} testId="create-btn">
-				Create
-			</AuthZButton>,
-		);
-
-		expect(mockTooltip).toHaveBeenCalledTimes(1);
-		expect(mockTooltip.mock.calls[0][0]).toMatchObject({
-			checks: [createPerm],
-			enabled: true,
-		});
-	});
-
-	it('forwards a custom tooltipMessage', () => {
-		render(
-			<AuthZButton
-				checks={[createPerm]}
-				tooltipMessage="Ask an admin"
-				testId="create-btn"
-			>
-				Create
-			</AuthZButton>,
-		);
-
-		expect(mockTooltip.mock.calls[0][0]).toMatchObject({
-			tooltipMessage: 'Ask an admin',
-		});
-	});
-
-	it('passes authZEnabled through as the tooltip enabled flag', () => {
-		render(
-			<AuthZButton checks={[createPerm]} authZEnabled={false} testId="create-btn">
-				Create
-			</AuthZButton>,
-		);
-
-		expect(mockTooltip.mock.calls[0][0]).toMatchObject({ enabled: false });
-	});
-});

frontend/src/lib/authz/components/AuthZButton/AuthZButton.tsx

@@ -1,36 +0,0 @@
-import { Button, ButtonProps } from '@signozhq/ui/button';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-
-export type AuthZButtonProps = ButtonProps & {
-	/** Permissions required to enable the button (AND semantics). */
-	checks: BrandedPermission[];
-	/** Override the default denial tooltip message. */
-	tooltipMessage?: string;
-	/** Gate the permission check itself. When false, renders a plain button. */
-	authZEnabled?: boolean;
-};
-
-/**
- * `@signozhq/ui` Button gated by an AuthZ permission check. Denied or loading
- * → button is disabled and a denial tooltip is shown (handled by
- * `AuthZTooltip`). Replaces the hand-fused `AuthZTooltip` + `Button` sites.
- */
-function AuthZButton({
-	checks,
-	tooltipMessage,
-	authZEnabled = true,
-	...buttonProps
-}: AuthZButtonProps): JSX.Element {
-	return (
-		<AuthZTooltip
-			checks={checks}
-			enabled={authZEnabled}
-			tooltipMessage={tooltipMessage}
-		>
-			<Button {...buttonProps} />
-		</AuthZTooltip>
-	);
-}
-
-export default AuthZButton;

frontend/src/lib/authz/components/AuthZGuard/AuthZGuard.authz.test.tsx

@@ -1,202 +0,0 @@
-import { render, screen, waitFor } from 'tests/test-utils';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import {
-	AUTHZ_CHECK_URL,
-	setupAuthzAllow,
-	setupAuthzDeny,
-} from 'lib/authz/utils/authz-test-utils';
-import type { AuthZObject } from 'lib/authz/hooks/useAuthZ/types';
-import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
-
-import { AuthZGuard } from './AuthZGuard';
-import { AuthZGuardContent } from './AuthZGuardContent';
-import { AuthZGuardPage } from './AuthZGuardPage';
-
-const readPerm = buildPermission('read', 'role:*' as AuthZObject<'read'>);
-
-const Protected = (): JSX.Element => <div>Protected content</div>;
-
-describe('AuthZGuard', () => {
-	it('renders children when allowed', async () => {
-		server.use(setupAuthzAllow(readPerm));
-
-		render(
-			<AuthZGuard checks={[readPerm]}>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected content')).toBeInTheDocument();
-		});
-	});
-
-	it('renders the fallback when denied', async () => {
-		server.use(setupAuthzDeny(readPerm));
-
-		render(
-			<AuthZGuard checks={[readPerm]} fallback={<div>No access</div>}>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('No access')).toBeInTheDocument();
-		});
-		expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
-	});
-
-	it('passes denied permissions to a function fallback', async () => {
-		server.use(setupAuthzDeny(readPerm));
-
-		render(
-			<AuthZGuard
-				checks={[readPerm]}
-				fallback={({ deniedPermissions }): JSX.Element => (
-					<div>denied: {deniedPermissions.length}</div>
-				)}
-			>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('denied: 1')).toBeInTheDocument();
-		});
-	});
-
-	it('renders nothing for a denied check with no fallback', async () => {
-		server.use(setupAuthzDeny(readPerm));
-
-		const { container } = render(
-			<AuthZGuard checks={[readPerm]}>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		await waitFor(() => {
-			expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
-		});
-		expect(container).toBeEmptyDOMElement();
-	});
-
-	it('renders the loading fallback while checking', () => {
-		server.use(setupAuthzAllow(readPerm));
-
-		render(
-			<AuthZGuard checks={[readPerm]} fallbackOnLoading={<div>Loading…</div>}>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		expect(screen.getByText('Loading…')).toBeInTheDocument();
-	});
-
-	it('fails open on error by default (renders children)', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) =>
-				res(ctx.status(500), ctx.json({ error: 'boom' })),
-			),
-		);
-
-		render(
-			<AuthZGuard checks={[readPerm]} fallback={<div>No access</div>}>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected content')).toBeInTheDocument();
-		});
-	});
-
-	it('renders the fallback on error when failOpenOnError is false', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) =>
-				res(ctx.status(500), ctx.json({ error: 'boom' })),
-			),
-		);
-
-		render(
-			<AuthZGuard
-				checks={[readPerm]}
-				onFailRenderContent={false}
-				fallback={<div>No access</div>}
-			>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('No access')).toBeInTheDocument();
-		});
-		expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
-	});
-});
-
-describe('AuthZGuardPage', () => {
-	it('renders the full-page denied screen when denied', async () => {
-		server.use(setupAuthzDeny(readPerm));
-
-		render(
-			<AuthZGuardPage checks={[readPerm]}>
-				<Protected />
-			</AuthZGuardPage>,
-		);
-
-		await waitFor(() => {
-			expect(
-				screen.getByText('Uh-oh! You are not authorized'),
-			).toBeInTheDocument();
-		});
-		expect(screen.getByText('read:role:*')).toBeInTheDocument();
-	});
-
-	it('renders the app loader while checking', () => {
-		server.use(setupAuthzDeny(readPerm));
-
-		render(
-			<AuthZGuardPage checks={[readPerm]}>
-				<Protected />
-			</AuthZGuardPage>,
-		);
-
-		expect(
-			screen.getByText(
-				'OpenTelemetry-Native Logs, Metrics and Traces in a single pane',
-			),
-		).toBeInTheDocument();
-	});
-});
-
-describe('AuthZGuardContent', () => {
-	it('renders the denied callout when denied', async () => {
-		server.use(setupAuthzDeny(readPerm));
-
-		render(
-			<AuthZGuardContent checks={[readPerm]}>
-				<Protected />
-			</AuthZGuardContent>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('read:role:*')).toBeInTheDocument();
-		});
-		expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
-	});
-
-	it('renders children when allowed', async () => {
-		server.use(setupAuthzAllow(readPerm));
-
-		render(
-			<AuthZGuardContent checks={[readPerm]}>
-				<Protected />
-			</AuthZGuardContent>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected content')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/lib/authz/components/AuthZGuard/AuthZGuard.tsx

@@ -1,66 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-
-export type AuthZGuardFallback =
-	| ReactNode
-	| ((info: { deniedPermissions: BrandedPermission[] }) => ReactNode);
-
-export type AuthZGuardProps = {
-	/**
-	 * Permissions required to render `children` (AND semantics).
-	 */
-	checks: BrandedPermission[];
-	children: ReactElement;
-	/**
-	 * Rendered when denied. A function receives the denied permissions.
-	 */
-	fallback?: AuthZGuardFallback;
-	fallbackOnLoading?: ReactNode;
-	/**
-	 * By default, we don't expect the check API request to fail, in those cases, we prefer to show the content and then let the API fail (during list/create).
-	 *
-	 * In case you want to have a different behavior when request fail, set to false.
-	 *
-	 * @default true
-	 */
-	onFailRenderContent?: boolean;
-};
-
-function resolveFallback(
-	fallback: AuthZGuardFallback | undefined,
-	deniedPermissions: BrandedPermission[],
-): ReactNode {
-	if (typeof fallback === 'function') {
-		return fallback({ deniedPermissions });
-	}
-	return fallback ?? null;
-}
-
-export function AuthZGuard({
-	checks,
-	children,
-	fallback,
-	fallbackOnLoading,
-	onFailRenderContent = true,
-}: AuthZGuardProps): JSX.Element | null {
-	const { allowed, isLoading, error, deniedPermissions } = useAuthZ(checks);
-
-	if (isLoading) {
-		return <>{fallbackOnLoading ?? null}</>;
-	}
-
-	if (error) {
-		return onFailRenderContent ? (
-			children
-		) : (
-			<>{resolveFallback(fallback, deniedPermissions)}</>
-		);
-	}
-
-	if (!allowed) {
-		return <>{resolveFallback(fallback, deniedPermissions)}</>;
-	}
-
-	return children;
-}

frontend/src/lib/authz/components/AuthZGuard/AuthZGuardContent.tsx

@@ -1,21 +0,0 @@
-import { ReactElement } from 'react';
-import PermissionDeniedCallout from 'lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout';
-
-import { AuthZGuard, AuthZGuardProps } from './AuthZGuard';
-
-export function AuthZGuardContent({
-	fallback,
-	...rest
-}: AuthZGuardProps): JSX.Element | null {
-	return (
-		<AuthZGuard
-			{...rest}
-			fallback={
-				fallback ??
-				(({ deniedPermissions }): ReactElement => (
-					<PermissionDeniedCallout deniedPermissions={deniedPermissions} />
-				))
-			}
-		/>
-	);
-}

frontend/src/lib/authz/components/AuthZGuard/AuthZGuardPage.tsx

@@ -1,24 +0,0 @@
-import { ReactElement } from 'react';
-import AppLoading from 'components/AppLoading/AppLoading';
-import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
-
-import { AuthZGuard, AuthZGuardProps } from './AuthZGuard';
-
-export function AuthZGuardPage({
-	fallback,
-	fallbackOnLoading,
-	...rest
-}: AuthZGuardProps): JSX.Element | null {
-	return (
-		<AuthZGuard
-			{...rest}
-			fallbackOnLoading={fallbackOnLoading ?? <AppLoading />}
-			fallback={
-				fallback ??
-				(({ deniedPermissions }): ReactElement => (
-					<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />
-				))
-			}
-		/>
-	);
-}

frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.test.tsx

@@ -1,42 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-import PermissionDeniedCallout from './PermissionDeniedCallout';
-import {
-	buildPermission,
-	buildObjectString,
-} from 'lib/authz/hooks/useAuthZ/utils';
-
-describe('PermissionDeniedCallout', () => {
-	it('renders the permission name in the callout message', () => {
-		const deniedPermissions = [
-			buildPermission('read', buildObjectString('serviceaccount', '*')),
-		];
-		render(<PermissionDeniedCallout deniedPermissions={deniedPermissions} />);
-
-		expect(screen.getByText(/is not authorized/)).toBeInTheDocument();
-		expect(screen.getByText(/read:serviceaccount:\*/)).toBeInTheDocument();
-	});
-
-	it('renders multiple denied permissions', () => {
-		const deniedPermissions = [
-			buildPermission('read', buildObjectString('serviceaccount', '*')),
-			buildPermission('update', buildObjectString('role', 'admin')),
-		];
-		render(<PermissionDeniedCallout deniedPermissions={deniedPermissions} />);
-
-		expect(screen.getByText(/read:serviceaccount:\*/)).toBeInTheDocument();
-		expect(screen.getByText(/update:role:admin/)).toBeInTheDocument();
-	});
-
-	it('accepts an optional className', () => {
-		const deniedPermissions = [
-			buildPermission('read', buildObjectString('serviceaccount', '*')),
-		];
-		const { container } = render(
-			<PermissionDeniedCallout
-				deniedPermissions={deniedPermissions}
-				className="custom-class"
-			/>,
-		);
-		expect(container.firstChild).toHaveClass('custom-class');
-	});
-});

frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx

@@ -1,29 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-import PermissionDeniedFullPage from './PermissionDeniedFullPage';
-import {
-	buildPermission,
-	buildObjectString,
-} from 'lib/authz/hooks/useAuthZ/utils';
-
-describe('PermissionDeniedFullPage', () => {
-	it('renders the title and subtitle with the permissionName interpolated', () => {
-		const deniedPermissions = [
-			buildPermission('read', buildObjectString('serviceaccount', '*')),
-		];
-		render(<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />);
-
-		expect(screen.getByText('Uh-oh! You are not authorized')).toBeInTheDocument();
-		expect(screen.getByText(/read:serviceaccount:\*/)).toBeInTheDocument();
-		expect(screen.getByText(/is not authorized to perform/)).toBeInTheDocument();
-	});
-
-	it('renders with multiple denied permissions', () => {
-		const deniedPermissions = [
-			buildPermission('read', buildObjectString('role', 'admin')),
-			buildPermission('update', buildObjectString('role', 'admin')),
-		];
-		render(<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />);
-		expect(screen.getByText(/read:role:admin/)).toBeInTheDocument();
-		expect(screen.getByText(/update:role:admin/)).toBeInTheDocument();
-	});
-});

frontend/src/lib/authz/components/README.md

@@ -1,185 +0,0 @@
-# AuthZ Components
-
-Quick reference for permission-gating UI. All components use AND semantics: user needs ALL permissions in `checks` array.
-
-## Decision Tree
-
-```
-Need to gate...
-├── A button? → AuthZButton
-├── Any element with tooltip on deny? → AuthZTooltip
-├── A section inside a page? → withAuthZContent (preferred)
-│   └── Need JSX wrapper? → AuthZGuardContent
-├── An entire page/route? → withAuthZPage (preferred)
-│   └── Need JSX wrapper? → AuthZGuardPage
-├── Need full control over fallback? → withAuthZ / AuthZGuard
-└── None of above fit?
-    ├── Can create wrapper component? → Create it (like AuthZButton)
-    └── Last resort → useAuthZ hook directly
-```
-
-## Building Permissions
-
-Use `buildPermission`, `buildObjectString` or pre-built constants. Never cast with `as BrandedPermission`.
-
-```tsx
-import { buildPermission, buildObjectString } from 'lib/authz/hooks/useAuthZ/utils';
-import { 
-  RoleCreatePermission,
-  buildRoleReadPermission 
-} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
-
-// Static permission (pre-built)
-const checks = [RoleCreatePermission];
-
-// Dynamic permission (builder fn)
-const checks = [buildRoleReadPermission(roleId)];
-
-// Custom permission (buildPermission + buildObjectString)
-const checks = [buildPermission('read', buildObjectString('dashboard', dashboardId))];
-```
-
-## Creating Permission Helpers
-
-When adding authz to a new resource, create a permissions file under `lib/authz/hooks/useAuthZ/permissions/`.
-
-```tsx
-// lib/authz/hooks/useAuthZ/permissions/dashboard.permissions.ts
-import { buildPermission } from '../utils';
-import type { BrandedPermission } from '../types';
-
-// Collection-level — wildcard, no specific id needed
-export const DashboardCreatePermission = buildPermission('create', 'dashboard:*');
-export const DashboardListPermission = buildPermission('list', 'dashboard:*');
-
-// Resource-level — require specific id
-export const buildDashboardReadPermission = (id: string): BrandedPermission =>
-  buildPermission('read', `dashboard:${id}`);
-export const buildDashboardUpdatePermission = (id: string): BrandedPermission =>
-  buildPermission('update', `dashboard:${id}`);
-export const buildDashboardDeletePermission = (id: string): BrandedPermission =>
-  buildPermission('delete', `dashboard:${id}`);
-```
-
-Pattern:
-- `<Resource><Action>Permission` → collection-level const (wildcard `*`)
-- `build<Resource><Action>Permission(id)` → resource-level fn (specific id)
-
-## Components
-
-### AuthZButton
-
-Button that disables + shows tooltip when denied.
-
-```tsx
-import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
-
-<AuthZButton checks={[SACreatePermission]} onClick={handleCreate}>
-  Create
-</AuthZButton>
-```
-
-### AuthZTooltip
-
-Wraps any element. Disables child + shows denial tooltip.
-
-```tsx
-import { buildSADeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
-
-<AuthZTooltip checks={[buildSADeletePermission(accountId)]}>
-  <IconButton icon={<Trash />} onClick={handleDelete} />
-</AuthZTooltip>
-```
-
-### withAuthZPage (preferred for pages)
-
-HOC for route-level gating. Wrap at export. Shows `PermissionDeniedFullPage` + `AppLoading`.
-
-```tsx
-import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
-
-function RolesPage(): JSX.Element {
-  return <div>...</div>;
-}
-
-export default withAuthZPage(RolesPage, {
-  checks: [RoleListPermission],
-});
-```
-
-### withAuthZContent (preferred for sections)
-
-HOC for inline sections. Shows `PermissionDeniedCallout` on deny.
-
-```tsx
-import { buildRoleReadPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
-
-function RoleEditor(): JSX.Element {
-  return <div>...</div>;
-}
-
-// Dynamic checks from route params
-export default withAuthZContent(RoleEditor, {
-  checks: (_props, ctx) => [buildRoleReadPermission(ctx.params.roleId)],
-});
-```
-
-### withAuthZ
-
-HOC base. No default fallback. Use when you need custom fallback.
-
-```tsx
-import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
-
-export default withAuthZ(SecretPanel, {
-  checks: [buildPermission('write', 'settings:org')],
-  fallback: <p>No access</p>,
-});
-```
-
-### AuthZGuardPage
-
-JSX variant of `withAuthZPage`. Use when HOC not possible (conditional rendering).
-
-```tsx
-import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
-
-<AuthZGuardPage checks={[RoleListPermission]}>
-  <RolesPage />
-</AuthZGuardPage>
-```
-
-### AuthZGuardContent
-
-JSX variant of `withAuthZContent`. Use when HOC not possible.
-
-```tsx
-import { RoleCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
-
-<AuthZGuardContent checks={[RoleCreatePermission]}>
-  <RoleEditor />
-</AuthZGuardContent>
-```
-
-### AuthZGuard
-
-JSX base guard. No default fallback. Use when you need custom fallback in JSX.
-
-```tsx
-import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
-
-<AuthZGuard
-  checks={[buildPermission('write', 'settings:org')]}
-  fallback={<p>No access</p>}
-  fallbackOnLoading={<Spinner />}
->
-  <SecretContent />
-</AuthZGuard>
-```
-
-## Fallback Components
-
-Don't use these components directly, always prefer using via `withAuthZ` and their variants.
-
-- PermissionDeniedCallout: inline error callout. Shows `user/{id} is not authorized to perform {permissions}`.
-- PermissionDeniedFullPage: full-page centered error. Same message, bigger presentation.