EDM-3868: Reset page to 1 when filters change

[celdrake]

Fixes filters not returning the expected results when the user was on a page other than page 1.

Fixed for:

• Main devices page
• Decommissioned devices page
• Catalog page for deploying an element to fleetless devices (simplified signature of useDevicesPaginated to make the code simpler while keeping all existing functionality)

Summary by CodeRabbit

• Bug Fixes

  • Pagination now resets to page 1 when device filters change.
  • The fix applies to the main devices page, decommissioned devices page, and catalog deployment flow.

• Shared UI Components

  • Added useResetPaginationOnFilterChange for reusable pagination state handling.
  • Simplified useDevicesPaginated to accept device name and package-mode filters.
  • Updated catalog device selection to use the revised pagination API and broader device availability data.

• Cross-Cutting Impact

  • Changes are limited to libs/ui-components/.
  • The shared component changes can affect both standalone and OCP plugin consumers.
  • No changes affect libs/types/, libs/i18n/, libs/cypress/, platform-specific app code, the Go auth proxy, container builds, E2E tests, or CI configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 2e68cbed-f1b6-4b83-b4d1-079cc145021e

📥 Commits

Reviewing files that changed from the base of the PR and between 5a36446 and 58370a2.

📒 Files selected for processing (6)

• libs/ui-components/src/components/Catalog/InstallWizard/steps/SelectTargetStep.tsx
• libs/ui-components/src/components/Catalog/InstallWizard/steps/SpecificationsStep.tsx
• libs/ui-components/src/components/Device/DevicesPage/DevicesPage.tsx
• libs/ui-components/src/components/Device/DevicesPage/useDeviceBackendFilters.ts
• libs/ui-components/src/components/Device/DevicesPage/useDevices.ts
• libs/ui-components/src/hooks/useTablePagination.ts

💤 Files with no reviewable changes (1)

• libs/ui-components/src/components/Catalog/InstallWizard/steps/SpecificationsStep.tsx

Included review availability: Your plan provides up to 12 included reviews per hour; 10 remain after this review.

---

Walkthrough

Refactors device filtering and pagination. Adds filter-change pagination resets, exposes a stable backend filter key, simplifies useDevicesPaginated, and updates DevicesPage and Install Wizard callers.

Changes

Device Pagination and Filter Management

Layer / File(s)	Summary
Pagination reset hook foundation libs/ui-components/src/hooks/useTablePagination.ts	Adds useResetPaginationOnFilterChange, which resets the current page to 1 when its query key changes.
Filter state key derivation libs/ui-components/src/components/Device/DevicesPage/useDeviceBackendFilters.ts	Builds an order-independent filterKey from encoded URLSearchParams entries and returns it from useDeviceBackendFilters.
Simplified device pagination API and integration libs/ui-components/src/components/Device/DevicesPage/useDevices.ts	useDevicesPaginated accepts deviceNameFilter and excludePackageMode, derives the name filter, resets pagination when options change, and queries enrolled fleetless devices.
DevicesPage filter-aware pagination libs/ui-components/src/components/Device/DevicesPage/DevicesPage.tsx	Resets pagination when filterKey or the decommissioned-device state changes.
Install Wizard step updates libs/ui-components/src/components/Catalog/InstallWizard/steps/SelectTargetStep.tsx, libs/ui-components/src/components/Catalog/InstallWizard/steps/SpecificationsStep.tsx	Updates callers to use deviceNameFilter and removes the previous lifecycle and fleetless filters.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to 58370

The PR makes a localized pagination behavior change for filtered device and catalog views, and no actionable merge-blocking risk remains in the supplied evidence.

Possibly related PRs

• flightctl/flightctl-ui#734: Updates related package-mode device filtering logic and the same device pagination and Install Wizard components.

Suggested labels: ui-components

Suggested reviewers: rawagner

🚥 Pre-merge checks | ✅ 15

