Add flow filter combobox to /runs page #19724
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add FlowFilter component with multi-select combobox for filtering flow runs by specific flows - Support searching/filtering within the dropdown - Wire selected flows to URL query parameter (?flows=uuid1,uuid2) - Sync flow filter to flow runs query using flow_id parameter - Reset pagination to page 1 when filter changes - Add MSW mock for /flows/filter endpoint - Add unit tests for FlowFilter component - Add Storybook story for FlowFilter component Co-Authored-By: [email protected] <[email protected]>
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
- Add selectedFlows and onFlowFilterChange props to RunsPageWithState in story - Add required operator property to flows filter in route Co-Authored-By: [email protected] <[email protected]>
desertaxle
requested changes
Dec 11, 2025
| search: (prev) => ({ | ||
| ...prev, | ||
| flows: flowsArray.length > 0 ? flowsArray.join(",") : "", | ||
| page: 1, // Reset pagination when filter changes |
Member
There was a problem hiding this comment.
If there are no results after the filter is applied then the pagination shows Page 1 of 0. It should show Page 0 of 0 in this case.
| aria-label="All flows" | ||
| onSelect={handleClearAll} | ||
| closeOnSelect={false} | ||
| selected={selectedFlows.size === 0} |
Member
There was a problem hiding this comment.
Suggested change
| selected={selectedFlows.size === 0} |
| > | ||
| <Checkbox | ||
| checked={selectedFlows.size === 0} | ||
| className="mr-2 pointer-events-none" |
Member
There was a problem hiding this comment.
Suggested change
| className="mr-2 pointer-events-none" |
| > | ||
| <Checkbox | ||
| checked={selectedFlows.has(flow.id)} | ||
| className="mr-2 pointer-events-none" |
Member
There was a problem hiding this comment.
Suggested change
| className="mr-2 pointer-events-none" |
| aria-label={flow.name} | ||
| onSelect={() => handleSelectFlow(flow.id)} | ||
| closeOnSelect={false} | ||
| selected={selectedFlows.has(flow.id)} |
Member
There was a problem hiding this comment.
Suggested change
| selected={selectedFlows.has(flow.id)} |
- Fix pagination to show 'Page 0 of 0' when no results (instead of 'Page 1 of 0') - Remove redundant 'selected' prop from ComboboxCommandItem (using Checkbox instead) - Remove 'className' from Checkbox components Co-Authored-By: [email protected] <[email protected]>
desertaxle
approved these changes
Dec 11, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds a flow filter combobox to the /runs page that allows filtering flow runs by specific flows. This is part of the Vue to React UI migration effort.
Changes
FlowFiltercomponent with multi-select combobox for filtering flow runs by specific flows?flows=uuid1,uuid2)flowsfilter parameter/flows/filterendpointUpdates since last revision
selectedFlowsandonFlowFilterChangeprops to Storybook storyoperator: "and_"property to flows filterselectedprop from ComboboxCommandItem (using Checkbox for selection state instead)classNamefrom Checkbox componentsHuman Review Checklist
{ operator: "and_", id: { any_: flowIds } }matches the backend contract for/flow_runs/paginatefilteredFlowsuseMemo inflow-filter.tsx(lines 103-109) does client-side filtering even though the API already filters by name - verify this is intentional or remove if redundantLink to Devin run: https://app.devin.ai/sessions/c928c537967849dca2836e219e6d2311
Requested by: [email protected] (@desertaxle)
Checklist
<link to issue>"mint.json.