feat(authz): add docs for authz + agents update

* chore(tsconfig): explicit path mappings and cleaned includes

* perf(tsconfig): enable incremental & fix large type resolution

frontend/AGENTS.md

@@ -25,6 +25,7 @@ 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/src/components/Graph/utils.ts

@@ -1,5 +1,14 @@
 import { MutableRefObject } from 'react';
-import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
+import {
+	ActiveElement,
+	Chart,
+	ChartConfiguration,
+	ChartData,
+	ChartEvent,
+	ChartType,
+	Color,
+	TooltipItem,
+} from 'chart.js';
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -60,184 +69,189 @@ export const getGraphOptions = (
 	minTime?: number,
 	maxTime?: number,
 	// eslint-disable-next-line sonarjs/cognitive-complexity
-): CustomChartOptions => ({
-	animation: {
-		duration: animate ? 200 : 0,
-	},
-	responsive: true,
-	maintainAspectRatio: false,
-	interaction: {
-		mode: 'index',
-		intersect: true,
-	},
-	plugins: {
-		...(staticLine
-			? {
-					annotation: {
-						annotations: [
-							{
-								type: 'line',
-								yMin: staticLine.yMin,
-								yMax: staticLine.yMax,
-								borderColor: staticLine.borderColor,
-								borderWidth: staticLine.borderWidth,
-								label: {
-									content: staticLine.lineText,
-									enabled: true,
-									font: {
-										size: 10,
+): CustomChartOptions =>
+	({
+		animation: {
+			duration: animate ? 200 : 0,
+		},
+		responsive: true,
+		maintainAspectRatio: false,
+		interaction: {
+			mode: 'index',
+			intersect: true,
+		},
+		plugins: {
+			...(staticLine
+				? {
+						annotation: {
+							annotations: [
+								{
+									type: 'line',
+									yMin: staticLine.yMin,
+									yMax: staticLine.yMax,
+									borderColor: staticLine.borderColor,
+									borderWidth: staticLine.borderWidth,
+									label: {
+										content: staticLine.lineText,
+										enabled: true,
+										font: {
+											size: 10,
+										},
+										borderWidth: 0,
+										position: 'start',
+										backgroundColor: 'transparent',
+										color: staticLine.textColor,
 									},
-									borderWidth: 0,
-									position: 'start',
-									backgroundColor: 'transparent',
-									color: staticLine.textColor,
 								},
-							},
-						],
+							],
+						},
+					}
+				: {}),
+			title: {
+				display: title !== undefined,
+				text: title,
+			},
+			legend: {
+				display: false,
+			},
+			tooltip: {
+				callbacks: {
+					title(context: TooltipItem<'line'>[]): string | string[] {
+						const date = dayjs(context[0].parsed.x);
+						return date
+							.tz(timezone.value)
+							.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
+					},
+					label(context: TooltipItem<'line'>): string | string[] {
+						let label = context.dataset.label || '';
+
+						if (label) {
+							label += ': ';
+						}
+						if (context.parsed.y !== null) {
+							label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
+						}
+
+						return label;
+					},
+					labelTextColor(labelData: TooltipItem<'line'>): Color {
+						if (labelData.datasetIndex === nearestDatasetIndex.current) {
+							return 'rgba(255, 255, 255, 1)';
+						}
+
+						return 'rgba(255, 255, 255, 0.75)';
 					},
-				}
-			: {}),
-		title: {
-			display: title !== undefined,
-			text: title,
-		},
-		legend: {
-			display: false,
-		},
-		tooltip: {
-			callbacks: {
-				title(context): string | string[] {
-					const date = dayjs(context[0].parsed.x);
-					return date
-						.tz(timezone.value)
-						.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
 				},
-				label(context): string | string[] {
-					let label = context.dataset.label || '';
-
-					if (label) {
-						label += ': ';
-					}
-					if (context.parsed.y !== null) {
-						label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
-					}
-
-					return label;
-				},
-				labelTextColor(labelData): Color {
-					if (labelData.datasetIndex === nearestDatasetIndex.current) {
-						return 'rgba(255, 255, 255, 1)';
-					}
-
-					return 'rgba(255, 255, 255, 0.75)';
+				position: 'custom',
+				itemSort(item1: TooltipItem<'line'>, item2: TooltipItem<'line'>): number {
+					return item2.parsed.y - item1.parsed.y;
 				},
 			},
-			position: 'custom',
-			itemSort(item1, item2): number {
-				return item2.parsed.y - item1.parsed.y;
-			},
+			[dragSelectPluginId]: createDragSelectPluginOptions(
+				!!onDragSelect,
+				onDragSelect,
+				dragSelectColor,
+			),
+			[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
+				!!onDragSelect,
+				currentTheme === 'dark' ? 'white' : 'black',
+			),
 		},
-		[dragSelectPluginId]: createDragSelectPluginOptions(
-			!!onDragSelect,
-			onDragSelect,
-			dragSelectColor,
-		),
-		[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
-			!!onDragSelect,
-			currentTheme === 'dark' ? 'white' : 'black',
-		),
-	},
-	layout: {
-		padding: 0,
-	},
-	scales: {
-		x: {
-			stacked: isStacked,
-			offset: false,
-			grid: {
+		layout: {
+			padding: 0,
+		},
+		scales: {
+			x: {
+				stacked: isStacked,
+				offset: false,
+				grid: {
+					display: true,
+					color: getGridColor(),
+					drawTicks: true,
+				},
+				adapters: {
+					date: chartjsAdapter,
+				},
+				time: {
+					unit: xAxisTimeUnit?.unitName || 'minute',
+					stepSize: xAxisTimeUnit?.stepSize || 1,
+					displayFormats: {
+						millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
+						second: DATE_TIME_FORMATS.TIME_SECONDS,
+						minute: DATE_TIME_FORMATS.TIME,
+						hour: DATE_TIME_FORMATS.SLASH_SHORT,
+						day: DATE_TIME_FORMATS.DATE_SHORT,
+						week: DATE_TIME_FORMATS.DATE_SHORT,
+						month: DATE_TIME_FORMATS.YEAR_MONTH,
+						year: DATE_TIME_FORMATS.YEAR_SHORT,
+					},
+				},
+				type: 'time',
+				ticks: { color: getAxisLabelColor(currentTheme) },
+				...(minTime && {
+					min: dayjs(minTime).tz(timezone.value).format(),
+				}),
+				...(maxTime && {
+					max: dayjs(maxTime).tz(timezone.value).format(),
+				}),
+			},
+			y: {
+				stacked: isStacked,
 				display: true,
-				color: getGridColor(),
-				drawTicks: true,
-			},
-			adapters: {
-				date: chartjsAdapter,
-			},
-			time: {
-				unit: xAxisTimeUnit?.unitName || 'minute',
-				stepSize: xAxisTimeUnit?.stepSize || 1,
-				displayFormats: {
-					millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
-					second: DATE_TIME_FORMATS.TIME_SECONDS,
-					minute: DATE_TIME_FORMATS.TIME,
-					hour: DATE_TIME_FORMATS.SLASH_SHORT,
-					day: DATE_TIME_FORMATS.DATE_SHORT,
-					week: DATE_TIME_FORMATS.DATE_SHORT,
-					month: DATE_TIME_FORMATS.YEAR_MONTH,
-					year: DATE_TIME_FORMATS.YEAR_SHORT,
+				grid: {
+					display: true,
+					color: getGridColor(),
 				},
-			},
-			type: 'time',
-			ticks: { color: getAxisLabelColor(currentTheme) },
-			...(minTime && {
-				min: dayjs(minTime).tz(timezone.value).format(),
-			}),
-			...(maxTime && {
-				max: dayjs(maxTime).tz(timezone.value).format(),
-			}),
-		},
-		y: {
-			stacked: isStacked,
-			display: true,
-			grid: {
-				display: true,
-				color: getGridColor(),
-			},
-			ticks: {
-				color: getAxisLabelColor(currentTheme),
-				// Include a dollar sign in the ticks
-				callback(value): string {
-					return getYAxisFormattedValue(value.toString(), yAxisUnit);
+				ticks: {
+					color: getAxisLabelColor(currentTheme),
+					// Include a dollar sign in the ticks
+					callback(value: number | string): string {
+						return getYAxisFormattedValue(value.toString(), yAxisUnit);
+					},
 				},
 			},
 		},
-	},
-	elements: {
-		line: {
-			tension: 0,
-			cubicInterpolationMode: 'monotone',
-		},
-		point: {
-			hoverBackgroundColor: (ctx: any): string => {
-				if (ctx?.element?.options?.borderColor) {
-					return ctx.element.options.borderColor;
-				}
-				return 'rgba(0,0,0,0.1)';
+		elements: {
+			line: {
+				tension: 0,
+				cubicInterpolationMode: 'monotone',
 			},
-			hoverRadius: 5,
-		},
-	},
-	onClick: (event, element, chart): void => {
-		if (onClickHandler) {
-			onClickHandler(event, element, chart, data);
-		}
-	},
-	onHover: (event, _, chart): void => {
-		if (event.native) {
-			const interactions = chart.getElementsAtEventForMode(
-				event.native,
-				'nearest',
-				{
-					intersect: false,
+			point: {
+				hoverBackgroundColor: (ctx: any): string => {
+					if (ctx?.element?.options?.borderColor) {
+						return ctx.element.options.borderColor;
+					}
+					return 'rgba(0,0,0,0.1)';
 				},
-				true,
-			);
-
-			if (interactions[0]) {
-				nearestDatasetIndex.current = interactions[0].datasetIndex;
+				hoverRadius: 5,
+			},
+		},
+		onClick: (
+			event: ChartEvent,
+			element: ActiveElement[],
+			chart: Chart,
+		): void => {
+			if (onClickHandler) {
+				onClickHandler(event, element, chart, data);
 			}
-		}
-	},
-});
+		},
+		onHover: (event: ChartEvent, _: ActiveElement[], chart: Chart): void => {
+			if (event.native) {
+				const interactions = chart.getElementsAtEventForMode(
+					event.native,
+					'nearest',
+					{
+						intersect: false,
+					},
+					true,
+				);
+
+				if (interactions[0]) {
+					nearestDatasetIndex.current = interactions[0].datasetIndex;
+				}
+			}
+		},
+	}) as CustomChartOptions;
 
 declare module 'chart.js' {
 	interface TooltipPositionerMap {

frontend/src/components/RouteTab/types.ts

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

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/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/RolesSettings/CreateEditRolePage/__tests__/CreateRolePage.authz.test.tsx

@@ -48,8 +48,6 @@ describe('CreateRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
-				allowed: false,
-				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

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

@@ -77,8 +77,6 @@ describe('EditRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
-				allowed: false,
-				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

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

@@ -409,8 +409,6 @@ describe('ViewRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
-				allowed: false,
-				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

frontend/src/lib/authz/README.md

@@ -0,0 +1,21 @@
+# 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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,37 @@
+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;
+};
+
+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

@@ -0,0 +1,202 @@
+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

@@ -0,0 +1,82 @@
+import { ReactElement, ReactNode, useMemo } 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 { isLoading, error, permissions } = useAuthZ(checks);
+
+	// TODO(authz): Use allowed/deniedPermissions from useAuthZ after devtools PR merges
+	const { allowed, deniedPermissions } = useMemo(() => {
+		if (!permissions) {
+			return { allowed: false, deniedPermissions: [] as BrandedPermission[] };
+		}
+
+		const denied = Object.entries(permissions)
+			.filter(([, { isGranted }]) => !isGranted)
+			.map(([perm]) => perm as BrandedPermission);
+
+		return {
+			allowed: denied.length === 0,
+			deniedPermissions: denied,
+		};
+	}, [permissions]);
+
+	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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,24 @@
+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/AuthZTooltip/AuthZTooltip.authz.test.tsx

@@ -17,7 +17,7 @@ const noPermissions = {
 	error: null,
 	permissions: null,
 	allowed: false,
-	deniedPermissions: [],
+	deniedPermissions: [] as BrandedPermission[],
 	refetchPermissions: jest.fn(),
 };
 
@@ -162,11 +162,11 @@ describe('AuthZTooltip — multi-check (checks array)', () => {
 			</AuthZTooltip>,
 		);
 
-		expect(screen.getByRole('button', { name: 'Action' })).toBeDisabled();
+		const button = screen.getByRole('button', { name: 'Action' });
+		expect(button).toBeDisabled();
 
-		const wrapper = screen.getByRole('button', { name: 'Action' }).parentElement;
-		expect(wrapper?.getAttribute('data-denied-permissions')).toContain(sa);
-		expect(wrapper?.getAttribute('data-denied-permissions')).toContain(
+		expect(button.getAttribute('data-denied-permissions')).toContain(sa);
+		expect(button.getAttribute('data-denied-permissions')).toContain(
 			attachRolePerm,
 		);
 	});

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

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

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

@@ -1,4 +1,4 @@
-import { ReactElement, cloneElement, useMemo } from 'react';
+import { CSSProperties, ReactElement, cloneElement, useMemo } from 'react';
 import {
 	TooltipRoot,
 	TooltipContent,
@@ -11,6 +11,13 @@ import { formatPermission } from 'lib/authz/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;
@@ -49,11 +56,13 @@ function AuthZTooltip({
 	}, [checks, permissions]);
 
 	if (shouldCheck && isLoading) {
-		return (
-			<span className={styles.wrapper}>
-				{cloneElement(children, { disabled: true })}
-			</span>
-		);
+		return cloneElement(children, {
+			disabled: true,
+			style: DISABLED_STYLE,
+			onClick: noOp,
+			onMouseDown: noOp,
+			onPointerDown: noOp,
+		});
 	}
 
 	if (!shouldCheck || deniedPermissions.length === 0) {
@@ -64,12 +73,14 @@ function AuthZTooltip({
 		<TooltipProvider>
 			<TooltipRoot>
 				<TooltipTrigger asChild>
-					<span
-						className={styles.wrapper}
-						data-denied-permissions={deniedPermissions.join(',')}
-					>
-						{cloneElement(children, { disabled: true })}
-					</span>
+					{cloneElement(children, {
+						disabled: true,
+						style: DISABLED_STYLE,
+						onClick: noOp,
+						onMouseDown: noOp,
+						onPointerDown: noOp,
+						'data-denied-permissions': deniedPermissions.join(','),
+					})}
 				</TooltipTrigger>
 				<TooltipContent className={styles.errorContent}>
 					{formatDeniedMessage(deniedPermissions, user.id, tooltipMessage)}

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

@@ -1,263 +0,0 @@
-import { ReactElement } from 'react';
-import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-import { buildPermission } from 'lib/authz/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 'lib/authz/utils/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/lib/authz/components/GuardAuthZ/GuardAuthZ.tsx

@@ -1,50 +0,0 @@
-import { ReactElement } from 'react';
-import {
-	AuthZObject,
-	AuthZRelation,
-	BrandedPermission,
-} from 'lib/authz/hooks/useAuthZ/types';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-import { buildPermission } from 'lib/authz/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/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.test.tsx

@@ -1,18 +1,39 @@
 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', () => {
-		render(<PermissionDeniedCallout permissionName="serviceaccount:attach" />);
+		const deniedPermissions = [
+			buildPermission('read', buildObjectString('serviceaccount', '*')),
+		];
+		render(<PermissionDeniedCallout deniedPermissions={deniedPermissions} />);
 
 		expect(screen.getByText(/is not authorized/)).toBeInTheDocument();
-		expect(screen.getByText(/serviceaccount:attach/)).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
-				permissionName="serviceaccount:read"
+				deniedPermissions={deniedPermissions}
 				className="custom-class"
 			/>,
 		);

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

@@ -3,18 +3,32 @@ 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 {
-	permissionName: string;
+export interface PermissionDeniedCalloutProps {
+	/**
+	 * @deprecated Use `deniedPermissions` instead. Will be removed after authz devtools PR merges.
+	 */
+	permissionName?: string;
+	deniedPermissions?: BrandedPermission[];
 	className?: string;
 }
 
 function PermissionDeniedCallout({
 	permissionName,
+	deniedPermissions,
 	className,
 }: PermissionDeniedCalloutProps): JSX.Element {
 	const { user } = useAppContext();
 
+	// TODO(authz): Remove permissionName support after devtools PR merges
+	const formattedPermissions = deniedPermissions
+		? deniedPermissions.map(formatPermission)
+		: permissionName
+			? [permissionName]
+			: [];
+
 	return (
 		<Callout
 			type="error"
@@ -25,7 +39,12 @@ function PermissionDeniedCallout({
 			<Typography.Text className={styles.permission}>
 				<code className={styles.permissionCode}>user/{user.id}</code> is not
 				authorized to perform{' '}
-				<code className={styles.permissionCode}>{permissionName}</code>
+				{formattedPermissions.map((perm, idx) => (
+					<span key={perm}>
+						<code className={styles.permissionCode}>{perm}</code>
+						{idx < formattedPermissions.length - 1 && ', '}
+					</span>
+				))}
 			</Typography.Text>
 		</Callout>
 	);

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

@@ -1,17 +1,29 @@
 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', () => {
-		render(<PermissionDeniedFullPage permissionName="serviceaccount:list" />);
+		const deniedPermissions = [
+			buildPermission('read', buildObjectString('serviceaccount', '*')),
+		];
+		render(<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />);
 
 		expect(screen.getByText('Uh-oh! You are not authorized')).toBeInTheDocument();
-		expect(screen.getByText(/serviceaccount:list/)).toBeInTheDocument();
+		expect(screen.getByText(/read:serviceaccount:\*/)).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();
+	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/PermissionDeniedFullPage/PermissionDeniedFullPage.tsx

@@ -3,16 +3,30 @@ 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 {
-	permissionName: string;
+export interface PermissionDeniedFullPageProps {
+	/**
+	 * @deprecated Use `deniedPermissions` instead. Will be removed after authz devtools PR merges.
+	 */
+	permissionName?: string;
+	deniedPermissions?: BrandedPermission[];
 }
 
 function PermissionDeniedFullPage({
 	permissionName,
+	deniedPermissions,
 }: PermissionDeniedFullPageProps): JSX.Element {
 	const { user } = useAppContext();
 
+	// TODO(authz): Remove permissionName support after devtools PR merges
+	const formattedPermissions = deniedPermissions
+		? deniedPermissions.map(formatPermission)
+		: permissionName
+			? [permissionName]
+			: [];
+
 	return (
 		<div className={styles.container}>
 			<div className={styles.content}>
@@ -22,7 +36,13 @@ 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 <code className={styles.permission}>{permissionName}</code>
+					to perform{' '}
+					{formattedPermissions.map((perm, idx) => (
+						<span key={perm}>
+							<code className={styles.permission}>{perm}</code>
+							{idx < formattedPermissions.length - 1 && ', '}
+						</span>
+					))}
 				</p>
 			</div>
 		</div>

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

@@ -0,0 +1,185 @@
+# 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.

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

@@ -1,440 +0,0 @@
-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 'lib/authz/utils/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/lib/authz/components/createGuardedRoute/createGuardedRoute.styles.scss

@@ -1,41 +0,0 @@
-.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/lib/authz/components/createGuardedRoute/createGuardedRoute.tsx

@@ -1,67 +0,0 @@
-import { ComponentType, ReactElement, useMemo } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-import {
-	AuthZObject,
-	AuthZRelation,
-	BrandedPermission,
-} from 'lib/authz/hooks/useAuthZ/types';
-import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
-import { useAppContext } from 'providers/App/App';
-
-import noDataUrl from 'assets/Icons/no-data.svg';
-
-import AppLoading from '../../../../components/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/lib/authz/components/withAuthZ/withAuthZ.authz.test.tsx

@@ -0,0 +1,578 @@
+import React from 'react';
+import { render, screen, waitFor, act } from 'tests/test-utils';
+import { useQueryClient } from 'react-query';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import {
+	AUTHZ_CHECK_URL,
+	authzMockResponse,
+	setupAuthzAllow,
+	setupAuthzDeny,
+	setupAuthzGrantByPrefix,
+} from 'lib/authz/utils/authz-test-utils';
+import type { AuthZObject } from 'lib/authz/hooks/useAuthZ/types';
+import {
+	buildObjectString,
+	buildPermission,
+} from 'lib/authz/hooks/useAuthZ/utils';
+
+import { withAuthZ, RouterContext } from './withAuthZ';
+import { withAuthZContent } from './withAuthZContent';
+import { withAuthZPage } from './withAuthZPage';
+
+const mockUseParams = jest.fn();
+const mockUseLocation = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useParams: (): Record<string, string> => mockUseParams(),
+	useLocation: (): { pathname: string; search: string } => mockUseLocation(),
+}));
+
+const readPerm = buildPermission('read', 'role:*' as AuthZObject<'read'>);
+
+function Base(): JSX.Element {
+	return <div>Base component</div>;
+}
+
+beforeEach(() => {
+	mockUseParams.mockReturnValue({});
+	mockUseLocation.mockReturnValue({ pathname: '/', search: '' });
+});
+
+describe('withAuthZ', () => {
+	it('renders the wrapped component when allowed', async () => {
+		server.use(setupAuthzAllow(readPerm));
+		const Guarded = withAuthZ(Base, { checks: [readPerm] });
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Base component')).toBeInTheDocument();
+		});
+	});
+
+	it('renders nothing when denied without a fallback', async () => {
+		server.use(setupAuthzDeny(readPerm));
+		const Guarded = withAuthZ(Base, { checks: [readPerm] });
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.queryByText('Base component')).not.toBeInTheDocument();
+		});
+	});
+
+	it('renders the provided fallback when denied', async () => {
+		server.use(setupAuthzDeny(readPerm));
+		const Guarded = withAuthZ(Base, {
+			checks: [readPerm],
+			fallback: <div>No access</div>,
+		});
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('No access')).toBeInTheDocument();
+		});
+	});
+
+	it('resolves checks from props via the selector form', async () => {
+		type Props = { roleId: string };
+		const RoleView = ({ roleId }: Props): JSX.Element => <div>role {roleId}</div>;
+		const deniedPerm = buildPermission(
+			'read',
+			buildObjectString<'read'>('role', 'r-1'),
+		);
+		server.use(setupAuthzDeny(deniedPerm));
+
+		const Guarded = withAuthZ<Props>(RoleView, {
+			checks: ({ roleId }) => [
+				buildPermission('read', buildObjectString<'read'>('role', roleId)),
+			],
+			fallback: <div>denied selector</div>,
+		});
+
+		render(<Guarded roleId="r-1" />);
+
+		await waitFor(() => {
+			expect(screen.getByText('denied selector')).toBeInTheDocument();
+		});
+		expect(screen.queryByText('role r-1')).not.toBeInTheDocument();
+	});
+
+	it('sets a descriptive displayName', () => {
+		const Guarded = withAuthZ(Base, { checks: [readPerm] });
+		expect(Guarded.displayName).toBe('withAuthZ(Base)');
+	});
+});
+
+describe('withAuthZPage', () => {
+	it('renders the full-page denied screen when denied', async () => {
+		server.use(setupAuthzDeny(readPerm));
+		const Guarded = withAuthZPage(Base, { checks: [readPerm] });
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(
+				screen.getByText('Uh-oh! You are not authorized'),
+			).toBeInTheDocument();
+		});
+	});
+});
+
+describe('withAuthZContent', () => {
+	it('renders the denied callout when denied', async () => {
+		server.use(setupAuthzDeny(readPerm));
+		const Guarded = withAuthZContent(Base, { checks: [readPerm] });
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('read:role:*')).toBeInTheDocument();
+		});
+		expect(screen.queryByText('Base component')).not.toBeInTheDocument();
+	});
+});
+
+describe('withAuthZ router context', () => {
+	it('extracts checks from route params via router.params', async () => {
+		mockUseParams.mockReturnValue({ roleId: 'r-123' });
+
+		const rolePerm = buildPermission(
+			'read',
+			buildObjectString<'read'>('role', 'r-123'),
+		);
+		server.use(setupAuthzAllow(rolePerm));
+
+		const RoleView = (): JSX.Element => <div>role view</div>;
+		const Guarded = withAuthZ(RoleView, {
+			checks: (_props, router: RouterContext) => [
+				buildPermission(
+					'read',
+					buildObjectString<'read'>('role', router.params.roleId ?? ''),
+				),
+			],
+		});
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('role view')).toBeInTheDocument();
+		});
+	});
+
+	it('extracts checks from query params via router.searchParams', async () => {
+		mockUseLocation.mockReturnValue({
+			pathname: '/roles',
+			search: '?roleId=r-456',
+		});
+
+		const rolePerm = buildPermission(
+			'read',
+			buildObjectString<'read'>('role', 'r-456'),
+		);
+		server.use(setupAuthzAllow(rolePerm));
+
+		const RoleListView = (): JSX.Element => <div>role list view</div>;
+		const Guarded = withAuthZ(RoleListView, {
+			checks: (_props, router: RouterContext) => [
+				buildPermission(
+					'read',
+					buildObjectString<'read'>('role', router.searchParams.get('roleId') ?? ''),
+				),
+			],
+		});
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('role list view')).toBeInTheDocument();
+		});
+	});
+
+	it('extracts checks from pathname via router.matchPath', async () => {
+		mockUseLocation.mockReturnValue({
+			pathname: '/settings/roles/r-789/edit',
+			search: '',
+		});
+
+		const rolePerm = buildPermission(
+			'update',
+			buildObjectString<'update'>('role', 'r-789'),
+		);
+		server.use(setupAuthzAllow(rolePerm));
+
+		const EditRoleView = (): JSX.Element => <div>edit role</div>;
+		const Guarded = withAuthZ(EditRoleView, {
+			checks: (_props, router: RouterContext) => {
+				const match = router.matchPath<{ roleId: string }>(
+					'/settings/roles/:roleId/edit',
+				);
+				return match
+					? [
+							buildPermission(
+								'update',
+								buildObjectString<'update'>('role', match.roleId),
+							),
+						]
+					: [];
+			},
+		});
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('edit role')).toBeInTheDocument();
+		});
+	});
+
+	it('denies when router-derived permission is not allowed', async () => {
+		mockUseParams.mockReturnValue({ roleId: 'r-denied' });
+
+		const deniedPerm = buildPermission(
+			'read',
+			buildObjectString<'read'>('role', 'r-denied'),
+		);
+		server.use(setupAuthzDeny(deniedPerm));
+
+		const RoleView = (): JSX.Element => <div>role view</div>;
+		const Guarded = withAuthZ(RoleView, {
+			checks: (_props, router: RouterContext) => [
+				buildPermission(
+					'read',
+					buildObjectString<'read'>('role', router.params.roleId ?? ''),
+				),
+			],
+			fallback: <div>access denied</div>,
+		});
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('access denied')).toBeInTheDocument();
+		});
+		expect(screen.queryByText('role view')).not.toBeInTheDocument();
+	});
+});
+
+describe('withAuthZ router context stability', () => {
+	let renderCount = 0;
+
+	function RenderCounter(): JSX.Element {
+		renderCount += 1;
+		return <div data-testid="render-count">{renderCount}</div>;
+	}
+
+	beforeEach(() => {
+		renderCount = 0;
+		server.use(setupAuthzGrantByPrefix('read||__||role'));
+	});
+
+	it('does not re-render when useParams returns new object with same values', async () => {
+		mockUseParams.mockReturnValue({ roleId: 'r-1' });
+		mockUseLocation.mockReturnValue({ pathname: '/', search: '' });
+
+		const Guarded = withAuthZ(RenderCounter, {
+			checks: (_props, router: RouterContext) => [
+				buildPermission(
+					'read',
+					buildObjectString<'read'>('role', router.params.roleId ?? '*'),
+				),
+			],
+		});
+
+		const { rerender } = render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('render-count')).toBeInTheDocument();
+		});
+
+		const initialCount = renderCount;
+
+		// Return NEW object with SAME values — should not cause re-render
+		mockUseParams.mockReturnValue({ roleId: 'r-1' });
+		rerender(<Guarded />);
+
+		// Allow any pending effects to flush
+		await waitFor(() => {
+			expect(renderCount).toBe(initialCount);
+		});
+	});
+
+	it('does not re-render when useLocation returns new object with same pathname', async () => {
+		mockUseParams.mockReturnValue({});
+		mockUseLocation.mockReturnValue({ pathname: '/roles', search: '' });
+
+		const Guarded = withAuthZ(RenderCounter, {
+			checks: (_props, router: RouterContext) => {
+				const match = router.matchPath<{ id: string }>('/roles/:id');
+				return match
+					? [buildPermission('read', buildObjectString<'read'>('role', match.id))]
+					: [readPerm];
+			},
+		});
+
+		const { rerender } = render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('render-count')).toBeInTheDocument();
+		});
+
+		const initialCount = renderCount;
+
+		// Return NEW object with SAME pathname — should not cause re-render
+		mockUseLocation.mockReturnValue({ pathname: '/roles', search: '' });
+		rerender(<Guarded />);
+
+		await waitFor(() => {
+			expect(renderCount).toBe(initialCount);
+		});
+	});
+
+	it('does not re-render when useLocation returns new object with same search params', async () => {
+		mockUseParams.mockReturnValue({});
+		mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=keys' });
+
+		const Guarded = withAuthZ(RenderCounter, {
+			checks: (_props, router: RouterContext) => {
+				// Access searchParams to ensure it's part of the dependency chain
+				void router.searchParams.get('tab');
+				return [readPerm];
+			},
+		});
+
+		const { rerender } = render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('render-count')).toBeInTheDocument();
+		});
+
+		const initialCount = renderCount;
+
+		// Return NEW object with SAME search — should not cause re-render
+		mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=keys' });
+		rerender(<Guarded />);
+
+		await waitFor(() => {
+			expect(renderCount).toBe(initialCount);
+		});
+	});
+
+	it('re-renders when params values actually change', async () => {
+		mockUseParams.mockReturnValue({ roleId: 'r-1' });
+		mockUseLocation.mockReturnValue({ pathname: '/', search: '' });
+
+		const Guarded = withAuthZ(RenderCounter, {
+			checks: (_props, router: RouterContext) => [
+				buildPermission(
+					'read',
+					buildObjectString<'read'>('role', router.params.roleId ?? '*'),
+				),
+			],
+		});
+
+		const { unmount } = render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('render-count')).toBeInTheDocument();
+		});
+
+		const initialCount = renderCount;
+		unmount();
+
+		// Return DIFFERENT values — re-mount with new mock values
+		mockUseParams.mockReturnValue({ roleId: 'r-2' });
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(renderCount).toBeGreaterThan(initialCount);
+		});
+	});
+
+	it('re-renders when pathname actually changes', async () => {
+		mockUseParams.mockReturnValue({});
+		mockUseLocation.mockReturnValue({ pathname: '/roles', search: '' });
+
+		const Guarded = withAuthZ(RenderCounter, {
+			checks: [readPerm],
+		});
+
+		const { unmount } = render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('render-count')).toBeInTheDocument();
+		});
+
+		const initialCount = renderCount;
+		unmount();
+
+		// DIFFERENT pathname — re-mount with new mock values
+		mockUseLocation.mockReturnValue({ pathname: '/users', search: '' });
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(renderCount).toBeGreaterThan(initialCount);
+		});
+	});
+
+	it('re-renders when search params actually change', async () => {
+		mockUseParams.mockReturnValue({});
+		mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=keys' });
+
+		const Guarded = withAuthZ(RenderCounter, {
+			checks: [readPerm],
+		});
+
+		const { unmount } = render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('render-count')).toBeInTheDocument();
+		});
+
+		const initialCount = renderCount;
+		unmount();
+
+		// DIFFERENT search — re-mount with new mock values
+		mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=details' });
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(renderCount).toBeGreaterThan(initialCount);
+		});
+	});
+});
+
+describe('withAuthZContent cache invalidation', () => {
+	const testPerm = buildPermission(
+		'read',
+		'role:test-invalidation' as AuthZObject<'read'>,
+	);
+	// Callout displays permission as "relation:object" format
+	const displayedPerm = 'read:role:test-invalidation';
+
+	function ContentComponent(): JSX.Element {
+		return <div data-testid="protected-content">Protected Content</div>;
+	}
+
+	function InvalidationTrigger({
+		permission,
+		onReady,
+	}: {
+		permission: string;
+		onReady: (invalidate: () => Promise<void>) => void;
+	}): null {
+		const queryClient = useQueryClient();
+
+		React.useEffect(() => {
+			onReady(async () => {
+				// Reset query to initial state and trigger refetch (matches devtools behavior)
+				await queryClient.resetQueries(['authz', permission]);
+			});
+		}, [queryClient, permission, onReady]);
+
+		return null;
+	}
+
+	it('re-renders from allowed to denied when cache is invalidated', async () => {
+		let shouldGrant = true;
+		let invalidateFn: (() => Promise<void>) | null = null;
+
+		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, [shouldGrant])),
+				);
+			}),
+		);
+
+		const Guarded = withAuthZContent(ContentComponent, { checks: [testPerm] });
+
+		render(
+			<>
+				<Guarded />
+				<InvalidationTrigger
+					permission={testPerm}
+					onReady={(fn): void => {
+						invalidateFn = fn;
+					}}
+				/>
+			</>,
+		);
+
+		// Initially allowed - should show content
+		await waitFor(() => {
+			expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+		});
+
+		// Change server response to deny
+		shouldGrant = false;
+
+		// Invalidate cache
+		await act(async () => {
+			await invalidateFn?.();
+		});
+
+		// Should now show denied callout
+		await waitFor(() => {
+			expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
+		});
+
+		// Callout should show the denied permission
+		expect(screen.getByRole('alert')).toBeInTheDocument();
+		expect(screen.getByText(displayedPerm)).toBeInTheDocument();
+	});
+
+	it('re-renders from denied to allowed when cache is invalidated', async () => {
+		let shouldGrant = false;
+		let invalidateFn: (() => Promise<void>) | null = null;
+
+		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, [shouldGrant])),
+				);
+			}),
+		);
+
+		const Guarded = withAuthZContent(ContentComponent, { checks: [testPerm] });
+
+		render(
+			<>
+				<Guarded />
+				<InvalidationTrigger
+					permission={testPerm}
+					onReady={(fn): void => {
+						invalidateFn = fn;
+					}}
+				/>
+			</>,
+		);
+
+		// Initially denied - should show callout
+		await waitFor(() => {
+			expect(screen.getByRole('alert')).toBeInTheDocument();
+		});
+		expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
+
+		// Change server response to allow
+		shouldGrant = true;
+
+		// Invalidate cache
+		await act(async () => {
+			await invalidateFn?.();
+		});
+
+		// Should now show protected content
+		await waitFor(() => {
+			expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+		});
+
+		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,13 @@
+import { ComponentType } from 'react';
+import { AuthZGuard } from 'lib/authz/components/AuthZGuard/AuthZGuard';
+
+import { createAuthZHOC, WithAuthZOptions } from './withAuthZ.utils';
+
+export type { RouterContext, WithAuthZOptions } from './withAuthZ.utils';
+
+export function withAuthZ<P extends object>(
+	Component: ComponentType<P>,
+	opts: WithAuthZOptions<P>,
+): ComponentType<P> {
+	return createAuthZHOC(AuthZGuard, 'withAuthZ', Component, opts);
+}

