imgbot
3
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Rajendra Kadam
|
17669eca02 |
Center-align setup experience app icons (#49962)
<!-- 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 --> |
||
|
Scott GressandIan Littman
|
12ab93d9e0 |
Update "Setting up your device" page for MacOS Setup Experience (#33770)
<!-- 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> |
||
|
jacobshandlingandJacob Shandling
|
32c60fe69d |
UI: Linux setup experience - End user (#32639)
## 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> |