fix: Avatar renders an incorrect symbol if it has emoji (#5184)

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -9,7 +9,7 @@
     />
     <Avatar
       v-else
-      :username="username"
+      :username="userNameWithoutEmoji"
       :class="thumbnailClass"
       :size="avatarSize"
       :variant="variant"
@@ -86,6 +86,7 @@
  * Username - User name for avatar
  */
 import Avatar from './Avatar';
+import { removeEmoji } from 'shared/helpers/emoji';
 
 export default {
   components: {
@@ -131,6 +132,9 @@ export default {
     };
   },
   computed: {
+    userNameWithoutEmoji() {
+      return removeEmoji(this.username);
+    },
     showStatusIndicator() {
       if (this.shouldShowStatusAlways) return true;
       return this.status === 'online' || this.status === 'busy';

app/javascript/shared/helpers/emoji.js

@@ -32,3 +32,13 @@ export const hasEmojiSupport = () => {
   ctx.fillText('\ud83d\udc28', 0, 0); // U+1F428 KOALA
   return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;
 };
+
+export const removeEmoji = text => {
+  return text
+    .replace(
+      /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
+      ''
+    )
+    .replace(/\s+/g, ' ')
+    .trim();
+};

app/javascript/shared/helpers/specs/Emoji.spec.js

@@ -0,0 +1,7 @@
+import { removeEmoji } from '../emoji';
+
+describe('#removeEmoji', () => {
+  it('returns values without emoji', () => {
+    expect(removeEmoji('😄Hi👋🏻 there❕')).toEqual('Hi there');
+  });
+});