frontend/src/lib/authz/components/withAuthZ/withAuthZ.utils.tsx

@@ -0,0 +1,108 @@
+import { ComponentType, ReactElement, createElement, useMemo } from 'react';
+import {
+	matchPath as reactRouterMatchPath,
+	useLocation,
+	useParams,
+} from 'react-router-dom';
+import type { AuthZGuardProps } from 'lib/authz/components/AuthZGuard/AuthZGuard';
+import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
+
+export type RouterContext = {
+	/**
+	 * Route params from useParams (e.g. `/roles/:roleId` → `{ roleId: "r-1" }`)
+	 */
+	params: Record<string, string | undefined>;
+	pathname: string;
+	/**
+	 * Query params as URLSearchParams (use `.get('key')` to read)
+	 */
+	searchParams: URLSearchParams;
+	/**
+	 * Extract params from pathname using a route pattern.
+	 * Returns null if pattern doesn't match.
+	 * @example router.matchPath<{ id: string }>('/edit/:id')?.id
+	 */
+	matchPath: <Params extends Record<string, string>>(
+		pattern: string,
+	) => Params | null;
+};
+
+export type WithAuthZOptions<P> = {
+	/**
+	 * Static checks, or a selector deriving them from props and router context.
+	 * Use router context to extract dynamic values from route params, pathname, or query params.
+	 * @example
+	 * // From route params
+	 * checks: (props, router) => [buildPermission('read', `role:${router.params.roleId}`)]
+	 * // From query params
+	 * checks: (props, router) => [buildPermission('read', `dashboard:${router.searchParams.get('id')}`)]
+	 * // From pathname matching
+	 * checks: (props, router) => {
+	 *   const match = router.matchPath<{ id: string }>('/edit/:id');
+	 *   return match ? [buildPermission('update', `role:${match.id}`)] : [];
+	 * }
+	 */
+	checks:
+		| BrandedPermission[]
+		| ((props: P, router: RouterContext) => BrandedPermission[]);
+	fallback?: AuthZGuardProps['fallback'];
+	fallbackOnLoading?: AuthZGuardProps['fallbackOnLoading'];
+	failOpenOnError?: AuthZGuardProps['onFailRenderContent'];
+};
+
+function useStableParams(): Record<string, string | undefined> {
+	const params = useParams();
+	const paramsJson = JSON.stringify(params);
+	return useMemo(() => JSON.parse(paramsJson), [paramsJson]);
+}
+
+function useRouterContext(): RouterContext {
+	const params = useStableParams();
+	const { pathname, search } = useLocation();
+	const searchParams = useMemo(() => new URLSearchParams(search), [search]);
+
+	return useMemo(
+		(): RouterContext => ({
+			params,
+			pathname,
+			searchParams,
+			matchPath: <Params extends Record<string, string>>(
+				pattern: string,
+			): Params | null => {
+				const match = reactRouterMatchPath<Params>(pathname, {
+					path: pattern,
+					exact: false,
+				});
+				return match?.params ?? null;
+			},
+		}),
+		[params, pathname, searchParams],
+	);
+}
+
+export function createAuthZHOC<P extends object>(
+	Guard: ComponentType<AuthZGuardProps>,
+	hocName: string,
+	Component: ComponentType<P>,
+	opts: WithAuthZOptions<P>,
+): ComponentType<P> {
+	const { checks, ...guardProps } = opts;
+
+	function Wrapped(props: P): ReactElement | null {
+		const router = useRouterContext();
+		const resolvedChecks =
+			typeof checks === 'function' ? checks(props, router) : checks;
+
+		return (
+			<Guard checks={resolvedChecks} {...guardProps}>
+				{createElement(Component, props)}
+			</Guard>
+		);
+	}
+
+	Wrapped.displayName = `${hocName}(${
+		Component.displayName || Component.name || 'Component'
+	})`;
+
+	return Wrapped;
+}

