Plan: Fix Pipeline Page Repo and Directive Filters#
Summary#
The repo and directive text inputs on /pipeline use window.location.href for navigation, which causes full page reloads and double-fires when onBlur triggers after onKeyDown (Enter). Replace with useRouter().push() for proper Next.js client-side navigation and guard against redundant blur navigations.
Files#
| File | Action | Description |
|---|---|---|
app/pipeline/page.tsx | modify | Replace window.location.href with useRouter().push() for all navigation; add blur guard to text inputs to prevent double navigation on Enter+blur |
Steps#
- Import
useRouterfromnext/navigationinapp/pipeline/page.tsxand instantiate it inPipelinePageInner. - Replace all
window.location.href = buildUrl(...)calls withrouter.push(buildUrl(...))— this covers repo input (lines 297, 302), status dropdown (line 310), directive input (lines 327, 332), showE2e checkbox (line 342), and pagination (lines 422, 425). - Add an
enterPressedRef(React ref) to preventonBlurfrom double-navigating after Enter is pressed — set the ref inonKeyDown, check and reset it inonBlurfor both text inputs. - Improve empty-state message — update the existing
EmptyStateon line 363 to say "No tasks match the current filters" when any filter is active, vs the current generic "No tasks found".
Verification#
- Typing a partial repo name and pressing Enter navigates to
?repo=<value>&page=1and filters results. - Typing a directive and blurring filters correctly; both filters combine with AND logic.
- Clearing a filter input removes the query param and shows unfiltered results.
Risks#
- The
onBlurguard via ref is a standard React pattern; no risk of stale state since the ref resets synchronously.