feat(frontend): add illustrated empty states for registry and agents pages - #498
feat(frontend): add illustrated empty states for registry and agents pages#498MissBlue00 wants to merge 3 commits into
Conversation
…pages Replaces bare text empty states with illustrated EmptyState component featuring inline SVG icons, clear explanations, and contextual CTAs. Changes: - EmptyState reusable component (card, icon circle, title, message, action CTA) - emptyStateIcons: EmptyRegistryIcon, EmptyAgentsIcon, SearchEmptyIcon, CategoryEmptyIcon - Registry page: empty, search-no-results, and empty-category states - Agents page: empty-registry state Closes Stellar-Ecosystem#392
|
@MissBlue00 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
📝 WalkthroughWalkthroughThe frontend adds a reusable ChangesEmpty-state UI
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related issues
Possibly related PRs
Suggested reviewers: Sequence Diagram(s)sequenceDiagram
participant RegistryPage
participant EmptyState
participant LinkOrButton
RegistryPage->>EmptyState: Provide contextual icon, message, and action
EmptyState->>LinkOrButton: Render link or button action
LinkOrButton-->>RegistryPage: Clear filters or navigate to registration
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/components/EmptyState.tsx (1)
7-11: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winEnforce exactly one action mode.
Both
hrefandonClickare optional, so invalid objects such as{ label }compile and render a button with no handler, while{ href, onClick }silently ignoresonClick. Use a discriminated union requiring eitherhreforonClick.🤖 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/components/EmptyState.tsx` around lines 7 - 11, Update the action type in EmptyState to a discriminated union that requires exactly one mode: an action with label and href but no onClick, or an action with label and onClick but no href. Ensure the component’s rendering logic handles both variants without allowing an action with neither or both properties.
🤖 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/components/EmptyState.tsx`:
- Around line 7-11: Update the action type in EmptyState to a discriminated
union that requires exactly one mode: an action with label and href but no
onClick, or an action with label and onClick but no href. Ensure the component’s
rendering logic handles both variants without allowing an action with neither or
both properties.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 4f8394f2-91fe-4db3-9436-197f3892f4d5
📒 Files selected for processing (4)
frontend/app/agents/page.tsxfrontend/app/registry/page.tsxfrontend/components/EmptyState.tsxfrontend/lib/emptyStateIcons.tsx
|
Hi @MissBlue00, This PR could not be merged because it has merge conflicts with the target branch. Please resolve the merge conflicts, push the updated changes, and the PR can be reviewed and merged. Thank you! |
|
@ritik4ever The conflict has been resolved, please review and merge |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/app/registry/page.tsx (1)
147-156: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winRender the contextual
EmptyStatevariants.This branch still renders the old plain message. It never uses
EmptyState,EmptyRegistryIcon,SearchEmptyIcon, orCategoryEmptyIcon, and it provides no CTA. Replace this branch with:
- Search results:
SearchEmptyIconand an action that clearsquery.- Category results:
CategoryEmptyIconand an action that selects'all'.- Empty registry:
EmptyRegistryIconand a link to the existing service-registration route.Keep the loading and error branches unchanged.
🤖 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/app/registry/page.tsx` around lines 147 - 156, Replace the plain no-results markup in the registry page’s empty branch with the contextual EmptyState variants: use SearchEmptyIcon with an action clearing query for searches, CategoryEmptyIcon with an action selecting 'all' for category filters, and EmptyRegistryIcon with a link to the existing service-registration route when the registry is empty. Keep the loading and error branches unchanged.
🤖 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.
Outside diff comments:
In `@frontend/app/registry/page.tsx`:
- Around line 147-156: Replace the plain no-results markup in the registry
page’s empty branch with the contextual EmptyState variants: use SearchEmptyIcon
with an action clearing query for searches, CategoryEmptyIcon with an action
selecting 'all' for category filters, and EmptyRegistryIcon with a link to the
existing service-registration route when the registry is empty. Keep the loading
and error branches unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 00b88d24-da74-45ee-a94d-2dc39265020d
📒 Files selected for processing (1)
frontend/app/registry/page.tsx
…nent - Add SearchEmptyIcon with 'Clear search' action for no search results - Add CategoryEmptyIcon with 'Show all categories' action for empty category filter - Add EmptyRegistryIcon with 'Register a Service' link for empty registry - Matches the pattern used in agents page
There was a problem hiding this comment.
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 `@frontend/app/registry/page.tsx`:
- Around line 158-160: Update the empty-state message in the category view to
resolve the active category through the matching CATEGORY_FILTERS entry and
interpolate its user-facing label instead of activeCategory, while preserving
the existing fallback behavior and action.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 6766b388-ef8e-4fff-9d73-cdc292c4c8d0
📒 Files selected for processing (1)
frontend/app/registry/page.tsx
| title="Empty category" | ||
| message={`No active services in the "${activeCategory}" category.`} | ||
| action={{ label: 'Show all categories', onClick: () => setActive('all') }} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Use the category display label in the empty-state copy.
activeCategory stores c.value, while the tabs already expose a separate c.label at Lines 112-123. If the value is an internal slug, this message shows the slug to users instead of the category name. Resolve the matching CATEGORY_FILTERS entry and interpolate its label.
Proposed fix
- message={`No active services in the "${activeCategory}" category.`}
+ message={`No active services in the "${
+ CATEGORY_FILTERS.find((c) => c.value === activeCategory)?.label ?? activeCategory
+ }" category.`}📝 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.
| title="Empty category" | |
| message={`No active services in the "${activeCategory}" category.`} | |
| action={{ label: 'Show all categories', onClick: () => setActive('all') }} | |
| title="Empty category" | |
| message={`No active services in the "${ | |
| CATEGORY_FILTERS.find((c) => c.value === activeCategory)?.label ?? activeCategory | |
| }" category.`} | |
| action={{ label: 'Show all categories', onClick: () => setActive('all') }} |
🤖 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/app/registry/page.tsx` around lines 158 - 160, Update the
empty-state message in the category view to resolve the active category through
the matching CATEGORY_FILTERS entry and interpolate its user-facing label
instead of activeCategory, while preserving the existing fallback behavior and
action.
2 participants
Closes #392
Replaces bare text empty states with the new EmptyState reusable component, featuring inline SVG illustrations, clear explanations, and contextual CTA buttons.
Registry page:
Agents page:
Distinct from loading (skeletons) and error (error card + retry) states.
Summary by CodeRabbit