✅ Passed checks (15 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the primary change: resetting pagination to page 1 when filters change.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
No-Hardcoded-Secrets	✅ Passed	The PR diff adds pagination/filter logic only; added lines contain no API keys, tokens, passwords, credentials, private keys, embedded credentials, or long base64 strings.
No-Weak-Crypto	✅ Passed	The PR diff contains no MD5, SHA1, DES, RC4, 3DES, Blowfish, ECB, custom crypto, or secret/token comparison code.
No-Injection-Vectors	✅ Passed	The PR diff adds only pagination and filter logic; targeted and structural searches found no eval/exec, raw HTML sink, os.system, exec.Command, or yaml.load use.
Container-Privileges	✅ Passed	The PR changes only six TypeScript/TSX files; the added-line scan found no privileged, host namespace, SYS_ADMIN, or allowPrivilegeEscalation settings in container/K8s manifests.
No-Sensitive-Data-In-Logs	✅ Passed	The pull-request diff adds no logging calls, and none of the six changed files contain logging or sensitive-data output patterns.
Resource-Leaks	✅ Passed	The pull-request diff contains six TypeScript files and no Go files under proxy/, so this resource-leak check is not applicable.
Unchecked-Errors	✅ Passed	The PR diff contains only six .ts/.tsx files and no changes under proxy/*.go, so it introduces no unchecked Go errors covered by this check.
Ai-Attribution	✅ Passed	The PR commit includes the accepted trailer Made-with: Cursor and has no Co-Authored-By trailer.
Generated-Files-Not-Hand-Edited	✅ Passed	The PR diff changes only six UI source files; no paths under the specified generated model directories or English translation file were edited.
I18n-Compliance	✅ Passed	The diff adds no user-visible strings or t() calls in .tsx files; it only changes hook wiring and filter props, so no i18n violation was introduced.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@libs/ui-components/src/components/Device/DevicesPage/useDeviceBackendFilters.ts`:
- Around line 19-26: getSearchParamsQueryKey currently builds a joined string
from searchParams.entries() that can collide when keys/values contain '&' or
'='; update getSearchParamsQueryKey to percent-encode each entry before joining
(e.g., encodeURIComponent on both key and value) or use URLSearchParams
serialization that performs encoding, keep the .map/.sort/.join logic intact but
replace `${key}=${value}` with an encoded pair so filterKey is unambiguous
(refer to function name getSearchParamsQueryKey).

In `@libs/ui-components/src/components/Device/DevicesPage/useDevices.ts`:
- Around line 174-188: useDevicesPaginated now fetches all enrolled devices and
drops the fleetless filter used by the install wizard; restore a fleetless-only
filter by passing a filter flag into useDevicesEndpoint (or include it in the
textFilters) when called from useDevicesPaginated so the API request limits to
fleetless devices. Locate useDevicesPaginated and the useDevicesEndpoint call
and add the fleetless filter (e.g., include a property like fleetless: true or
FilterSearchParams.Fleetless) to the options passed to useDevicesEndpoint (while
preserving existing textFilters and nextContinue) so downstream components (like
SpecificationsStep) can still get only fleetless devices. Ensure you reference
FilterSearchParams.NameOrAlias and keep pagination.nextContinue unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Enterprise

Run ID: 969d5b83-8095-414f-bcde-68c3194b6c26

📥 Commits

Reviewing files that changed from the base of the PR and between 905a256 and 5238d87.

📒 Files selected for processing (6)

• libs/ui-components/src/components/Catalog/InstallWizard/steps/SelectTargetStep.tsx
• libs/ui-components/src/components/Catalog/InstallWizard/steps/SpecificationsStep.tsx
• libs/ui-components/src/components/Device/DevicesPage/DevicesPage.tsx
• libs/ui-components/src/components/Device/DevicesPage/useDeviceBackendFilters.ts
• libs/ui-components/src/components/Device/DevicesPage/useDevices.ts
• libs/ui-components/src/hooks/useTablePagination.ts

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.