Add generic searchable list to back settings and extensions

[chrstnb]

Summary

In order to support searchable extensions list, genericize the searchable list component

Details

Related Issues

Part of https://github.com/orgs/google-gemini/projects/33/views/17?pane=issue&itemId=3903695497&issue=google-gemini%7Cmaintainers-gemini-cli%7C1323

How to Validate

Run locally and validate that /settings still functions normally

Pre-Merge Checklist

• Updated relevant documentation and README (if needed)
• Added/updated tests (if needed)
• Noted breaking changes (if any)
• Validated on required platforms/methods:
  • MacOS
    • npm run
    • npx
    • Docker
    • Podman
    • Seatbelt
  • Windows
    • npm run
    • npx
    • Docker
  • Linux
    • npm run
    • npx
    • Docker

[gemini-code-assist]

Summary of Changes

Hello @chrstnb, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a new, reusable SearchableList component, designed to provide generic fuzzy search capabilities for various list-based UI elements. The SettingsDialog component has been refactored to leverage this new component, significantly reducing its complexity by abstracting away the search implementation details. This change promotes code reusability and maintains a consistent search experience across different parts of the application, while also updating documentation to reflect the maturity of settings functionality.

Highlights

• New SearchableList Component: A new generic React component, SearchableList, was introduced to encapsulate fuzzy search functionality for lists, promoting reusability.
• Refactored SettingsDialog: The existing SettingsDialog component was updated to utilize the new SearchableList component, abstracting away its internal search logic and related UI calculations.
• Documentation Update: An outdated note in the documentation, which previously marked extension settings as an experimental feature, was removed.

Changelog

• docs/extensions/reference.md
  • Removed a note indicating that extension settings are an experimental feature.
• packages/cli/src/ui/components/SettingsDialog.tsx
  • Removed direct AsyncFzf import and related search state management.
  • Eliminated useTextBuffer and useUIState imports related to search.
  • Replaced the direct use of BaseSettingsDialog with the new SearchableList component.
  • Removed search-related useEffect hooks and useMemo calculations for label width.
• packages/cli/src/ui/components/shared/SearchableList.test.tsx
  • Added a new test file for the SearchableList component, covering rendering, filtering, and search callbacks.
• packages/cli/src/ui/components/shared/SearchableList.tsx
  • Added a new SearchableList React component that wraps BaseSettingsDialog.
  • Implemented internal state for searchQuery and filteredKeys.
  • Integrated AsyncFzf for fuzzy searching and useTextBuffer for search input.
  • Calculated maxLabelWidth internally for consistent item alignment.

Activity

• No specific activity (comments, reviews, progress updates) has been recorded for this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request refactors the settings dialog to use a new generic SearchableList component, centralizing search logic and improving modularity. The documentation for extensions has also been updated to reflect that settings are no longer experimental. The new SearchableList component includes basic tests for its functionality. Additionally, a high-severity issue regarding unhandled promise rejections in the SearchableList component has been identified and should be addressed.

[gemini-code-assist]

The doSearch async function in useEffect does not handle potential rejections from fzfInstance.find(searchQuery). An unhandled promise rejection could lead to unexpected behavior or application crashes. Consider adding a .catch() block to handle errors gracefully, perhaps by logging the error and resetting the filtered keys to the full list.

    doSearch().catch((error) => {
      console.error("Search failed:", error);
      setFilteredKeys(items.map((i) => i.key)); // Reset to all items on error
    });

[github-actions]

Size Change: +554 B (0%)

Total Size: 24.4 MB

ℹ️ View Unchanged

Filename	Size	Change
./bundle/gemini.js	24.4 MB	+554 B (0%)
./bundle/sandbox-macos-permissive-open.sb	890 B	0 B
./bundle/sandbox-macos-permissive-proxied.sb	1.31 kB	0 B
./bundle/sandbox-macos-restrictive-open.sb	3.36 kB	0 B
./bundle/sandbox-macos-restrictive-proxied.sb	3.56 kB	0 B
./bundle/sandbox-macos-strict-open.sb	4.82 kB	0 B
./bundle/sandbox-macos-strict-proxied.sb	5.02 kB	0 B

_{compressed-size-action}

[jacob314]

[jackwotherspoon]

@chrstnb @jacob314 potential regression caused by this PR

In /settings the j and k keys now navigate up and down the list instead of typing in the search field.

It is impossible to type a j and k in the search field now, while several of our settings use these letters...