Move user frequent emojis to the database (frontend changes)
What does this MR do and why?
User frequent emojis are currently stored in LocalStorage, which has several downsides:
- They are cleared when you log out
- Even if they weren't cleared when you log out, they are not scoped per user, so all users in the same browser would have the same frequently used emojis
- They are specific to one browser, so the same user on a different device or just a different browser on the same device will not see their frequently used emojis
This MR moves storage of frequently used emojis to the database, and migrates any lingering localstorage emojis the first time a user uses an emoji.
Behavior changes
- Limit: Up to 27 frequent emojis can be remembered (3 rows of 9). This is defined in the backend code and can easily be changed.
- The most recently used emoji is moved to the start of the list, not inserted at the end
- Any emoji within the frequently used list that is used again also gets sorted to the start of the list
- Changes are reflected immediately (currently, frequently used emojis are not reflected until after a subsequent page load event)
MR Dependency
Note that this MR can only be merged after the related back-end MR, !208839
References
Screenshots or screen recordings
Before | After |
---|---|
Screen Recording 2025-09-24 at 18.29.48.mov | Screen Recording 2025-09-24 at 18.28.01.mov |
How to set up and validate locally
- Check out this branch
- Run migrations on the gdk to add the new field for frequent emoji
- Open the GDK and open devtools
- Go to Application > Local storage and search "frequent"
- You should see a
frequently_used_emojis
key. If there is not one present, create one and give it the text valuegrin,horse
. - Visit a work item or MR and click on the emoji react button
- You should see your frequently used emojis as normal (if you had none and created the localstorage key in step 5, you should see the grin and horse emojis)
- Add a new emoji reaction that is not in your frequently used list
- Open the emoji reaction picker again and you will see that that emoji is now the first item in your frequently used list
- In dev tools, you will see that the
frequently_used_emojis
local storage key has been removed - If you log out and log back in, you will be able to see your frequently used emojis again next time you use the emoji picker
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Edited by Chad Lavimoniere