Skip to content

frontend: apply tanstack router best practices#2171

Merged
malinskibeniamin merged 2 commits intomasterfrom
tanstack-router-followups
Jan 22, 2026
Merged

frontend: apply tanstack router best practices#2171
malinskibeniamin merged 2 commits intomasterfrom
tanstack-router-followups

Conversation

@malinskibeniamin
Copy link
Contributor

@malinskibeniamin malinskibeniamin commented Jan 22, 2026

TanStack Router - Expand validateSearch for Type Safety

Summary

This PR replaces raw URLSearchParams usage with route-level validateSearch + Zod schemas for type-safe search params across the Redpanda Console frontend.

Changes

Routes with validateSearch Added

Route Search Params Schema
/groups/$groupId q, withLag String search, boolean filter
/connect-clusters/ defaultTab Enum: kafka-connect, redpanda-connect, redpanda-connect-secret
/topics/ pageSize, page Pagination integers
/topics/$topicName/ pageSize, page Pagination integers
/rp-connect/$pipelineId/ pageSize, page Pagination integers
/connect-clusters/$clusterName/$connector pageSize, page Pagination integers
/transforms/$transformName pageSize, page Pagination integers

Pagination Hook Refactor

  • use-pagination-params.ts: Migrated from raw URLSearchParams to nuqs with parseAsInteger
  • use-pagination-params.test.tsx: Updated to use NuqsTestingAdapter for proper testing

Component Refactors

  • group-details.tsx: Now accepts search and onSearchChange props instead of using queryToObj/editQuery
  • overview.tsx (connect): Now accepts defaultTab as prop instead of parsing URL manually
  • login.tsx: Fixed to use searchStr instead of search for raw URL string access
  • login-complete.tsx: Replaced deprecated queryToObj with native URLSearchParams

Deprecations

Added @deprecated JSDoc comments to src/utils/query-helper.ts:

  • queryToObj() → Use useSearch() hook
  • objToQuery() → Use navigate({ search: ... })
  • editQuery() → Use navigate({ search: (prev) => ... })

Files Modified

src/routes/groups/$groupId.tsx
src/routes/connect-clusters/index.tsx
src/routes/topics/index.tsx
src/routes/topics/$topicName/index.tsx
src/routes/rp-connect/$pipelineId/index.tsx
src/routes/connect-clusters/$clusterName/$connector.tsx
src/routes/transforms/$transformName.tsx
src/components/pages/consumers/group-details.tsx
src/components/pages/connect/overview.tsx
src/components/misc/login.tsx
src/components/misc/login-complete.tsx
src/hooks/use-pagination-params.ts
src/hooks/use-pagination-params.test.tsx
src/utils/query-helper.ts

Verification

  • bun run type:check - Passes
  • bun run lint - Passes (exit code 0)
  • bun run test - All 358 tests pass
  • bun run build - Successful

Migration Path

Routes already using validateSearch (unchanged): 10 routes in security, schema-registry, rp-connect, mcp-servers, and agents.

Routes using nuqs hooks (unchanged): acl-list, topic-list, schema-list, Tab.Messages, transcript components, and preview hooks.

Remaining files using deprecated editQuery (future work):

  • src/components/pages/topics/topic-list.tsx
  • src/components/pages/consumers/group-list.tsx
  • src/components/pages/topics/tab-partitions.tsx
  • src/components/pages/topics/tab-consumers.tsx

@malinskibeniamin malinskibeniamin self-assigned this Jan 22, 2026
@malinskibeniamin malinskibeniamin requested review from a team, Mateoc, jvorcak, r-vasquez and yougotashovel and removed request for a team January 22, 2026 12:00
@malinskibeniamin malinskibeniamin merged commit c5f454e into master Jan 22, 2026
17 checks passed
@malinskibeniamin malinskibeniamin deleted the tanstack-router-followups branch January 22, 2026 14:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants