test(create-edit-role): add tests for telemetry resource

cmd/authz.go

@@ -93,9 +93,13 @@ func runGenerateAuthz(_ context.Context) error {
 	registry := coretypes.NewRegistry()
 
 	allowedResources := map[string]bool{
-		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():           true,
-		coretypes.NewResourceRef(coretypes.ResourceRole).String():                     true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String(): true,
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String(): true,
 	}
 
 	allowedTypes := map[string]bool{}

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

@@ -151,7 +151,9 @@ describe('JsonEditor', () => {
 			);
 			await user.click(await within(readToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId('item-input-selector-input');
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
 			await user.type(input, 'test-key-123{enter}');
 
 			await switchToJsonMode();

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

@@ -239,7 +239,9 @@ describe('PermissionEditor', () => {
 				await within(createToggle).findByText('Only selected');
 			await user.click(onlySelectedBtn);
 
-			expect(screen.getByTestId('item-input-selector')).toBeInTheDocument();
+			expect(
+				screen.getByTestId('item-input-selector-factor-api-key-read'),
+			).toBeInTheDocument();
 		});
 
 		it('adds item when typed and Enter pressed', async () => {
@@ -254,7 +256,9 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId('item-input-selector-input');
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
 			await user.type(input, 'api-key-001{enter}');
 
 			await expect(screen.findByText('api-key-001')).resolves.toBeInTheDocument();
@@ -272,10 +276,14 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId('item-input-selector-input');
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
 			await user.type(input, 'api-key-002');
 
-			const addBtn = screen.getByTestId('item-input-selector-add-btn');
+			const addBtn = screen.getByTestId(
+				'item-input-selector-add-btn-factor-api-key-read',
+			);
 			await user.click(addBtn);
 
 			await expect(screen.findByText('api-key-002')).resolves.toBeInTheDocument();
@@ -293,7 +301,9 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId('item-input-selector-input');
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
 			await user.type(input, 'key-a, key-b, key-c{enter}');
 
 			await expect(screen.findByText('key-a')).resolves.toBeInTheDocument();
@@ -313,7 +323,9 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId('item-input-selector-input');
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
 			await user.type(input, 'key-x key-y key-z{enter}');
 
 			await expect(screen.findByText('key-x')).resolves.toBeInTheDocument();
@@ -333,7 +345,9 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId('item-input-selector-input');
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
 			await user.type(input, 'same-key{enter}');
 			await user.type(input, 'same-key{enter}');
 
@@ -353,17 +367,135 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId('item-input-selector-input');
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
 			await user.type(input, 'removable-key{enter}');
 
-			const removeBtn = screen.getByRole('button', {
-				name: /remove removable-key/i,
+			const badge = await screen.findByTestId('item-badge-factor-api-key-read-0');
+			const removeBtn = within(badge).getByRole('button', {
+				name: 'Remove removable-key',
 			});
 			await user.click(removeBtn);
 
 			expect(screen.queryByText('removable-key')).not.toBeInTheDocument();
 		});
 
+		it('names each badge close button after the item it removes', async () => {
+			const user = userEvent.setup();
+			await renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const readToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+			await user.click(await within(readToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
+			await user.type(input, 'key-one key-two{enter}');
+
+			const firstBadge = await screen.findByTestId(
+				'item-badge-factor-api-key-read-0',
+			);
+			const secondBadge = screen.getByTestId('item-badge-factor-api-key-read-1');
+
+			expect(
+				within(firstBadge).getByRole('button', { name: 'Remove key-one' }),
+			).toBeInTheDocument();
+			expect(
+				within(secondBadge).getByRole('button', { name: 'Remove key-two' }),
+			).toBeInTheDocument();
+		});
+
+		it('exposes the full item value as a title so truncated badges stay readable', async () => {
+			const user = userEvent.setup();
+			await renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const readToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+			await user.click(await within(readToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
+			await user.type(input, 'a-very-long-api-key-identifier-000001{enter}');
+
+			const badge = await screen.findByTestId('item-badge-factor-api-key-read-0');
+			expect(
+				within(badge).getByTitle('a-very-long-api-key-identifier-000001'),
+			).toBeInTheDocument();
+		});
+
+		it('moves focus to the previous badge when closed with the keyboard', async () => {
+			const user = userEvent.setup();
+			await renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const readToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+			await user.click(await within(readToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
+			await user.type(input, 'key-one key-two{enter}');
+
+			const secondBadge = await screen.findByTestId(
+				'item-badge-factor-api-key-read-1',
+			);
+			within(secondBadge).getByRole('button', { name: 'Remove key-two' }).focus();
+
+			await user.keyboard('{Enter}');
+
+			await waitFor(() => {
+				const firstBadge = screen.getByTestId('item-badge-factor-api-key-read-0');
+				expect(
+					within(firstBadge).getByRole('button', { name: 'Remove key-one' }),
+				).toHaveFocus();
+			});
+		});
+
+		it('does not steal focus when a badge is closed with the mouse', async () => {
+			const user = userEvent.setup();
+			await renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const readToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+			await user.click(await within(readToggle).findByText('Only selected'));
+
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
+			await user.type(input, 'key-one key-two{enter}');
+
+			const secondBadge = await screen.findByTestId(
+				'item-badge-factor-api-key-read-1',
+			);
+			await user.click(
+				within(secondBadge).getByRole('button', { name: 'Remove key-two' }),
+			);
+
+			await waitFor(() => {
+				expect(screen.queryByText('key-two')).not.toBeInTheDocument();
+			});
+
+			const firstBadge = screen.getByTestId('item-badge-factor-api-key-read-0');
+			expect(
+				within(firstBadge).getByRole('button', { name: 'Remove key-one' }),
+			).not.toHaveFocus();
+		});
+
 		it('shows Add button disabled when input is empty', async () => {
 			const user = userEvent.setup();
 			await renderPage();
@@ -376,7 +508,9 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const addBtn = screen.getByTestId('item-input-selector-add-btn');
+			const addBtn = screen.getByTestId(
+				'item-input-selector-add-btn-factor-api-key-read',
+			);
 			expect(addBtn).toBeDisabled();
 		});
 	});
@@ -394,7 +528,9 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId('item-input-selector-input');
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
 			await user.type(input, 'will-be-cleared{enter}');
 
 			await user.click(await within(createToggle).findByText('All'));
@@ -416,7 +552,9 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId('item-input-selector-input');
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
 			await user.type(input, 'to-be-cleared{enter}');
 
 			await user.click(await within(createToggle).findByText('All'));
@@ -443,7 +581,9 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId('item-input-selector-input');
+			const input = screen.getByTestId(
+				'item-input-selector-input-factor-api-key-read',
+			);
 			await user.type(input, 'preserved-key{enter}');
 
 			await user.click(await within(createToggle).findByText('None'));
@@ -455,7 +595,9 @@ describe('PermissionEditor', () => {
 				screen.findByText('preserved-key'),
 			).resolves.toBeInTheDocument();
 
-			expect(screen.getByTestId('item-input-selector')).toBeInTheDocument();
+			expect(
+				screen.getByTestId('item-input-selector-factor-api-key-read'),
+			).toBeInTheDocument();
 		});
 
 		it('does not show dialog when leaving Only Selected with no items', async () => {
@@ -630,4 +772,198 @@ describe('PermissionEditor', () => {
 			});
 		});
 	});
+
+	describe('TelemetrySelectorWizard', () => {
+		async function selectLogsOnlySelected(
+			user: ReturnType<typeof userEvent.setup>,
+		): Promise<void> {
+			await renderPage();
+			await expandAllCards();
+
+			const logsCard = screen.getByTestId('resource-card-logs');
+			const readToggle = within(logsCard).getByTestId('action-toggle-logs-read');
+			await user.click(await within(readToggle).findByText('Only selected'));
+		}
+
+		async function openLogsWizard(
+			user: ReturnType<typeof userEvent.setup>,
+		): Promise<void> {
+			await selectLogsOnlySelected(user);
+
+			await user.click(screen.getByTestId('telemetry-wizard-trigger-logs-read'));
+			await screen.findByTestId('telemetry-wizard-dialog-logs-read');
+		}
+
+		it('shows wizard button for telemetry resources', async () => {
+			const user = userEvent.setup();
+			await selectLogsOnlySelected(user);
+
+			expect(
+				screen.getByTestId('telemetry-wizard-trigger-logs-read'),
+			).toBeInTheDocument();
+		});
+
+		it('does not show wizard button for non-telemetry resources', async () => {
+			await renderPage();
+			await expandAllCards();
+
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const readToggle = within(apiKeyCard).getByTestId(
+				'action-toggle-factor-api-key-read',
+			);
+
+			const user = userEvent.setup();
+			await user.click(await within(readToggle).findByText('Only selected'));
+
+			expect(
+				screen.queryByTestId('telemetry-wizard-trigger-logs-read'),
+			).not.toBeInTheDocument();
+		});
+
+		it('opens wizard dialog when trigger clicked', async () => {
+			const user = userEvent.setup();
+			await selectLogsOnlySelected(user);
+
+			await user.click(screen.getByTestId('telemetry-wizard-trigger-logs-read'));
+
+			await expect(
+				screen.findByTestId('telemetry-wizard-dialog-logs-read'),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('adds selector with wildcard when scope is all', async () => {
+			const user = userEvent.setup();
+			await openLogsWizard(user);
+
+			await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
+
+			await expect(
+				screen.findByText('builder_query/*'),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('changes query type and adds appropriate selector', async () => {
+			const user = userEvent.setup();
+			await openLogsWizard(user);
+
+			await user.click(screen.getByTestId('wizard-query-type-select-logs-read'));
+			await user.click(await screen.findByText('PromQL'));
+
+			await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
+
+			await expect(screen.findByText('promql/*')).resolves.toBeInTheDocument();
+		});
+
+		it('allows key scoping for supported query types', async () => {
+			const user = userEvent.setup();
+			await openLogsWizard(user);
+
+			const byKeyRadio = screen.getByLabelText('By key');
+			expect(byKeyRadio).not.toBeDisabled();
+
+			await user.click(byKeyRadio);
+
+			const valueInput = screen.getByTestId('wizard-value-input-logs-read');
+			expect(valueInput).not.toBeDisabled();
+
+			await user.type(valueInput, 'signoz.workspace.key.id/123');
+			await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
+
+			await expect(
+				screen.findByText('builder_query/signoz.workspace.key.id/123'),
+			).resolves.toBeInTheDocument();
+		});
+
+		it('disables key scoping for unsupported query types', async () => {
+			const user = userEvent.setup();
+			await openLogsWizard(user);
+
+			await user.click(screen.getByTestId('wizard-query-type-select-logs-read'));
+			await user.click(await screen.findByText('PromQL'));
+
+			const byKeyRadio = screen.getByLabelText('By key');
+			expect(byKeyRadio).toBeDisabled();
+		});
+
+		it('closes dialog after adding selector', async () => {
+			const user = userEvent.setup();
+			await openLogsWizard(user);
+
+			await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
+
+			await waitFor(() => {
+				expect(
+					screen.queryByTestId('telemetry-wizard-dialog-logs-read'),
+				).not.toBeInTheDocument();
+			});
+		});
+
+		it('does not add duplicate selectors', async () => {
+			const user = userEvent.setup();
+			await openLogsWizard(user);
+			await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
+
+			await user.click(screen.getByTestId('telemetry-wizard-trigger-logs-read'));
+			await screen.findByTestId('telemetry-wizard-dialog-logs-read');
+			await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
+
+			const badges = screen.getAllByText('builder_query/*');
+			expect(badges).toHaveLength(1);
+		});
+
+		it('resets wizard state when dialog is closed and reopened', async () => {
+			const user = userEvent.setup();
+			await openLogsWizard(user);
+
+			await user.click(screen.getByTestId('wizard-query-type-select-logs-read'));
+			await user.click(await screen.findByText('PromQL'));
+
+			await user.click(screen.getByRole('button', { name: /cancel/i }));
+
+			await waitFor(() => {
+				expect(
+					screen.queryByTestId('telemetry-wizard-dialog-logs-read'),
+				).not.toBeInTheDocument();
+			});
+
+			await user.click(screen.getByTestId('telemetry-wizard-trigger-logs-read'));
+			const selectTrigger = await screen.findByTestId(
+				'wizard-query-type-select-logs-read',
+			);
+
+			expect(within(selectTrigger).getByText('Builder Query')).toBeInTheDocument();
+		});
+
+		it('says the grant is unscoped when a key-scopable query type is set to All', async () => {
+			const user = userEvent.setup();
+			await openLogsWizard(user);
+
+			expect(screen.getByTestId('wizard-value-hint-logs-read')).toHaveTextContent(
+				"Scope is set to All, so this grant covers every query of this type. Switch to 'By key' to restrict it to one key.",
+			);
+		});
+
+		it('names the query type when that type cannot be key-scoped', async () => {
+			const user = userEvent.setup();
+			await openLogsWizard(user);
+
+			await user.click(screen.getByTestId('wizard-query-type-select-logs-read'));
+			await user.click(await screen.findByText('PromQL'));
+
+			expect(screen.getByTestId('wizard-value-hint-logs-read')).toHaveTextContent(
+				'PromQL cannot be key-scoped, so this grant always covers every query of this type.',
+			);
+		});
+
+		it('shows the key/value example once scoping by key', async () => {
+			const user = userEvent.setup();
+			await openLogsWizard(user);
+
+			await user.click(screen.getByLabelText('By key'));
+
+			expect(screen.getByTestId('wizard-value-hint-logs-read')).toHaveTextContent(
+				'Eg: signoz.workspace.key.id/123',
+			);
+		});
+	});
 });

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

@@ -7,6 +7,7 @@ import { Typography } from '@signozhq/ui/typography';
 import { PermissionScope } from '../../types';
 import { getResourcePanel } from '../../permissions.config';
 import ItemInputSelector from './ItemInputSelector';
+import TelemetrySelectorWizard from './TelemetrySelectorWizard';
 
 import styles from './ActionToggle.module.scss';
 import { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
@@ -39,10 +40,13 @@ function ActionToggle({
 	onSelectedIdsChange,
 	hasError = false,
 }: ActionToggleProps): JSX.Element {
+	const panel = getResourcePanel(resource);
+
 	const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
 	const [pendingScope, setPendingScope] = useState<PermissionScope | null>(null);
 
 	const displayLabel = getActionLabel(action);
+	const selectorTestId = `${resource}-${action}`;
 
 	const scopeItems: Array<{ value: PermissionScope; label: string }> =
 		useMemo(() => {
@@ -121,11 +125,24 @@ function ActionToggle({
 						<Divider />
 
 						<ItemInputSelector
-							placeholder={getResourcePanel(resource).selectorPlaceholder}
+							placeholder={panel.selectorPlaceholder}
 							selectedIds={selectedIds}
 							onChange={onSelectedIdsChange}
-							docsAnchor={getResourcePanel(resource).docsAnchor}
+							testId={selectorTestId}
+							docsAnchor={panel.docsAnchor}
 							hasError={hasError}
+							prefixElement={
+								panel.selectorType === 'telemetryBuilder' ? (
+									<TelemetrySelectorWizard
+										testId={selectorTestId}
+										onAdd={(selector): void => {
+											if (!selectedIds.includes(selector)) {
+												onSelectedIdsChange([...selectedIds, selector]);
+											}
+										}}
+									/>
+								) : null
+							}
 						/>
 					</div>
 				)}

frontend/src/container/RolesSettings/CreateEditRolePage/components/ItemInputSelector.module.scss

@@ -4,9 +4,10 @@
 	gap: var(--spacing-4);
 	background: var(--l1-background);
 	border: 1px solid var(--l1-border);
-	border-radius: 4px;
+	border-radius: var(--radius-2);
 	padding: var(--spacing-4);
 
+	--input-prefix-padding: var(--spacing-2);
 	--input-suffix-padding: var(--spacing-2);
 }
 
@@ -41,6 +42,11 @@
 	overflow-y: auto;
 }
 
+.itemInputSelectorBadge {
+	--badge-border-radius: 4px;
+	--badge-hover-background: var(--l2-background) !important;
+}
+
 .itemInputSelectorInfoIcon {
 	flex-shrink: 0;
 	color: var(--l2-foreground);
@@ -51,55 +57,7 @@
 	}
 }
 
-.itemInputSelectorBadge {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	max-width: 140px;
-	padding: 2px 4px 2px 6px;
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-}
-
-.itemInputSelectorBadgeLabel {
-	flex: 1;
-	min-width: 0;
-}
-
-.itemInputSelectorBadgeRemove {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 14px;
-	height: 14px;
-	padding: 0;
-	background: transparent;
-	border: none;
-	border-radius: 2px;
-	color: var(--l2-foreground);
-	cursor: pointer;
-	transition:
-		background 0.15s ease,
-		color 0.15s ease;
-
-	&:hover {
-		background: var(--l1-background);
-		color: var(--l1-foreground);
-	}
-}
-
 .itemInputSelectorHint {
 	margin: 0;
 	color: var(--l2-foreground);
-
-	a {
-		color: var(--primary);
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
 }

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

@@ -1,5 +1,6 @@
 import { useCallback, useRef, useState } from 'react';
-import { Info, Plus, X } from '@signozhq/icons';
+import { Info, Plus } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
@@ -15,8 +16,10 @@ export interface ItemInputSelectorProps {
 	placeholder: string;
 	selectedIds: string[];
 	onChange: (ids: string[]) => void;
+	testId: string;
 	docsAnchor?: string;
 	hasError?: boolean;
+	prefixElement?: React.ReactNode;
 }
 
 function parseInputValues(input: string): string[] {
@@ -30,11 +33,13 @@ function ItemInputSelector({
 	placeholder,
 	selectedIds,
 	onChange,
+	testId,
 	docsAnchor = 'role',
 	hasError = false,
+	prefixElement,
 }: ItemInputSelectorProps): JSX.Element {
 	const [inputValue, setInputValue] = useState('');
-	const footerRef = useRef<HTMLDivElement>(null);
+	const badgesRef = useRef<HTMLDivElement>(null);
 
 	const addValues = useCallback(
 		(input: string): void => {
@@ -87,26 +92,24 @@ function ItemInputSelector({
 		[selectedIds, onChange],
 	);
 
-	const handleBadgeKeyDown = useCallback(
-		(
-			e: React.KeyboardEvent<HTMLButtonElement>,
-			itemId: string,
-			index: number,
-		): void => {
-			if (e.key !== 'Enter' && e.key !== ' ') {
-				return;
-			}
-
+	const handleBadgeClose = useCallback(
+		(e: React.MouseEvent, itemId: string, index: number): void => {
 			e.preventDefault();
 			handleRemove(itemId);
 
+			// Activating a button via Enter/Space reports detail 0;
+			// a real click reports 1 or more
+			// Only trigger focus when using keyboard
+			const isKeyboardActivation = e.detail === 0;
+
+			if (!isKeyboardActivation) {
+				return;
+			}
+
 			const targetIndex = index > 0 ? index - 1 : 0;
 			requestAnimationFrame(() => {
-				const buttons = footerRef.current?.querySelectorAll('button');
-				const targetButton = buttons?.[targetIndex] as
-					| HTMLButtonElement
-					| undefined;
-				targetButton?.focus();
+				const buttons = badgesRef.current?.querySelectorAll('button');
+				buttons?.[targetIndex]?.focus();
 			});
 		},
 		[handleRemove],
@@ -120,7 +123,7 @@ function ItemInputSelector({
 				styles.itemInputSelector,
 				showError ? styles.itemInputSelectorError : '',
 			)}
-			data-testid="item-input-selector"
+			data-testid={`item-input-selector-${testId}`}
 		>
 			<Input
 				placeholder={placeholder}
@@ -128,14 +131,15 @@ function ItemInputSelector({
 				onChange={handleInputChange}
 				onKeyDown={handleInputKeyDown}
 				onBlur={handleInputBlur}
-				data-testid="item-input-selector-input"
+				data-testid={`item-input-selector-input-${testId}`}
+				prefix={prefixElement}
 				suffix={
 					<Button
 						variant="solid"
 						size="sm"
 						onClick={handleAddClick}
 						disabled={!inputValue.trim()}
-						data-testid="item-input-selector-add-btn"
+						data-testid={`item-input-selector-add-btn-${testId}`}
 					>
 						<Plus size={14} />
 						Add
@@ -144,28 +148,22 @@ function ItemInputSelector({
 			/>
 
 			{selectedIds.length > 0 ? (
-				<div ref={footerRef} className={styles.itemInputSelectorFooter}>
-					<div className={styles.itemInputSelectorBadges}>
+				<div className={styles.itemInputSelectorFooter}>
+					<div ref={badgesRef} className={styles.itemInputSelectorBadges}>
 						{selectedIds.map((id, index) => (
-							<span key={id} className={styles.itemInputSelectorBadge} title={id}>
-								<Typography
-									as="span"
-									size="small"
-									truncate={1}
-									className={styles.itemInputSelectorBadgeLabel}
-								>
+							<Badge
+								key={id}
+								color="secondary"
+								className={styles.itemInputSelectorBadge}
+								testId={`item-badge-${testId}-${index}`}
+								closable
+								closeAriaLabel={`Remove ${id}`}
+								onClose={(e): void => handleBadgeClose(e, id, index)}
+							>
+								<Typography as="span" size="small" truncate={1} title={id}>
 									{id}
 								</Typography>
-								<button
-									type="button"
-									className={styles.itemInputSelectorBadgeRemove}
-									onClick={(): void => handleRemove(id)}
-									onKeyDown={(e): void => handleBadgeKeyDown(e, id, index)}
-									aria-label={`Remove ${id}`}
-								>
-									<X size={10} />
-								</button>
-							</span>
+							</Badge>
 						))}
 					</div>
 					<TooltipSimple

frontend/src/container/RolesSettings/CreateEditRolePage/components/TelemetrySelectorWizard.module.scss

@@ -0,0 +1,64 @@
+.wizardDialog {
+	border-color: var(--l1-border);
+
+	--select-trigger-background-color: var(--l3-background);
+	--select-trigger-border-color: var(--l3-background);
+	--select-content-background: var(--l3-background);
+	--select-item-highlight-background: var(--l3-background-hover);
+	--select-trigger-outline-width: 1px;
+	--select-trigger-outline-offset: 0px;
+
+	--input-background: var(--l3-background);
+	--input-hover-background: var(--l3-background);
+	--input-focus-background: var(--l3-background);
+	--input-disabled-background: var(--l3-background);
+	--input-border-color: var(--l3-border);
+	--input-hover-border-color: var(--l3-border);
+	--input-focus-border-color: var(--l3-border);
+
+	outline: none;
+
+	& > div {
+		background-color: var(--l2-background);
+	}
+}
+
+.wizardBody {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+}
+
+.wizardField {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+}
+
+.wizardRadioGroup {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3);
+}
+
+.wizardRadioItem {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.selectContent {
+	z-index: 10;
+	background-color: var(--l3-background);
+}
+
+.selectItemContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+	align-items: flex-start;
+}
+
+.queryTypeHint {
+	color: var(--muted-foreground);
+}

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

@@ -0,0 +1,250 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Wand } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+import { Input } from '@signozhq/ui/input';
+import {
+	RadioGroup,
+	RadioGroupItem,
+	RadioGroupLabel,
+} from '@signozhq/ui/radio-group';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@signozhq/ui/select';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+
+import {
+	QUERY_TYPES,
+	QueryTypeId,
+	ScopeMode,
+} from './TelemetrySelectorWizard.types';
+import styles from './TelemetrySelectorWizard.module.scss';
+
+interface TelemetrySelectorWizardProps {
+	onAdd: (selector: string) => void;
+	testId: string;
+}
+
+function TelemetrySelectorWizard({
+	onAdd,
+	testId,
+}: TelemetrySelectorWizardProps): JSX.Element {
+	const [open, setOpen] = useState(false);
+	const [scopeMode, setScopeMode] = useState<ScopeMode>('all');
+	const [queryType, setQueryType] = useState<QueryTypeId>('builder_query');
+	const [keyValue, setKeyValue] = useState('');
+
+	const selectedQueryType = useMemo(
+		() => QUERY_TYPES.find((qt) => qt.id === queryType),
+		[queryType],
+	);
+
+	const canAdd = useMemo(() => {
+		if (scopeMode === 'all') {
+			return true;
+		}
+		return keyValue.trim().length > 0;
+	}, [scopeMode, keyValue]);
+
+	const handleScopeModeChange = useCallback((value: string): void => {
+		setScopeMode(value as ScopeMode);
+		if (value === 'all') {
+			setKeyValue('');
+		}
+	}, []);
+
+	const handleQueryTypeChange = useCallback((value: string | string[]): void => {
+		const selected = Array.isArray(value) ? value[0] : value;
+		setQueryType(selected as QueryTypeId);
+		if (!QUERY_TYPES.find((qt) => qt.id === selected)?.supportsKeyScoping) {
+			setScopeMode('all');
+			setKeyValue('');
+		}
+	}, []);
+
+	const handleKeyValueChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>): void => {
+			setKeyValue(e.target.value);
+		},
+		[],
+	);
+
+	const handleAdd = useCallback((): void => {
+		let selector: string;
+
+		if (scopeMode === 'all') {
+			selector = `${queryType}/*`;
+		} else {
+			selector = `${queryType}/${keyValue.trim()}`;
+		}
+
+		onAdd(selector);
+		setKeyValue('');
+		setOpen(false);
+	}, [scopeMode, queryType, keyValue, onAdd]);
+
+	const handleOpenChange = useCallback((nextOpen: boolean): void => {
+		setOpen(nextOpen);
+		if (!nextOpen) {
+			setScopeMode('all');
+			setQueryType('builder_query');
+			setKeyValue('');
+		}
+	}, []);
+
+	const supportsKeyScoping = selectedQueryType?.supportsKeyScoping ?? false;
+
+	const valueHint = useMemo(() => {
+		if (scopeMode === 'byKey') {
+			return 'Eg: signoz.workspace.key.id/123';
+		}
+		if (supportsKeyScoping) {
+			return "Scope is set to All, so this grant covers every query of this type. Switch to 'By key' to restrict it to one key.";
+		}
+		return `${
+			selectedQueryType?.label ?? 'This query type'
+		} cannot be key-scoped, so this grant always covers every query of this type.`;
+	}, [scopeMode, supportsKeyScoping, selectedQueryType]);
+
+	const footer = (
+		<>
+			<Button
+				variant="ghost"
+				color="secondary"
+				onClick={(): void => handleOpenChange(false)}
+			>
+				Cancel
+			</Button>
+			<Button
+				variant="solid"
+				onClick={handleAdd}
+				disabled={!canAdd}
+				data-testid={`wizard-add-btn-${testId}`}
+			>
+				Add Selector
+			</Button>
+		</>
+	);
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={handleOpenChange}
+			title="Add Telemetry Selector"
+			width="narrow"
+			testId={`telemetry-wizard-dialog-${testId}`}
+			trigger={
+				<Button
+					variant="solid"
+					size="sm"
+					data-testid={`telemetry-wizard-trigger-${testId}`}
+				>
+					<Wand size={14} />
+					Wizard
+				</Button>
+			}
+			footer={footer}
+			className={styles.wizardDialog}
+		>
+			<div className={styles.wizardBody}>
+				<div className={styles.wizardField}>
+					<Typography as="label" weight="medium">
+						Query Type
+					</Typography>
+					<Select value={queryType} onChange={handleQueryTypeChange}>
+						<SelectTrigger data-testid={`wizard-query-type-select-${testId}`}>
+							<SelectValue>{selectedQueryType?.label}</SelectValue>
+						</SelectTrigger>
+						<SelectContent withPortal={false} className={styles.selectContent}>
+							{QUERY_TYPES.map((qt) => (
+								<SelectItem key={qt.id} value={qt.id}>
+									<div className={styles.selectItemContent}>
+										<span>{qt.label}</span>
+										<Typography size="small">{qt.description}</Typography>
+									</div>
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+					{selectedQueryType && (
+						<Typography size="small" className={styles.queryTypeHint}>
+							{selectedQueryType.description}
+						</Typography>
+					)}
+				</div>
+
+				<div className={styles.wizardField}>
+					<Typography as="label" weight="medium">
+						Scope
+					</Typography>
+					<RadioGroup
+						value={scopeMode}
+						onChange={handleScopeModeChange}
+						className={styles.wizardRadioGroup}
+						data-testid={`wizard-scope-radio-${testId}`}
+					>
+						<div className={styles.wizardRadioItem}>
+							<RadioGroupItem value="all" id="scope-all" />
+							<RadioGroupLabel htmlFor="scope-all">All (*)</RadioGroupLabel>
+						</div>
+						{supportsKeyScoping ? (
+							<div className={styles.wizardRadioItem}>
+								<RadioGroupItem value="byKey" id="scope-by-key" />
+								<RadioGroupLabel htmlFor="scope-by-key">By key</RadioGroupLabel>
+							</div>
+						) : (
+							<TooltipSimple
+								title="This query type does not support key scoping"
+								withPortal={false}
+								side="left"
+								arrow
+							>
+								<div className={styles.wizardRadioItem}>
+									<RadioGroupItem value="byKey" id="scope-by-key" disabled />
+									<RadioGroupLabel htmlFor="scope-by-key" data-disabled>
+										By key
+									</RadioGroupLabel>
+								</div>
+							</TooltipSimple>
+						)}
+					</RadioGroup>
+				</div>
+
+				<div className={styles.wizardField}>
+					<Typography as="label" weight="medium">
+						Value
+					</Typography>
+					{scopeMode === 'all' ? (
+						<Input value="*" disabled data-testid={`wizard-value-input-${testId}`} />
+					) : (
+						<Input
+							placeholder="Enter <key>/<value>"
+							value={keyValue}
+							onChange={handleKeyValueChange}
+							onKeyDown={(e): void => {
+								if (e.key === 'Enter' && canAdd) {
+									handleAdd();
+								}
+							}}
+							data-testid={`wizard-value-input-${testId}`}
+						/>
+					)}
+					<Typography.Text
+						size="small"
+						color="muted"
+						testId={`wizard-value-hint-${testId}`}
+					>
+						{valueHint}
+					</Typography.Text>
+				</div>
+			</div>
+		</DialogWrapper>
+	);
+}
+
+export default TelemetrySelectorWizard;

frontend/src/container/RolesSettings/CreateEditRolePage/components/TelemetrySelectorWizard.types.ts

@@ -0,0 +1,46 @@
+// intentionally omitting few query types
+// from pkg/types/querybuildertypes/querybuildertypesv5/query_type.go
+export type QueryTypeId =
+	| 'builder_query'
+	| 'builder_sub_query'
+	| 'promql'
+	| 'clickhouse_sql';
+
+export interface QueryTypeOption {
+	id: QueryTypeId;
+	label: string;
+	description: string;
+	supportsKeyScoping: boolean;
+}
+
+export const QUERY_TYPES: readonly QueryTypeOption[] = [
+	{
+		id: 'builder_query',
+		label: 'Builder Query',
+		description:
+			'Visual query builder for selecting data sources, filters, and aggregations',
+		supportsKeyScoping: true,
+	},
+	{
+		id: 'builder_sub_query',
+		label: 'Builder Sub Query',
+		description:
+			'Nested queries within the builder (e.g., subqueries referencing other queries)',
+		supportsKeyScoping: true,
+	},
+	{
+		id: 'promql',
+		label: 'PromQL',
+		description:
+			'Raw Prometheus query language for metrics (cannot be key-scoped)',
+		supportsKeyScoping: false,
+	},
+	{
+		id: 'clickhouse_sql',
+		label: 'ClickHouse SQL',
+		description: 'Direct SQL queries against ClickHouse (cannot be key-scoped)',
+		supportsKeyScoping: false,
+	},
+] as const;
+
+export type ScopeMode = 'all' | 'byKey';

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

@@ -76,9 +76,10 @@ function createGrantPermissionAsReadonly(
 	return {
 		label: 'readonly',
 		insertText: resources
-			.filter(
-				(r) => r.allowedVerbs.includes('read') || r.allowedVerbs.includes('list'),
-			)
+			.filter((r) => {
+				const verbs: readonly string[] = r.allowedVerbs;
+				return verbs.includes('read') || verbs.includes('list');
+			})
 			.flatMap((r) => {
 				const verbs = r.allowedVerbs.filter((v) => v === 'read' || v === 'list');
 				return verbs.map(
@@ -103,7 +104,9 @@ function buildResourceSnippets(): SnippetDef[] {
 	for (const resource of resources) {
 		const { kind, type, allowedVerbs } = resource;
 
-		snippets.push(createGrantAllPermissionSnippet(kind, allowedVerbs, type));
+		if (allowedVerbs.length > 1) {
+			snippets.push(createGrantAllPermissionSnippet(kind, allowedVerbs, type));
+		}
 
 		for (const verb of allowedVerbs) {
 			snippets.push(createGrantPermissionToVerbAndKind(kind, verb, type));

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

@@ -329,11 +329,15 @@ describe('transformTransactionGroupsToResourcePermissions', () => {
 	it('returns all resources from RESOURCE_ORDER even with empty transaction groups', () => {
 		const result = transformTransactionGroupsToResourcePermissions([]);
 
-		expect(result).toHaveLength(3);
+		expect(result).toHaveLength(7);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'role',
 			'serviceaccount',
+			'logs',
+			'traces',
+			'metrics',
+			'meter-metrics',
 		]);
 	});
 
@@ -414,11 +418,15 @@ describe('createEmptyRolePermissions', () => {
 	it('creates permissions for all resources in RESOURCE_ORDER', () => {
 		const result = createEmptyRolePermissions();
 
-		expect(result).toHaveLength(3);
+		expect(result).toHaveLength(7);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'role',
 			'serviceaccount',
+			'logs',
+			'traces',
+			'metrics',
+			'meter-metrics',
 		]);
 	});
 

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

@@ -1,4 +1,12 @@
-import { Bot, Key, Shield } from '@signozhq/icons';
+import {
+	Bot,
+	ChartLine,
+	DraftingCompass,
+	Gauge,
+	Key,
+	Logs,
+	Shield,
+} from '@signozhq/icons';
 
 import permissionsType from 'lib/authz/hooks/useAuthZ/permissions.type';
 import {
@@ -14,12 +22,15 @@ type IconComponent = typeof Shield;
 
 const OBJECT_SCOPED_VERB_SET = new Set<string>(OBJECT_SCOPED_VERBS);
 
+export type SelectorType = 'input' | 'telemetryBuilder';
+
 export interface ResourcePanelConfig {
 	label: string;
 	description: string;
 	icon: IconComponent;
 	selectorPlaceholder: string;
 	docsAnchor: string;
+	selectorType?: SelectorType;
 }
 
 /**
@@ -50,6 +61,42 @@ export const RESOURCE_PANELS: Record<AuthZResource, ResourcePanelConfig> = {
 			'Type service account ID, separate multiple with comma or space',
 		docsAnchor: 'service-account',
 	},
+	logs: {
+		label: 'Logs',
+		description: 'Log data collected across the workspace.',
+		icon: Logs,
+		selectorPlaceholder:
+			'Enter selector as <query-type>/<key>/<value> or <query-type>/* or use wizard...',
+		docsAnchor: 'logs',
+		selectorType: 'telemetryBuilder',
+	},
+	traces: {
+		label: 'Traces',
+		description: 'Distributed tracing data collected across the workspace.',
+		icon: DraftingCompass,
+		selectorPlaceholder:
+			'Enter selector as <query-type>/<key>/<value> or <query-type>/* or use wizard...',
+		docsAnchor: 'traces',
+		selectorType: 'telemetryBuilder',
+	},
+	metrics: {
+		label: 'Metrics',
+		description: 'Metric data collected across the workspace.',
+		icon: ChartLine,
+		selectorPlaceholder:
+			'Enter selector as <query-type>/<key>/<value> or <query-type>/* or use wizard...',
+		docsAnchor: 'metrics',
+		selectorType: 'telemetryBuilder',
+	},
+	'meter-metrics': {
+		label: 'Meter Metrics',
+		description: 'Usage metering data for the workspace.',
+		icon: Gauge,
+		selectorPlaceholder:
+			'Enter selector as <query-type>/<key>/<value> or <query-type>/* or use wizard...',
+		docsAnchor: 'meter-metrics',
+		selectorType: 'telemetryBuilder',
+	},
 };
 
 export const RESOURCE_ORDER = Object.keys(RESOURCE_PANELS) as AuthZResource[];

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

@@ -19,7 +19,7 @@ describe('PermissionDeniedCallout', () => {
 	it('renders multiple denied permissions', () => {
 		const deniedPermissions = [
 			buildPermission('read', buildObjectString('serviceaccount', '*')),
-			buildPermission('update', buildObjectString('role', 'admin')),
+			buildPermission('update', buildObjectString<'update'>('role', 'admin')),
 		];
 		render(<PermissionDeniedCallout deniedPermissions={deniedPermissions} />);
 

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

@@ -20,7 +20,7 @@ describe('PermissionDeniedFullPage', () => {
 	it('renders with multiple denied permissions', () => {
 		const deniedPermissions = [
 			buildPermission('read', buildObjectString('role', 'admin')),
-			buildPermission('update', buildObjectString('role', 'admin')),
+			buildPermission('update', buildObjectString<'update'>('role', 'admin')),
 		];
 		render(<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />);
 		expect(screen.getByText(/read:role:admin/)).toBeInTheDocument();

frontend/src/lib/authz/hooks/useAuthZ/permissions.type.ts

@@ -35,6 +35,26 @@ export default {
 					'update',
 				],
 			},
+			{
+				kind: 'logs',
+				type: 'telemetryresource',
+				allowedVerbs: ['read'],
+			},
+			{
+				kind: 'meter-metrics',
+				type: 'telemetryresource',
+				allowedVerbs: ['read'],
+			},
+			{
+				kind: 'metrics',
+				type: 'telemetryresource',
+				allowedVerbs: ['read'],
+			},
+			{
+				kind: 'traces',
+				type: 'telemetryresource',
+				allowedVerbs: ['read'],
+			},
 		],
 		relations: {
 			assignee: ['role'],
@@ -43,7 +63,7 @@ export default {
 			delete: ['metaresource', 'role', 'serviceaccount'],
 			detach: ['metaresource', 'role', 'serviceaccount'],
 			list: ['metaresource', 'role', 'serviceaccount'],
-			read: ['metaresource', 'role', 'serviceaccount'],
+			read: ['metaresource', 'role', 'serviceaccount', 'telemetryresource'],
 			update: ['metaresource', 'role', 'serviceaccount'],
 		},
 	},

frontend/src/lib/authz/hooks/useAuthZ/utils.ts

@@ -23,6 +23,40 @@ export function buildPermission<R extends AuthZRelation>(
 	return `${relation}${PermissionSeparator}${object}` as BrandedPermission;
 }
 
+/**
+ * Builds an object string for use with `buildPermission`.
+ *
+ * ## Type Inference Behavior
+ *
+ * TypeScript infers `R` from `resource`. If a resource belongs to multiple relations,
+ * the return type becomes a union of all matching `AuthZObject` types.
+ *
+ * Example: 'role' is valid for 'read', 'update', 'delete', 'assignee'.
+ * Without explicit generic, return type = `AuthZObject<'read' | 'update' | 'delete' | 'assignee'>`.
+ *
+ * ## When to specify explicit generic
+ *
+ * **Needed** when resource belongs to multiple relations AND you pass result to `buildPermission`
+ * with a relation that has FEWER valid resources than others:
+ *
+ * ```ts
+ * // ERROR: 'read' includes telemetry resources, 'update' does not
+ * buildPermission('update', buildObjectString('role', 'admin'))
+ *
+ * // OK: explicit generic narrows return type
+ * buildPermission('update', buildObjectString<'update'>('role', 'admin'))
+ * ```
+ *
+ * **Not needed** when:
+ * - Resource only belongs to one relation in the constraint
+ * - Using with 'read' relation (widest type, accepts all)
+ * - Storing in a variable typed as `BrandedPermission` (already opaque)
+ *
+ * ```ts
+ * // OK: 'read' is widest, accepts union return type
+ * buildPermission('read', buildObjectString('role', 'admin'))
+ * ```
+ */
 export function buildObjectString<
 	R extends 'delete' | 'read' | 'update' | 'assignee',
 >(resource: ResourcesForRelation<R>, objectId: string): AuthZObject<R> {