Merge branch 'main' into fix/authz-listening-keyboards

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

@@ -1,5 +1,5 @@
 import { DialogWrapper } from '@signozhq/ui/dialog';
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 
 import { useAuthZDevStore } from '../useAuthZDevStore';
 import { useAuthZQueryInvalidation } from '../useAuthZQueryInvalidation';
@@ -8,7 +8,6 @@ import { AuthZDevModalContent } from './AuthZDevModalContent';
 import { AuthZDevModalFooter } from './AuthZDevModalFooter';
 import { AuthZDevModalHeader } from './AuthZDevModalHeader';
 import { useAuthZDevModalData } from './useAuthZDevModalData';
-import { useModalKeyboard } from './useModalKeyboard';
 
 import styles from './AuthZDevModal.module.css';
 
@@ -17,7 +16,6 @@ export function AuthZDevModal(): JSX.Element | null {
 	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);
@@ -25,8 +23,6 @@ export function AuthZDevModal(): JSX.Element | null {
 
 	useAuthZQueryInvalidation(overrides);
 
-	const searchInputRef = useRef<HTMLInputElement>(null);
-
 	const {
 		search,
 		setSearch,
@@ -37,29 +33,18 @@ export function AuthZDevModal(): JSX.Element | null {
 		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],
+		[closeModal],
 	);
 
 	return (
@@ -73,7 +58,6 @@ export function AuthZDevModal(): JSX.Element | null {
 		>
 			<div className={styles.content}>
 				<AuthZDevModalHeader
-					searchInputRef={searchInputRef}
 					search={search}
 					setSearch={setSearch}
 					resourceFilter={resourceFilter}
@@ -91,9 +75,6 @@ export function AuthZDevModal(): JSX.Element | null {
 					observedListLength={observedList.length}
 					orderedPermissions={orderedPermissions}
 					groups={groups}
-					indexByPermission={indexByPermission}
-					selectedIndex={selectedIndex}
-					setSelectedIndex={setSelectedIndex}
 					observed={observed}
 					overrides={overrides}
 					onSetOverride={setOverride}

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

@@ -1,5 +1,4 @@
 import { Typography } from '@signozhq/ui/typography';
-import { useCallback } from 'react';
 
 import { BrandedPermission } from '../../hooks/useAuthZ/types';
 import { ObservedPermission, OverrideState } from '../types';
@@ -17,9 +16,6 @@ export interface AuthZDevModalContentProps {
 	observedListLength: number;
 	orderedPermissions: string[];
 	groups: PermissionGroup[];
-	indexByPermission: Map<string, number>;
-	selectedIndex: number;
-	setSelectedIndex: (index: number) => void;
 	observed: Record<string, ObservedPermission>;
 	overrides: Record<string, OverrideState>;
 	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
@@ -29,20 +25,10 @@ export function AuthZDevModalContent({
 	observedListLength,
 	orderedPermissions,
 	groups,
-	indexByPermission,
-	selectedIndex,
-	setSelectedIndex,
 	observed,
 	overrides,
 	onSetOverride,
 }: AuthZDevModalContentProps): JSX.Element {
-	const handleSelectIndex = useCallback(
-		(index: number) => (): void => {
-			setSelectedIndex(index);
-		},
-		[setSelectedIndex],
-	);
-
 	return (
 		<div className={styles.list} data-testid="authz-dev-permission-list">
 			{orderedPermissions.length === 0 ? (
@@ -64,19 +50,14 @@ export function AuthZDevModalContent({
 								{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={onSetOverride}
-									onSelect={handleSelectIndex(index)}
-								/>
-							);
-						})}
+						{group.items.map((permission) => (
+							<PermissionRow
+								key={permission}
+								observed={observed[permission]}
+								override={overrides[permission]}
+								onSetOverride={onSetOverride}
+							/>
+						))}
 					</div>
 				))
 			)}

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

@@ -15,32 +15,6 @@ export function AuthZDevModalFooter({
 	return (
 		<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">

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

@@ -2,14 +2,13 @@ import { Search } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { SelectSimple } from '@signozhq/ui/select';
-import { RefObject, useCallback } from 'react';
+import { useCallback } from 'react';
 
 import { BrandedPermission } from '../../hooks/useAuthZ/types';
 
 import styles from './AuthZDevModal.module.css';
 
 export interface AuthZDevModalHeaderProps {
-	searchInputRef: RefObject<HTMLInputElement>;
 	search: string;
 	setSearch: (value: string) => void;
 	resourceFilter: string;
@@ -25,7 +24,6 @@ export interface AuthZDevModalHeaderProps {
 }
 
 export function AuthZDevModalHeader({
-	searchInputRef,
 	search,
 	setSearch,
 	resourceFilter,
@@ -56,7 +54,6 @@ export function AuthZDevModalHeader({
 			<div className={styles.searchRow}>
 				<div className={styles.search}>
 					<Input
-						ref={searchInputRef}
 						placeholder="Search permissions..."
 						value={search}
 						onChange={(e): void => setSearch(e.target.value)}

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

@@ -33,11 +33,6 @@
 	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;

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

@@ -1,7 +1,7 @@
 import { Badge, BadgeColor } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 
 import type { BrandedPermission } from '../../hooks/useAuthZ/types';
 import { parsePermission } from '../../hooks/useAuthZ/utils';
@@ -14,9 +14,7 @@ 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> = {
@@ -30,9 +28,7 @@ const ROW_OVERRIDE_CLASSES: Record<OverrideState, string | null> = {
 export const PermissionRow = memo(function PermissionRow({
 	observed,
 	override,
-	isSelected,
 	onSetOverride,
-	onSelect,
 }: PermissionRowProps): JSX.Element {
 	const currentState = override ?? OverrideState.Reset;
 
@@ -48,14 +44,6 @@ export const PermissionRow = memo(function PermissionRow({
 		};
 	}, [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) {
@@ -68,9 +56,7 @@ export const PermissionRow = memo(function PermissionRow({
 
 	return (
 		<div
-			className={cx(styles.permissionRow, ROW_OVERRIDE_CLASSES[currentState], {
-				[styles.isSelected]: isSelected,
-			})}
+			className={cx(styles.permissionRow, ROW_OVERRIDE_CLASSES[currentState])}
 			data-testid={`permission-row-${observed.permission}`}
 		>
 			<div className={styles.permissionInfo}>
@@ -106,7 +92,7 @@ export const PermissionRow = memo(function PermissionRow({
 				<OverrideControl
 					permission={observed.permission}
 					value={currentState}
-					onSelect={handleSetOverride}
+					onSelect={onSetOverride}
 				/>
 			</div>
 		</div>

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,
-	};
-}