Removed legacy settings list and table components#29535
Merged
Conversation
Contributor
WalkthroughAdds Shade ActionList primitives and migrates settings list, recommendation, email, integration, membership, lab, user, portal, and theme interfaces to them. Reworks the webhook table with explicit table sections and cells. Removes legacy list, pagination, table, dynamic-table, and pagination-hook implementations, stories, tests, and barrel exports. Updates layout handling and remaining Storybook examples accordingly. Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
Settings action rows now share a narrow Shade composition, while genuinely tabular data uses Shade Table. This removes duplicate list, table, and pagination implementations from the legacy design system.
9larsons
force-pushed
the
codex/admin-settings-shade-lists-tables
branch
from
July 22, 2026 16:32
56e5684 to
971d280
Compare
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx run @tryghost/admin:test:acceptance |
✅ Succeeded | 7m 59s | View ↗ |
nx run-many -t test:unit -p @tryghost/admin-x-d... |
✅ Succeeded | 4m 36s | View ↗ |
nx run ghost-admin:test |
✅ Succeeded | 2m 51s | View ↗ |
nx run ghost-monorepo:lint:boundaries |
✅ Succeeded | 22s | View ↗ |
nx run-many -t lint -p @tryghost/admin-x-design... |
✅ Succeeded | 2m 10s | View ↗ |
nx run @tryghost/admin:build |
✅ Succeeded | 2m 5s | View ↗ |
nx run @tryghost/activitypub:test:acceptance |
✅ Succeeded | 49s | View ↗ |
nx run-many --target=build --projects=tag:publi... |
✅ 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-22 16:43:24 UTC
9larsons
marked this pull request as ready for review
July 22, 2026 16:41
9larsons
enabled auto-merge (squash)
July 22, 2026 16:42
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx (1)
47-83: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick winMove webhook editing off the clickable row.
<TableRow>isn’t keyboard-focusable or keyboard-activatable, so the only edit affordance can’t be reached without a mouse. Put the edit action on a native button/link in the first cell and keep the row static.🤖 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/advanced/integrations/webhooks-table.tsx` around lines 47 - 83, Remove the edit onClick handler from the TableRow and make the row static. In the first TableCell, wrap the webhook name or equivalent edit affordance in a native button or link that opens WebhookModal with the existing webhook and integration.id values, preserving the current editing behavior while making it keyboard accessible.
🤖 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/email/newsletters/newsletters-list.tsx`:
- Around line 34-52: Apply the shared focus-visible ring classes to the row
buttons in newsletters-list.tsx (lines 34-52), incoming-recommendation-list.tsx
(lines 49-89), and recommendation-list.tsx (lines 39-67), matching the pattern
used by the existing email and member-email rows; update each interactive row
button without changing its click behavior.
---
Outside diff comments:
In
`@apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx`:
- Around line 47-83: Remove the edit onClick handler from the TableRow and make
the row static. In the first TableCell, wrap the webhook name or equivalent edit
affordance in a native button or link that opens WebhookModal with the existing
webhook and integration.id values, preserving the current editing behavior while
making it keyboard accessible.
🪄 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: 8c003924-d226-48cb-bd8b-537987172c19
📒 Files selected for processing (43)
apps/admin-x-design-system/src/global/layout/page.stories.tsxapps/admin-x-design-system/src/global/layout/view-container.tsxapps/admin-x-design-system/src/global/list-heading.tsxapps/admin-x-design-system/src/global/list-item.stories.tsxapps/admin-x-design-system/src/global/list-item.tsxapps/admin-x-design-system/src/global/list.stories.tsxapps/admin-x-design-system/src/global/list.tsxapps/admin-x-design-system/src/global/pagination.stories.tsxapps/admin-x-design-system/src/global/pagination.tsxapps/admin-x-design-system/src/global/table-cell.tsxapps/admin-x-design-system/src/global/table-head.tsxapps/admin-x-design-system/src/global/table-row.stories.tsxapps/admin-x-design-system/src/global/table-row.tsxapps/admin-x-design-system/src/global/table.stories.tsxapps/admin-x-design-system/src/global/table.tsxapps/admin-x-design-system/src/global/table/dynamic-table.stories.tsxapps/admin-x-design-system/src/global/table/dynamic-table.tsxapps/admin-x-design-system/src/hooks/use-pagination.tsxapps/admin-x-design-system/src/index.tsapps/admin-x-design-system/test/unit/hooks/use-pagination.test.tsapps/admin-x-settings/src/components/settings/advanced/danger-zone.tsxapps/admin-x-settings/src/components/settings/advanced/history-modal.tsxapps/admin-x-settings/src/components/settings/advanced/integrations.tsxapps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsxapps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsxapps/admin-x-settings/src/components/settings/advanced/labs/beta-features.tsxapps/admin-x-settings/src/components/settings/advanced/labs/lab-item.tsxapps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsxapps/admin-x-settings/src/components/settings/advanced/labs/private-features.tsxapps/admin-x-settings/src/components/settings/email/emails.tsxapps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsxapps/admin-x-settings/src/components/settings/general/users.tsxapps/admin-x-settings/src/components/settings/growth/recommendations.tsxapps/admin-x-settings/src/components/settings/growth/recommendations/incoming-recommendation-list.tsxapps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-icon.tsxapps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsxapps/admin-x-settings/src/components/settings/membership/custom-fields.tsxapps/admin-x-settings/src/components/settings/membership/member-emails.tsxapps/admin-x-settings/src/components/settings/membership/portal/portal-links.tsxapps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsxapps/shade/src/components.tsapps/shade/src/components/ui/action-list.stories.tsxapps/shade/src/components/ui/action-list.tsx
💤 Files with no reviewable changes (18)
- apps/admin-x-design-system/src/global/pagination.tsx
- apps/admin-x-design-system/src/global/table-cell.tsx
- apps/admin-x-design-system/test/unit/hooks/use-pagination.test.ts
- apps/admin-x-design-system/src/global/list-heading.tsx
- apps/admin-x-design-system/src/global/table/dynamic-table.tsx
- apps/admin-x-design-system/src/global/table-head.tsx
- apps/admin-x-design-system/src/global/list.tsx
- apps/admin-x-design-system/src/hooks/use-pagination.tsx
- apps/admin-x-design-system/src/global/list-item.stories.tsx
- apps/admin-x-design-system/src/global/table.stories.tsx
- apps/admin-x-design-system/src/global/table.tsx
- apps/admin-x-design-system/src/global/table/dynamic-table.stories.tsx
- apps/admin-x-design-system/src/global/table-row.stories.tsx
- apps/admin-x-design-system/src/global/table-row.tsx
- apps/admin-x-design-system/src/global/pagination.stories.tsx
- apps/admin-x-design-system/src/global/list.stories.tsx
- apps/admin-x-design-system/src/global/list-item.tsx
- apps/admin-x-design-system/src/index.ts
Comment on lines
+34
to
52
| <ActionListItem ref={setRef} className={isDragging ? 'opacity-75' : ''} style={style}> | ||
| <ActionListItemContent className='flex'> | ||
| {(props.dragHandleAttributes || isDragging) && <div className='w-10 shrink-0'> | ||
| <DragIndicator className='h-10' isDragging={isDragging || false} {...props} /> | ||
| </div>} | ||
| {children} | ||
| </Inline> | ||
| </TableRow> | ||
| <button className='flex min-w-0 grow text-left' type='button' onClick={showDetails}> | ||
| {children} | ||
| </button> | ||
| </ActionListItemContent> | ||
| <ActionListItemActions><Button color='green' data-testid="edit-newsletter-button" label='Edit' link onClick={showDetails} /></ActionListItemActions> | ||
| </ActionListItem> | ||
| ); | ||
|
|
||
| if (isDragging) { | ||
| return <Table>{container}</Table>; | ||
| return <ActionList>{container}</ActionList>; | ||
| } else { | ||
| return container; | ||
| } | ||
| }; |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate the relevant components and inspect their implementations/styles.
git ls-files 'apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.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/email/member-emails.tsx' \
'apps/admin-x-settings/src/components/**/action-list*' \
'apps/admin-x-settings/src/components/**/ActionList*' \
'apps/admin-x-settings/src/components/**/action-list-item*' \
'apps/admin-x-settings/src/components/**/ActionListItem*' \
'apps/admin-x-settings/src/**/action-list*' \
'apps/admin-x-settings/src/**/ActionList*'
printf '\n--- outlines ---\n'
for f in \
apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.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/email/member-emails.tsx
do
if [ -f "$f" ]; then
echo "### $f"
ast-grep outline "$f" --view expanded || true
echo
fi
done
printf '\n--- focus-visible search ---\n'
rg -n "focus-visible|ActionListItemContent|ActionListItem" apps/admin-x-settings/src/components -g '!**/node_modules/**'Repository: TryGhost/Ghost
Length of output: 22629
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Find the ActionListItemContent component implementation and its styling behavior.
fd -a 'ActionListItemContent' apps/admin-x-settings apps/admin-x-ds packages . || true
fd -a 'action-list' apps/admin-x-settings apps/admin-x-ds packages . || true
rg -n "export .*ActionListItemContent|function ActionListItemContent|const ActionListItemContent|ActionListItemContent" . -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**'Repository: TryGhost/Ghost
Length of output: 10077
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the relevant source slices if present.
for f in \
apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.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/email/member-emails.tsx
do
if [ -f "$f" ]; then
echo "### $f"
wc -l "$f"
sed -n '1,220p' "$f" | cat -n
echo
fi
done
echo "### ActionList-related files"
git ls-files | rg 'ActionListItemContent|ActionListItem|action-list'Repository: TryGhost/Ghost
Length of output: 19516
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Search for the exact focus ring pattern and any styles on ActionList item wrappers.
rg -n "focus-visible:ring-2|focus-visible:ring-ring|focus-visible:ring-offset-2|focus-visible:outline-none|ActionListItemContent" apps packages -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**'Repository: TryGhost/Ghost
Length of output: 17578
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the ActionList implementation to see whether it adds any focus-visible styling.
sed -n '1,220p' apps/shade/src/components/ui/action-list.tsx | cat -n
printf '\n--- stories ---\n'
sed -n '1,120p' apps/shade/src/components/ui/action-list.stories.tsx | cat -nRepository: TryGhost/Ghost
Length of output: 6030
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Compare the listed row buttons with the sibling reference pattern.
sed -n '1,140p' apps/admin-x-settings/src/components/settings/email/emails.tsx | cat -n
sed -n '1,120p' apps/admin-x-settings/src/components/settings/membership/member-emails.tsx | cat -nRepository: TryGhost/Ghost
Length of output: 13638
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Show the exact action-list-related CSS/class behavior in the design system.
rg -n "outline-hidden|focus-visible|button" apps/shade/src/components/ui/action-list.tsx apps/shade/src/components/ui/action-list.stories.tsx apps/shade/src/components/ui/*.tsxRepository: TryGhost/Ghost
Length of output: 32570
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the ActionList implementation and the sibling reference patterns.
sed -n '1,220p' apps/shade/src/components/ui/action-list.tsx | cat -n
printf '\n--- emails.tsx ---\n'
sed -n '1,120p' apps/admin-x-settings/src/components/settings/email/emails.tsx | cat -n
printf '\n--- member-emails.tsx ---\n'
sed -n '1,120p' apps/admin-x-settings/src/components/settings/membership/member-emails.tsx | cat -nRepository: TryGhost/Ghost
Length of output: 16218
Add the shared focus-visible ring to these row buttons. ActionListItemContent only adds layout classes, so these interactive rows should carry the same focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none pattern used in apps/admin-x-settings/src/components/settings/email/emails.tsx and apps/admin-x-settings/src/components/settings/membership/member-emails.tsx:
apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx#L39apps/admin-x-settings/src/components/settings/growth/recommendations/incoming-recommendation-list.tsx#L51apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx#L41
📍 Affects 3 files
apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx#L34-L52(this comment)apps/admin-x-settings/src/components/settings/growth/recommendations/incoming-recommendation-list.tsx#L49-L89apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx#L39-L67
🤖 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/email/newsletters/newsletters-list.tsx`
around lines 34 - 52, Apply the shared focus-visible ring classes to the row
buttons in newsletters-list.tsx (lines 34-52), incoming-recommendation-list.tsx
(lines 49-89), and recommendation-list.tsx (lines 39-67), matching the pattern
used by the existing email and member-email rows; update each interactive row
button without changing its click behavior.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
ActionListcomponent to Shade for reusable title/detail/action rowsActionListTableList,Table,DynamicTable,Pagination, and duplicate pagination hook, including their stories and testsWhy
The remaining Settings consumers were using two legacy components for the same action-row layout, and the legacy
Tablerendered each row as one oversized cell rather than real tabular data. This consolidates the repeated row interaction in Shade while reserving ShadeTablefor genuine columns.Validation
pnpm --filter @tryghost/admin-x-settings test:unit— 206 testspnpm --filter @tryghost/shade test:unit— 228 testspnpm --filter @tryghost/admin-x-design-system test:unit— 19 testsManual validation
The local Ghost server was not running in this worktree, so the affected Settings surfaces still need the focused visual/interaction pass listed in the handoff.