Fleet UI: Handle long fleet names across the Fleets UI#49216
Draft
RachelElysia wants to merge 3 commits into
Draft
Fleet UI: Handle long fleet names across the Fleets UI#49216RachelElysia wants to merge 3 commits into
RachelElysia wants to merge 3 commits into
Conversation
Cap fleet name input at 255 chars in the Create/Rename modals, add matching service-layer validation on `NewTeam`, `ModifyTeam`, and `ApplyTeamSpecs` so API/GitOps callers get a friendly `InvalidArgumentError` instead of a raw "Data too long" MySQL error, and fix long-name overflow in the Fleets table, the fleet-detail page header, the manage enroll secrets modal, the TeamsDropdown trigger and menu options, and the host details Labels card. Introduce a shared `MAX_ENTITY_NAME_LENGTH = 255` constant, use it across 10 existing name-input files, and cap 16 additional user-supplied name and description inputs (API user, custom variable, certificate, label, pack, certificate authority forms) that were missing a maxLength.
- teams_test.go: use `new(...)` instead of the deprecated `ptr.String(...)` for the length-cap test cases (staticcheck SA1019). - AddCertificateModal.tests.tsx, Variables.tests.tsx: the existing tests pasted 256 chars and expected an inline "too long" validation message, but the new `maxLength: 255` cap blocks the 256th char at the DOM level so the error is now unreachable via user interaction. Swap for assertions that verify `input.maxLength === 255`.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #49216 +/- ##
==========================================
- Coverage 67.99% 67.99% -0.01%
==========================================
Files 3779 3779
Lines 239083 239089 +6
Branches 12463 12607 +144
==========================================
+ Hits 162564 162568 +4
- Misses 61756 61757 +1
- Partials 14763 14764 +1
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:
|
…s the cap
With `inputOptions={{ maxLength: 255 }}` on the InputFields, the browser
blocks input past 255 chars, so the FE-side "notTooLong" / trimmedName-over-N
branches can't fire from user interaction and existing records can't hold
longer values either (the DB column is varchar(255) end-to-end).
Removed:
- `NAME_TOO_LONG_MSG` + `maxLength` validation in `AddCertificateModal/helpers.ts`.
- `notTooLong` name validator in `AddCustomVariableModal/helpers.ts`.
- `notTooLong` name + description validators in `NewLabelPage/helpers.ts` and `LabelForm/helpers.ts` (plus their now-unused local constants).
- `trimmedName.length > MAX_ENTITY_NAME_LENGTH` guard in `AddCategoryModal.tsx` and `EditCategoryModal.tsx`.
Unusual/shorter caps (e.g. varchar(64), custom business rules) still keep
their inline validators — silent truncation is only appropriate for the
common 255-char norm.
2 tasks
Member
Author
|
@claude review |
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 #47290
Also implements the "Cap free-text
maxLengthto the backend column length" pattern established in #49041 (patterns.md thread).Description
Fleet name inputs had no
maxLengthcap and no service-layer length check, so a name >255 chars failed with a raw MySQLData too longerror, and several UI surfaces didn't handle long names gracefully. This PR fixes all four manifestations called out in the bug, plus a related label-overflow case on the host details page, and hardens adjacent name inputs across the app.Frontend fixes for #47290:
teams.name varchar(255)).LinkCellwithtooltipTruncate+className="w400"so long names truncate with an ellipsis and full-name tooltip instead of overflowing across the Hosts/Users columns..team-details__team-header): h1 getsoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;,__team-detailsgetsmin-width: 0; flex: 1, and.action-buttonsgetsflex-shrink: 0+white-space: nowrapon buttons so Manage enroll secrets / Rename / Delete no longer wrap to a second line when the fleet name is long.__descriptiongetsoverflow-wrap: anywhere; min-width: 0so a long<b>{fleet name}</b>wraps within the modal instead of spilling out the right edge.TeamsDropdown(used as the fleet-detail header selector for multi-team users, and in other headers): wrapper is shrinkable; the react-select control, single-value, and option styles get ellipsis-truncation; menu is capped atmaxWidth: 500pxso long team names in the option list don't blow out the menu.Backend fixes for #47290:
fleet.MaxTeamNameLength = 255constant.NewTeam,ModifyTeam, andApplyTeamSpecsnow returnfleet.NewInvalidArgumentError("name", "may not exceed 255 characters")instead of surfacing a rawData too longMySQL error. Covers UI, API, and GitOps entry points.Broader consistency pass (per #49041 thread):
MAX_ENTITY_NAME_LENGTH = 255constant infrontend/utilities/constants.tsx.NAME_MAX_LENGTH = 255/MAX_LABEL_NAME_LENGTH = 255locals to use it.InputFieldname/description inputs that were missing a cap (API user, custom variable, certificate, label name + description, pack name + description, and all 5 CA forms — CustomEST, CustomSCEP, Smallstep, Digicert, Hydrant).varchar(64), custom business rules) still keep their inline validators — silent truncation is only appropriate for the common 255-char norm.Bonus: fixed the long-label overflow on the host details Labels card by capping the pill button
max-widthat 300px.Screenrecording
Testing
Test coverage:
CreateFleetModal.tests.tsx,RenameFleetModal.tests.tsx— new case per file asserting the name input'smaxLength === 255.AddCertificateModal.tests.tsx,Variables.tests.tsx— the existing "shows too-long error when pasting 256 chars" tests are now unreachable via the DOM cap; converted tomaxLength === 255assertions.ee/server/service/teams_test.go—TestNewTeamNameValidation,TestModifyTeamNameValidation, andTestApplyTeamSpecsNameValidationeach get two new cases (accepts at the limit, rejects one over with the expected error message).