From f7d4f39b5c8efb6e1f423b867c8c2845aabc73eb Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 3 Aug 2022 14:11:33 +0530
Subject: [PATCH] fix: Avatar renders an incorrect symbol if it has emoji
 (#5184)

---
 .../dashboard/components/widgets/Thumbnail.vue         |  6 +++++-
 app/javascript/shared/helpers/emoji.js                 | 10 ++++++++++
 app/javascript/shared/helpers/specs/Emoji.spec.js      |  7 +++++++
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/shared/helpers/specs/Emoji.spec.js

diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index ea0e0f99a..4bfc729de 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/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';
diff --git a/app/javascript/shared/helpers/emoji.js b/app/javascript/shared/helpers/emoji.js
index eb17fbd4e..371472623 100644
--- a/app/javascript/shared/helpers/emoji.js
+++ b/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();
+};
diff --git a/app/javascript/shared/helpers/specs/Emoji.spec.js b/app/javascript/shared/helpers/specs/Emoji.spec.js
new file mode 100644
index 000000000..f6583e4ea
--- /dev/null
+++ b/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');
+  });
+});