Fleet UI: Align technician empty state with EmptyState styling on configuration profiles and assets

[RachelElysia]

Issue

Closes #49461

Description

• Bug fix (root cause): the initial Configuration profiles: permission-based empty state styling inconsistency #49461 fix moved Admin/Maintainer users to the shared EmptyState on the Profiles and Assets tabs but kept Technicians on the old plain <Card> message, so Technicians still saw the inconsistent styling the issue was originally filed for.
• Technicians now render the same EmptyState variant="header-list" with the "No configuration profiles" / "No assets" heading. The prior technician copy ("No X have been added.") is preserved as the info prop, and the Add button is omitted since technicians can't add.
• Introduced canAddConfigurationProfile and canAddAsset role-capability variables (mirroring the existing canTurnOnMdm pattern) so widening beyond !isTechnician later is a one-line change.
• Removed the now-unused Card imports and orphaned .empty-profiles / .empty-assets SCSS rules.

Screenrecording

• Technician view of Profiles + Assets empty state

Screen.Recording.2026-08-11.at.10.09.37.AM.mov

Testing

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

Summary by CodeRabbit

• Improvements

  • Updated empty states for configuration profiles and assets with consistent styling and clearer messaging.
  • Technicians now see informational empty states without profile or asset creation actions.
  • Users with permission to add profiles or assets retain the relevant actions in empty states and page headers.

• Tests

  • Added coverage for technician-specific empty states and hidden creation buttons.

[codecov]

Codecov Report

❌ Patch coverage is 65.00000% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 68.53%. Comparing base (d817cfd) to head (ab194a3).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
...ds/ConfigurationProfiles/ConfigurationProfiles.tsx	40.00%	4 Missing and 2 partials ⚠️
...urationProfiles/components/AssetsTab/AssetsTab.tsx	90.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #50952   +/-   ##
=======================================
  Coverage   68.53%   68.53%           
=======================================
  Files        3980     3980           
  Lines      256351   256361   +10     
  Branches    13661    13671   +10     
=======================================
+ Hits       175688   175700   +12     
+ Misses      65026    65022    -4     
- Partials    15637    15639    +2     

Flag	Coverage Δ
frontend	62.74% <65.00%> (+0.01%)	⬆️

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

☔ View full report in Codecov by Harness.
📢 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.

[Copilot]

Warning

• Copilot's review of this pull request may be incomplete because some of the changed files are excluded by your Copilot content exclusion settings. See Excluding content from Copilot for details.

Pull request overview

Aligns the OS Settings “Configuration profiles” and “Assets” empty states so Technician users see the same EmptyState variant="header-list" styling as other roles, resolving the remaining styling inconsistency described in #49461.

Changes:

• Replaced Technician-only <Card> empty states with the shared EmptyState in both Profiles and Assets tabs, omitting the “Add” CTA for technicians.
• Introduced role-capability flags (canAddConfigurationProfile, canAddAsset) to centralize the “can add” decision.
• Added targeted tests for Technician empty states and removed now-unused Card imports and SCSS rules.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/ConfigurationProfiles.tsx	Uses EmptyState for empty profiles for all roles; hides Add CTA for technicians via canAddConfigurationProfile.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/ConfigurationProfiles.tests.tsx	Adds regression test ensuring technicians see EmptyState heading + info without Add profile CTA.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/AssetsTab/AssetsTab.tsx	Uses EmptyState for empty assets for all roles; hides Add CTA for technicians via canAddAsset.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/AssetsTab/AssetsTab.tests.tsx	Adds regression test ensuring technicians see EmptyState heading + info without Add asset CTA.
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/AssetsTab/_styles.scss	Removes obsolete .empty-assets styling (no longer used).
frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/_styles.scss	Removes obsolete .empty-profiles styling (no longer used).

Files excluded by content exclusion policy (1)

• changes/49461-technician-empty-state

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[coderabbitai]

Walkthrough

Configuration profiles and assets now use the shared EmptyState component. Technicians see non-actionable messages without add buttons. Other users retain the relevant add actions. Shared permission flags control both empty-state actions and header buttons. Tests cover technician empty states for profiles and assets. Obsolete empty-state styles and unused Card imports were removed.

Possibly related PRs

• fleetdm/fleet#49473: Updates the same components with technician-specific action visibility and empty-state behavior.
• fleetdm/fleet#49772: Replaces card-based configuration profile empty states with shared EmptyState styling.
• fleetdm/fleet#50102: Builds on related permission and empty-state changes in ConfigurationProfiles and AssetsTab.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the primary change: aligning technician empty states with shared EmptyState styling for configuration profiles and assets.
Description check	✅ Passed	The description identifies issue #49461, explains the fix, documents testing, and includes manual QA evidence.
Linked Issues check	✅ Passed	The changes satisfy issue #49461 by applying consistent EmptyState styling and appropriate add-button restrictions to both tabs.
Out of Scope Changes check	✅ Passed	The permission variables, import cleanup, stylesheet cleanup, and tests directly support the empty-state consistency objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 49461-technician-empty-state

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/ConfigurationProfiles.tests.tsx (1)

109-134: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Cover both technician role paths.

Both tests cover only isGlobalTechnician, while production code also supports isTeamTechnician.

• frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/ConfigurationProfiles.tests.tsx#L109-L134: add a team-technician case.
• frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/AssetsTab/AssetsTab.tests.tsx#L119-L143: add a team-technician case.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/ConfigurationProfiles.tests.tsx`
around lines 109 - 134, Extend the technician-role coverage in
ConfigurationProfiles.tests.tsx at lines 109-134 by adding an equivalent
empty-state test for isTeamTechnician, preserving the existing assertions that
the heading and message render without an Add profile button. Add the
corresponding team-technician case in AssetsTab.tests.tsx at lines 119-143,
using the existing AssetsTab test setup and assertions.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/ConfigurationProfiles.tests.tsx`:
- Around line 109-134: Extend the technician-role coverage in
ConfigurationProfiles.tests.tsx at lines 109-134 by adding an equivalent
empty-state test for isTeamTechnician, preserving the existing assertions that
the heading and message render without an Add profile button. Add the
corresponding team-technician case in AssetsTab.tests.tsx at lines 119-143,
using the existing AssetsTab test setup and assertions.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 6b5a1076-3a7d-460e-af36-d944af97edb5

📥 Commits

Reviewing files that changed from the base of the PR and between 20b1541 and ab194a3.

📒 Files selected for processing (7)

• changes/49461-technician-empty-state
• frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/ConfigurationProfiles.tests.tsx
• frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/ConfigurationProfiles.tsx
• frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/_styles.scss
• frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/AssetsTab/AssetsTab.tests.tsx
• frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/AssetsTab/AssetsTab.tsx
• frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/AssetsTab/_styles.scss

💤 Files with no reviewable changes (2)

• frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/_styles.scss
• frontend/pages/ManageControlsPage/OSSettings/cards/ConfigurationProfiles/components/AssetsTab/_styles.scss