frontend/src/lib/authz/components/withAuthZ/withAuthZContent.tsx

@@ -0,0 +1,11 @@
+import { ComponentType } from 'react';
+import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
+
+import { createAuthZHOC, WithAuthZOptions } from './withAuthZ.utils';
+
+export function withAuthZContent<P extends object>(
+	Component: ComponentType<P>,
+	opts: WithAuthZOptions<P>,
+): ComponentType<P> {
+	return createAuthZHOC(AuthZGuardContent, 'withAuthZContent', Component, opts);
+}

frontend/src/lib/authz/components/withAuthZ/withAuthZPage.tsx

@@ -0,0 +1,11 @@
+import { ComponentType } from 'react';
+import { AuthZGuardPage } from 'lib/authz/components/AuthZGuard/AuthZGuardPage';
+
+import { createAuthZHOC, WithAuthZOptions } from './withAuthZ.utils';
+
+export function withAuthZPage<P extends object>(
+	Component: ComponentType<P>,
+	opts: WithAuthZOptions<P>,
+): ComponentType<P> {
+	return createAuthZHOC(AuthZGuardPage, 'withAuthZPage', Component, opts);
+}

frontend/src/lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator.module.css

@@ -1,28 +0,0 @@
-.container {
-	position: fixed;
-	top: 12px;
-	left: 50%;
-	transform: translateX(-50%);
-	z-index: 9998;
-	pointer-events: auto;
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.button {
-	box-shadow:
-		0 4px 12px rgb(0 0 0 / 15%),
-		0 0 0 1px rgb(0 0 0 / 5%);
-}
-
-.badge {
-	margin-left: 4px;
-}
-
-.closeButton {
-	border-radius: 4px;
-	box-shadow:
-		0 4px 12px rgb(0 0 0 / 15%),
-		0 0 0 1px rgb(0 0 0 / 5%);
-}

frontend/src/lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator.tsx

@@ -1,61 +0,0 @@
-import { X } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { useState } from 'react';
-import { createPortal } from 'react-dom';
-
-import { useAuthZDevStore } from '../useAuthZDevStore';
-
-import styles from './AuthZDevFloatingIndicator.module.css';
-
-export function AuthZDevFloatingIndicator(): JSX.Element | null {
-	const overrides = useAuthZDevStore((s) => s.overrides);
-	const isModalOpen = useAuthZDevStore((s) => s.isModalOpen);
-	const openModal = useAuthZDevStore((s) => s.openModal);
-	const [isDismissed, setIsDismissed] = useState(false);
-
-	const overrideCount = Object.keys(overrides).length;
-
-	if (overrideCount === 0 || isModalOpen || isDismissed) {
-		return null;
-	}
-
-	const handleOpen = (): void => {
-		setIsDismissed(false);
-		openModal();
-	};
-
-	const handleDismiss = (e: React.MouseEvent): void => {
-		e.stopPropagation();
-		setIsDismissed(true);
-	};
-
-	return createPortal(
-		<div className={styles.container}>
-			<Button
-				variant="solid"
-				color="warning"
-				size="sm"
-				onClick={handleOpen}
-				className={styles.button}
-				data-testid="authz-dev-floating-indicator"
-			>
-				AuthZ Overrides
-				<Badge color="warning" className={styles.badge}>
-					{overrideCount}
-				</Badge>
-			</Button>
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="sm"
-				onClick={handleDismiss}
-				className={styles.closeButton}
-				aria-label="Dismiss indicator"
-				data-testid="authz-dev-floating-dismiss"
-				prefix={<X />}
-			/>
-		</div>,
-		document.body,
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModal.module.css

@@ -1,140 +0,0 @@
-.modal {
-	--dialog-width: 640px;
-	--dialog-max-width: 92vw;
-	--dialog-max-height: 78vh;
-	--dialog-description-padding: var(--spacing-4) var(--spacing-4) 0px
-		var(--spacing-4);
-
-	[data-slot='dialog-description'],
-	[data-slot='dialog-header'] {
-		background-color: var(--l2-background);
-	}
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	max-height: calc(78vh - 80px);
-}
-
-.header {
-	display: flex;
-	flex-direction: column;
-	flex-shrink: 0;
-	gap: var(--spacing-4);
-	padding-bottom: var(--spacing-4);
-}
-
-.searchRow {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-
-	--input-background: var(--l3-background);
-	--input-hover-background: var(--l3-background);
-	--input-focus-background: var(--l3-background);
-	--input-border-color: var(--l3-border);
-	--input-hover-border-color: var(--l3-border);
-	--input-focus-border-color: var(--l3-border);
-
-	--select-trigger-background-color: var(--l3-background);
-	--select-trigger-hover-background: var(--l3-background);
-	--select-trigger-focus-background: var(--l3-background);
-	--select-trigger-border-color: var(--l3-border);
-
-	--select-content-background: var(--l3-background);
-	--select-item-highlight-background: var(--l3-background-hover);
-}
-
-.search {
-	flex: 1 1 auto;
-	min-width: 0;
-
-	--input-width: 100%;
-}
-
-.filter {
-	flex: 0 0 176px;
-	/* Normalize the library trigger height (2.25rem) to match the input. */
-	--select-trigger-height: 2rem;
-}
-
-.search > *,
-.filter > * {
-	box-sizing: border-box;
-}
-
-.searchIcon {
-	display: inline-flex;
-	color: var(--l3-foreground);
-}
-
-.actionsRow {
-	display: flex;
-	gap: var(--spacing-3);
-}
-
-.actionButton {
-	flex: 0 0 auto;
-	height: 2rem;
-}
-
-.list {
-	display: flex;
-	flex: 1 1 auto;
-	flex-direction: column;
-	gap: var(--spacing-6);
-	padding: var(--spacing-4) 0;
-	overflow-y: auto;
-}
-
-.section {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-}
-
-.sectionHeader {
-	display: flex;
-	align-items: baseline;
-	gap: var(--spacing-3);
-	padding: var(--spacing-3) var(--spacing-2);
-	margin: 0 0 var(--spacing-1);
-	border-bottom: 1px solid var(--l2-border);
-}
-
-.empty {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 160px;
-	padding: var(--spacing-16);
-}
-
-.footer {
-	display: flex;
-	flex-shrink: 0;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-	padding: var(--spacing-4) 0;
-	border-top: 1px solid var(--l2-border);
-}
-
-.hint {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--spacing-4);
-}
-
-.hintGroup {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-}
-
-.count {
-	flex: 0 0 auto;
-	white-space: nowrap;
-}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModal.tsx

@@ -1,240 +0,0 @@
-import { Search } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { Input } from '@signozhq/ui/input';
-import { Kbd } from '@signozhq/ui/kbd';
-import { SelectSimple } from '@signozhq/ui/select';
-import { Typography } from '@signozhq/ui/typography';
-import { useCallback, useRef } from 'react';
-
-import { useAuthZDevStore } from '../useAuthZDevStore';
-import { useAuthZQueryInvalidation } from '../useAuthZQueryInvalidation';
-
-import { PermissionRow } from './PermissionRow';
-import { useAuthZDevModalData } from './useAuthZDevModalData';
-import { useModalKeyboard } from './useModalKeyboard';
-
-import styles from './AuthZDevModal.module.css';
-
-export function AuthZDevModal(): JSX.Element | null {
-	const isModalOpen = useAuthZDevStore((s) => s.isModalOpen);
-	const closeModal = useAuthZDevStore((s) => s.closeModal);
-	const observed = useAuthZDevStore((s) => s.observed);
-	const overrides = useAuthZDevStore((s) => s.overrides);
-	const cycleOverride = useAuthZDevStore((s) => s.cycleOverride);
-	const setOverride = useAuthZDevStore((s) => s.setOverride);
-	const clearAllOverrides = useAuthZDevStore((s) => s.clearAllOverrides);
-	const grantAll = useAuthZDevStore((s) => s.grantAll);
-	const denyAll = useAuthZDevStore((s) => s.denyAll);
-
-	useAuthZQueryInvalidation(overrides);
-
-	const searchInputRef = useRef<HTMLInputElement>(null);
-
-	const {
-		search,
-		setSearch,
-		resourceFilter,
-		setResourceFilter,
-		observedList,
-		resourceFilterItems,
-		filteredPermissions,
-		groups,
-		orderedPermissions,
-		indexByPermission,
-		hasActiveFilter,
-		filteredOverrideCount,
-		overrideCount,
-	} = useAuthZDevModalData(observed, overrides);
-
-	const { selectedIndex, setSelectedIndex } = useModalKeyboard({
-		permissions: orderedPermissions,
-		overrides,
-		onCycle: cycleOverride,
-		onSetOverride: setOverride,
-		onClose: closeModal,
-		searchInputRef,
-	});
-
-	const handleOpenChange = useCallback(
-		(open: boolean): void => {
-			if (!open) {
-				closeModal();
-				setSelectedIndex(-1);
-			}
-		},
-		[closeModal, setSelectedIndex],
-	);
-
-	const handleGrantAll = useCallback((): void => {
-		grantAll(hasActiveFilter ? filteredPermissions : undefined);
-	}, [grantAll, hasActiveFilter, filteredPermissions]);
-
-	const handleDenyAll = useCallback((): void => {
-		denyAll(hasActiveFilter ? filteredPermissions : undefined);
-	}, [denyAll, hasActiveFilter, filteredPermissions]);
-
-	const handleClearAll = useCallback((): void => {
-		clearAllOverrides(hasActiveFilter ? filteredPermissions : undefined);
-	}, [clearAllOverrides, hasActiveFilter, filteredPermissions]);
-
-	const handleSelectIndex = useCallback(
-		(index: number) => (): void => {
-			setSelectedIndex(index);
-		},
-		[setSelectedIndex],
-	);
-
-	return (
-		<DialogWrapper
-			open={isModalOpen}
-			onOpenChange={handleOpenChange}
-			title="AuthZ DevTools"
-			subTitle="Force permission results locally without touching the backend."
-			className={styles.modal}
-			width="wide"
-		>
-			<div className={styles.content}>
-				<div className={styles.header}>
-					<div className={styles.searchRow}>
-						<div className={styles.search}>
-							<Input
-								ref={searchInputRef}
-								placeholder="Search permissions..."
-								value={search}
-								onChange={(e): void => setSearch(e.target.value)}
-								prefix={<Search size={14} className={styles.searchIcon} />}
-								aria-label="Search permissions"
-								data-testid="authz-dev-search"
-							/>
-						</div>
-						<div className={styles.filter}>
-							<SelectSimple
-								items={resourceFilterItems}
-								value={resourceFilter}
-								onChange={(value): void => setResourceFilter(value as string)}
-								testId="authz-dev-resource-filter"
-								withPortal={false}
-							/>
-						</div>
-					</div>
-					<div className={styles.actionsRow}>
-						<Button
-							className={styles.actionButton}
-							variant="outlined"
-							color="success"
-							size="sm"
-							onClick={handleGrantAll}
-							disabled={filteredPermissions.length === 0}
-							data-testid="authz-dev-grant-all"
-						>
-							{hasActiveFilter ? 'Grant filtered' : 'Grant all'}
-						</Button>
-						<Button
-							className={styles.actionButton}
-							variant="outlined"
-							color="error"
-							size="sm"
-							onClick={handleDenyAll}
-							disabled={filteredPermissions.length === 0}
-							data-testid="authz-dev-deny-all"
-						>
-							{hasActiveFilter ? 'Deny filtered' : 'Deny all'}
-						</Button>
-						<Button
-							className={styles.actionButton}
-							variant="outlined"
-							color="secondary"
-							size="sm"
-							onClick={handleClearAll}
-							disabled={
-								hasActiveFilter ? filteredOverrideCount === 0 : overrideCount === 0
-							}
-							data-testid="authz-dev-clear-all"
-						>
-							{hasActiveFilter
-								? `Clear filtered (${filteredOverrideCount})`
-								: `Clear all (${overrideCount})`}
-						</Button>
-					</div>
-				</div>
-				<div className={styles.list} data-testid="authz-dev-permission-list">
-					{orderedPermissions.length === 0 ? (
-						<div className={styles.empty}>
-							<Typography.Text align="center" color="muted">
-								{observedList.length === 0
-									? 'No permissions observed yet. Navigate the app to trigger permission checks.'
-									: 'No permissions match your search.'}
-							</Typography.Text>
-						</div>
-					) : (
-						groups.map((group) => (
-							<div key={group.resource} className={styles.section}>
-								<div className={styles.sectionHeader}>
-									<Typography.Text as="span" size="medium" weight="semibold">
-										{group.resource}
-									</Typography.Text>
-									<Typography.Text as="span" size="small" color="muted">
-										{group.items.length}
-									</Typography.Text>
-								</div>
-								{group.items.map((permission) => {
-									const index = indexByPermission.get(permission) ?? 0;
-									return (
-										<PermissionRow
-											key={permission}
-											observed={observed[permission]}
-											override={overrides[permission]}
-											isSelected={index === selectedIndex}
-											onSetOverride={setOverride}
-											onSelect={handleSelectIndex(index)}
-										/>
-									);
-								})}
-							</div>
-						))
-					)}
-				</div>
-				<div className={styles.footer}>
-					<div className={styles.hint}>
-						<span className={styles.hintGroup}>
-							<Kbd>↑</Kbd>
-							<Kbd>↓</Kbd>
-							<Typography.Text as="span" size="small" color="muted">
-								navigate
-							</Typography.Text>
-						</span>
-						<span className={styles.hintGroup}>
-							<Kbd>←</Kbd>
-							<Kbd>→</Kbd>
-							<Typography.Text as="span" size="small" color="muted">
-								mode
-							</Typography.Text>
-						</span>
-						<span className={styles.hintGroup}>
-							<Kbd>1-5</Kbd>
-							<Typography.Text as="span" size="small" color="muted">
-								set
-							</Typography.Text>
-						</span>
-						<span className={styles.hintGroup}>
-							<Kbd>/</Kbd>
-							<Typography.Text as="span" size="small" color="muted">
-								search
-							</Typography.Text>
-						</span>
-						<span className={styles.hintGroup}>
-							<Kbd>Esc</Kbd>
-							<Typography.Text as="span" size="small" color="muted">
-								close
-							</Typography.Text>
-						</span>
-					</div>
-					<Typography.Text size="small" color="muted" className={styles.count}>
-						{orderedPermissions.length} of {observedList.length} permissions
-					</Typography.Text>
-				</div>
-			</div>
-		</DialogWrapper>
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/OverrideControl.module.css

@@ -1,60 +0,0 @@
-.segmented {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-1);
-	padding: var(--spacing-1);
-	background: var(--l2-background);
-	border: 1px solid var(--l3-border);
-	border-radius: var(--radius-2);
-}
-
-.segment {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	height: 22px;
-	padding: 0 var(--spacing-3);
-	color: var(--l2-foreground);
-	background: transparent;
-	border: none;
-	border-radius: calc(var(--radius-2) - 1px);
-	cursor: pointer;
-	transition:
-		background 120ms ease,
-		color 120ms ease;
-}
-
-.segment:not(.segmentActive):hover {
-	color: var(--l2-foreground-hover);
-	background: var(--l2-background);
-}
-
-.segmentIcon {
-	display: inline-flex;
-	align-items: center;
-}
-
-.segment.optAuto {
-	color: var(--l1-foreground);
-	background: var(--l3-background);
-}
-
-.segment.optGranted {
-	color: var(--success-foreground);
-	background: color-mix(in srgb, var(--accent-forest) 22%, transparent);
-}
-
-.segment.optDenied {
-	color: var(--danger-foreground);
-	background: color-mix(in srgb, var(--accent-cherry) 22%, transparent);
-}
-
-.segment.optDelay {
-	color: var(--warning-foreground);
-	background: color-mix(in srgb, var(--accent-amber) 22%, transparent);
-}
-
-.segment.optError {
-	color: var(--danger-foreground);
-	background: color-mix(in srgb, var(--accent-cherry) 22%, transparent);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/OverrideControl.tsx

@@ -1,90 +0,0 @@
-import { Check, Clock, RotateCcw, X, Zap } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { OverrideState } from '../types';
-
-import styles from './OverrideControl.module.css';
-
-type OverrideControlProps = {
-	permission: BrandedPermission;
-	value: OverrideState;
-	onSelect: (permission: BrandedPermission, state: OverrideState) => void;
-};
-
-type OverrideOption = {
-	state: OverrideState;
-	label: string;
-	icon: React.ReactNode;
-	activeClassName: string;
-};
-
-const OVERRIDE_OPTIONS: OverrideOption[] = [
-	{
-		state: OverrideState.Reset,
-		label: 'Auto',
-		icon: <RotateCcw size={13} />,
-		activeClassName: styles.optAuto,
-	},
-	{
-		state: OverrideState.Granted,
-		label: 'Grant',
-		icon: <Check size={13} />,
-		activeClassName: styles.optGranted,
-	},
-	{
-		state: OverrideState.Denied,
-		label: 'Deny',
-		icon: <X size={13} />,
-		activeClassName: styles.optDenied,
-	},
-	{
-		state: OverrideState.Delay,
-		label: 'Delay',
-		icon: <Clock size={13} />,
-		activeClassName: styles.optDelay,
-	},
-	{
-		state: OverrideState.Error,
-		label: 'Error',
-		icon: <Zap size={13} />,
-		activeClassName: styles.optError,
-	},
-];
-
-export function OverrideControl({
-	permission,
-	value,
-	onSelect,
-}: OverrideControlProps): JSX.Element {
-	return (
-		<div className={styles.segmented}>
-			{OVERRIDE_OPTIONS.map((option) => {
-				const isActive = value === option.state;
-				return (
-					<button
-						key={option.state}
-						type="button"
-						aria-pressed={isActive}
-						aria-label={option.label}
-						title={option.label}
-						className={cx(styles.segment, {
-							[styles.segmentActive]: isActive,
-							[option.activeClassName]: isActive,
-						})}
-						onClick={(): void => onSelect(permission, option.state)}
-						data-testid={`override-${option.state}-${permission}`}
-					>
-						<span className={styles.segmentIcon}>{option.icon}</span>
-						{isActive && (
-							<Typography.Text as="span" size="small" weight="medium">
-								{option.label}
-							</Typography.Text>
-						)}
-					</button>
-				);
-			})}
-		</div>
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/PermissionRow.module.css

@@ -1,68 +0,0 @@
-.permissionRow {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-6);
-	padding: var(--spacing-2);
-	border: 1px solid transparent;
-	border-radius: var(--radius-2);
-	cursor: pointer;
-	transition:
-		background 120ms ease,
-		border-color 120ms ease;
-}
-
-.permissionRow:hover {
-	background: var(--l2-background-hover);
-}
-
-/* Overridden rows carry a faint full border in the override color. */
-.permissionRow.rowGranted {
-	border-color: color-mix(in srgb, var(--accent-forest) 45%, transparent);
-}
-
-.permissionRow.rowDenied {
-	border-color: color-mix(in srgb, var(--accent-cherry) 45%, transparent);
-}
-
-.permissionRow.rowDelay {
-	border-color: color-mix(in srgb, var(--accent-amber) 45%, transparent);
-}
-
-.permissionRow.rowError {
-	border-color: color-mix(in srgb, var(--accent-cherry) 45%, transparent);
-}
-
-/* Keyboard selection wins over the override border. */
-.permissionRow.isSelected {
-	border-color: var(--primary);
-}
-
-.permissionInfo {
-	display: flex;
-	flex: 1 1 auto;
-	align-items: baseline;
-	gap: var(--spacing-2);
-	min-width: 0;
-}
-
-.relation {
-	flex: 0 0 auto;
-	--typography-color: var(--accent-primary);
-}
-
-.separator {
-	flex: 0 0 auto;
-}
-
-.object {
-	flex: 0 1 auto;
-	min-width: 0;
-}
-
-.permissionMeta {
-	display: flex;
-	flex: 0 0 auto;
-	align-items: center;
-	gap: var(--spacing-5);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/PermissionRow.tsx

@@ -1,114 +0,0 @@
-import { Badge, BadgeColor } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import { memo, useCallback, useMemo } from 'react';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { parsePermission } from '../../hooks/useAuthZ/utils';
-import { OverrideState, type ObservedPermission } from '../types';
-
-import { OverrideControl } from './OverrideControl';
-
-import styles from './PermissionRow.module.css';
-
-type PermissionRowProps = {
-	observed: ObservedPermission;
-	override: OverrideState | undefined;
-	isSelected: boolean;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-	onSelect: () => void;
-};
-
-const ROW_OVERRIDE_CLASSES: Record<OverrideState, string | null> = {
-	[OverrideState.Reset]: null,
-	[OverrideState.Granted]: styles.rowGranted,
-	[OverrideState.Denied]: styles.rowDenied,
-	[OverrideState.Delay]: styles.rowDelay,
-	[OverrideState.Error]: styles.rowError,
-};
-
-export const PermissionRow = memo(function PermissionRow({
-	observed,
-	override,
-	isSelected,
-	onSetOverride,
-	onSelect,
-}: PermissionRowProps): JSX.Element {
-	const currentState = override ?? OverrideState.Reset;
-
-	const { relation, objectId } = useMemo(() => {
-		const parsed = parsePermission(observed.permission);
-		const separatorIndex = parsed.object.indexOf(':');
-		return {
-			relation: parsed.relation,
-			objectId:
-				separatorIndex === -1
-					? parsed.object
-					: parsed.object.slice(separatorIndex + 1),
-		};
-	}, [observed.permission]);
-
-	const handleSetOverride = useCallback(
-		(permission: BrandedPermission, state: OverrideState): void => {
-			onSelect();
-			onSetOverride(permission, state);
-		},
-		[onSelect, onSetOverride],
-	);
-
-	let apiColor: BadgeColor = 'secondary';
-	let apiLabel = 'API ?';
-	if (observed.apiValue === true) {
-		apiColor = 'success';
-		apiLabel = 'API ✓';
-	} else if (observed.apiValue === false) {
-		apiColor = 'error';
-		apiLabel = 'API ✗';
-	}
-
-	return (
-		<div
-			className={cx(styles.permissionRow, ROW_OVERRIDE_CLASSES[currentState], {
-				[styles.isSelected]: isSelected,
-			})}
-			data-testid={`permission-row-${observed.permission}`}
-		>
-			<div className={styles.permissionInfo}>
-				<Typography.Text
-					as="span"
-					size="small"
-					weight="medium"
-					className={styles.relation}
-				>
-					{relation}
-				</Typography.Text>
-				<Typography.Text
-					as="span"
-					size="small"
-					color="muted"
-					className={styles.separator}
-				>
-					:
-				</Typography.Text>
-				<Typography.Text
-					as="span"
-					size="small"
-					truncate={1}
-					className={styles.object}
-				>
-					{objectId}
-				</Typography.Text>
-			</div>
-			<div className={styles.permissionMeta}>
-				<Badge variant="outline" color={apiColor}>
-					{apiLabel}
-				</Badge>
-				<OverrideControl
-					permission={observed.permission}
-					value={currentState}
-					onSelect={handleSetOverride}
-				/>
-			</div>
-		</div>
-	);
-});

frontend/src/lib/authz/devtools/AuthZDevModal/useAuthZDevModalData.ts

@@ -1,172 +0,0 @@
-import { useMemo, useState } from 'react';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { parsePermission } from '../../hooks/useAuthZ/utils';
-import type { ObservedPermission, OverrideState } from '../types';
-
-type SelectItem = {
-	value: string;
-	label: string;
-};
-
-type PermissionGroup = {
-	resource: string;
-	items: BrandedPermission[];
-};
-
-type UseAuthZDevModalDataResult = {
-	search: string;
-	setSearch: (search: string) => void;
-	resourceFilter: string;
-	setResourceFilter: (filter: string) => void;
-	observedList: ObservedPermission[];
-	resourceFilterItems: SelectItem[];
-	filteredPermissions: BrandedPermission[];
-	groups: PermissionGroup[];
-	orderedPermissions: BrandedPermission[];
-	indexByPermission: Map<string, number>;
-	hasActiveFilter: boolean;
-	filteredOverrideCount: number;
-	overrideCount: number;
-};
-
-export function useAuthZDevModalData(
-	observed: Record<string, ObservedPermission>,
-	overrides: Record<string, OverrideState>,
-): UseAuthZDevModalDataResult {
-	const [search, setSearch] = useState('');
-	const [resourceFilter, setResourceFilter] = useState<string>('all');
-
-	const observedList = useMemo(
-		() =>
-			Object.values(observed).sort((a, b) =>
-				a.permission.localeCompare(b.permission),
-			),
-		[observed],
-	);
-
-	const resources = useMemo(() => {
-		const resourceSet = new Set<string>();
-		for (const obs of observedList) {
-			const { object } = parsePermission(obs.permission);
-			const resource = object.split(':')[0];
-			resourceSet.add(resource);
-		}
-		return Array.from(resourceSet).sort();
-	}, [observedList]);
-
-	const resourceFilterItems = useMemo<SelectItem[]>(
-		() => [
-			{ value: 'all', label: 'All resources' },
-			...resources.map((resource) => ({
-				value: resource,
-				label: resource,
-			})),
-		],
-		[resources],
-	);
-
-	const filteredPermissions = useMemo(() => {
-		let filtered = observedList;
-
-		if (search) {
-			const searchLower = search.toLowerCase();
-			filtered = filtered.filter((obs) =>
-				obs.permission.toLowerCase().includes(searchLower),
-			);
-		}
-
-		if (resourceFilter !== 'all') {
-			filtered = filtered.filter((obs) => {
-				const { object } = parsePermission(obs.permission);
-				const resource = object.split(':')[0];
-				return resource === resourceFilter;
-			});
-		}
-
-		return filtered.map((obs) => obs.permission);
-	}, [observedList, search, resourceFilter]);
-
-	const { groups, orderedPermissions } = useMemo(() => {
-		const groupMap = new Map<string, BrandedPermission[]>();
-		for (const permission of filteredPermissions) {
-			const { object } = parsePermission(permission);
-			const resource = object.split(':')[0] || 'other';
-			const bucket = groupMap.get(resource);
-			if (bucket) {
-				bucket.push(permission);
-			} else {
-				groupMap.set(resource, [permission]);
-			}
-		}
-
-		const sortItems = (items: BrandedPermission[]): BrandedPermission[] =>
-			[...items].sort((a, b) => {
-				const objA = parsePermission(a).object;
-				const objB = parsePermission(b).object;
-				const idA = objA.split(':')[1] ?? '';
-				const idB = objB.split(':')[1] ?? '';
-				const isWildcardA = idA === '*';
-				const isWildcardB = idB === '*';
-
-				// Wildcards first
-				if (isWildcardA && !isWildcardB) {
-					return -1;
-				}
-				if (!isWildcardA && isWildcardB) {
-					return 1;
-				}
-
-				// Then by object ID, then by full permission
-				const idCompare = idA.localeCompare(idB);
-				if (idCompare !== 0) {
-					return idCompare;
-				}
-				return a.localeCompare(b);
-			});
-
-		const sortedGroups = Array.from(groupMap, ([resource, items]) => ({
-			resource,
-			items: sortItems(items),
-		})).sort((a, b) => a.resource.localeCompare(b.resource));
-		return {
-			groups: sortedGroups,
-			orderedPermissions: sortedGroups.flatMap((group) => group.items),
-		};
-	}, [filteredPermissions]);
-
-	const indexByPermission = useMemo(() => {
-		const map = new Map<string, number>();
-		orderedPermissions.forEach((permission, index) => {
-			map.set(permission, index);
-		});
-		return map;
-	}, [orderedPermissions]);
-
-	const hasActiveFilter = search !== '' || resourceFilter !== 'all';
-
-	const filteredOverrideCount = useMemo(() => {
-		if (!hasActiveFilter) {
-			return Object.keys(overrides).length;
-		}
-		return filteredPermissions.filter((p) => p in overrides).length;
-	}, [hasActiveFilter, overrides, filteredPermissions]);
-
-	const overrideCount = Object.keys(overrides).length;
-
-	return {
-		search,
-		setSearch,
-		resourceFilter,
-		setResourceFilter,
-		observedList,
-		resourceFilterItems,
-		filteredPermissions,
-		groups,
-		orderedPermissions,
-		indexByPermission,
-		hasActiveFilter,
-		filteredOverrideCount,
-		overrideCount,
-	};
-}

frontend/src/lib/authz/devtools/AuthZDevModal/useModalKeyboard.ts

@@ -1,174 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { OverrideState, OVERRIDE_CYCLE } from '../types';
-
-type UseModalKeyboardOptions = {
-	permissions: BrandedPermission[];
-	overrides: Record<string, OverrideState>;
-	onCycle: (permission: BrandedPermission) => void;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-	onClose: () => void;
-	searchInputRef: React.RefObject<HTMLInputElement | null>;
-};
-
-type UseModalKeyboardResult = {
-	selectedIndex: number;
-	setSelectedIndex: (index: number) => void;
-};
-
-type KeyContext = {
-	permissions: BrandedPermission[];
-	overrides: Record<string, OverrideState>;
-	selectedIndex: number;
-	setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
-	onCycle: (permission: BrandedPermission) => void;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-};
-
-const ARROW_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);
-
-const NUMBER_KEY_INDEX: Record<string, number> = {
-	'1': 0,
-	'2': 1,
-	'3': 2,
-	'4': 3,
-	'5': 4,
-};
-
-function stepOverrideState(
-	current: OverrideState,
-	direction: number,
-): OverrideState {
-	const currentIndex = OVERRIDE_CYCLE.indexOf(current);
-	const nextIndex =
-		(currentIndex + direction + OVERRIDE_CYCLE.length) % OVERRIDE_CYCLE.length;
-	return OVERRIDE_CYCLE[nextIndex];
-}
-
-// Arrow keys stay active even while the search input is focused so the list can
-// be driven without leaving the search field.
-function handleArrowKey(key: string, ctx: KeyContext): void {
-	if (key === 'ArrowDown') {
-		ctx.setSelectedIndex((prev) =>
-			Math.min(prev + 1, ctx.permissions.length - 1),
-		);
-		return;
-	}
-	if (key === 'ArrowUp') {
-		ctx.setSelectedIndex((prev) => Math.max(prev - 1, 0));
-		return;
-	}
-	const selected = ctx.permissions[ctx.selectedIndex];
-	if (!selected) {
-		return;
-	}
-	const direction = key === 'ArrowLeft' ? -1 : 1;
-	ctx.onSetOverride(
-		selected,
-		stepOverrideState(ctx.overrides[selected] ?? OverrideState.Reset, direction),
-	);
-}
-
-// Number and space/enter shortcuts type into the search field, so they only run
-// when it is not focused. Returns whether the key was handled.
-function handleActionKey(key: string, ctx: KeyContext): boolean {
-	const selected = ctx.permissions[ctx.selectedIndex];
-	const numberIndex = NUMBER_KEY_INDEX[key];
-	if (numberIndex !== undefined) {
-		if (selected) {
-			ctx.onSetOverride(selected, OVERRIDE_CYCLE[numberIndex]);
-		}
-		return true;
-	}
-	if (key === ' ' || key === 'Enter') {
-		if (selected) {
-			ctx.onCycle(selected);
-		}
-		return true;
-	}
-	return false;
-}
-
-export function useModalKeyboard({
-	permissions,
-	overrides,
-	onCycle,
-	onSetOverride,
-	onClose,
-	searchInputRef,
-}: UseModalKeyboardOptions): UseModalKeyboardResult {
-	// Start with no selection (-1) to avoid accidental override changes from
-	// Enter keypress that opened the modal also triggering cycleOverride.
-	const [selectedIndex, setSelectedIndex] = useState(-1);
-
-	const handleKeyDown = useCallback(
-		(e: KeyboardEvent) => {
-			const isSearchFocused = document.activeElement === searchInputRef.current;
-
-			if (e.key === 'Escape') {
-				e.preventDefault();
-				onClose();
-				return;
-			}
-
-			if (e.key === '/') {
-				if (!isSearchFocused) {
-					e.preventDefault();
-					searchInputRef.current?.focus();
-				}
-				return;
-			}
-
-			const ctx: KeyContext = {
-				permissions,
-				overrides,
-				selectedIndex,
-				setSelectedIndex,
-				onCycle,
-				onSetOverride,
-			};
-
-			if (ARROW_KEYS.has(e.key)) {
-				e.preventDefault();
-				handleArrowKey(e.key, ctx);
-				return;
-			}
-
-			if (isSearchFocused) {
-				return;
-			}
-
-			if (handleActionKey(e.key, ctx)) {
-				e.preventDefault();
-			}
-		},
-		[
-			permissions,
-			overrides,
-			selectedIndex,
-			onCycle,
-			onSetOverride,
-			onClose,
-			searchInputRef,
-		],
-	);
-
-	useEffect((): (() => void) => {
-		window.addEventListener('keydown', handleKeyDown);
-		return (): void => {
-			window.removeEventListener('keydown', handleKeyDown);
-		};
-	}, [handleKeyDown]);
-
-	useEffect((): void => {
-		if (selectedIndex >= permissions.length && permissions.length > 0) {
-			setSelectedIndex(permissions.length - 1);
-		}
-	}, [permissions.length, selectedIndex]);
-
-	return {
-		selectedIndex,
-		setSelectedIndex,
-	};
-}

frontend/src/lib/authz/devtools/types.ts

@@ -1,46 +0,0 @@
-import type { BrandedPermission } from '../hooks/useAuthZ/types';
-
-export enum OverrideState {
-	Granted = 'granted',
-	Denied = 'denied',
-	Delay = 'delay',
-	Error = 'error',
-	Reset = 'reset',
-}
-
-export type ObservedPermission = {
-	permission: BrandedPermission;
-	apiValue: boolean | null;
-	lastSeen: number;
-};
-
-export type PermissionOverride = {
-	permission: BrandedPermission;
-	state: OverrideState;
-};
-
-export type AuthZDevStore = {
-	isModalOpen: boolean;
-	observed: Record<string, ObservedPermission>;
-	overrides: Record<string, OverrideState>;
-
-	openModal: () => void;
-	closeModal: () => void;
-	toggleModal: () => void;
-
-	registerObserved: (permission: BrandedPermission, apiValue: boolean) => void;
-	setOverride: (permission: BrandedPermission, state: OverrideState) => void;
-	clearOverride: (permission: BrandedPermission) => void;
-	clearAllOverrides: (permissions?: BrandedPermission[]) => void;
-	grantAll: (permissions?: BrandedPermission[]) => void;
-	denyAll: (permissions?: BrandedPermission[]) => void;
-	cycleOverride: (permission: BrandedPermission) => void;
-};
-
-export const OVERRIDE_CYCLE: OverrideState[] = [
-	OverrideState.Reset,
-	OverrideState.Granted,
-	OverrideState.Denied,
-	OverrideState.Delay,
-	OverrideState.Error,
-];

frontend/src/lib/authz/devtools/useAuthZDevStore.ts

@@ -1,137 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-import type { BrandedPermission } from '../hooks/useAuthZ/types';
-import { OverrideState, OVERRIDE_CYCLE, type AuthZDevStore } from './types';
-import { getScopedKey } from 'utils/storage';
-
-export const useAuthZDevStore = create<AuthZDevStore>()(
-	persist(
-		(set, get) => ({
-			isModalOpen: false,
-			observed: {},
-			overrides: {},
-
-			openModal: (): void => {
-				set({ isModalOpen: true });
-			},
-
-			closeModal: (): void => {
-				set({ isModalOpen: false });
-			},
-
-			toggleModal: (): void => {
-				set((state) => ({ isModalOpen: !state.isModalOpen }));
-			},
-
-			registerObserved: (
-				permission: BrandedPermission,
-				apiValue: boolean,
-			): void => {
-				set((state) => ({
-					observed: {
-						...state.observed,
-						[permission]: {
-							permission,
-							apiValue,
-							lastSeen: Date.now(),
-						},
-					},
-				}));
-			},
-
-			setOverride: (permission: BrandedPermission, state: OverrideState): void => {
-				if (state === OverrideState.Reset) {
-					get().clearOverride(permission);
-					return;
-				}
-				set((s) => ({
-					overrides: {
-						...s.overrides,
-						[permission]: state,
-					},
-				}));
-			},
-
-			clearOverride: (permission: BrandedPermission): void => {
-				set((state) => {
-					const { [permission]: _, ...rest } = state.overrides;
-					return { overrides: rest };
-				});
-			},
-
-			clearAllOverrides: (permissions?: BrandedPermission[]): void => {
-				if (permissions) {
-					set((state) => {
-						const newOverrides = { ...state.overrides };
-						for (const permission of permissions) {
-							delete newOverrides[permission];
-						}
-						return { overrides: newOverrides };
-					});
-				} else {
-					set({ overrides: {} });
-				}
-			},
-
-			grantAll: (permissions?: BrandedPermission[]): void => {
-				set((state) => {
-					const keys = permissions ?? Object.keys(state.observed);
-					const newOverrides: Record<string, OverrideState> = {
-						...state.overrides,
-					};
-					for (const key of keys) {
-						newOverrides[key] = OverrideState.Granted;
-					}
-					return { overrides: newOverrides };
-				});
-			},
-
-			denyAll: (permissions?: BrandedPermission[]): void => {
-				set((state) => {
-					const keys = permissions ?? Object.keys(state.observed);
-					const newOverrides: Record<string, OverrideState> = {
-						...state.overrides,
-					};
-					for (const key of keys) {
-						newOverrides[key] = OverrideState.Denied;
-					}
-					return { overrides: newOverrides };
-				});
-			},
-
-			cycleOverride: (permission: BrandedPermission): void => {
-				const currentOverride = get().overrides[permission] ?? OverrideState.Reset;
-				const currentIndex = OVERRIDE_CYCLE.indexOf(currentOverride);
-				const nextIndex = (currentIndex + 1) % OVERRIDE_CYCLE.length;
-				const nextState = OVERRIDE_CYCLE[nextIndex];
-				get().setOverride(permission, nextState);
-			},
-		}),
-		{
-			name: `@signoz/${getScopedKey('authz-dev-overrides')}`,
-			partialize: (state) => {
-				// Clear apiValue for permissions without active override (auto mode)
-				// since the API value can change between sessions
-				const observed: typeof state.observed = {};
-				for (const [key, obs] of Object.entries(state.observed)) {
-					observed[key] = {
-						...obs,
-						apiValue: key in state.overrides ? obs.apiValue : null,
-					};
-				}
-				return {
-					observed,
-					overrides: state.overrides,
-				};
-			},
-		},
-	),
-);
-
-export const openAuthZDevModal = (): void =>
-	useAuthZDevStore.getState().openModal();
-export const closeAuthZDevModal = (): void =>
-	useAuthZDevStore.getState().closeModal();
-export const toggleAuthZDevModal = (): void =>
-	useAuthZDevStore.getState().toggleModal();

frontend/src/lib/authz/devtools/useAuthZQueryInvalidation.ts

@@ -1,28 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useQueryClient } from 'react-query';
-
-import type { OverrideState } from './types';
-
-type Overrides = Record<string, OverrideState>;
-
-export function useAuthZQueryInvalidation(overrides: Overrides): void {
-	const queryClient = useQueryClient();
-	const prevOverridesRef = useRef<Overrides>(overrides);
-
-	useEffect(() => {
-		const prevOverrides = prevOverridesRef.current;
-		prevOverridesRef.current = overrides;
-
-		const allKeys = new Set([
-			...Object.keys(prevOverrides),
-			...Object.keys(overrides),
-		]);
-
-		for (const key of allKeys) {
-			if (prevOverrides[key] !== overrides[key]) {
-				// Reset query to initial state and trigger refetch for active observers
-				void queryClient.resetQueries(['authz', key]);
-			}
-		}
-	}, [overrides, queryClient]);
-}

frontend/src/lib/authz/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/lib/authz/hooks/useAuthZ/useAuthZ.authz.test.tsx

@@ -1,6 +1,5 @@
 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';
@@ -47,16 +46,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 +73,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 +474,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/lib/authz/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, MODE } from 'lib/env';
 
 import { AUTHZ_CACHE_TIME, SINGLE_FLIGHT_WAIT_TIME_MS } from './constants';
-import type {
+import {
 	AuthZCheckResponse,
 	BrandedPermission,
 	UseAuthZOptions,
@@ -19,59 +17,6 @@ import {
 	gettableTransactionToPermission,
 	permissionToTransactionDto,
 } from './utils';
-import { OverrideState } from '../../devtools/types';
-
-let devStoreRef:
-	| typeof import('../../devtools/useAuthZDevStore').useAuthZDevStore
-	| null = null;
-
-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 === OverrideState.Error) {
-		throw new Error(`[AuthZ DevTools] Simulated error for: ${permission}`);
-	}
-
-	if (override === OverrideState.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 === OverrideState.Granted) {
-		return { [permission]: { isGranted: true } };
-	}
-
-	if (override === OverrideState.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,50 +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,
-				// Only override retry in non-test mode to avoid interfering with test-utils QueryClient defaults
-				...(MODE !== 'test' && {
-					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();
 				},
 			};
 		}),
@@ -196,7 +107,6 @@ export function useAuthZ(
 		() => queryResults.some((q) => q.isLoading),
 		[queryResults],
 	);
-
 	const isFetching = useMemo(
 		() => queryResults.some((q) => q.isFetching),
 		[queryResults],
@@ -229,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/lib/authz/utils/README.md

@@ -0,0 +1,125 @@
+# AuthZ Test Utilities
+
+Helpers for testing permission-gated components.
+
+## File Naming
+
+AuthZ tests live in `*.authz.test.tsx` files alongside other test files:
+
+```
+ComponentName/
+├── ComponentName.tsx
+├── __tests__/
+│   ├── ComponentName.test.tsx        # functional tests
+│   └── ComponentName.authz.test.tsx  # permission tests
+```
+
+## Test Structure
+
+```tsx
+import { server } from 'mocks-server/server';
+import { setupAuthzAdmin, setupAuthzDenyAll } from 'lib/authz/utils/authz-test-utils';
+import { render, screen, waitFor } from 'tests/test-utils';
+
+describe('ComponentName - AuthZ', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+    server.resetHandlers();  // reset MSW handlers after each test
+  });
+
+  describe('permission denied', () => {
+    it('shows permission denied when read denied', async () => {
+      server.use(setupAuthzDenyAll());
+
+      render(<ComponentName />);
+
+      await expect(
+        screen.findByText(/not authorized/i),
+      ).resolves.toBeInTheDocument();
+    });
+  });
+
+  describe('permission granted', () => {
+    it('renders content when permitted', async () => {
+      server.use(setupAuthzAdmin());
+
+      render(<ComponentName />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+      });
+    });
+  });
+});
+```
+
+Key points:
+- Use `server.use()` at start of each test (not `beforeEach`) for explicit setup
+- Call `server.resetHandlers()` in `afterEach` to avoid test pollution
+- Use `waitFor` or `findBy*` queries since authz checks are async
+- Group tests by permission scenario: denied, granted, partial, loading
+
+## MSW Handlers
+
+Mock `/api/v1/authz/check` endpoint responses.
+
+```tsx
+import { server } from 'mocks-server/server';
+import {
+  setupAuthzAdmin,
+  setupAuthzDenyAll,
+  setupAuthzDeny,
+  setupAuthzAllow,
+  setupAuthzGrantByPrefix,
+} from 'lib/authz/utils/authz-test-utils';
+
+// Grant all permissions
+server.use(setupAuthzAdmin());
+
+// Deny all permissions
+server.use(setupAuthzDenyAll());
+
+// Grant all except specific permissions
+server.use(setupAuthzDeny(RoleCreatePermission, RoleDeletePermission));
+
+// Deny all except specific permissions
+server.use(setupAuthzAllow(RoleListPermission));
+
+// Grant by relation prefix (e.g., grant read/delete, deny update)
+server.use(setupAuthzGrantByPrefix('read', 'delete'));
+```
+
+## Custom Mock Response
+
+For fine-grained control over responses.
+
+```tsx
+import { rest } from 'msw';
+import { AUTHZ_CHECK_URL, authzMockResponse } from 'lib/authz/utils/authz-test-utils';
+
+server.use(
+  rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+    const payload = await req.json();
+    // [true, false] = first permission granted, second denied
+    return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true, false])));
+  }),
+);
+```
+
+## Testing Loading State
+
+Use `ctx.delay('infinite')` to hold response indefinitely:
+
+```tsx
+it('shows skeleton while checking permissions', () => {
+  server.use(
+    rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) =>
+      res(ctx.delay('infinite')),
+    ),
+  );
+
+  render(<ComponentName />);
+
+  expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+});
+```

frontend/src/lib/authz/utils/authz-test-utils.ts

@@ -104,6 +104,25 @@ export function setupAuthzAllow(
 	});
 }
 
+/** Grants permissions that start with any of the given prefixes. */
+export function setupAuthzGrantByPrefix(...prefixes: string[]): RestHandler {
+	return rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+		const payload = (await req.json()) as AuthtypesTransactionDTO[];
+		return res(
+			ctx.status(200),
+			ctx.json(
+				authzMockResponse(
+					payload,
+					payload.map((txn) => {
+						const perm = gettableTransactionToPermission(txn);
+						return prefixes.some((prefix) => perm.startsWith(prefix));
+					}),
+				),
+			),
+		);
+	});
+}
+
 export function buildLicense(
 	overrides?: Partial<LicenseResModel>,
 ): LicenseResModel {
@@ -149,8 +168,6 @@ export function mockUseAuthZGrantAll(
 		permissions: Object.fromEntries(
 			permissions.map((p) => [p, { isGranted: true }]),
 		) as UseAuthZResult['permissions'],
-		allowed: true,
-		deniedPermissions: [],
 		refetchPermissions: jest.fn(),
 	};
 }
@@ -166,8 +183,6 @@ export function mockUseAuthZDenyAll(
 		permissions: Object.fromEntries(
 			permissions.map((p) => [p, { isGranted: false }]),
 		) as UseAuthZResult['permissions'],
-		allowed: false,
-		deniedPermissions: permissions,
 		refetchPermissions: jest.fn(),
 	};
 }
@@ -178,23 +193,16 @@ export function mockUseAuthZGrantByPrefix(
 	permissions: BrandedPermission[],
 	options?: UseAuthZOptions,
 ) => UseAuthZResult {
-	return (permissions, _options) => {
-		const denied = permissions.filter(
-			(p) => !prefixes.some((prefix) => p.startsWith(prefix)),
-		);
-		return {
-			isLoading: false,
-			isFetching: false,
-			error: null,
-			permissions: Object.fromEntries(
-				permissions.map((p) => [
-					p,
-					{ isGranted: prefixes.some((prefix) => p.startsWith(prefix)) },
-				]),
-			) as UseAuthZResult['permissions'],
-			allowed: denied.length === 0,
-			deniedPermissions: denied,
-			refetchPermissions: jest.fn(),
-		};
-	};
+	return (permissions, _options) => ({
+		isLoading: false,
+		isFetching: false,
+		error: null,
+		permissions: Object.fromEntries(
+			permissions.map((p) => [
+				p,
+				{ isGranted: prefixes.some((prefix) => p.startsWith(prefix)) },
+			]),
+		) as UseAuthZResult['permissions'],
+		refetchPermissions: jest.fn(),
+	});
 }

