Update setting search UX (#14451)

This commit is contained in:
Adib234
2025-12-03 22:43:11 -08:00
committed by GitHub
parent 9bc5a4d64f
commit d5e5f58737
3 changed files with 261 additions and 253 deletions

View File

@@ -40,6 +40,12 @@ import {
const mockToggleVimEnabled = vi.fn();
const mockSetVimMode = vi.fn();
vi.mock('../contexts/UIStateContext.js', () => ({
useUIState: () => ({
mainAreaWidth: 100, // Fixed width for consistent snapshots
}),
}));
enum TerminalKeys {
ENTER = '\u000D',
TAB = '\t',
@@ -1107,7 +1113,7 @@ describe('SettingsDialog', () => {
});
describe('Search Functionality', () => {
it('should enter search mode when "/" is pressed', async () => {
it('should display text entered in search', async () => {
const settings = createMockSettings();
const onSelect = vi.fn();
@@ -1117,7 +1123,7 @@ describe('SettingsDialog', () => {
await waitFor(() => {
expect(lastFrame()).not.toContain('> Search:');
});
expect(lastFrame()).toContain('(press / to search)');
expect(lastFrame()).toContain('Search to filter');
// Press '/' to enter search mode
act(() => {
@@ -1125,8 +1131,8 @@ describe('SettingsDialog', () => {
});
await waitFor(() => {
expect(lastFrame()).toContain('> Search:');
expect(lastFrame()).not.toContain('(press / to search)');
expect(lastFrame()).toContain('/');
expect(lastFrame()).not.toContain('Search to filter');
});
unmount();
@@ -1138,45 +1144,29 @@ describe('SettingsDialog', () => {
const { lastFrame, stdin, unmount } = renderDialog(settings, onSelect);
// Enter search mode
act(() => {
stdin.write('/');
});
await waitFor(() => {
expect(lastFrame()).toContain('> Search:');
});
// Type "vim"
act(() => {
stdin.write('yolo');
});
await waitFor(() => {
expect(lastFrame()).toContain('> Search: yolo');
expect(lastFrame()).toContain('Disable YOLO Mode'); // Should be filtered to show Vim Mode
expect(lastFrame()).toContain('yolo');
expect(lastFrame()).toContain('Disable YOLO Mode');
});
unmount();
});
it('should exit search mode when Escape is pressed', async () => {
it('should exit search settings when Escape is pressed', async () => {
const settings = createMockSettings();
const onSelect = vi.fn();
const { lastFrame, stdin, unmount } = renderDialog(settings, onSelect);
act(() => {
stdin.write('/');
});
await waitFor(() => {
expect(lastFrame()).toContain('> Search:');
});
act(() => {
stdin.write('vim');
});
await waitFor(() => {
expect(lastFrame()).toContain('> Search: vim');
expect(lastFrame()).toContain('vim');
});
// Press Escape
@@ -1185,10 +1175,9 @@ describe('SettingsDialog', () => {
});
await waitFor(() => {
expect(lastFrame()).not.toContain('> Search:');
expect(lastFrame()).toContain('(press / to search)');
expect(lastFrame()).toContain('Vim Mode'); // All settings should be visible again
expect(lastFrame()).toContain('Disable Auto Update'); // All settings should be visible again
// onSelect is called with (settingName, scope).
// undefined settingName means "close dialog"
expect(onSelect).toHaveBeenCalledWith(undefined, expect.anything());
});
unmount();
@@ -1200,18 +1189,11 @@ describe('SettingsDialog', () => {
const { lastFrame, stdin, unmount } = renderDialog(settings, onSelect);
act(() => {
stdin.write('/');
});
await waitFor(() => {
expect(lastFrame()).toContain('> Search:');
});
act(() => {
stdin.write('vimm');
});
await waitFor(() => {
expect(lastFrame()).toContain('> Search: vimm');
expect(lastFrame()).toContain('vimm');
});
// Press backspace
@@ -1220,7 +1202,7 @@ describe('SettingsDialog', () => {
});
await waitFor(() => {
expect(lastFrame()).toContain('> Search: vim');
expect(lastFrame()).toContain('vim');
expect(lastFrame()).toContain('Vim Mode');
expect(lastFrame()).not.toContain(
'Codebase Investigator Max Num Turns',
@@ -1230,63 +1212,20 @@ describe('SettingsDialog', () => {
unmount();
});
it('should clear search query and show all settings when exiting search mode', async () => {
it('should display nothing when search yields no results', async () => {
const settings = createMockSettings();
const onSelect = vi.fn();
const { lastFrame, stdin, unmount } = renderDialog(settings, onSelect);
act(() => {
stdin.write('/');
});
await waitFor(() => {
expect(lastFrame()).toContain('> Search:');
});
act(() => {
stdin.write('test');
});
await waitFor(() => {
expect(lastFrame()).toContain('> Search: test');
});
// Press Escape
act(() => {
stdin.write(TerminalKeys.ESCAPE);
});
await waitFor(() => {
expect(lastFrame()).not.toContain('> Search:');
expect(lastFrame()).toContain('(press / to search)');
expect(lastFrame()).toContain('Vim Mode');
expect(lastFrame()).toContain('Disable Auto Update');
});
unmount();
});
it('should display "No matches found." when search yields no results', async () => {
const settings = createMockSettings();
const onSelect = vi.fn();
const { lastFrame, stdin, unmount } = renderDialog(settings, onSelect);
// Enter search mode
act(() => {
stdin.write('/');
});
await waitFor(() => {
expect(lastFrame()).toContain('> Search:');
});
// Type a search query that won't match any settings
act(() => {
stdin.write('nonexistentsetting');
});
await waitFor(() => {
expect(lastFrame()).toContain('> Search: nonexistentsetting');
expect(lastFrame()).toContain('No matches found.');
expect(lastFrame()).toContain('nonexistentsetting');
expect(lastFrame()).toContain('');
expect(lastFrame()).not.toContain('Vim Mode'); // Should not contain any settings
expect(lastFrame()).not.toContain('Disable Auto Update'); // Should not contain any settings
});

View File

@@ -45,6 +45,9 @@ import {
import { debugLogger } from '@google/gemini-cli-core';
import { keyMatchers, Command } from '../keyMatchers.js';
import type { Config } from '@google/gemini-cli-core';
import { useUIState } from '../contexts/UIStateContext.js';
import { useTextBuffer } from './shared/text-buffer.js';
import { TextInput } from './shared/TextInput.js';
interface FzfResult {
item: string;
@@ -585,10 +588,6 @@ export function SettingsDialog({
setSearchQuery((prev) => prev + key.sequence);
return;
}
} else if (!editingKey && key.sequence === '/') {
setIsSearching(true);
setSearchQuery('');
return;
}
if (name === 'tab' && showScopeSelection) {
@@ -856,6 +855,21 @@ export function SettingsDialog({
{ isActive: true },
);
const { mainAreaWidth } = useUIState();
const viewportWidth = mainAreaWidth - 8;
const buffer = useTextBuffer({
initialText: '',
initialCursorOffset: 0,
viewport: {
width: viewportWidth,
height: 1,
},
isValidPath: () => false,
singleLine: true,
onChange: (text) => setSearchQuery(text),
});
return (
<Box
borderStyle="round"
@@ -866,25 +880,45 @@ export function SettingsDialog({
height="100%"
>
<Box flexDirection="column" flexGrow={1}>
{isSearching || searchQuery ? (
<Text bold color={theme.text.accent} wrap="truncate">
{isSearching ? '> ' : ' '}Search: {searchQuery}
{isSearching ? '_' : ''}
</Text>
) : (
<Text bold={focusSection === 'settings'} wrap="truncate">
<Box marginX={1}>
<Text
bold={focusSection === 'settings' && !editingKey}
wrap="truncate"
>
{focusSection === 'settings' ? '> ' : ' '}Settings{' '}
<Text color={theme.text.secondary}>(press / to search)</Text>
</Text>
)}
</Box>
<Box
borderStyle="round"
borderColor={
editingKey
? theme.border.default
: focusSection === 'settings'
? theme.border.focused
: theme.border.default
}
paddingX={1}
height={3}
marginTop={1}
>
<TextInput
focus={focusSection === 'settings' && !editingKey}
buffer={buffer}
placeholder="Search to filter"
/>
</Box>
<Box height={1} />
{isSearching && visibleItems.length === 0 ? (
<Box height={1} flexDirection="column">
<Box marginX={1} height={1} flexDirection="column">
<Text color={theme.text.secondary}>No matches found.</Text>
</Box>
) : (
<>
{showScrollUp && <Text color={theme.text.secondary}></Text>}
{showScrollUp && (
<Box marginX={1}>
<Text color={theme.text.secondary}></Text>
</Box>
)}
{visibleItems.map((item, idx) => {
const isActive =
focusSection === 'settings' &&
@@ -969,7 +1003,7 @@ export function SettingsDialog({
return (
<React.Fragment key={item.value}>
<Box flexDirection="row" alignItems="center">
<Box marginX={1} flexDirection="row" alignItems="center">
<Box minWidth={2} flexShrink={0}>
<Text
color={
@@ -1011,7 +1045,11 @@ export function SettingsDialog({
</React.Fragment>
);
})}
{showScrollDown && <Text color={theme.text.secondary}></Text>}
{showScrollDown && (
<Box marginX={1}>
<Text color={theme.text.secondary}></Text>
</Box>
)}
</>
)}
@@ -1019,7 +1057,7 @@ export function SettingsDialog({
{/* Scope Selection - conditionally visible based on height constraints */}
{showScopeSelection && (
<Box marginTop={1} flexDirection="column">
<Box marginX={1} flexDirection="column">
<Text bold={focusSection === 'scope'} wrap="truncate">
{focusSection === 'scope' ? '> ' : ' '}Apply To
</Text>
@@ -1037,15 +1075,19 @@ export function SettingsDialog({
)}
<Box height={1} />
<Text color={theme.text.secondary}>
(Use Enter to select
{showScopeSelection ? ', Tab to change focus' : ''}, Esc to close)
</Text>
{showRestartPrompt && (
<Text color={theme.status.warning}>
To see changes, Gemini CLI must be restarted. Press r to exit and
apply changes now.
<Box marginX={1}>
<Text color={theme.text.secondary}>
(Use Enter to select
{showScopeSelection ? ', Tab to change focus' : ''}, Esc to close)
</Text>
</Box>
{showRestartPrompt && (
<Box marginX={1}>
<Text color={theme.status.warning}>
To see changes, Gemini CLI must be restarted. Press r to exit and
apply changes now.
</Text>
</Box>
)}
</Box>
</Box>

View File

@@ -3,34 +3,37 @@
exports[`SettingsDialog > Initial Rendering > should render settings list with visual indicators 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Settings (press / to search)
> Settings
│ │
● Preview Features (e.g., models) false
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ Search to filter
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
│ │
Vim Mode false
│ ● Preview Features (e.g., models) false │
│ │
Disable Auto Update false
Vim Mode false │
│ │
Enable Prompt Completion false
Disable Auto Update false │
│ │
Debug Keystroke Logging false
Enable Prompt Completion false │
│ │
Enable Session Cleanup false
Debug Keystroke Logging false │
│ │
Output Format Text
Enable Session Cleanup false
│ │
Hide Window Title false
Output Format Text
│ │
Hide Window Title false
│ │
│ ▼ │
│ │
│ Apply To
│ ● User Settings
│ Workspace Settings
│ System Settings
Apply To │
● User Settings │
Workspace Settings │
System Settings │
│ │
│ (Use Enter to select, Tab to change focus, Esc to close)
(Use Enter to select, Tab to change focus, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
@@ -38,34 +41,37 @@ exports[`SettingsDialog > Initial Rendering > should render settings list with v
exports[`SettingsDialog > Snapshot Tests > should render 'accessibility settings enabled' correctly 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Settings (press / to search)
> Settings
│ │
● Preview Features (e.g., models) false
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ Search to filter
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
│ │
Vim Mode true*
│ ● Preview Features (e.g., models) false │
│ │
Disable Auto Update false
Vim Mode true*
│ │
Enable Prompt Completion false
Disable Auto Update false │
│ │
Debug Keystroke Logging false
Enable Prompt Completion false │
│ │
Enable Session Cleanup false
Debug Keystroke Logging false │
│ │
Output Format Text
Enable Session Cleanup false
│ │
Hide Window Title false
Output Format Text
│ │
Hide Window Title false
│ │
│ ▼ │
│ │
│ Apply To
│ ● User Settings
│ Workspace Settings
│ System Settings
Apply To │
● User Settings │
Workspace Settings │
System Settings │
│ │
│ (Use Enter to select, Tab to change focus, Esc to close)
(Use Enter to select, Tab to change focus, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
@@ -73,34 +79,37 @@ exports[`SettingsDialog > Snapshot Tests > should render 'accessibility settings
exports[`SettingsDialog > Snapshot Tests > should render 'all boolean settings disabled' correctly 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Settings (press / to search)
> Settings
│ │
● Preview Features (e.g., models) false
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ Search to filter
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
│ │
Vim Mode false*
│ ● Preview Features (e.g., models) false │
│ │
Disable Auto Update false*
Vim Mode false* │
│ │
Enable Prompt Completion false*
Disable Auto Update false* │
│ │
Debug Keystroke Logging false*
Enable Prompt Completion false* │
│ │
Enable Session Cleanup false
Debug Keystroke Logging false*
│ │
Output Format Text
Enable Session Cleanup false
│ │
Hide Window Title false*
Output Format Text
│ │
Hide Window Title false*
│ │
│ ▼ │
│ │
│ Apply To
│ ● User Settings
│ Workspace Settings
│ System Settings
Apply To │
● User Settings │
Workspace Settings │
System Settings │
│ │
│ (Use Enter to select, Tab to change focus, Esc to close)
(Use Enter to select, Tab to change focus, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
@@ -108,34 +117,37 @@ exports[`SettingsDialog > Snapshot Tests > should render 'all boolean settings d
exports[`SettingsDialog > Snapshot Tests > should render 'default state' correctly 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Settings (press / to search)
> Settings
│ │
● Preview Features (e.g., models) false
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ Search to filter
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
│ │
Vim Mode false
│ ● Preview Features (e.g., models) false │
│ │
Disable Auto Update false
Vim Mode false │
│ │
Enable Prompt Completion false
Disable Auto Update false │
│ │
Debug Keystroke Logging false
Enable Prompt Completion false │
│ │
Enable Session Cleanup false
Debug Keystroke Logging false │
│ │
Output Format Text
Enable Session Cleanup false
│ │
Hide Window Title false
Output Format Text
│ │
Hide Window Title false
│ │
│ ▼ │
│ │
│ Apply To
│ ● User Settings
│ Workspace Settings
│ System Settings
Apply To │
● User Settings │
Workspace Settings │
System Settings │
│ │
│ (Use Enter to select, Tab to change focus, Esc to close)
(Use Enter to select, Tab to change focus, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
@@ -143,34 +155,37 @@ exports[`SettingsDialog > Snapshot Tests > should render 'default state' correct
exports[`SettingsDialog > Snapshot Tests > should render 'file filtering settings configured' correctly 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Settings (press / to search)
> Settings
│ │
● Preview Features (e.g., models) false
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ Search to filter
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
│ │
Vim Mode false
│ ● Preview Features (e.g., models) false │
│ │
Disable Auto Update false
Vim Mode false │
│ │
Enable Prompt Completion false
Disable Auto Update false │
│ │
Debug Keystroke Logging false
Enable Prompt Completion false │
│ │
Enable Session Cleanup false
Debug Keystroke Logging false │
│ │
Output Format Text
Enable Session Cleanup false
│ │
Hide Window Title false
Output Format Text
│ │
Hide Window Title false
│ │
│ ▼ │
│ │
│ Apply To
│ ● User Settings
│ Workspace Settings
│ System Settings
Apply To │
● User Settings │
Workspace Settings │
System Settings │
│ │
│ (Use Enter to select, Tab to change focus, Esc to close)
(Use Enter to select, Tab to change focus, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
@@ -178,34 +193,37 @@ exports[`SettingsDialog > Snapshot Tests > should render 'file filtering setting
exports[`SettingsDialog > Snapshot Tests > should render 'focused on scope selector' correctly 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Settings (press / to search)
Settings
│ │
Preview Features (e.g., models) false
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ Search to filter
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
│ │
Vim Mode false
│ Preview Features (e.g., models) false │
│ │
Disable Auto Update false
Vim Mode false │
│ │
Enable Prompt Completion false
Disable Auto Update false │
│ │
Debug Keystroke Logging false
Enable Prompt Completion false │
│ │
Enable Session Cleanup false
Debug Keystroke Logging false │
│ │
Output Format Text
Enable Session Cleanup false
│ │
Hide Window Title false
Output Format Text
│ │
Hide Window Title false
│ │
│ ▼ │
│ │
│ > Apply To
│ ● 1. User Settings
│ 2. Workspace Settings
│ 3. System Settings
> Apply To │
● 1. User Settings │
2. Workspace Settings │
3. System Settings │
│ │
│ (Use Enter to select, Tab to change focus, Esc to close)
(Use Enter to select, Tab to change focus, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
@@ -213,34 +231,37 @@ exports[`SettingsDialog > Snapshot Tests > should render 'focused on scope selec
exports[`SettingsDialog > Snapshot Tests > should render 'mixed boolean and number settings' correctly 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Settings (press / to search)
> Settings
│ │
● Preview Features (e.g., models) false
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ Search to filter
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
│ │
Vim Mode false*
│ ● Preview Features (e.g., models) false │
│ │
Disable Auto Update true*
Vim Mode false*
│ │
Enable Prompt Completion false
Disable Auto Update true*
│ │
Debug Keystroke Logging false
Enable Prompt Completion false │
│ │
Enable Session Cleanup false
Debug Keystroke Logging false │
│ │
Output Format Text
Enable Session Cleanup false
│ │
Hide Window Title false*
Output Format Text
│ │
Hide Window Title false*
│ │
│ ▼ │
│ │
│ Apply To
│ ● User Settings
│ Workspace Settings
│ System Settings
Apply To │
● User Settings │
Workspace Settings │
System Settings │
│ │
│ (Use Enter to select, Tab to change focus, Esc to close)
(Use Enter to select, Tab to change focus, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
@@ -248,34 +269,37 @@ exports[`SettingsDialog > Snapshot Tests > should render 'mixed boolean and numb
exports[`SettingsDialog > Snapshot Tests > should render 'tools and security settings' correctly 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Settings (press / to search)
> Settings
│ │
● Preview Features (e.g., models) false
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ Search to filter
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
│ │
Vim Mode false
│ ● Preview Features (e.g., models) false │
│ │
Disable Auto Update false
Vim Mode false │
│ │
Enable Prompt Completion false
Disable Auto Update false │
│ │
Debug Keystroke Logging false
Enable Prompt Completion false │
│ │
Enable Session Cleanup false
Debug Keystroke Logging false │
│ │
Output Format Text
Enable Session Cleanup false
│ │
Hide Window Title false
Output Format Text
│ │
Hide Window Title false
│ │
│ ▼ │
│ │
│ Apply To
│ ● User Settings
│ Workspace Settings
│ System Settings
Apply To │
● User Settings │
Workspace Settings │
System Settings │
│ │
│ (Use Enter to select, Tab to change focus, Esc to close)
(Use Enter to select, Tab to change focus, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
@@ -283,34 +307,37 @@ exports[`SettingsDialog > Snapshot Tests > should render 'tools and security set
exports[`SettingsDialog > Snapshot Tests > should render 'various boolean settings enabled' correctly 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Settings (press / to search)
> Settings
│ │
● Preview Features (e.g., models) false
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ Search to filter
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
│ │
Vim Mode true*
│ ● Preview Features (e.g., models) false │
│ │
Disable Auto Update true*
Vim Mode true* │
│ │
Enable Prompt Completion true*
Disable Auto Update true* │
│ │
Debug Keystroke Logging true*
Enable Prompt Completion true* │
│ │
Enable Session Cleanup false
Debug Keystroke Logging true*
│ │
Output Format Text
Enable Session Cleanup false
│ │
Hide Window Title true*
Output Format Text
│ │
Hide Window Title true*
│ │
│ ▼ │
│ │
│ Apply To
│ ● User Settings
│ Workspace Settings
│ System Settings
Apply To │
● User Settings │
Workspace Settings │
System Settings │
│ │
│ (Use Enter to select, Tab to change focus, Esc to close)
(Use Enter to select, Tab to change focus, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;