refactor: extract TruncatedLabel component and replace inline truncation logic - #4763
Merged
akshaydeo merged 3 commits intoJun 29, 2026
Merged
Conversation
…dle special characters in URLs (#4714) ## Summary Array-type query parameters in the logs page (models, providers, etc.) were not using the safe URI-encoding parser, meaning values containing characters like `://` (e.g. model names such as `gpt://host/model`) could be misinterpreted as path or query delimiters by TanStack Router. This introduces `parseAsSafeArrayOf` and applies it consistently across all array filters. ## Changes - Added `parseAsSafeArrayOf` to `queryParamsParser.ts` by composing `parseAsArrayOf` with the existing `parseAsSafeString` parser, ensuring full URI-encoding for comma-separated filter values. - Replaced all usages of `parseAsArrayOf(parseAsString)` in the logs page with `parseAsSafeArrayOf` so that array filters (models, providers, aliases, status, etc.) benefit from the same encoding guarantees as string filters. - Added unit tests for both `parseAsSafeString` and `parseAsSafeArrayOf` to verify round-trip correctness with model names containing `://`. ## Type of change - [x] Bug fix ## Affected areas - [x] UI (React) ## How to test ```sh cd ui pnpm i || npm i pnpm test || npm test pnpm build || npm run build ``` To manually verify, navigate to the logs page and apply a filter using a model name containing `://` (e.g. `gpt://host/model`). Confirm the URL encodes correctly and the filter persists on page reload without routing errors. ## Screenshots/Recordings N/A ## Breaking changes - [x] No ## Related issues #4603 ## Security considerations No security implications. This change only affects URL query parameter encoding in the UI. ## Checklist - [ ] I read `docs/contributing/README.md` and followed the guidelines - [x] I added/updated tests where appropriate - [ ] I updated documentation where needed - [x] I verified builds succeed (Go and UI) - [ ] I verified the CI pipeline passes locally if applicable
Contributor
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
Contributor
|
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in: 50 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThree sidebar label renderers now use the shared ChangesTruncatedLabel adoption across sidebars
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Contributor
Confidence Score: 5/5This looks safe to merge.
Important Files Changed
Reviews (3): Last reviewed commit: "refactor: extract `TruncatedLabel` compo..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
impoiler
force-pushed
the
refactor/extract-truncated-label-replace-inline-truncation
branch
from
June 29, 2026 07:05
12f52ac to
19fb4d5
Compare
impoiler
changed the base branch from
graphite-base/4763
to
fix/use-parse-as-safe-array-logs-query-params
June 29, 2026 07:05
Contributor
Author
This was referenced Jun 29, 2026
## Summary Adds a reusable `TruncatedLabel` component that displays truncated text with an automatic tooltip when the content overflows its container. ## Changes - Introduces `TruncatedLabel`, a `<span>`-based component that detects when its text content is truncated via CSS overflow and conditionally renders a `Tooltip` to show the full content - Truncation detection is performed by comparing `scrollWidth` to `clientWidth`, and re-evaluated on window resize or when `children` changes - The tooltip content defaults to the `children` value if it is a string, but accepts an explicit `tooltip` prop for custom content - The tooltip is only rendered when the text is actually truncated, avoiding unnecessary DOM overhead when content fits ## Type of change - [ ] Bug fix - [x] Feature - [ ] Refactor - [ ] Documentation - [ ] Chore/CI ## Affected areas - [ ] Core (Go) - [ ] Transports (HTTP) - [ ] Providers/Integrations - [ ] Plugins - [x] UI (React) - [ ] Docs ## How to test ```sh cd ui pnpm i || npm i pnpm build || npm run build ``` Render a `TruncatedLabel` inside a constrained-width container with a long string. Verify that hovering over the truncated text shows a tooltip with the full content, and that no tooltip appears when the text is not truncated. ## Screenshots/Recordings N/A ## Breaking changes - [ ] Yes - [x] No ## Related issues N/A ## Security considerations No security implications. The component renders user-provided React nodes, which is consistent with existing UI patterns. ## Checklist - [ ] I read `docs/contributing/README.md` and followed the guidelines - [ ] I added/updated tests where appropriate - [ ] I updated documentation where needed - [ ] I verified builds succeed (Go and UI) - [ ] I verified the CI pipeline passes locally if applicable
…ation logic (#4716) ## Summary Extracts the truncated label logic (truncate text with a tooltip on overflow) into a shared `TruncatedLabel` component and replaces all inline implementations with it. ## Changes - Added a reusable `TruncatedLabel` component in `ui/components/ui/truncatedLabel` that handles text truncation and conditionally renders a tooltip when the content overflows - Removed the local `TruncatedName` component from the providers page, which duplicated this logic using `useRef`, `useState`, and a resize event listener - Replaced inline `<span className="truncate ...">` elements in the logs and MCP filter sidebars with `TruncatedLabel` ## Type of change - [ ] Bug fix - [ ] Feature - [x] Refactor - [ ] Documentation - [ ] Chore/CI ## Affected areas - [ ] Core (Go) - [ ] Transports (HTTP) - [ ] Providers/Integrations - [ ] Plugins - [x] UI (React) - [ ] Docs ## How to test ```sh cd ui pnpm i || npm i pnpm test || npm test pnpm build || npm run build ``` Verify that truncated labels in the providers list and filter sidebars still show a tooltip on hover when the text overflows, and no tooltip when it does not. ## Screenshots/Recordings Verify the providers sidebar and log/MCP filter sidebars visually behave the same as before — truncated text shows a tooltip, non-truncated text does not. ## Breaking changes - [ ] Yes - [x] No ## Related issues #4604 ## Security considerations None. ## Checklist - [ ] I read `docs/contributing/README.md` and followed the guidelines - [ ] I added/updated tests where appropriate - [ ] I updated documentation where needed - [ ] I verified builds succeed (Go and UI) - [ ] I verified the CI pipeline passes locally if applicable
impoiler
changed the base branch from
fix/use-parse-as-safe-array-logs-query-params
to
graphite-base/4763
June 29, 2026 07:08
impoiler
force-pushed
the
refactor/extract-truncated-label-replace-inline-truncation
branch
from
June 29, 2026 07:08
19fb4d5 to
11d6f95
Compare
impoiler
changed the base branch from
graphite-base/4763
to
feat/truncated-label-tooltip-overflow
June 29, 2026 07:08
Contributor
Merge activity
|
akshaydeo
changed the base branch from
feat/truncated-label-tooltip-overflow
to
graphite-base/4763
June 29, 2026 09:58
akshaydeo
dismissed
coderabbitai[bot]’s stale review
June 29, 2026 09:58
The base branch was changed.
akshaydeo
deleted the
refactor/extract-truncated-label-replace-inline-truncation
branch
June 29, 2026 09:59
R-droid101
pushed a commit
to R-droid101/bifrost
that referenced
this pull request
Jul 1, 2026
…ion logic (maximhq#4763) Cherry-picked from dev: 5d420a5
akhsaul
pushed a commit
to akhsaul/bifrost
that referenced
this pull request
Aug 27, 2026
…ion logic (maximhq#4763) Cherry-picked from dev: 91fddc2bbf75910ab8e91758d65f0d13aa540c8e
occcat
pushed a commit
to occcat/bifrost
that referenced
this pull request
Sep 2, 2026
…ion logic (maximhq#4763) Cherry-picked from dev: 5d420a5
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Cherry-picked from dev: 5d420a5