Fleet UI: Mobile self-service page - #34758
Merged
RachelElysia merged 11 commits intoOct 31, 2025
Merged
Conversation
RachelElysia
force-pushed
the
32247-selfservice-mobile-width
branch
from
October 24, 2025 19:02
128cf9b to
bd0db0e
Compare
RachelElysia
temporarily deployed
to
Docker Hub
October 24, 2025 19:02 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
RachelElysia
force-pushed
the
32247-selfservice-mobile-width
branch
from
October 28, 2025 21:04
bd0db0e to
c24765c
Compare
RachelElysia
had a problem deploying
to
Docker Hub
October 28, 2025 21:05 — with
GitHub Actions
Error
GitHub Actions
Error
RachelElysia
marked this pull request as ready for review
October 28, 2025 21:05
RachelElysia
temporarily deployed
to
Docker Hub
October 28, 2025 21:08 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
Contributor
|
@coderabbitai summay |
Contributor
|
@ghernandez345: I'll generate a summary for this PR. ✅ Actions performedSummary regeneration triggered. |
Contributor
WalkthroughThis PR adds mobile-responsive UI support for iOS/iPadOS self-service software installation on the device page. It introduces mobile detection, component refactoring for mobile-optimized layouts, iOS/iPadOS-specific tooltip handling, type updates from Changes
Sequence DiagramsequenceDiagram
actor User
participant Device as Mobile Device<br/>(width < 768px)
participant SelfService as SelfService Page
participant Header as SelfServiceHeader
participant Tiles as SelfServiceTiles
participant Modal as CategoriesEndUserExperienceModal
participant Detector as isIpadOrIphoneSoftwareSource
Device->>SelfService: Render SelfService (isMobileView=true)
SelfService->>Detector: Check source (isIosOrIpadosApp?)
alt isMobileView is true
SelfService->>Header: Render mobile variant<br/>(variant="mobile-header")
SelfService->>Tiles: Render tile layout<br/>(vs table)
Header->>Header: Use CardHeader<br/>with BEM--mobile-header
Tiles->>Tiles: Grid of software tiles<br/>with per-tile actions
User->>Tiles: Click "Install"
Tiles->>Modal: Open preview modal
Detector->>Modal: Pass isIosOrIpadosApp=true
Modal->>Modal: Show mobile preview image<br/>(CategoriesEndUserExperiencePreviewMobile)
else Desktop view
SelfService->>SelfService: Render traditional layout<br/>(SearchField + Table)
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Areas requiring extra attention:
Possibly related PRs
Suggested reviewers
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (52)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
ghernandez345
previously requested changes
Oct 29, 2025
ghernandez345
left a comment
ghernandez345
left a comment
Contributor
There was a problem hiding this comment.
Looks good. nothing major to change. jsut a few suggestions and questions
| data-tip | ||
| data-for={tooltipId} | ||
| // toggle trigger events based on prop | ||
| data-event={isMobileView ? "click" : "mouseenter focus"} |
Contributor
There was a problem hiding this comment.
im guessing this is changing the triggering event for showing the tooltip for mobile. Will click work ok here or is a touch event better in this case? I know there are many dom touch events and Im wondering if those are more appropriate here instead of a "click" event.
My guess is that click will work just fine but we probably wanna test it on a real mobile device to see if click or touchstart or touchend work better.
| ); | ||
|
|
||
| // Define paths that will not show the unsupported screen overlay | ||
| const lowWidthSupportedPathsRegex = [deviceSelfServiceRegex]; |
Contributor
There was a problem hiding this comment.
for these is it possible to use the paths we have defined in router/paths.ts? that way if thsoe change then we wont have to come back here to make changes as well
RachelElysia
temporarily deployed
to
Docker Hub
October 29, 2025 21:07 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
RachelElysia
temporarily deployed
to
Docker Hub
October 30, 2025 14:48 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
RachelElysia
temporarily deployed
to
Docker Hub
October 30, 2025 17:49 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## feat-32247-ios-ipados-self-service #34758 +/- ##
======================================================================
- Coverage 66.21% 66.21% -0.01%
======================================================================
Files 2073 2080 +7
Lines 174715 174893 +178
Branches 7172 7173 +1
======================================================================
+ Hits 115694 115804 +110
- Misses 48386 48453 +67
- Partials 10635 10636 +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:
|
RachelElysia
dismissed
ghernandez345’s stale review
October 31, 2025 14:56
ready for re-review, still can't merge until BE is merged
ghernandez345
approved these changes
Oct 31, 2025
RachelElysia
changed the base branch from
main
to
feat-32247-ios-ipados-self-service
October 31, 2025 16:43
RachelElysia
merged commit Oct 31, 2025
5d2fe13
into
feat-32247-ios-ipados-self-service
15 checks passed
cdcme
added a commit
that referenced
this pull request
Nov 7, 2025
Implements #32247. This is the complete feature branch, consolidating: - #35018 - #34758 - #35009 - #35181 - #35342 --------- Co-authored-by: Jonathan Katz <44128041+jkatz01@users.noreply.github.com> Co-authored-by: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Co-authored-by: Martin Angers <martin.n.angers@gmail.com> Co-authored-by: jkatz01 <yehonatankatz@gmail.com>
RachelElysia
commented
Dec 22, 2025
| page: 0, | ||
| sort_header: "name", | ||
| sort_direction: "asc" as "asc" | "desc", | ||
| page_size: 9999, // 4.77 Design decision to remove UI pagination |
1 task
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue
Closes #32247
Description
Screenrecording
https://fleetdm.zoom.us/clips/share/4C1e4TubTy2Cz9GDYByUdw
TODO
Checklist for submitter
If some of the following don't apply, delete the relevant line.
changes/,orbit/changes/oree/fleetd-chrome/changes.See Changes files for more information.
Testing
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Refactor