Fleet UI: Clean up empty enroll secret bugs#43233
Conversation
![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.
| padding: 7px $pad-medium; | ||
| margin: $pad-large 0 0 44px; | ||
| } | ||
|
|
| title="Manage enroll secrets" | ||
| className={baseClass} | ||
| > | ||
| <div className={`${baseClass} form`}> |
There was a problem hiding this comment.
just moved the form div into the ternary, that's what was styling the empty state to be 100% width + its padding made the empty state overflow
| margin: $pad-medium 0 0 0; | ||
| } | ||
|
|
||
| pre, |
There was a problem hiding this comment.
Pull request overview
This PR addresses UI styling issues around the “no enroll secrets” empty states by adjusting layout and replacing button/plain-text CTAs with underlined link-style actions.
Changes:
- Replace “Manage enroll secrets” CTAs with
CustomLinkin the Hosts page banner and Add Hosts modal. - Refactor
EnrollSecretModalrendering to better handle empty vs. non-empty secrets layouts. - Remove unused
pre/codestyling blocks from enroll secrets modal SCSS.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx | Converts the no-enroll-secrets InfoBanner CTA into a clickable CustomLink. |
| frontend/components/AddHostsModal/AddHostsModal.tsx | Replaces the “Manage enroll secrets” button with CustomLink in the missing-secret error state. |
| frontend/components/EnrollSecrets/EnrollSecretModal/EnrollSecretModal.tsx | Reorganizes modal structure to improve empty-state layout and spacing. |
| frontend/components/EnrollSecrets/EnrollSecretModal/_styles.scss | Removes unused pre/code styling from the enroll secret modal styles. |
| frontend/components/EnrollSecrets/SecretEditorModal/_styles.scss | Removes unused pre/code styling from the secret editor modal styles. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <CustomLink | ||
| customClickHandler={() => setShowEnrollSecretModal(true)} | ||
| text="Manage enroll secrets" | ||
| />{" "} |
There was a problem hiding this comment.
CustomLink renders an <a href={url}>. In this new usage no url is provided, so the anchor can be rendered without an href, which is typically not announced as a link by screen readers and can behave inconsistently for keyboard users. Consider either providing a real url (and navigate to enroll secret management), or switching to a semantic button styled as a link / updating CustomLink usage to include appropriate href/role when it only opens a modal.
| <CustomLink | |
| customClickHandler={() => setShowEnrollSecretModal(true)} | |
| text="Manage enroll secrets" | |
| />{" "} | |
| <button | |
| type="button" | |
| onClick={() => setShowEnrollSecretModal(true)} | |
| style={{ | |
| background: "none", | |
| border: 0, | |
| padding: 0, | |
| margin: 0, | |
| color: "inherit", | |
| textDecoration: "underline", | |
| cursor: "pointer", | |
| font: "inherit", | |
| }} | |
| > | |
| Manage enroll secrets | |
| </button>{" "} |
There was a problem hiding this comment.
CustomLink with no href is the only way we currently can get that underline like a link styling with a custom onclick. Maybe we can revisit with agentic programming to get a button to do the underline transition on hover in a future iteration.
| {openEnrollSecretModal ? ( | ||
| <Button onClick={onManageEnrollSecretsClick} variant="inverse"> | ||
| Manage enroll secrets | ||
| </Button> | ||
| <CustomLink | ||
| customClickHandler={onManageEnrollSecretsClick} | ||
| text="Manage enroll secrets" | ||
| /> |
There was a problem hiding this comment.
CustomLink renders an <a href={url}>, but this usage doesn’t pass a url. Anchors without href are usually not treated as links by assistive tech, even if they’re clickable. Consider passing a real url (or adjusting the component/usage to render a semantic button when it’s an in-app action that opens a modal).
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #43233 +/- ##
=======================================
Coverage 66.85% 66.85%
=======================================
Files 2581 2583 +2
Lines 206985 207065 +80
Branches 9259 9290 +31
=======================================
+ Hits 138373 138427 +54
- Misses 56042 56069 +27
+ Partials 12570 12569 -1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Issue
Closes #43232
Description
Screenrecording
Screen.Recording.2026-04-08.at.10.32.13.AM.mov
Testing