## Issue
Closes#47290
Also implements the "Cap free-text `maxLength` to the backend column
length" pattern established in [#49041 (patterns.md
thread)](https://github.com/fleetdm/fleet/pull/49041/files#r3572648691).
## 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.
**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](https://github.com/fleetdm/fleet/pull/49041/files#r3572648691)):**
- New shared `MAX_ENTITY_CHAR_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
https://github.com/user-attachments/assets/b917b72e-7437-4d0c-a1a1-c49b4b1c28bahttps://github.com/user-attachments/assets/3a3efbb2-09d8-4f47-9fd4-f158b3453b9ehttps://github.com/user-attachments/assets/73e5e022-dc93-4381-82b3-be9549d050e6
Latest - max width 300px long label:
<img width="1106" height="262" alt="Screenshot 2026-07-23 at 11 29
24 AM"
src="https://github.com/user-attachments/assets/741fddbd-f78d-4578-a025-bddf64a81c25"
/>
## Testing
- [x] Added/updated automated tests
- [x] 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.go` — `TestNewTeamNameValidation`,
`TestModifyTeamNameValidation`, and `TestApplyTeamSpecsNameValidation`
each get two new cases (accepts at the limit, rejects one over with the
expected error message).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Limited fleet, team, and other user-entered names and descriptions to
255 characters.
* Replaced database errors for oversized names with clear validation
messages.
* Prevented long fleet and label names from overflowing tables, headers,
modals, and host details.
* Improved modal and dropdown layouts for long text.
* **Tests**
* Added coverage for character limits, boundary values, and multibyte
names.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
**Related issue:** Resolves#49276
**New features**
- Added new "Secondary" (bordered, off-white fill) and "Subdued"
(borderless, low-emphasis) button variants to match the Figma spec,
alongside the existing Primary style.
- Allowed rows to be selected in Controls > OS updates.
**Cleanup**
- Once nothing referenced the old styles anymore, fully removed the old
`text-icon`, `brand-inverse-icon`, `inverse-alert`, `inverse`, and
`icon` button variants (type, styles, and Storybook entries) from the
shared `Button` component.
- Removed the `iconStroke` prop, which had become a no-op once the old
variants it supported were gone.
- Renamed `ActionsDropdown`'s variants
(`button`/`brand-button`/`small-button`) to
`subdued`/`primary`/`secondary` to match the same naming used everywhere
else.
- Replaced a one-off dropdown implementation on the Software title page
with the shared `ActionsDropdown` component, instead of maintaining
duplicate styling logic.
- Changed the button name on Host details > Reports > Report details
from "View data for all hosts" to "View report for all hosts" (to match
the previous page's Actions drop-down options).
# Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
## Testing
- [x] Added/updated automated tests
- [x] QA'd all new/changed functionality manually
<img width="1475" height="241" alt="Screenshot 2026-07-21 at 06 35 49"
src="https://github.com/user-attachments/assets/7cfbd444-7837-40e8-854e-bc5989d57d85"
/>
<img width="661" height="306" alt="Screenshot 2026-07-21 at 06 37 18"
src="https://github.com/user-attachments/assets/5d0c4873-8179-4089-b115-7e8cd3a53b4d"
/>
<img width="1427" height="423" alt="Screenshot 2026-07-21 at 06 37 30"
src="https://github.com/user-attachments/assets/a4850a60-f44a-4902-b45e-0094f23a52f8"
/>
<img width="1427" height="640" alt="Screenshot 2026-07-21 at 06 37 46"
src="https://github.com/user-attachments/assets/738a4a7f-cd7d-4162-b659-6f649c32204d"
/>
<img width="1445" height="479" alt="Screenshot 2026-07-22 at 07 03 22"
src="https://github.com/user-attachments/assets/4f672dc0-5c6d-4eb8-8465-ed5233fcd1b2"
/>
<img width="811" height="871" alt="Screenshot 2026-07-21 at 06 41 20"
src="https://github.com/user-attachments/assets/5421c96e-2dab-492a-af26-be0e5a7791ca"
/>
<!-- Add the related story/sub-task/bug number, like Resolves#123, or
remove if NA -->
**Related issue:** Resolves#44854
This PR explicitly enables the 1Password autofill icon for credential
fields, such as the ones in the login form.
Made the decision to have `ignore1password=true` by default (less LOC
changed since the vast majority of inputs aren't credential fields).
Note: even though the Certificate Authority input fields contain some
kind of secret or credentials, I feel like these differ enough from one
another (+ these are usually admin-pasted values) that it didn't make
sense to have the 1PW autofill on them.
# Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files)
for more information.
## Testing
- [x] Added/updated automated tests
- [x] QA'd all new/changed functionality manually
https://github.com/user-attachments/assets/c8539d8f-e0e3-4499-ae67-16cfd0f59e3a
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Prevented the 1Password autofill icon from appearing on non-credential
inputs.
* Ensured explicit 1Password autofill handling for email/password fields
across login, registration, password reset, and account forms.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Issue
- First batch of @iansltx 's work of cleaning up lint warnings #43387
## Description
- Quick PR review and grabbed as many confirmed low-risk quick wins as I
could `git checkout lint-cleanup <file/path/1> <file/path/2>`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
This release contains internal code improvements with one minor UI
tweak:
* **Style**
* Dropdown menu background color adjusted for clearer contrast in action
lists
* **Refactor**
* Improved type safety across the codebase with stricter TypeScript
annotations
* Removed unused imports and constants to reduce code clutter
* Enhanced React hook dependency arrays for more consistent component
behavior
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Rachel Perkins <rachel@Rachels-MacBook-Pro.local>
Co-authored-by: Ian Littman <iansltx@gmail.com>
Zed + Opus 4.6; prompt: Convert the InputField JSX component to
TypeScript and remove the ts-ignore directives that we no longer need
after doing so.
- [x] Changes file added
- [x] Automated tests updated
## Addresses #15325
- Define shared global styles for forms (`form` and `.form`s) and
`.form-field`s
- Sweep through the app, updating each form from being locally styled to
first prioritizing the global styles and only defining local styles
where needed for custom behavior
- Remove lots of unnecessary nesting of elements
- Other small bug fixes and improvements
### Samples, before (L) | after (R):
**Save query modal**
**Edit query form**
**Add hosts modal**
## QA Plan:
@xpkoala here's the same list from the issue, freshly de-checked for you
to use if it's helpful:
* Please check error states of each field
#### Specified by issue:
##### In "Save query" modal:
- [ ] Reduce space between checkboxes and their help text to 8px/0.5rem
for the following fields:
- [ ] Observers can run
- [ ] Discard data
- [ ] Update the following checkbox labels to have normal font weight
(not bold):
- [ ] Discard data
##### On "Edit query" page:
- [ ] Update the following checkbox labels to have normal font weight
(not bold):
- [ ] Observers can run
- [ ] Discard data
##### In "Add hosts" modal, for copy text fields:
- [ ] match typical form form field styles
- [ ] Adjust the positioning of the copy icon to keep it from being too
far down
##### Further locations to check
- [ ] ChangeEmailForm.jsx
- [ ] ChangePasswordForm.jsx
- [ ] ConfirmInviteForm.jsx
- [ ] ConfirmSSOInviteForm.jsx
- [ ] EnrollSecretModal.tsx
- [ ] ForgotPasswordForm.jsx
- [ ] LoginForm.tsx
- [ ] EditPackForm.tsx
- [ ] (New)PackForm.tsx
- [ ] AdminDetails.jsx
- [ ] ConfirmationPage.tsx
- [ ] FleetDetails.jsx
- [ ] OrgDetails.jsx
- [ ] ResetPasswordForm.tsx
- [ ] UserSettingsForm.jsx
- [ ] EditTeamModal.tsx
- [ ] IdpSection.tsx
- [ ] DeleteIntegrationModal.tsx
- [ ] IntegrationForm.tsx
- [ ] EndUserMigrationSection.tsx
- [ ] RequestCSRModal.tsx
- [ ] Advanced.tsx
- [ ] Agents.tsx
- [ ] FleetDesktop.tsx
- [ ] HostStatusWebhook.tsx front
- [ ] Info.tsx
- [ ] Smtp.tsx
- [ ] Sso.tsx
- [ ] Statistics.tsx
- [ ] WebAddress.tsx
- [ ] CreateTeamModal.tsx
- [ ] DeleteTeamModal.tsx
- [ ] EditTeamModal.tsx
- [ ] AgentOptionsPage.tsx
- updated the layout of this page to align with the rest of the forms in
the UI – can easily revert if it's not what we want
- [ ] AddMemberModal.tsx
- [ ] RemoveMemberModal.tsx
- [ ] UserForm.tsx
- Used by both `EditUserModal` and `CreateUserModal`
- A few different conditions that cause different rendering behavior
- [ ] DeleteHostModal.tsx
- [ ] TransferHostModal.tsx
- [ ] LabelForm.tsx
- [ ] MacOSTargetForm.tsx
- [ ] WindowsTargetForm.tsx
- [ ] BootstrapPackageListltem.ts
- [ ] EndUserAuthForm.tsx
- [ ] PackQueryEditorModal.tsx
- [ ] PolicyForm.tsx
- [ ] SaveNewPolicyModal.tsx
- [ ] ConfirmSaveChangesModal.tsx
- [ ] Query automations modal
- [ ] Policy automations modal - addresses #16010
- [ ] SoftwareAutomationsModal
## Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
Co-authored-by: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
* base logic to handle rendering a notification without redux
* removed dispatches for new flash mesage triggers
* query page wrapper is no longer needed
* refactored confirm invite page to remove redux
* refactored email token redirect to functional and typescript
* refactored pack composer page to functional and typescript
* clean up
* lint fixes
* tests no longer needed
* fixed confirm sso invite test
* test fix
* fixed test
* fixed tests
* removed redux from flash on rebased pages
* New query pack table renders
* services/entities created/updated with 5+ needed APIs requests for EditPacksPage
* Refactor jsx to tsx PackQueriesListWrapper, EditPackForm, EditPackPage
* Refactor to new patterns on useQuery, useEffect, and useState
* Refactor to new pattern formData formatting
* Edit, remove pack query modals
* e2e test: packflow built to test create, update, delete of pack, fix brittle teamflow
* Rename core->free and basic->premium
* Fix lint js
* Comment out portion of test that seems to timeout
* Rename tier to premium if basic is still loaded
- Fix "Query pack title" and "Description" input fields so they fill the full width of their container
- Replace "New Pack" with "New pack" in the page header (sentence casing)
- Input titles should have the font weight set to $bold
- Remove the folder icon from the title
- Remove bold sections from paragraphs including the "(interval = 3600s)," "targets," "individual hosts," and "labels."
- Change bullet and link colors to $fleet-core-vibrant-blue
- Replace differential and snapshot kolidecons with png images included in the Figma page.
* add prettier and have it format all js code except website:
:
* trying running prettier check in CI
* fix runs on in CI
* change CI job name
* fix prettier erros and fix CI
This if the 2nd PR as part of the of the Align components in Fleet UI with design system in Figma #539
These changes **refactor the spacing and font sizes** used by the frontend.
- Change the scss variables in `padding.scss` and `fonts.scss`.
- Replace custom styles with the new variables throughout all stylesheets.
* updated typescript version and tsconfig in project
* updated eslint version
* change from experimental export to supported export
* removed accidentally added script
* turn off buggy jsx-a11y eslint rules
* remove unused tslint.json
* fix wrong jsx-a11y depedency
* use correct eslint-plugin-jsx-a11y version
* fix rest of linting errors
* move back js-yaml version to 3 major
Fixes#65 by bringing in new regular and bold Source Code Pro monospaced fonts.
- Remove old Source Code Pro font files
- Add new platform icons to <QuerySidePanel />
- Edit styles in <EditPackForm />
The goal of this PR is to update the style across the query and packs pages so they are consistent with the latest global styles (colors, buttons, and fonts).
- Move from Mocha to Jest for JS testing (Jest seems to have better support for
'watching' tests and a more active community these days).
- Codemod existing tests to Jest syntax (using https://github.com/skovhus/jest-codemods)
- Fix some errors in tests that were previously hidden.
- Update Babel.
* Adds tests for the TargetDetails component
* Adds tests for Select Targets Menu
* Rename target_stub to target_mock
* Adds tests for the SelectTargetsDropdown & minor refactor
* Allow form field values to be an array
* Send the server host and label ids on create
* Get and display the targets in a pack
* Adds target_type to labels and hosts
* Allow updating a pack’s targets as well as name and description
* Adds select targets dropdown to edit pack page
* Adds targets to dropdown when pack is edited
RachelElysia