Skip to content

EPMRPP-116948 || Extend Pagination, Table, and icons for latest-only Test Executions UI#305

Merged
siarheirazuvalau merged 3 commits into
developfrom
feature/EPMRPP-116948
Jun 30, 2026
Merged

EPMRPP-116948 || Extend Pagination, Table, and icons for latest-only Test Executions UI#305
siarheirazuvalau merged 3 commits into
developfrom
feature/EPMRPP-116948

Conversation

@siarheirazuvalau

@siarheirazuvalau siarheirazuvalau commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds ui-kit building blocks required by EPMRPP-116948 / US-TEX-ATE-027 in the Test Executions plugin when Latest executions only is applied.

Changes

LatestExecutionsIcon

  • New SVG icon exported from @reportportal/ui-kit
  • Used in the Test Executions statistics-slot warning

Pagination / ItemCounter

  • New optional prop accentTotalTooltip?: ReactNode
  • When set, the total count is rendered with error accent color and a tooltip on hover
  • Suppresses the standard limitExceeded + suffix and warningContent icon for that total segment
  • Enables {Y} of 10 000 items with tooltip at the latest-only display cap without reusing US-TEX-ATE-006 pagination warning UI

Table

  • New optional prop sortDisabledColumnTooltips?: Record<string, ReactNode>
  • When a sortable column key has a tooltip entry, the header label is wrapped in Tooltip and sort clicks are ignored
  • Supports disabled Start time sort with tooltip in latest-only mode without DOM workarounds from consumers

Summary by CodeRabbit

  • New Features
    • Added tooltip support for highlighted totals in pagination, including a new optional prop and story example.
    • Added support for “sort disabled” table columns, including per-column tooltip content and improved disabled sort styling.
    • Added a new icon to the UI library.
  • Documentation
    • Updated Storybook with new pagination and table stories demonstrating accent-total tooltips and disabled-sort column tooltips.

@coderabbitai

coderabbitai Bot commented Jun 29, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@siarheirazuvalau, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 9 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1fc331ba-e7bb-459f-bf10-fd1056c6c457

📥 Commits

Reviewing files that changed from the base of the PR and between b0495a3 and 07589ad.

📒 Files selected for processing (2)
  • src/components/pagination/itemsCounter/itemCounter.tsx
  • src/components/table/table.tsx

Walkthrough

Adds accentTotalTooltip to Pagination/ItemCounter for tooltip-wrapped totals, adds sortDisabledColumnTooltips to Table for disabled-sort headers with tooltips, and exports LatestExecutionsIcon.

Changes

Pagination accent total tooltip

Layer / File(s) Summary
ItemCounter accentTotalTooltip prop and rendering
src/components/pagination/itemsCounter/itemCounter.tsx, src/components/pagination/itemsCounter/itemCounter.module.scss
ItemCounterProps gains accentTotalTooltip?: ReactNode; rendering branches to show totalItems inside a Tooltip with error-color styling when the prop is present, suppressing warningContent.
Pagination forwarding and story
src/components/pagination/pagination.tsx, src/components/pagination/pagination.stories.tsx
PaginationProps adds accentTotalTooltip; Pagination destructures and forwards it to ItemCounter; new WithAccentTotalTooltip story demonstrates the feature.

Table sort-disabled column tooltips

Layer / File(s) Summary
sortDisabledColumnTooltips type, logic, and rendering
src/components/table/types.ts, src/components/table/table.tsx, src/components/table/table.module.scss
TableComponentProps gains sortDisabledColumnTooltips?: Record<string, ReactNode>; handleSort exits early for disabled columns; renderColumnSortLabel wraps disabled-column headers in a Tooltip; pinned and scrollable header cells use the helper; CSS adds sort-disabled cursor and tooltip-wrapper styles.
Storybook story and docs
src/components/table/table.stories.tsx
Adds SortDisabledColumnTooltips story, argTypes entry, and docs description bullet for the new prop.

New icon export

Layer / File(s) Summary
LatestExecutionsIcon re-export
src/components/icons/index.ts
Adds re-export for LatestExecutionsIcon from ./svg/latestExecutions.svg.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

TMS

Suggested reviewers

  • AmsterGet
  • allaprischepa
  • maria-hambardzumian

Poem

🐇 A tooltip blooms where totals glow,
In accent red to let you know,
Sort-disabled columns politely say,
“No sorting here, but here’s my way!”
LatestExecutions joins the show —
The rabbit hops, and off we go! 🌟

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly matches the main changes: Pagination, Table, and icon support for the latest-only Test Executions UI.
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.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/EPMRPP-116948

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/components/pagination/pagination.tsx (1)

20-32: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Encode the new prop precedence in the public type.

PaginationProps still allows warningContent and accentTotalTooltip together, but ItemCounter drops warningContent whenever accentTotalTooltip is set. That makes consumer content disappear with no type error. Please make those props mutually exclusive (or assert on the unsupported combination) so the API matches the rendered behavior.

