<!-- Add the related story/sub-task/bug number, like Resolves#123, or
remove if NA -->
**Related issue:** Resolves#46973
> **Draft:** on-device QA (Mac/iPhone/iPad) is pending hardware,
expected next week. Opening as draft for early review of the approach.
## Description
FMA and custom-package app icons were misaligned on the macOS setup
experience ("Setting up your device") screen — icons rendered at
different sizes and their "Install …" labels didn't line up.
**Root cause:** `SetupSoftwareProcessCell` forced `.software-icon__small
{ width: $pad-xlarge }` (32px, width only). That class lands on
different elements in `SoftwareIcon`'s two render paths, so it hit them
differently:
- **Fleet-maintained / VPP apps (icon URL)** → the class is on the
wrapper `<div>`; the 24px `<img>` inside stayed 24px, left-aligned.
- **Custom packages (no URL)** → the class is on the fallback **SVG**
itself, which got stretched to 32px wide.
Result: different icon sizes/positions by app type → the misalignment.
**Fix:** remove the width override so every app type renders
`SoftwareIcon` at its consistent, vertically-centered 24px "small" size.
## Testing
Verified in Storybook (added `SetupSoftwareProcessCell.stories.tsx`,
`MixedAlignment` story) with real matched brand icons (Chrome,
1Password, VS Code, Zoom), a generic custom-package icon, and a
URL/`<img>` icon stacked together:
- **Before** (with the override): icons render at mixed 24/32px sizes;
"Install …" labels don't align.
<img width="1135" height="398" alt="before"
src="https://github.com/user-attachments/assets/fe216ab4-0a7b-4211-b8aa-96e65e6ca3f5"
/>
- **After** (this change): all icons render at 24px, centered, labels
aligned.
<img width="1185" height="425" alt="after"
src="https://github.com/user-attachments/assets/28257eb8-df6e-4168-a0bb-28dda4bb40ba"
/>
On-device QA to follow once hardware is available.
## Notes for reviewer
- The `width: $pad-xlarge` (32px) was added in #33770, so 32px may have
been the *intended* icon size. This change makes them a consistent
**24px**. If a larger icon is desired, that's a follow-up done properly
via a real `SoftwareIcon` size (not a width-only override) — flagging
for PD input since this is `:product`-labeled.
- Included a Storybook story for visual verification/regression; happy
to drop it if that's not wanted here.
# Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files)
for more information.
## Testing
- [ ] QA'd all new/changed functionality manually <!-- pending on-device
QA -->
- Added a Storybook story for visual verification (not an automated
test).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved software process cell styling for more consistent icon sizing
and alignment.
* **Tests**
* Added Storybook scenarios covering fleet-maintained apps, custom
packages, uploaded icons, and mixed app layouts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- Add the related story/sub-task/bug number, like Resolves#123, or
remove if NA -->
**Related issue:** Resolves#33173
# Details
This PR updates the "Setting up your device" page which appears in Linux
and Windows (and as of https://github.com/fleetdm/fleet/issues/30117,
MacOS) setup experiences. Front-end updates:
* Lots of renaming of things that were software-specific to now more
generically refer to "setup step"
* Removed the "My Device" heading
* Moved the info button inside the table header
* Added status of setup script run to the table
* Updated the empty state to not refer specifically to software
* Added optional `setup_only` query param to the `/device` page which,
if set, will always show the "setting up your device" page even if all
setup is complete. Normally as soon as setup finishes, the front-end
redirects to the regular My Device page. In the case of MacOS setup
experience, we don't want this to happen as we expect to either 1) keep
the setup experience up indefinitely if we're blocking device setup on
software install failure, or 2) close the setup dialog on successful
completion. This query param is also handy for testing.
* Added new "Configuration complete" state to be shown when all setup
steps are finished (successfully or not). This is only applicable on
MacOS, since other platforms will redirect to the My Device page when
finished.
This PR also includes one small backend change to the
`/device/{token}/setup_experience/status` API endpoint, to have it
return a `scripts` array alongside the existing `software` array. This
endpoint is not documented publicly.
# Checklist for submitter
If some of the following don't apply, delete the relevant line.
- [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
Updated existing DeviceUserPage tests that check the SettingUpYourDevice
content, and added new tests for the new scripts content and the new
query param.
- [X] QA'd all new/changed functionality manually
<img width="1028" height="867" alt="Screenshot 2025-10-02 at 7 20 28 PM"
src="https://github.com/user-attachments/assets/7adab2c2-dac1-4463-96fc-13094da2c379"
/>
(note that as of now we'd only have at most one script, showing multiple
here to demonstrate the different states)
<img width="1031" height="524" alt="Screenshot 2025-10-02 at 7 22 01 PM"
src="https://github.com/user-attachments/assets/bedaa840-d7ef-4b6f-8daf-6ac3b447594f"
/>
<img width="1222" height="760" alt="image"
src="https://github.com/user-attachments/assets/42cf82d5-53e0-4c4d-b60e-9ac2cc86af68"
/>
---------
Co-authored-by: Ian Littman <iansltx@gmail.com>
## PR 2/2 for #32037
- Implements update for the Linux setup experience from the end-user's
point of view (the "My device" page).
- Works in concert with the new endpoints implemented in
https://github.com/fleetdm/fleet/pull/32493
- My device page calls a new endpoint to get in-progress setup
experience software installations. If there are any, the page is
replaced with a "Setting up your device" page
- The UI polls this endpoint until all such installations are either
successful or failed (including canceled)
- Setting up your device page includes a table displaying the name and
status of each software installation
- Once all installations are finished (succeed/fail), renders the
regular My device page
- Add a handler for the new API call for relevant tests
## Testing
Can use [this branch with fake
data](https://github.com/fleetdm/fleet/tree/32037-end-user-fake-data) to
help test this PR
- [x] Changes file added for user-visible changes in `changes/`
- [x] Added/updated automated tests - additional tests coming in
follow-up
- [x] QA'd all new/changed functionality manually
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
Rajendra Kadam