Skip to content

Fleet UI: Handle long fleet names across the Fleets UI#49216

Draft
RachelElysia wants to merge 3 commits into
mainfrom
47290-long-fleet-name-ui
Draft

Fleet UI: Handle long fleet names across the Fleets UI#49216
RachelElysia wants to merge 3 commits into
mainfrom
47290-long-fleet-name-ui

Conversation

@RachelElysia

@RachelElysia RachelElysia commented Jul 13, 2026

Copy link
Copy Markdown
Member

Issue

Closes #47290

Also implements the "Cap free-text maxLength to the backend column length" pattern established in #49041 (patterns.md thread).

Description

Fleet name inputs had no maxLength cap and no service-layer length check, so a name >255 chars failed with a raw MySQL Data too long error, 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:

  • Create/Rename fleet name inputs now cap at 255 characters (matches teams.name varchar(255)).
  • Fleets table Name column uses LinkCell with tooltipTruncate + className="w400" so long names truncate with an ellipsis and full-name tooltip instead of overflowing across the Hosts/Users columns.
  • Fleet-detail page header (.team-details__team-header): h1 gets overflow: hidden; text-overflow: ellipsis; white-space: nowrap;, __team-details gets min-width: 0; flex: 1, and .action-buttons gets flex-shrink: 0 + white-space: nowrap on buttons so Manage enroll secrets / Rename / Delete no longer wrap to a second line when the fleet name is long.
  • Manage enroll secrets modal body — __description gets overflow-wrap: anywhere; min-width: 0 so 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 at maxWidth: 500px so long team names in the option list don't blow out the menu.

Backend fixes for #47290:

  • New fleet.MaxTeamNameLength = 255 constant.
  • NewTeam, ModifyTeam, and ApplyTeamSpecs now return fleet.NewInvalidArgumentError("name", "may not exceed 255 characters") instead of surfacing a raw Data too long MySQL error. Covers UI, API, and GitOps entry points.

Broader consistency pass (per #49041 thread):

  • New shared MAX_ENTITY_NAME_LENGTH = 255 constant in frontend/utilities/constants.tsx.
  • Refactored 8 existing files that had ad-hoc NAME_MAX_LENGTH = 255 / MAX_LABEL_NAME_LENGTH = 255 locals to use it.
  • Slotted it into 16 additional InputField name/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).
  • Pruned dead FE length validators that can no longer fire now that the DOM cap enforces the limit (certificate modal, custom variable modal, both label helpers, both category modals). 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.

Bonus: fixed the long-label overflow on the host details Labels card by capping the pill button max-width at 300px.

Screenrecording

Testing

  • Added/updated automated tests
  • QA'd all new/changed functionality manually

Test coverage:

  • CreateFleetModal.tests.tsx, RenameFleetModal.tests.tsx — new case per file asserting the name input's maxLength === 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 to maxLength === 255 assertions.
  • ee/server/service/teams_test.goTestNewTeamNameValidation, TestModifyTeamNameValidation, and TestApplyTeamSpecsNameValidation each get two new cases (accepts at the limit, rejects one over with the expected error message).

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

codecov Bot commented Jul 13, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 67.99%. Comparing base (fb3932f) to head (3ce51d8).
⚠️ Report is 9 commits behind head on main.

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     
Flag Coverage Δ
backend 69.56% <100.00%> (+<0.01%) ⬆️
frontend 59.34% <100.00%> (-0.02%) ⬇️

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.

…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.
@RachelElysia

Copy link
Copy Markdown
Member Author

@claude review

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.

Long fleet name isn't handled across the Fleets UI: no char limit, table overflow, wrapped header actions, modal overflow

1 participant