Skip to content

Moved empty-state labels to Shade - #29388

Merged
9larsons merged 1 commit into
mainfrom
codex/migrate-no-value-label
Jul 16, 2026
Merged

Moved empty-state labels to Shade#29388
9larsons merged 1 commit into
mainfrom
codex/migrate-no-value-label

Conversation

@9larsons

Copy link
Copy Markdown
Contributor

What changed

  • Migrated every admin-x-settings NoValueLabel consumer to Shade.
  • Replaced legacy icon-name props with NoValueLabelIcon and semantic Lucide icons:
    • Integrations → Plug
    • History → History
    • Tiers → BadgeDollarSign
    • Newsletters → MailX
    • Users and invitations → UserRoundX
  • Preserved icon-free History and Recommendations empty states.
  • Removed the unused admin-x-design-system implementation, export, type, and story.
  • Migrated touched numeric values to Shade's formatNumber.
  • Extended formatNumber with optional fraction-digit settings while preserving its existing default rounding behavior, allowing tier prices to retain cents.

Why

Migrating every consumer as one component-wide slice gives the legacy component a clear zero-consumer deletion point and avoids repeated single-call-site PRs.

Validation

  • Independent agent review found one tier-price rounding regression; it was fixed and the second review reported no findings
  • admin-x-settings: 203 unit tests passed
  • admin-x-design-system: 23 tests plus typecheck and production build
  • Shade: 227 tests plus typecheck and production build
  • 10 acceptance tests covering History, Integrations, and Recommendations
  • Full affected-package lint
  • git diff --check

Manual testing

  • Integrations → empty Custom tab.
  • History → empty log and filtered-no-results states.
  • Membership → empty active and archived tier tabs.
  • Verify tier prices such as $5.50, $5.99, and a four-digit price retain correct decimals and grouping.
  • Newsletters → empty newsletter list.
  • Staff → role-filtered empty state and no pending invitations.
  • Recommendations → both empty tabs and the Add first recommendation action.
  • Verify populated incoming signup counts remain grouped.
  • Check empty states in both light and dark mode.

@coderabbitai

coderabbitai Bot commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 0038d797-fcfa-43fa-aa2f-3e0817b6c8c0

📥 Commits

Reviewing files that changed from the base of the PR and between 62200e8 and 3a51146.

📒 Files selected for processing (12)
  • apps/admin-x-design-system/src/global/no-value-label.stories.tsx
  • apps/admin-x-design-system/src/global/no-value-label.tsx
  • apps/admin-x-design-system/src/index.ts
  • apps/admin-x-settings/src/components/settings/advanced/history-modal.tsx
  • apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
  • apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
  • apps/admin-x-settings/src/components/settings/general/users.tsx
  • apps/admin-x-settings/src/components/settings/growth/recommendations/incoming-recommendation-list.tsx
  • apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx
  • apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx
  • apps/shade/src/lib/ds-utils.ts
  • apps/shade/test/unit/utils/utils.test.ts
💤 Files with no reviewable changes (3)
  • apps/admin-x-design-system/src/global/no-value-label.tsx
  • apps/admin-x-design-system/src/global/no-value-label.stories.tsx
  • apps/admin-x-design-system/src/index.ts
🚧 Files skipped from review as they are similar to previous changes (7)
  • apps/admin-x-settings/src/components/settings/growth/recommendations/incoming-recommendation-list.tsx
  • apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx
  • apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
  • apps/shade/src/lib/ds-utils.ts
  • apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx
  • apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
  • apps/admin-x-settings/src/components/settings/advanced/history-modal.tsx

Walkthrough

Removes the NoValueLabel component, Storybook stories, and top-level exports from the admin design system. Settings empty states now use Shade’s NoValueLabelIcon with Lucide icons. History counts and tier prices use an enhanced formatNumber utility that supports configurable decimal precision, with unit coverage added for decimal formatting.

Estimated code review effort: 3 (Moderate) | ~20 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: moving empty-state labels to Shade.
Description check ✅ Passed The description is clearly related to the changeset and matches the implemented migration and formatting updates.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ 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 codex/migrate-no-value-label

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.

@nx-cloud

nx-cloud Bot commented Jul 16, 2026

Copy link
Copy Markdown

🤖 Nx Cloud AI Fix

Ensure the fix-ci command is configured to always run in your CI pipeline to get automatic fixes in future runs. For more information, please see https://nx.dev/ci/features/self-healing-ci


View your CI Pipeline Execution ↗ for commit 62200e8

Command Status Duration Result
nx run @tryghost/admin:test:acceptance ✅ Succeeded 4m 58s View ↗
nx run-many -t test:unit -p @tryghost/admin-x-d... ✅ Succeeded 2m 15s View ↗
nx run ghost-monorepo:lint:boundaries ✅ Succeeded 20s View ↗
nx run-many -t lint -p @tryghost/admin-x-design... ✅ Succeeded 1m 6s View ↗
nx run @tryghost/admin-x-settings:test:acceptance ✅ Succeeded 1m 15s View ↗
nx run @tryghost/activitypub:test:acceptance ✅ Succeeded 34s View ↗
nx run @tryghost/admin:build ✅ Succeeded 17s View ↗
nx run-many --target=build --projects=tag:publi... ✅ Succeeded <1s View ↗
nx run ghost-admin:test ✅ Succeeded 1s View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗


☁️ Nx Cloud last updated this comment at 2026-07-16 16:05:57 UTC

@codecov

codecov Bot commented Jul 16, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.13%. Comparing base (75fd305) to head (3a51146).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main   #29388   +/-   ##
=======================================
  Coverage   74.13%   74.13%           
=======================================
  Files        1591     1591           
  Lines      138677   138677           
  Branches    16813    16813           
=======================================
  Hits       102810   102810           
  Misses      34821    34821           
  Partials     1046     1046           

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

@9larsons
9larsons force-pushed the codex/migrate-no-value-label branch from 2b7f9c9 to 62200e8 Compare July 16, 2026 15:42
@9larsons
9larsons marked this pull request as ready for review July 16, 2026 15:43
@9larsons
9larsons enabled auto-merge (squash) July 16, 2026 15:43

@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: 1

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

Inline comments:
In
`@apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx`:
- Line 38: Update the price formatting in the tier list’s formatNumber call to
preserve two decimal places for prices with cents, including values such as
5.50, while retaining whole-number prices without unnecessary decimals. Use the
existing currencyToDecimal value and configure the formatter’s minimum fraction
digits appropriately alongside maximumFractionDigits.
🪄 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: ca1bf75c-1f91-4c3e-a4b7-a67f84296fc9

📥 Commits

Reviewing files that changed from the base of the PR and between 97cfd10 and 62200e8.

📒 Files selected for processing (12)
  • apps/admin-x-design-system/src/global/no-value-label.stories.tsx
  • apps/admin-x-design-system/src/global/no-value-label.tsx
  • apps/admin-x-design-system/src/index.ts
  • apps/admin-x-settings/src/components/settings/advanced/history-modal.tsx
  • apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
  • apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
  • apps/admin-x-settings/src/components/settings/general/users.tsx
  • apps/admin-x-settings/src/components/settings/growth/recommendations/incoming-recommendation-list.tsx
  • apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx
  • apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx
  • apps/shade/src/lib/ds-utils.ts
  • apps/shade/test/unit/utils/utils.test.ts
💤 Files with no reviewable changes (3)
  • apps/admin-x-design-system/src/global/no-value-label.tsx
  • apps/admin-x-design-system/src/global/no-value-label.stories.tsx
  • apps/admin-x-design-system/src/index.ts

<div className='mt-2 flex items-baseline'>
<span className="ml-1 translate-y-[-3px] text-md font-bold uppercase">{currencySymbol}</span>
<span className='text-xl font-bold tracking-tighter'>{numberWithCommas(currencyToDecimal(tier.monthly_price || 0))}</span>
<span className='text-xl font-bold tracking-tighter'>{formatNumber(currencyToDecimal(tier.monthly_price || 0), {maximumFractionDigits: 2})}</span>

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.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Prevent trailing zero truncation for prices with cents.

Passing only maximumFractionDigits: 2 will properly display $5.99 or $5, but if a price ends in a zero cent (e.g., $5.50), it will be rendered as $5.5 because trailing zeros are not padded.

To format currencies correctly, consider using minimumFractionDigits: 2 when the price has cents.

💡 Proposed fix to pad trailing zeros
-                    <span className='text-xl font-bold tracking-tighter'>{formatNumber(currencyToDecimal(tier.monthly_price || 0), {maximumFractionDigits: 2})}</span>
+                    <span className='text-xl font-bold tracking-tighter'>
+                        {formatNumber(currencyToDecimal(tier.monthly_price || 0), {
+                            minimumFractionDigits: (tier.monthly_price || 0) % 100 === 0 ? 0 : 2,
+                            maximumFractionDigits: 2
+                        })}
+                    </span>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<span className='text-xl font-bold tracking-tighter'>{formatNumber(currencyToDecimal(tier.monthly_price || 0), {maximumFractionDigits: 2})}</span>
<span className='text-xl font-bold tracking-tighter'>
{formatNumber(currencyToDecimal(tier.monthly_price || 0), {
minimumFractionDigits: (tier.monthly_price || 0) % 100 === 0 ? 0 : 2,
maximumFractionDigits: 2
})}
</span>
🤖 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
`@apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx`
at line 38, Update the price formatting in the tier list’s formatNumber call to
preserve two decimal places for prices with cents, including values such as
5.50, while retaining whole-number prices without unnecessary decimals. Use the
existing currencyToDecimal value and configure the formatter’s minimum fraction
digits appropriately alongside maximumFractionDigits.

no ref

Settings still depended on the legacy NoValueLabel API, so migrating every consumer together allows the duplicate component to be removed safely.
@9larsons
9larsons force-pushed the codex/migrate-no-value-label branch from 62200e8 to 3a51146 Compare July 16, 2026 15:58
@9larsons
9larsons merged commit 8c3e2b7 into main Jul 16, 2026
45 checks passed
@9larsons
9larsons deleted the codex/migrate-no-value-label branch July 16, 2026 16:12
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.

1 participant