Fleet UI: Cap policy/report name input at 255 + truncate long names with tooltip on details pages#48154
Merged
Merged
Conversation
…ith tooltip on details pages
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Claude Code Review
This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.
Tip: disable this comment in your organization's Code Review settings.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #48154 +/- ##
========================================
Coverage 67.32% 67.32%
========================================
Files 3657 3657
Lines 231233 231237 +4
Branches 12206 12062 -144
========================================
+ Hits 155676 155680 +4
Misses 61590 61590
Partials 13967 13967
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR prevents policy/report names from exceeding the backend varchar(255) constraint in Fleet’s UI and improves details-page header rendering for long (but valid) names by truncating with a tooltip.
Changes:
- Added
maxLength={255}(viainputOptions) to policy/report nameInputFields across create + edit entry points. - Updated policy/report details page headings (and Host Query Report header) to use
<TooltipTruncatedText />and adjusted flex/overflow styles so long names ellipsize instead of pushing actions off-screen. - Documented the “cap free-text inputs to backend column length” rule in
.claude/rules/fleet-frontend.md.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/pages/queries/edit/components/SaveNewQueryModal/SaveNewQueryModal.tsx | Adds NAME_MAX_LENGTH and applies maxLength to the report name input in the save modal. |
| frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx | Applies maxLength to the report name input in edit mode. |
| frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx | Replaces the report title text with TooltipTruncatedText for truncation + hover reveal. |
| frontend/pages/queries/details/QueryDetailsPage/_styles.scss | Adds flex/min-width plumbing for title truncation and constrains overflow in the header. |
| frontend/pages/policies/edit/components/SaveNewPolicyModal/SaveNewPolicyModal.tsx | Applies maxLength to the policy name input in the save modal. |
| frontend/pages/policies/edit/components/PolicyForm/PolicyForm.tsx | Applies maxLength to the policy name input in edit mode. |
| frontend/pages/policies/details/PolicyDetailsPage/PolicyDetailsPage.tsx | Wraps the policy name in TooltipTruncatedText while keeping the critical icon sibling. |
| frontend/pages/policies/details/PolicyDetailsPage/_styles.scss | Adds flex/min-width/overflow rules so policy name truncates without pushing header actions. |
| frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTable.tsx | Uses TooltipTruncatedText for the report name in the host report header. |
| frontend/pages/hosts/details/HostQueryReport/HQRTable/_styles.scss | Adds flex/min-width/overflow rules for truncation in the host report header layout. |
| .claude/rules/fleet-frontend.md | Adds a forms rule to cap free-text input lengths to backend schema column sizes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (7)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (3)
WalkthroughThe PR adds a 255-character maxLength to policy and query name inputs in both save and edit forms, with tests covering the maxlength attribute. It also changes policy, query, and host query report detail headings to render names through Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
frontend/pages/policies/edit/components/PolicyForm/PolicyForm.tsx (1)
67-68: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winCentralize
NAME_MAX_LENGTHin a shared frontend constant.
255is now duplicated across multiple policy/report form components. A shared constant (e.g., form/query-policy constants) would prevent drift if backend constraints ever change.🤖 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 `@frontend/pages/policies/edit/components/PolicyForm/PolicyForm.tsx` around lines 67 - 68, The NAME_MAX_LENGTH constant is duplicated across multiple policy and report form components. Move the NAME_MAX_LENGTH constant definition to a centralized shared constants file (such as a form constants or query-policy constants module), then update all references in PolicyForm and other components that use this constant to import it from the new shared location instead of defining it locally. This ensures a single source of truth and prevents drift if backend constraints change.
🤖 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 `@frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTable.tsx`:
- Around line 178-180: The TooltipTruncatedText component rendering the
queryName value in the h2 element needs to use fixed positioning for its tooltip
to prevent overflow-related placement issues. Add the fixedPositionStrategy prop
to the TooltipTruncatedText component to ensure the tooltip is positioned
correctly even when the query name is truncated and may cause the default
tooltip placement to overflow.
In `@frontend/pages/policies/details/PolicyDetailsPage/PolicyDetailsPage.tsx`:
- Line 371: Add the fixedPositionStrategy prop to the TooltipTruncatedText
component that displays the policy name (storedPolicy?.name) to enable fixed
positioning of the tooltip. This will prevent the tooltip from being clipped or
misaligned when the heading or container uses overflow-based truncation. Set the
prop value appropriately to match the tooltip positioning strategy used
elsewhere in the codebase.
In `@frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx`:
- Around line 251-253: The TooltipTruncatedText component rendered inside the
heading with the baseClass__query-name class needs the fixedPositionStrategy
prop to be added. This is necessary because the heading now participates in
overflow-based truncation, and without fixed positioning strategy, the tooltip
will be clipped or misaligned by the overflow-hidden ancestors. Add the
fixedPositionStrategy prop to the TooltipTruncatedText component to ensure the
tooltip is positioned correctly and not constrained by the parent's overflow
behavior.
---
Nitpick comments:
In `@frontend/pages/policies/edit/components/PolicyForm/PolicyForm.tsx`:
- Around line 67-68: The NAME_MAX_LENGTH constant is duplicated across multiple
policy and report form components. Move the NAME_MAX_LENGTH constant definition
to a centralized shared constants file (such as a form constants or query-policy
constants module), then update all references in PolicyForm and other components
that use this constant to import it from the new shared location instead of
defining it locally. This ensures a single source of truth and prevents drift if
backend constraints change.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 33f936d8-c4fb-4950-a1a6-d0ffe249cddd
⛔ Files ignored due to path filters (1)
.claude/rules/fleet-frontend.mdis excluded by!**/*.md
📒 Files selected for processing (10)
frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTable.tsxfrontend/pages/hosts/details/HostQueryReport/HQRTable/_styles.scssfrontend/pages/policies/details/PolicyDetailsPage/PolicyDetailsPage.tsxfrontend/pages/policies/details/PolicyDetailsPage/_styles.scssfrontend/pages/policies/edit/components/PolicyForm/PolicyForm.tsxfrontend/pages/policies/edit/components/SaveNewPolicyModal/SaveNewPolicyModal.tsxfrontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsxfrontend/pages/queries/details/QueryDetailsPage/_styles.scssfrontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsxfrontend/pages/queries/edit/components/SaveNewQueryModal/SaveNewQueryModal.tsx
cdcme
approved these changes
Jun 24, 2026
JordanMontgomery
pushed a commit
that referenced
this pull request
Jun 26, 2026
…ith tooltip on details pages (#48154)
2 tasks
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
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.
Issue
Closes #46978
Closes #46981
Description
maxLength, so a user could type past the backendvarchar(255)and hit a 422/500 on save. Capped all four entry points (SaveNewPolicyModal,PolicyFormedit mode,SaveNewQueryModal,EditQueryFormedit mode) at 255 viainputOptions={{ maxLength: NAME_MAX_LENGTH }}.query-details-page__query-nameandpolicy-details-page__policy-namein<TooltipTruncatedText />with the necessaryflex: 1; min-width: 0/overflow: hiddenplumbing so the name ellipsizes and shows the full value on hover. Critical-policy icon stays as a sibling..claude/rules/fleet-frontend.mdso future free-text inputs match the backend column length instead of guessing.Screenshots
Testing
Summary by CodeRabbit
New Features
Style & Layout Updates
Tests
maxlengthis enforced on the relevant “Name” inputs.