-
Notifications
You must be signed in to change notification settings - Fork 449
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix: [Software update notification overlapping] #9128
Fix: [Software update notification overlapping] #9128
Conversation
WalkthroughThe pull request introduces a new function Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
src/Utils/Notifications.jsOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json': Cannot find module '@typescript-eslint/parser'
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
src/Utils/Notifications.js (2)
72-75
: Maintain consistent JSDoc comment style.The implementation looks good, but let's maintain consistency with other handlers' documentation style.
Apply this diff to match the documentation style:
-/*Info message Handler*/ +/** Info message handler */ export const Info = ({ msg }) => { notify(msg, "info"); };
72-75
: LGTM! The notification stack configuration aligns with PR objectives.The new
Info
notification handler is well-integrated with the existing notification system. The stack configuration (maxOpen: 3
,maxStrategy: "close"
) helps prevent notification overlap, which directly addresses the issue of overlapping update notifications mentioned in #9039.Consider these notification stack behaviors that support your objectives:
maxOpen: 3
prevents too many notifications from appearing simultaneouslymaxStrategy: "close"
ensures older notifications are closed when new ones appeardelay: 3000
auto-closes notifications after 3 seconds
These configurations will help maintain a clean notification experience during the update process.src/components/Users/UserProfile.tsx (1)
1011-1040
: LGTM: Well-structured update button statesThe implementation effectively prevents overlapping notifications by using conditional rendering for different update states. The loading indicator provides good visual feedback.
However, there's an opportunity to reduce code duplication in the button structure.
Consider refactoring the repeated button structure into a reusable component:
+interface UpdateButtonProps { + icon: string; + text: string; + onClick?: () => void; + disabled?: boolean; + animate?: boolean; +} + +const UpdateButton: React.FC<UpdateButtonProps> = ({ + icon, + text, + onClick, + disabled = false, + animate = false, +}) => ( + <ButtonV2 onClick={onClick} disabled={disabled}> + <div className="flex items-center gap-4"> + <CareIcon + icon={icon} + className={`text-2xl ${animate ? 'animate-spin' : ''}`} + /> + {text} + </div> + </ButtonV2> +); {updateStatus.isUpdateAvailable && !updateStatus.isChecking && ( <UpdatableApp silentlyAutoUpdate={false}> - <ButtonV2 onClick={checkUpdates} disabled={false}> - <div className="flex items-center gap-4"> - <CareIcon icon="l-exclamation" className="text-2xl" /> - {t("update_available")} - </div> - </ButtonV2> + <UpdateButton + icon="l-exclamation" + text={t("update_available")} + onClick={checkUpdates} + /> </UpdatableApp> )} {!updateStatus.isUpdateAvailable && !updateStatus.isChecking && ( - <ButtonV2 onClick={checkUpdates}> - <div className="flex items-center gap-4"> - <CareIcon icon="l-sync" className="text-2xl" /> - {t("check_for_update")} - </div> - </ButtonV2> + <UpdateButton + icon="l-sync" + text={t("check_for_update")} + onClick={checkUpdates} + /> )} {updateStatus.isChecking && ( - <ButtonV2 disabled={true}> - <div className="flex items-center gap-4"> - <CareIcon icon="l-sync" className="text-2xl animate-spin" /> - {t("checking_for_update")} - </div> - </ButtonV2> + <UpdateButton + icon="l-sync" + text={t("checking_for_update")} + disabled={true} + animate={true} + /> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/Utils/Notifications.js
(1 hunks)src/components/Users/UserProfile.tsx
(2 hunks)
🔇 Additional comments (1)
src/components/Users/UserProfile.tsx (1)
455-457
: LGTM: Clear and actionable notification message
The implementation provides clear guidance to users about the available update and next steps.
Changes :
This code improves user experience by clearly differentiating button states. It ensures users see the "Update Available" button only when applicable, while "Check for Update" and "Checking for Update" buttons guide actions intuitively. This separation prevents overlap, avoids confusion, and provides visual feedback during update checks, making the interface more responsive and user-friendly.
Summary by CodeRabbit
New Features
Info
notification type for informational messages.UserProfile
component to notify users when a new update is available.Bug Fixes
User Interface Improvements