🤖 Prompt for 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.

In `@src/components/pagination/pagination.tsx` around lines 20 - 32,
PaginationProps currently lets warningContent and accentTotalTooltip be passed
together even though ItemCounter ignores warningContent whenever
accentTotalTooltip is present. Update the public type around
PaginationProps/ItemCounter to make those props mutually exclusive, or add a
runtime assertion in the Pagination render path that rejects the unsupported
combination, so the declared API matches the actual precedence behavior.
🧹 Nitpick comments (1)
src/components/pagination/pagination.stories.tsx (1)

113-148: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Exercise the cap-state branch in this story.

This example never sets limitExceeded, so it does not cover the regression-prone part of the feature: replacing the usual +/warning UI when accentTotalTooltip is present. Setting the story up with the capped state would make it match the PR contract more closely.

Suggested tweak
 export const WithAccentTotalTooltip: Story = {
   args: {
     activePage: 1,
     totalItems: 10000,
     pageSize: 50,
     totalPages: 200,
+    limitExceeded: true,
   },
🤖 Prompt for 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.

In `@src/components/pagination/pagination.stories.tsx` around lines 113 - 148, The
WithAccentTotalTooltip story is not exercising the capped-state branch because
it never sets limitExceeded, so it still shows the normal total/count behavior
instead of the accent/tooltip replacement UI. Update the story’s args and/or
Pagination props in WithAccentTotalTooltip so it explicitly represents the cap
state, using limitExceeded alongside accentTotalTooltip, and keep the story
focused on the Pagination component behavior that distinguishes the capped
display from the standard warning UI.
🤖 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 `@src/components/pagination/itemsCounter/itemCounter.tsx`:
- Around line 35-42: The accentTotalTooltip branch in itemCounter.tsx mounts
Tooltip during render, but Tooltip reads document and will break server
rendering. Update the accent-total conditional to be SSR-safe by either
rendering a plain span fallback on the server or gating the Tooltip usage behind
a client-only check, and keep the existing accent-total / Tooltip behavior for
client renders.

In `@src/components/table/table.tsx`:
- Around line 316-345: The disabled-sort path in renderColumnSortLabel currently
wraps the header label in Tooltip, which introduces a second focusable target
inside the existing header control. Update the table header button behavior so
the tooltip is attached to the header button itself, or make the Tooltip wrapper
unfocusable and apply aria-disabled to the sortable header when
sortDisabledColumnTooltips[columnKey] is present. Keep the change localized to
renderColumnSortLabel, ColumnHeaderText, and the header click handling in
table.tsx.

---

Outside diff comments:
In `@src/components/pagination/pagination.tsx`:
- Around line 20-32: PaginationProps currently lets warningContent and
accentTotalTooltip be passed together even though ItemCounter ignores
warningContent whenever accentTotalTooltip is present. Update the public type
around PaginationProps/ItemCounter to make those props mutually exclusive, or
add a runtime assertion in the Pagination render path that rejects the
unsupported combination, so the declared API matches the actual precedence
behavior.

---

Nitpick comments:
In `@src/components/pagination/pagination.stories.tsx`:
- Around line 113-148: The WithAccentTotalTooltip story is not exercising the
capped-state branch because it never sets limitExceeded, so it still shows the
normal total/count behavior instead of the accent/tooltip replacement UI. Update
the story’s args and/or Pagination props in WithAccentTotalTooltip so it
explicitly represents the cap state, using limitExceeded alongside
accentTotalTooltip, and keep the story focused on the Pagination component
behavior that distinguishes the capped display from the standard warning UI.
🪄 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: Pro

Run ID: aa474b00-7970-452b-a01e-d0e9552ec087

📥 Commits

Reviewing files that changed from the base of the PR and between d47343f and 9ce8c74.

⛔ Files ignored due to path filters (1)
  • src/components/icons/svg/latestExecutions.svg is excluded by !**/*.svg
📒 Files selected for processing (9)
  • src/components/icons/index.ts
  • src/components/pagination/itemsCounter/itemCounter.module.scss
  • src/components/pagination/itemsCounter/itemCounter.tsx
  • src/components/pagination/pagination.stories.tsx
  • src/components/pagination/pagination.tsx
  • src/components/table/table.module.scss
  • src/components/table/table.stories.tsx
  • src/components/table/table.tsx
  • src/components/table/types.ts

Comment thread src/components/pagination/itemsCounter/itemCounter.tsx Outdated
Comment thread src/components/table/table.tsx
@siarheirazuvalau siarheirazuvalau merged commit 937b458 into develop Jun 30, 2026
2 checks passed
@siarheirazuvalau siarheirazuvalau deleted the feature/EPMRPP-116948 branch June 30, 2026 10:57
github-actions Bot pushed a commit that referenced this pull request Jun 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants