Skip to content

simplify OS modal - #43252

Merged
MagnusHJensen merged 4 commits into
mainfrom
40702-simplify-os-modal
Apr 9, 2026
Merged

simplify OS modal#43252
MagnusHJensen merged 4 commits into
mainfrom
40702-simplify-os-modal

Conversation

@MagnusHJensen

@MagnusHJensen MagnusHJensen commented Apr 8, 2026

Copy link
Copy Markdown
Member

Related issue: Resolves #40702

New look:
image

Checklist for submitter

If some of the following don't apply, delete the relevant line.

  • Changes file added for user-visible changes in changes/, orbit/changes/ or ee/fleetd-chrome/changes.
    See Changes files for more information.

  • Input data is properly validated, SELECT * is avoided, SQL injection is prevented (using placeholders for values in statements), JS inline code is prevented especially for url redirects, and untrusted data interpolated into shell scripts/commands is validated against shell metacharacters.

  • Timeouts are implemented and retries are limited to avoid infinite loops

  • If paths of existing endpoints are modified without backwards compatibility, checked the frontend/CLI for any necessary changes

Testing

  • Added/updated automated tests
  • QA'd all new/changed functionality manually

Summary by CodeRabbit

  • Bug Fixes

    • Simplified pending status labels in OS Settings modal by removing "(pending)" suffix from states like "Enforcing" and "Removing enforcement"
    • Improved OS Settings modal table layout and styling
  • New Features

    • Added dedicated action buttons to resend MDM profiles and rotate Recovery Lock password
    • Enhanced error tooltip handling for failed profile states

@MagnusHJensen
MagnusHJensen requested a review from a team as a code owner April 8, 2026 17:06
Copilot AI review requested due to automatic review settings April 8, 2026 17:06

@claude claude Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@codecov

codecov Bot commented Apr 8, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 54.54545% with 30 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.84%. Comparing base (e6357cf) to head (d672ca0).
⚠️ Report is 70 commits behind head on main.

Files with missing lines Patch % Lines
...able/OSSettingsResendCell/OSSettingsResendCell.tsx 53.70% 25 Missing ⚠️
...sTable/OSSettingStatusCell/OSSettingStatusCell.tsx 44.44% 4 Missing and 1 partial ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #43252      +/-   ##
==========================================
- Coverage   66.84%   66.84%   -0.01%     
==========================================
  Files        2587     2588       +1     
  Lines      207336   207333       -3     
  Branches     9207     9318     +111     
==========================================
- Hits       138591   138588       -3     
- Misses      56135    56136       +1     
+ Partials    12610    12609       -1     
Flag Coverage Δ
frontend 54.75% <54.54%> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@MagnusHJensen

Copy link
Copy Markdown
Member Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Apr 8, 2026

Copy link
Copy Markdown
Contributor
✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR simplifies the Host details OS settings modal UI by removing the dedicated error/details presentation and consolidating information into the status tooltip, while keeping resend/rotate actions in a compact action column.

Changes:

  • Removes “(pending)” from several status labels and enables clickable tooltips for better UX.
  • Moves error details into the Status tooltip for failed profiles, and replaces the “Details” column content with an actions-only (resend/rotate) cell.
  • Updates styling and test suite to reflect the new table layout and behaviors.

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/components/DiskEncryptionTable/DiskEncryptionTableConfig.tsx Removes “(pending)” from disk encryption status labels in the Controls table.
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/OSSettingStatusCell.tsx Adds failed-status error tooltip support and makes tooltips clickable; adjusts pending label text for Android cert flow.
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/OSSettingStatusCell.tests.tsx Updates expectations for new status label text (removing “(pending)” in covered cases).
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/helpers.ts Updates status label text for install/remove flows (but pending text remains in some configs).
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/errorTooltipHelpers.tsx Refactors prior error-cell logic into a tooltip content generator for failed status.
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx Replaces the “Details” column with a blank-header actions column; passes full profile to status cell.
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsResendCell/OSSettingsResendCell.tsx New actions-only cell for resend/rotate behavior.
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsResendCell/OSSettingsResendCell.tests.tsx New unit tests for resend/rotate button visibility rules.
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsResendCell/index.ts Barrel export for the new actions cell component.
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsResendCell/_styles.scss Styles actions cell as right-aligned, button-only content.
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsNameCell/_styles.scss Removes name cell tooltip sizing overrides (layout adjustment).
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/OSSettingsErrorCell.tests.tsx Removes tests for the deleted Error cell behavior.
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/index.ts Removes barrel export for deleted Error cell.
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/_styles.scss Adjusts table column sizing/overflow and updates hover rules for new resend/rotate classes.
changes/40702-simplif-os-modal Adds changelog entry for the OS settings modal layout improvement.
Comments suppressed due to low confidence (1)

frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/errorTooltipHelpers.tsx:165

  • The doc comment still refers to generating a tooltip for the “error column”, but this helper is now used to populate the tooltip content for the status cell when status is failed. Updating the wording would prevent confusion for future maintainers.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@coderabbitai

coderabbitai Bot commented Apr 8, 2026

Copy link
Copy Markdown
Contributor

Walkthrough

The PR simplifies the OS settings modal interface by removing the "(pending)" suffix from pending status labels across disk encryption and MDM profile display configurations. It consolidates error handling by removing the OSSettingsErrorCell component and integrating error message tooltip functionality into the status cell via generateErrorTooltip. A new OSSettingsResendCell component is introduced to handle resend and rotate-recovery-lock profile actions with dedicated button controls. Table layout is refactored to use fixed-width columns with explicit column widths, and tooltips are made clickable for improved interactivity.

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title 'simplify OS modal' is concise and directly reflects the main objective of the PR—simplifying the OS settings modal UI.
Description check ✅ Passed The PR description includes a related issue reference (#40702), visual reference (screenshot), and completed checklist items covering changes file, security validation, testing, and manual QA.
Linked Issues check ✅ Passed The code changes comprehensively address all engineering requirements from issue #40702: removed Error column, added Resend column with buttons, converted error messages to tooltips, removed '(pending)' suffixes, improved tooltip hover behavior, adjusted table layout, and updated tests.
Out of Scope Changes check ✅ Passed All code changes are directly scoped to the OS modal simplification objectives. The refactoring of error-handling components, status display text, table layout, and resend buttons align with the Figma design and requirements specified in issue #40702.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 40702-simplify-os-modal

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/helpers.ts (1)

111-196: ⚠️ Potential issue | 🟠 Major

Pending suffix removal is incomplete across status configs.

Line 136, Line 142, Line 172, Line 188, and Line 193 still render "(pending)", so users will see inconsistent status text depending on row type/platform.

Suggested patch
 export const WINDOWS_DISK_ENCRYPTION_DISPLAY_CONFIG: WindowsDiskEncryptionDisplayConfig = {
@@
   pending: {
-    statusText: "Enforcing (pending)",
+    statusText: "Enforcing",
@@
   action_required: {
-    statusText: "Action required (pending)",
+    statusText: "Action required",
@@
 export const LINUX_DISK_ENCRYPTION_DISPLAY_CONFIG: LinuxDiskEncryptionDisplayConfig = {
@@
   action_required: {
-    statusText: "Action required (pending)",
+    statusText: "Action required",
@@
 export const RECOVERY_LOCK_PASSWORD_DISPLAY_CONFIG: Record<
   RecoveryLockPasswordStatus,
   ProfileDisplayOption
 > = {
@@
   pending: {
-    statusText: "Enforcing (pending)",
+    statusText: "Enforcing",
@@
   removing_enforcement: {
-    statusText: "Removing enforcement (pending)",
+    statusText: "Removing enforcement",
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/helpers.ts`
around lines 111 - 196, The status text still includes the "(pending)" suffix in
several display configs; update the statusText values to remove that suffix for
consistency. Specifically, in WINDOWS_DISK_ENCRYPTION_DISPLAY_CONFIG change the
"pending" entry from "Enforcing (pending)" and "action_required" from "Action
required (pending)" to remove "(pending)"; in
LINUX_DISK_ENCRYPTION_DISPLAY_CONFIG change "action_required" similarly; and in
RECOVERY_LOCK_PASSWORD_DISPLAY_CONFIG remove "(pending)" from the "pending" and
"removing_enforcement" statusText values so all platforms render consistent
statusText strings.
🧹 Nitpick comments (3)
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx (1)

94-97: Keep the column visually unlabeled, but add an accessible header label.

Line 94 uses Header: ""; this can degrade table navigation for screen readers. Consider rendering a visually hidden “Actions” header instead.

Suggested patch
     {
-      Header: "",
+      Header: () => <span className="sr-only">Actions</span>,
       disableSortBy: true,
       accessor: "detail",
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx`
around lines 94 - 97, The column with accessor "detail" currently uses Header:
"" which is invisible to screen readers; update the column definition in
OSSettingsTableConfig (the column object with accessor "detail" and Cell) to
provide an accessible header while keeping it visually hidden — e.g., replace
the empty Header with a React header element that renders a visually hidden
label like "Actions" (use your app's existing "sr-only" or visuallyHidden
utility class) so sighted users see no label but assistive tech reads "Actions".
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/_styles.scss (1)

19-24: Add empty line before comment to satisfy linter.

Stylelint reports a missing empty line before the comment on line 19.

🔧 Proposed fix
     th.status__header {
       width: 200px;
     }
+
     // Name column absorbs remaining space and truncates with ellipsis.
     tbody td.name__cell {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/_styles.scss`
around lines 19 - 24, Insert a blank line immediately before the comment "//
Name column absorbs remaining space and truncates with ellipsis." in the SCSS
block for tbody td.name__cell to satisfy Stylelint; locate the comment above the
selector tbody td.name__cell and add one empty line between the previous line
and that comment so the linter no longer reports a missing empty line before the
comment.
frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsResendCell/OSSettingsResendCell.tests.tsx (1)

12-111: Consider adding negative test cases for Resend button visibility.

The test suite covers the happy paths for the Resend button but is missing negative test cases that mirror the Rotate button tests:

  1. Does not render a Resend button when canResendProfiles is false
  2. Does not render a Resend button when status is pending
  3. Does not render a Resend button for the recovery lock profile (REC_LOCK_SYNTHETIC_PROFILE_UUID)

These would ensure symmetry with the Rotate button tests and provide complete coverage for the visibility logic in OSSettingsResendCell.tsx (lines 141-144).

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsResendCell/OSSettingsResendCell.tests.tsx`
around lines 12 - 111, Add three negative test cases to
OSSettingsResendCell.tests.tsx to mirror the Rotate tests: (1) render
OSSettingsResendCell with canResendProfiles={false} and a non-recovery profile
and assert screen.queryByRole("button", { name: "Resend" }) is not in the
document; (2) render with canResendProfiles and profile status "pending" and
assert the Resend button is not present; (3) render with canResendProfiles and
profile_uuid set to REC_LOCK_SYNTHETIC_PROFILE_UUID and assert the Resend button
is not present; use the existing createMockHostMdmProfile helper, noop for
callbacks, and the same render/assert pattern used elsewhere in the file.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsResendCell/OSSettingsResendCell.tsx`:
- Around line 18-21: The onClick prop in interface IResendButtonProps uses an
incorrect second generic for React.MouseEvent; update the type signature for
onClick (in IResendButtonProps) to use the native DOM event as the second
generic (e.g., React.MouseEvent<HTMLButtonElement, MouseEvent>) or omit the
second generic to use the default, ensuring the handler signature is (evt:
React.MouseEvent<HTMLButtonElement, MouseEvent>) => void.
- Around line 96-118: The onResendProfile handler is missing a success flash for
the non-Android path; after the await call to
resendRequest(profile.profile_uuid) in the else branch, call
renderFlash("success", "Successfully sent request to resend profile.") (or match
the Android message) and then call onProfileResent(), keeping the existing error
handling and the setIsResending toggles; update the else branch in
onResendProfile (which currently awaits resendRequest and calls onProfileResent)
to include the success renderFlash call.

---

Outside diff comments:
In
`@frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/helpers.ts`:
- Around line 111-196: The status text still includes the "(pending)" suffix in
several display configs; update the statusText values to remove that suffix for
consistency. Specifically, in WINDOWS_DISK_ENCRYPTION_DISPLAY_CONFIG change the
"pending" entry from "Enforcing (pending)" and "action_required" from "Action
required (pending)" to remove "(pending)"; in
LINUX_DISK_ENCRYPTION_DISPLAY_CONFIG change "action_required" similarly; and in
RECOVERY_LOCK_PASSWORD_DISPLAY_CONFIG remove "(pending)" from the "pending" and
"removing_enforcement" statusText values so all platforms render consistent
statusText strings.

---

Nitpick comments:
In `@frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/_styles.scss`:
- Around line 19-24: Insert a blank line immediately before the comment "// Name
column absorbs remaining space and truncates with ellipsis." in the SCSS block
for tbody td.name__cell to satisfy Stylelint; locate the comment above the
selector tbody td.name__cell and add one empty line between the previous line
and that comment so the linter no longer reports a missing empty line before the
comment.

In
`@frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsResendCell/OSSettingsResendCell.tests.tsx`:
- Around line 12-111: Add three negative test cases to
OSSettingsResendCell.tests.tsx to mirror the Rotate tests: (1) render
OSSettingsResendCell with canResendProfiles={false} and a non-recovery profile
and assert screen.queryByRole("button", { name: "Resend" }) is not in the
document; (2) render with canResendProfiles and profile status "pending" and
assert the Resend button is not present; (3) render with canResendProfiles and
profile_uuid set to REC_LOCK_SYNTHETIC_PROFILE_UUID and assert the Resend button
is not present; use the existing createMockHostMdmProfile helper, noop for
callbacks, and the same render/assert pattern used elsewhere in the file.

In
`@frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx`:
- Around line 94-97: The column with accessor "detail" currently uses Header: ""
which is invisible to screen readers; update the column definition in
OSSettingsTableConfig (the column object with accessor "detail" and Cell) to
provide an accessible header while keeping it visually hidden — e.g., replace
the empty Header with a React header element that renders a visually hidden
label like "Actions" (use your app's existing "sr-only" or visuallyHidden
utility class) so sighted users see no label but assistive tech reads "Actions".
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9bc5ab65-fffe-43e2-8cb0-1a0d4a1d6dc9

📥 Commits

Reviewing files that changed from the base of the PR and between 6a71c18 and 9fa83ba.

📒 Files selected for processing (15)
  • changes/40702-simplif-os-modal
  • frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/components/DiskEncryptionTable/DiskEncryptionTableConfig.tsx
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/OSSettingStatusCell.tests.tsx
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/OSSettingStatusCell.tsx
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/errorTooltipHelpers.tsx
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/helpers.ts
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/OSSettingsErrorCell.tests.tsx
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/index.ts
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsNameCell/_styles.scss
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsResendCell/OSSettingsResendCell.tests.tsx
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsResendCell/OSSettingsResendCell.tsx
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsResendCell/_styles.scss
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsResendCell/index.ts
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/_styles.scss
💤 Files with no reviewable changes (2)
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/index.ts
  • frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/OSSettingsErrorCell.tests.tsx

@RachelElysia RachelElysia left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked out the UI (without a failing OS) and looks great just like the code, tysm!

@MagnusHJensen

Copy link
Copy Markdown
Member Author

Thanks @RachelElysia 🤘

@MagnusHJensen
MagnusHJensen merged commit 90f75f1 into main Apr 9, 2026
19 checks passed
@MagnusHJensen
MagnusHJensen deleted the 40702-simplify-os-modal branch April 9, 2026 21:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Simplify OS settings modal

3 participants