PMM-14848: import useTableUrlState

[fabio-silva]

Ticket number: PMM-14848

(depends on percona/peak-ui#31) -> new version to be imported from the lib

[codecov]

Codecov Report

❌ Patch coverage is 94.11765% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 37.15%. Comparing base (31318c7) to head (963024c).
⚠️ Report is 108 commits behind head on main.

Files with missing lines	Patch %	Lines
...m-app/src/pmm-qan/panel/provider/provider.tools.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5537      +/-   ##
==========================================
- Coverage   43.59%   37.15%   -6.44%     
==========================================
  Files         415      215     -200     
  Lines       43134     7186   -35948     
  Branches        0      591     +591     
==========================================
- Hits        18804     2670   -16134     
+ Misses      22454     4377   -18077     
+ Partials     1876      139    -1737     

Flag	Coverage Δ
admin	34.93% <ø> (+0.15%)	⬆️
agent	?
managed	?
unittests	41.68% <94.11%> (?)
vmproxy	?

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 79650b87-18f7-4096-9353-4899430d4fdb

📥 Commits

Reviewing files that changed from the base of the PR and between dd8cfdc and 963024c.

⛔ Files ignored due to path filters (1)

• ui/yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (11)

• dashboards/pmm-app/src/pmm-qan/panel/components/Overview/components/Search/Search.test.tsx
• dashboards/pmm-app/src/pmm-qan/panel/components/Overview/components/Search/Search.tsx
• dashboards/pmm-app/src/pmm-qan/panel/provider/provider.tools.ts
• ui/apps/pmm/src/hooks/utils/useTableUrlState.test.ts
• ui/apps/pmm/src/hooks/utils/useTableUrlState.ts
• ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx
• ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.constants.tsx
• ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx
• ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.constants.ts
• ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsx
• ui/apps/pmm/src/utils/testStubs.ts

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

• percona/pmm-qa (manual)
• percona/pmm (manual)

---

Walkthrough

The PR adds debounced search behavior, clears empty Grafana search parameters, introduces a shared table URL-state hook, integrates URL state into RTA tables, preserves unrelated query parameters, updates elapsed-time filtering, and relocates a test fixture.

Changes

Search and Grafana state

Layer / File(s)	Summary
Debounced search flow dashboards/pmm-app/src/pmm-qan/panel/components/Overview/components/Search/Search.tsx, dashboards/pmm-app/src/pmm-qan/panel/components/Overview/components/Search/Search.test.tsx	Search input uses a 300 ms debounce. Form submission cancels pending work and calls the latest handler immediately. Tests cover debounce, clearing, and submission.
Grafana search parameter clearing dashboards/pmm-app/src/pmm-qan/panel/provider/provider.tools.ts	Empty dimension search text now writes null and clears the existing URL parameter.

RTA URL state

Layer / File(s)	Summary
React Router table state delegation ui/apps/pmm/src/hooks/utils/useTableUrlState.ts, ui/apps/pmm/src/hooks/utils/useTableUrlState.test.ts	The new hook connects React Router search parameters to Percona table URL state. Tests verify option forwarding.
Overview table URL integration ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx, ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx, ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.constants.tsx	The overview table stores pagination and table state in the URL. Service ID changes preserve unrelated parameters. The elapsed-time filter accepts decimal text input.
Sessions table URL integration ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.constants.ts, ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsx	The sessions table stores URL state with the sessions prefix and includes row selection.

Test fixture organization

Layer / File(s)	Summary
Anonymous fixture relocation ui/apps/pmm/src/utils/testStubs.ts	TEST_USER_ANONYMOUS moves beside the other user fixtures without behavior changes.

Sequence Diagram(s)

sequenceDiagram
  participant SearchInput
  participant Search
  participant SearchHandler
  SearchInput->>Search: change value
  Search->>Search: schedule 300 ms debounce
  Search->>SearchHandler: execute debounced search
  SearchInput->>Search: submit form
  Search->>Search: cancel pending debounce
  Search->>SearchHandler: execute immediate search

Loading

sequenceDiagram
  participant RtaTable
  participant useTableUrlState
  participant ReactRouter
  participant PerconaTableState
  RtaTable->>useTableUrlState: provide table options
  useTableUrlState->>ReactRouter: read search parameters
  useTableUrlState->>PerconaTableState: forward parameters and setter
  PerconaTableState-->>RtaTable: return table props and state

Loading

Possibly related PRs

• percona/pmm#5742: Both changes modify RealtimeOverview.tsx; this PR preserves URL parameters, while the related PR changes the icon library.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title identifies the ticket and the primary change: importing useTableUrlState.
Description check	✅ Passed	The description includes the ticket, dependency link, and primary purpose, but omits the Feature build field.
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.

---

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