refactor(core): replace Gravatar with reusable UserAvatar component#3927
Merged
PierreBrisorgueil merged 4 commits intomasterfrom Apr 9, 2026
Merged
Conversation
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 15 minutes and 11 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, 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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (3)
WalkthroughRemoved Gravatar plugin and refactored UserAvatarComponent to display uploaded images with colored initials fallback. Updated component API from multi-prop styling inputs to single Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #3927 +/- ##
==========================================
+ Coverage 99.26% 99.45% +0.19%
==========================================
Files 30 29 -1
Lines 946 922 -24
Branches 246 243 -3
==========================================
- Hits 939 917 -22
+ Misses 7 5 -2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
Refactors the core user avatar rendering to remove the Gravatar dependency (privacy + latency) and replace it with a reusable UserAvatarComponent that renders either an uploaded avatar image or a colored initials fallback, then updates call sites accordingly.
Changes:
- Removed the
gravatarplugin (and its unit tests) and unregistered it from the app/plugin index. - Rewrote
UserAvatarComponentto use Vuetifyv-avatar+ initials fallback with deterministic email-based colors. - Updated avatar consumers (profile, datatable, org members, home team member) to the new
user + sizeAPI.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/modules/core/components/user.avatar.component.vue | Replaces Gravatar-based rendering with v-avatar + initials + tooltip and simplifies props. |
| src/modules/core/tests/user.avatar.component.unit.tests.js | Adds unit coverage for the new avatar component behavior. |
| src/modules/core/components/core.datatable.component.vue | Updates datatable avatar cell to use the new size prop API. |
| src/modules/users/components/user.profile.component.vue | Updates profile avatar to use the new size prop API. |
| src/modules/organizations/components/organizations.members.component.vue | Updates members list avatar slot to use the new size prop API. |
| src/modules/home/components/team.member.component.vue | Updates team member card avatar usage to the new size prop API. |
| src/main.js | Removes .use(plugins.gravatar) registration. |
| src/lib/plugins/index.js | Removes gravatar plugin export. |
| src/lib/plugins/tests/index.unit.tests.js | Updates expected plugin list after gravatar removal. |
| src/lib/plugins/gravatar.js | Deletes the gravatar plugin implementation. |
| src/lib/plugins/tests/gravatar.unit.tests.js | Deletes gravatar plugin unit tests. |
The OrgAvatar tooltip renders the org name in the DOM, causing
Playwright strict mode violations when getByText/locator('text=...')
matches both the original element and tooltip overlays.
- Remove conflicting activator="parent" on v-tooltip (use slot only) - Make user prop optional (default null) to match null-handling in computed - Add luminance-based text color contrast (text-black on light backgrounds) - Add MIGRATIONS.md entry for breaking API change - Strengthen size test to assert actual width/height on v-avatar - Add textColorClass computed property tests
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@MIGRATIONS.md`:
- Around line 21-29: Add blank lines before and after the fenced code block in
the "Replace old avatar usage" section of MIGRATIONS.md so the Markdown is valid
(MD031); specifically, ensure there is an empty line immediately above the
```vue fence that contains the "Before/After" userAvatarComponent example and an
empty line immediately after the closing ``` fence so the subsequent line "3.
Remove any `disabled` prop usage — the component no longer wraps in an `<a>`
tag" is not adjacent to the fence.
In `@src/modules/core/components/user.avatar.component.vue`:
- Around line 34-65: The JSDoc blocks are misplaced: the doc for stringToColor
appears above isLightColor while stringToColor lacks its header; update the file
so each function has its JSDoc immediately above it — add or move a JSDoc block
with `@param` {string} hex and `@returns` {boolean} above isLightColor, and add/move
a JSDoc block with `@param` {string} str and `@returns` {string} above stringToColor
(keep descriptions consistent with current comments).
In `@src/modules/core/tests/user.avatar.component.unit.tests.js`:
- Around line 106-125: Add a unit test that covers the avatarColor computed when
the user.email is missing: use the existing createWrapper helper to mount the
component with a user object lacking an email (e.g., { firstName: 'John' }) and
assert wrapper.vm.avatarColor still returns a valid 6-digit hex color; reference
the avatarColor computed and the fallback behavior that uses
stringToColor((this.user && this.user.email) || '') so the test ensures the
empty-string fallback produces a hex color.
🪄 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: f90870c8-a7c2-4490-9dc7-6c54a6f5ec1b
📒 Files selected for processing (14)
MIGRATIONS.mdsrc/lib/plugins/gravatar.jssrc/lib/plugins/index.jssrc/lib/plugins/tests/gravatar.unit.tests.jssrc/lib/plugins/tests/index.unit.tests.jssrc/main.jssrc/modules/core/components/core.datatable.component.vuesrc/modules/core/components/user.avatar.component.vuesrc/modules/core/tests/user.avatar.component.unit.tests.jssrc/modules/home/components/team.member.component.vuesrc/modules/organizations/components/organizations.members.component.vuesrc/modules/organizations/tests/organizations.domainJoin.e2e.tests.jssrc/modules/organizations/tests/organizations.lifecycle.e2e.tests.jssrc/modules/users/components/user.profile.component.vue
💤 Files with no reviewable changes (4)
- src/lib/plugins/index.js
- src/main.js
- src/lib/plugins/gravatar.js
- src/lib/plugins/tests/gravatar.unit.tests.js
- Reorder JSDoc blocks so each is directly above its function - Add blank lines around fenced code block in MIGRATIONS.md (MD031) - Add missing email edge case test for avatarColor computed
PierreBrisorgueil
added a commit
that referenced
this pull request
Apr 13, 2026
setImages was unconditionally concatenating `:${api.port}`, producing
malformed URLs like `https://host:/api/...` on HTTPS deployments where
port is empty (standard prod on port 443). This broke user avatars
everywhere UserAvatarComponent is used after the Gravatar refactor
(a5f4e9a, #3927), since avatars now go through setImages.
Adds conditional port handling matching the pattern already used in
screenshotUrl.js. Adds unit tests for empty and undefined port cases.
Existing tests with port '3000' still pass unchanged.
Fixes #3963
4 tasks
PierreBrisorgueil
added a commit
that referenced
this pull request
Apr 13, 2026
* fix(images): omit port when api.port is empty or undefined
setImages was unconditionally concatenating `:${api.port}`, producing
malformed URLs like `https://host:/api/...` on HTTPS deployments where
port is empty (standard prod on port 443). This broke user avatars
everywhere UserAvatarComponent is used after the Gravatar refactor
(a5f4e9a, #3927), since avatars now go through setImages.
Adds conditional port handling matching the pattern already used in
screenshotUrl.js. Adds unit tests for empty and undefined port cases.
Existing tests with port '3000' still pass unchanged.
Fixes #3963
* docs(images): add JSDoc for install and setImages
This was referenced Apr 14, 2026
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
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.
Summary
v-avatarwith initials fallback instead of Gravatar API. Simplified the component API from 8 props to 2 (user+size). Updated all consumers (datatable, profile, team member, org members).Scope
core(avatar component),lib/plugins(gravatar removal),users,organizations,homeyes— all consumers ofuserAvatarComponentupdated to new simplified APImedium— breaking API change for avatar component props, but all internal consumers updatedValidation
npm run lintnpm run test:unitnpm run buildGuardrails check
.env*,secrets/**, keys, tokens)Before vs After (key changes only)
.use()v-avatar(always circular)Notes for reviewers
userAvatarComponentwith old props will need to update tosizepropwidth/height→size)Summary by CodeRabbit
Breaking Changes
width,height,radius,border,color, anddisabledprops. Now usessizeprop exclusively.userprop is optional with defaultsizeof 32.Tests