Fleet UI: Controls > Setup experience descriptions cleanup

[RachelElysia]

Issue

Closes #37827

Description

• This PR refactors the "Setup experience" pages to surface section descriptions on empty states.
• It adds PageDescription components to multiple setup cards (BootstrapPackage, InstallSoftware, RunScript, SetupAssistant, Users), restructures their layouts to wrap content in SetupExperienceContentContainer, and introduces fade transitions for tab navigation.
• Supporting CSS changes include baseline alignment in SectionHeader and a new fade animation structure in TabNav.
• Tests are added to verify description visibility in empty states.
• Unnecessary wrapper divs and inline styles are removed from component renderers.

Screen recording

Watch recording 2x
https://fleetdm.zoom.us/clips/share/Vvv0mCm5TkKsEKzUR3YizQ

Testing

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

Summary by CodeRabbit

Release Notes

• New Features

  • Added descriptive panels to setup experience pages for improved guidance.
  • Introduced fade animations for smoother transitions when switching between tabs.

• Style

  • Refined layouts and spacing across setup cards for better visual organization.

• Tests

  • Expanded test coverage for setup experience pages with additional scenarios for MDM configuration states.

[RachelElysia]

see video

[RachelElysia]

see video

[codecov]

Codecov Report

❌ Patch coverage is 77.77778% with 12 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.68%. Comparing base (ad128b6) to head (449590f).
⚠️ Report is 37 commits behind head on main.

Files with missing lines	Patch %	Lines
...perience/cards/InstallSoftware/InstallSoftware.tsx	76.19%	3 Missing and 2 partials ⚠️
...Page/SetupExperience/cards/RunScript/RunScript.tsx	69.23%	4 Missing ⚠️
...rience/cards/BootstrapPackage/BootstrapPackage.tsx	77.77%	2 Missing ⚠️
...Experience/cards/SetupAssistant/SetupAssistant.tsx	90.90%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##             main   #44824    +/-   ##
========================================
  Coverage   66.68%   66.68%            
========================================
  Files        2664     2671     +7     
  Lines      214604   214804   +200     
  Branches     9878     9823    -55     
========================================
+ Hits       143114   143252   +138     
- Misses      58469    58529    +60     
- Partials    13021    13023     +2     

Flag	Coverage Δ
frontend	54.36% <77.77%> (+0.10%)	⬆️

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.

[RachelElysia]

@claude review

[claude]

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.}

[coderabbitai]

Walkthrough

This PR refactors the "Setup experience" pages to surface section descriptions on empty states. It adds PageDescription components to multiple setup cards (BootstrapPackage, InstallSoftware, RunScript, SetupAssistant, Users), restructures their layouts to wrap content in SetupExperienceContentContainer, and introduces fade transitions for tab navigation. Supporting CSS changes include baseline alignment in SectionHeader and a new fade animation structure in TabNav. Tests are added to verify description visibility in empty states. Unnecessary wrapper divs and inline styles are removed from component renderers.

Possibly related PRs

• fleetdm/fleet#43810: Replaces inline page descriptions with the shared PageDescription component and restructures SetupExperience card layouts
• fleetdm/fleet#44519: Modifies InstallSoftware.tsx render flow and layout refactoring with tab-based navigation
• fleetdm/fleet#44685: Modifies Users.tsx component with PageDescription and SetupExperienceContentContainer integration

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fleet UI: Controls > Setup experience descriptions cleanup' clearly summarizes the main change, which is surfacing setup experience section descriptions on empty states.
Linked Issues check	✅ Passed	The PR implements the objective from #37827 to surface section descriptions above empty states across all Setup experience cards (BootstrapPackage, InstallSoftware, RunScript, SetupAssistant, Users) with corresponding test coverage.
Out of Scope Changes check	✅ Passed	All changes are directly related to surfacing descriptions in Setup experience empty states: UI layout refactoring, PageDescription integration, test additions, and style cleanup are all within the scope of #37827.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description provides a clear issue reference, comprehensive summary of changes across multiple setup experience cards, CSS modifications, and test additions with screen recording documentation.

_{✏️ 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 37827-empty-states

---

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 and usage tips.}