adding reusable empty-card for edge case handling.#69
Conversation
|
Need an answer fast? Review this PR in Change Stack to ask focused questions about the PR or a changed range. Warning Review limit reached
More reviews will be available in 51 minutes and 37 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughThis PR introduces a reusable ChangesEmpty-State UI Pattern
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
github-actions
Bot
added
no-issue-linked
rahul-vyas-dev
added
gsoc
github-actions
Bot
added
size/L
github-actions
Bot
added
no-issue-linked
github-actions
Bot
added
configuration
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 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 `@src/components/EmptyStateCard.jsx`:
- Around line 75-99: The button in EmptyStateCard.jsx (the element using
onButtonClick and displaying {buttonText}) lacks an explicit type and
accessibility attributes; update that button to include type="button" to avoid
accidental form submission and add accessible attributes such as aria-label (or
aria-labelledby) and, if needed, aria-describedby for helper text, plus ensure
the onMouseEnter/onMouseLeave handlers do not interfere with keyboard focus by
adding a visible focus style or handling onFocus/onBlur similarly; locate the
<button> that renders {buttonText} and apply these changes.
- Around line 89-96: The inline onMouseEnter/onMouseLeave handlers in
EmptyStateCard.jsx are recreated every render; extract them or move styling to
CSS to avoid re-renders. Fix by replacing the inline handlers on the element
with either a CSS hover class (e.g., add a class like "empty-state-button" and
define :hover styles for transform/opacity) or by extracting the handlers into
memoized callbacks using React.useCallback (create handleMouseEnter and
handleMouseLeave and pass them to the element). Ensure you update the JSX to
reference the new class or the memoized functions and remove the inline arrow
functions.
- Around line 2-8: EmptyStateCard is missing prop validation for required props;
add runtime PropTypes by importing PropTypes and defining
EmptyStateCard.propTypes with SvgIcon: PropTypes.elementType.isRequired and
onButtonClick: PropTypes.func.isRequired (keep existing defaults for title,
description and buttonText or mark them optional), or convert the component to
TypeScript and add an explicit props interface with SvgIcon and onButtonClick
required; update exports accordingly so the component will error early if those
props are omitted.
- Around line 4-6: The default copy in EmptyStateCard is hardcoded English text,
so externalize the user-facing values for title, description, and buttonText
into the i18n resource files and read them through the existing translation
mechanism instead of inline defaults. Update the EmptyStateCard component
props/defaults to use translation keys, and make sure any callers or fallback
logic still resolve through the localization layer.
In `@src/pages/ContributorsPage.jsx`:
- Around line 183-188: Replace the hardcoded English strings passed to the
EmptyStateCard props (title, description, buttonText) with internationalized
lookup calls (e.g., using your i18n utility t(...) or a translations object) so
the UI text is loaded from resource files; update the JSX where EmptyStateCard
is rendered (the title, description and buttonText props in
ContributorsPage.jsx) to use the i18n keys (e.g.,
t('contributors.noResults.title'), t('contributors.noResults.description'),
t('contributors.noResults.button')) and keep the existing onButtonClick behavior
(navigate('/')) unchanged.
In `@src/pages/NetworkPage.jsx`:
- Around line 213-219: Replace the hardcoded English strings passed to
EmptyStateCard (props title, description, buttonText) with calls to the i18n
resource layer used in the project (e.g., the t(...) or i18n.t(...) helper) so
strings are externalized; update the file to import the i18n helper at the top
and use keys like "network.noRepos.title", "network.noRepos.description", and
"network.noRepos.buttonText" when rendering EmptyStateCard (keep the SvgIcon and
onButtonClick/navigate usage unchanged), and add corresponding entries to the
translation resource files.
In `@src/pages/RepositoriesPage.jsx`:
- Around line 199-205: Replace the hardcoded English strings passed to
EmptyStateCard (props title, description, buttonText) with i18n resource
lookups; import and use your app's translation helper (e.g., useTranslation/t or
a resource lookup function) at the top of RepositoriesPage.jsx, replace the
literal values with calls like t('repositories.empty.title'),
t('repositories.empty.description'), t('repositories.empty.button'), and ensure
those keys are added to the locale resource files; keep the onButtonClick={() =>
navigate('/')} as-is.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: 743fdbec-8d73-4101-8d02-e9c237d692e3
📒 Files selected for processing (4)
src/components/EmptyStateCard.jsxsrc/pages/ContributorsPage.jsxsrc/pages/NetworkPage.jsxsrc/pages/RepositoriesPage.jsx
1 participant
Screenshots/Recordings:
Before:
https://1drv.ms/v/c/2b55451e453f4443/IQA3oNN8Z6vWRr9YY2xNhDH8AYaATX0wXDy0dpE8aSrKoHI?e=hpdhhe
After:
https://1drv.ms/v/c/2b55451e453f4443/IQBxw9n0wYbJRrfuTPTgf7BKAYLWYsScZ12g8Ti3b2ExLj8?e=1M1UzM
Additional Notes:
A reusable empty-state/error handling card component designed to provide clear feedback when repository data is unavailable.
It supports customizable icons, titles, descriptions, and action buttons, making it flexible for multiple failure or no-data scenarios.
Checklist
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.
Summary by CodeRabbit
Release Notes