Skip to content

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

  1. Check out this branch
  2. Run migrations on the gdk to add the new field for frequent emoji
  3. Open the GDK and open devtools
  4. Go to Application > Local storage and search "frequent"
  5. You should see a frequently_used_emojis key. If there is not one present, create one and give it the text value grin,horse .
  6. Visit a work item or MR and click on the emoji react button
  7. 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)
  8. Add a new emoji reaction that is not in your frequently used list
  9. Open the emoji reaction picker again and you will see that that emoji is now the first item in your frequently used list
  10. In dev tools, you will see that the frequently_used_emojis local storage key has been removed
  11. 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

Merge request reports

Loading