frontend/src/lib/env.ts

@@ -1,3 +0,0 @@
-export const IS_DEV = import.meta.env.DEV;
-export const IS_PROD = import.meta.env.PROD;
-export const MODE = import.meta.env.MODE;

frontend/tsconfig.json

@@ -23,10 +23,9 @@
 		"resolveJsonModule": true,
 		"isolatedModules": true,
 		"noEmit": true,
+		"incremental": true,
+		"tsBuildInfoFile": "./node_modules/.cache/ts/tsconfig.tsbuildinfo",
 		"paths": {
-			"*": [
-				"./src/*"
-			],
 			"@constants/*": [
 				"./src/container/OnboardingContainer/constants/*"
 			],
@@ -35,7 +34,32 @@
 			],
 			"test-mocks/*": [
 				"./__mocks__/*"
-			]
+			],
+			"api": ["./src/api"],
+			"AppRoutes": ["./src/AppRoutes"],
+			"ReactI18": ["./src/ReactI18"],
+			"store": ["./src/store"],
+			"styles.scss": ["./src/styles.scss"],
+			"api/*": ["./src/api/*"],
+			"AppRoutes/*": ["./src/AppRoutes/*"],
+			"assets/*": ["./src/assets/*"],
+			"components/*": ["./src/components/*"],
+			"constants/*": ["./src/constants/*"],
+			"container/*": ["./src/container/*"],
+			"hooks/*": ["./src/hooks/*"],
+			"lib/*": ["./src/lib/*"],
+			"mocks-server/*": ["./src/mocks-server/*"],
+			"modules/*": ["./src/modules/*"],
+			"pages/*": ["./src/pages/*"],
+			"parser/*": ["./src/parser/*"],
+			"periscope/*": ["./src/periscope/*"],
+			"providers/*": ["./src/providers/*"],
+			"schemas/*": ["./src/schemas/*"],
+			"store/*": ["./src/store/*"],
+			"__tests__/*": ["./src/__tests__/*"],
+			"tests/*": ["./src/tests/*"],
+			"types/*": ["./src/types/*"],
+			"utils/*": ["./src/utils/*"]
 		},
 		"plugins": [
 			{
@@ -52,18 +76,11 @@
 	],
 	"include": [
 		"./src",
-		"./src/**/*.ts",
-		"src/**/*.tsx",
-		"src/**/*.d.ts",
-		"babel.config.cjs",
-		"./jest.config.ts",
 		"./__mocks__",
-		"./conf/default.conf",
-		"./public",
-		"./commitlint.config.ts",
-		"./vite.config.ts",
+		"./babel.config.cjs",
+		"./jest.config.ts",
 		"./jest.setup.ts",
-		"./tests/**.ts",
-		"./**/*.d.ts"
+		"./vite.config.ts",
+		"./commitlint.config.ts"
 	]
 }