fix(client): sync profile avatar editor state across cancel, save, an… - #40380
Open
opaksbyron wants to merge 1 commit into
Open
fix(client): sync profile avatar editor state across cancel, save, an…#40380opaksbyron wants to merge 1 commit into
opaksbyron wants to merge 1 commit into
Conversation
Contributor
|
Looks like this PR is not ready to merge, because of the following issues:
Please fix the issues and try again If you have any trouble, please check the PR guidelines |
🦋 Changeset detectedLatest commit: aa80d5c The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (2)
📜 Recent review details🧰 Additional context used📓 Path-based instructions (1)**/*.{ts,tsx,js}📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)
Files:
🧠 Learnings (7)📚 Learning: 2026-02-10T16:32:42.586ZApplied to files:
📚 Learning: 2026-05-11T20:30:35.265ZApplied to files:
📚 Learning: 2026-02-26T19:25:44.063ZApplied to files:
📚 Learning: 2026-02-26T19:25:44.063ZApplied to files:
📚 Learning: 2026-04-14T21:10:31.855ZApplied to files:
📚 Learning: 2026-05-06T12:21:44.083ZApplied to files:
📚 Learning: 2026-03-27T14:52:56.865ZApplied to files:
🔇 Additional comments (2)
WalkthroughThis PR synchronizes avatar input, preview, and form state across cancel, save, and reset flows. It clears file inputs for same-file re-selection, resets local previews when the form clears the avatar, adds etag cache busting, and clears the avatar field after successful saves. ChangesAvatar State Synchronization
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx (1)
41-42: ⚡ Quick winRemove inline implementation comments in component logic.
Please drop these two inline comments and keep the intent expressed by code structure/naming.
As per coding guidelines: "Avoid code comments in the implementation".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx` around lines 41 - 42, Remove the two inline implementation comments inside the UserAvatarEditor component (the comment block that explains the form-level reset clearing the avatar field and dropping the local preview) so the component logic is self-descriptive via variable and function names; update or rename local symbols if necessary (e.g., preview state, handlers like onCancel/onSave or variables managing avatar/etag) to preserve intent and readability, but do not change behavior in UserAvatarEditor — only delete the inline explanatory comments and ensure tests/props still rely on the existing preview fallback logic.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/meteor/client/views/account/profile/AccountProfileForm.tsx`:
- Line 121: The current finally block in AccountProfileForm calls reset({ ...,
avatar: '' }) which clears the avatar even when updateAvatar() fails; change
this so the avatar field is only cleared on successful save: remove avatar: ''
from the finally reset and instead clear avatar in the success path (after a
successful updateProfile/updateAvatar resolution) or conditionally reset avatar
only when updateAvatar returned success; keep the existing reset({...}) in
error/finally paths without touching avatar so the pending preview remains on
failure.
---
Nitpick comments:
In `@apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx`:
- Around line 41-42: Remove the two inline implementation comments inside the
UserAvatarEditor component (the comment block that explains the form-level reset
clearing the avatar field and dropping the local preview) so the component logic
is self-descriptive via variable and function names; update or rename local
symbols if necessary (e.g., preview state, handlers like onCancel/onSave or
variables managing avatar/etag) to preserve intent and readability, but do not
change behavior in UserAvatarEditor — only delete the inline explanatory
comments and ensure tests/props still rely on the existing preview fallback
logic.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 9b4c3139-0357-4b5f-9d1a-eb689aabbd42
📒 Files selected for processing (4)
.changeset/fix-profile-avatar-state-sync.mdapps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsxapps/meteor/client/hooks/useSingleFileInput.tsapps/meteor/client/views/account/profile/AccountProfileForm.tsx
📜 Review details
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)
**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation
Files:
apps/meteor/client/hooks/useSingleFileInput.tsapps/meteor/client/views/account/profile/AccountProfileForm.tsxapps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
🧠 Learnings (6)
📚 Learning: 2026-02-10T16:32:42.586Z
Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 38528
File: apps/meteor/client/startup/roles.ts:14-14
Timestamp: 2026-02-10T16:32:42.586Z
Learning: In Rocket.Chat's Meteor client code, DDP streams use EJSON and Date fields arrive as Date objects; do not manually construct new Date() in stream handlers (for example, in sdk.stream()). Only REST API responses return plain JSON where dates are strings, so implement explicit conversion there if needed. Apply this guidance to all TypeScript files under apps/meteor/client to ensure consistent date handling in DDP streams and REST responses.
Applied to files:
apps/meteor/client/hooks/useSingleFileInput.ts
📚 Learning: 2026-02-26T19:25:44.063Z
Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In the Rocket.Chat repository, do not reference Biome lint rules in code review feedback. Biome is not used even if biome.json exists; only reference Biome rules if there is explicit, project-wide usage documented. For TypeScript files, review lint implications without Biome guidance unless the project enables Biome rules.
Applied to files:
apps/meteor/client/hooks/useSingleFileInput.ts
📚 Learning: 2026-02-26T19:25:44.063Z
Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In this repository (RocketChat/Rocket.Chat), Biome lint rules are not used even if a biome.json exists. When reviewing TypeScript files (e.g., packages/ui-voip/src/providers/useMediaSession.ts), ensure lint suggestions do not reference Biome-specific rules. Rely on general ESLint/TypeScript lint rules and project conventions instead.
Applied to files:
apps/meteor/client/hooks/useSingleFileInput.ts
📚 Learning: 2026-04-14T21:10:31.855Z
Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 36292
File: apps/meteor/client/hooks/useHasValidLocationHash.ts:7-12
Timestamp: 2026-04-14T21:10:31.855Z
Learning: When reviewing files in apps/meteor/client/hooks/, do not treat JSDoc-style comments on React hooks (especially exported hooks) as a violation of any “avoid code comments in implementation” guideline. It’s acceptable to use JSDoc to document the public API of exported hooks (e.g., parameter/return types, intended usage), as long as it documents behavior/contracts rather than adding narrative implementation comments.
Applied to files:
apps/meteor/client/hooks/useSingleFileInput.ts
📚 Learning: 2026-03-16T21:50:37.589Z
Learnt from: amitb0ra
Repo: RocketChat/Rocket.Chat PR: 39676
File: .changeset/migrate-users-register-openapi.md:3-3
Timestamp: 2026-03-16T21:50:37.589Z
Learning: For changes related to OpenAPI migrations in Rocket.Chat/OpenAPI, when removing endpoint types and validators from rocket.chat/rest-typings (e.g., UserRegisterParamsPOST, /v1/users.register) document this as a minor changeset (not breaking) per RocketChat/Rocket.Chat-Open-API#150 Rule 7. Note that the endpoint type is re-exposed via a module augmentation .d.ts in the consuming package (e.g., packages/web-ui-registration/src/users-register.d.ts). In reviews, ensure the changeset clearly states: this is a non-breaking change, the major version should not be bumped, and the changeset reflects a minor version bump. Do not treat this as a breaking change during OpenAPI migrations.
Applied to files:
.changeset/fix-profile-avatar-state-sync.md
📚 Learning: 2026-03-27T14:52:56.865Z
Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.
Applied to files:
apps/meteor/client/views/account/profile/AccountProfileForm.tsxapps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
🔇 Additional comments (4)
.changeset/fix-profile-avatar-state-sync.md (1)
2-7: Changeset scope/versioning looks correct.Patch bump and description align with the behavior fixes in this PR.
apps/meteor/client/hooks/useSingleFileInput.ts (1)
46-61: File input reset flow is solid.Clearing on both pre-click and post-selection paths is a good fix for same-file re-upload reliability.
apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx (1)
37-48: Preview reset synchronization and etag cache-busting look correct.This should correctly restore saved avatar rendering across cancel/save/reset transitions.
Also applies to: 92-93
apps/meteor/client/views/account/profile/AccountProfileForm.tsx (1)
135-142: Controller value propagation toUserAvatarEditoris correct.Passing
valueasavatarObjis the right sync point for cancel/save/reset transitions.
opaksbyron
force-pushed
the
fix/profile-avatar-state-sync
branch
from
July 28, 2026 15:52
9e036a6 to
be873ad
Compare
…d reset (closes RocketChat#38697) Keeps the avatar editor preview in sync with form-level cancel/save/reset, and preserves a pending avatar preview when a profile save fails.
opaksbyron
force-pushed
the
fix/profile-avatar-state-sync
branch
from
July 28, 2026 15:58
be873ad to
aa80d5c
Compare
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.
Proposed changes
Closes #38697.
The "My Account → Profile" avatar editor's local preview state was not synchronized with the parent form's
avatarfield, and the hidden<input type="file">was never reset between selections. This caused several inconsistencies after cancel/save/reset cycles:changeevent doesn't fire when the value is unchanged).Changes
useSingleFileInput— clear the file input's value before eachclick()and after each successful selection so the same file always re-fires thechangeevent.UserAvatarEditor— accept the form's currentavatarvalue as a prop and clear the local preview state in auseEffectwhenever the form transitions from a set value back to empty (i.e. a Cancel/Save reset).AccountProfileForm— pass the watchedavatarvalue down toUserAvatarEditor, and includeavatar: ''in the post-savereset()so the editor sees the transition.etagto bust the browser cache when the saved avatar changes.Issue(s)
Closes #38697.
Steps to test or reproduce
Further comments
The broader UI cache (sidebar, header avatar) refreshing without a full page reload is a separate
useUserinvalidation concern and is out of scope here — this PR fixes the editor state itself.Summary by CodeRabbit