feat(executions): add dropdown for agentflow filter

[nidhishpareek]

Summary
Converted the Agentflow filter in the Agent Executions page from a text input to a searchable dropdown with autocomplete functionality.
Changes

• Replaced the "Agentflow" TextField with a MUI Autocomplete component
• Added API call to fetch all agentflows on component mount
• Agentflows are populated as dropdown options with search/filter capability
• When an agentflow is selected, both agentflowId and agentflowName are stored for accurate backend filtering
• Styled the dropdown to match existing State filter design:
  • Same border color styling
  • Same dark mode icon color
  • Same shadow/Popper styling for consistency
  • Max height of 300px for scrollable list
    Files Changed
• packages/ui/src/views/agentexecutions/index.jsx
  Benefits
• Users no longer need to manually type/copy-paste agentflow names
• Search-as-you-type functionality for quick filtering
• Consistent UI with other filter dropdowns in the application

[gemini-code-assist]

Summary of Changes

Hello, 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 significantly enhances the user experience on the Agent Executions page by transforming the 'Agentflow' filter into a more intuitive and interactive searchable dropdown. This change eliminates the need for manual input, provides real-time suggestions, and aligns the filter's appearance and behavior with other similar components in the application, making it easier and faster for users to locate specific agent executions.

Highlights

• Enhanced Agentflow Filter: The 'Agentflow' filter on the Agent Executions page has been upgraded from a simple text input to a searchable dropdown with autocomplete functionality, improving user experience.
• API Integration for Agentflows: An API call was added to fetch all available agentflows upon component mount, populating the new dropdown with dynamic options.
• Improved Filter Logic: When an agentflow is selected, both its ID and name are now stored, ensuring accurate backend filtering.
• Consistent UI Styling: The new dropdown is styled to match existing filter designs, including border color, dark mode icon color, shadow/Popper styling, and a max height for scrollable lists, ensuring visual consistency across the application.

Changelog

• packages/ui/src/views/agentexecutions/index.jsx
  • Replaced the 'Agentflow' TextField with a Material-UI Autocomplete component.
  • Introduced a new API call to fetch all agentflows when the component mounts.
  • Implemented logic to populate the Autocomplete options with fetched agentflows, enabling search and filter capabilities.
  • Updated filter handling to store both the agentflowId and agentflowName upon selection.
  • Applied custom styling to the Autocomplete dropdown (Popper and Listbox) to ensure consistency with existing UI elements.

Activity

• No specific activity (comments, reviews, or 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 successfully replaces a text input with a searchable Autocomplete dropdown for filtering agentflows, which is a great usability improvement. The implementation is solid, but I've identified a potential issue with fetching the agentflow options and a performance optimization for the new component. My main concern is that fetching agentflows is limited to 1000 items, which could lead to an incomplete list for users. Please see my detailed comments.

[gemini-code-assist]

The API call to fetch agentflows has a hardcoded limit of 1000. If there are more than 1000 agentflows, the dropdown list will be incomplete, preventing users from selecting agentflows beyond the first 1000. This could be a functional regression from the previous text input, which allowed any agentflow name to be entered.

[gemini-code-assist]

The value prop for the Autocomplete component uses Array.prototype.find() on agentflowOptions on every render. If agentflowOptions is a large array, this could cause performance issues as it's an O(n) operation executed on each render of the component. It is recommended to memoize this value using useMemo to avoid re-calculating it unnecessarily.

For example:

const selectedAgentflow = useMemo(
    () => agentflowOptions.find((opt) => opt.id === filters.agentflowId) || null,
    [agentflowOptions, filters.agentflowId]
);

// in JSX
<Autocomplete
    value={selectedAgentflow}
    // ... other props
/>