polish(empty-state): unify copy and CTA pattern across pages (#837)

[alfredo1996]

Summary

Empty states on /, /users, /connections, /widget-lab used inconsistent tone, button labels, and CTA presence. Unifying around a single pattern:

Title: "No X yet" · Subtitle: one line · Primary: "Create your first X" · Secondary: "Read the docs"

What changed

• EmptyState gains optional secondaryAction prop (backward compatible) rendered below the primary action with consistent spacing
• / (reader case): trim multi-line description to one sentence; move "Read the docs" link from primary action to secondaryAction (the only CTA readers can use)
• /users: "No users found" → "No users yet"; primary "Create User" → "Create your first user"; add docs link. The PageHeader's "Create User" button is unchanged so existing E2E selectors keep working.
• /connections: "Add your first connection" → "Create your first connection" (consistent verb); add docs link
• /widget-lab: ADD primary "Create your first template" button wired to existing handleCreate (was previously CTA-less); add docs link. Filtered-empty state unchanged.

Why

Issue #837 — "Single EmptyState component used by all four pages, consistent: heading tone, one-line subtitle, primary CTA, optional secondary link, same icon visual weight." All ACs satisfied. Icons were already consistent (h-12 w-12).

Test plan

• Unit: 3 new EmptyState tests (renders secondaryAction, doesn't render when absent, renders even without primary)
• Unit: full component suite (1323 passed locally)
• Unit: full app suite (2757 passed locally)
• Lint clean
• Production build clean
• Confirmed no existing E2E selectors break (PageHeader buttons keep their labels; only EmptyState buttons changed)
• CI: full E2E sweep + SonarCloud + CodeRabbit (pending)
• Manual visual check: each empty state renders with consistent spacing, primary button styling, and docs link styling

Closes #837

Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com

Summary by CodeRabbit

Release Notes

• New Features

  • Added secondary documentation links to empty state screens throughout the dashboard

• UI/UX Improvements

  • Updated empty state messaging across connections, users, widget templates, and dashboard screens with clearer, more actionable guidance
  • Enhanced new user onboarding with direct quick-start documentation access

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 73acf0fb-d38e-48db-89cb-e6d64e739ef1

📥 Commits

Reviewing files that changed from the base of the PR and between f1f2e79 and 95d78ce.

📒 Files selected for processing (6)

• app/src/app/(dashboard)/connections/page.tsx
• app/src/app/(dashboard)/page.tsx
• app/src/app/(dashboard)/users/page.tsx
• app/src/app/(dashboard)/widget-lab/page.tsx
• component/src/components/composed/__tests__/empty-state.test.tsx
• component/src/components/composed/empty-state.tsx

---

Walkthrough

The PR extends the EmptyState component with an optional secondaryAction prop and updates four dashboard pages to use it for documentation links. The component now renders secondary actions conditionally below primary actions with responsive spacing, fully tested.

Changes

Empty-state secondary action support

Layer / File(s)	Summary
EmptyState component enhancement component/src/components/composed/empty-state.tsx, component/src/components/composed/__tests__/empty-state.test.tsx	EmptyStateProps adds optional secondaryAction?: React.ReactNode. EmptyState destructures and conditionally renders secondaryAction below action with top margin adjusted by action presence. Existing tests refactored to multiline format; new tests verify secondaryAction renders when provided, does not render when omitted, and renders independently of primary action.
Dashboard pages updated app/src/app/(dashboard)/connections/page.tsx, app/src/app/(dashboard)/page.tsx, app/src/app/(dashboard)/users/page.tsx, app/src/app/(dashboard)/widget-lab/page.tsx	Four pages refresh empty-state copy and primary CTA text, and add secondaryAction with "Read the docs" external link to quick-start documentation. Each page follows the consistent pattern enabled by the component enhancement.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• alfredo1996/neoboard#594: Modifies connections page empty-state display logic alongside this PR's content and secondaryAction updates.
• alfredo1996/neoboard#369: Updates empty-state UI on main dashboard page, overlapping with this PR's copy and documentation link changes.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	Title accurately summarizes the main change: unifying empty-state copy and CTA patterns across multiple pages with a clear, concise focus on the polish/standardization work.
Linked Issues check	✅ Passed	All acceptance criteria from issue #837 are met: EmptyState component enhanced with secondaryAction prop, consistent heading/subtitle/CTA pattern applied across /, /users, /connections, /widget-lab pages, icon visual weight maintained.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with issue #837 objectives—component enhancement, page-specific empty-state updates, and supporting tests. No extraneous modifications detected.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/issue-837-empty-state-unification

---

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud