Merge branch 'fix-unknown-emojis-in-frequently-used-awards' into 'master'

Protect against unknown emojis in frequently used list

See merge request !10020

3 files changed, 39 insertions, 9 deletions

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 8a077f0081a..9349918f7a0 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -3,6 +3,7 @@
 import emojiMap from 'emojis/digests.json';
 import emojiAliases from 'emojis/aliases.json';
 import { glEmojiTag } from './behaviors/gl_emoji';
+import isEmojiNameValid from './behaviors/gl_emoji/is_emoji_name_valid';
 
 const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
 const requestAnimationFrame = window.requestAnimationFrame ||
@@ -454,14 +455,21 @@ AwardsHandler.prototype.normalizeEmojiName = function normalizeEmojiName(emoji)
 AwardsHandler
   .prototype
   .addEmojiToFrequentlyUsedList = function addEmojiToFrequentlyUsedList(emoji) {
-    const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
-    frequentlyUsedEmojis.push(emoji);
-    Cookies.set('frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 });
+    if (isEmojiNameValid(emoji)) {
+      this.frequentlyUsedEmojis = _.uniq(this.getFrequentlyUsedEmojis().concat(emoji));
+      Cookies.set('frequently_used_emojis', this.frequentlyUsedEmojis.join(','), { expires: 365 });
+    }
   };
 
 AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmojis() {
-  const frequentlyUsedEmojis = (Cookies.get('frequently_used_emojis') || '').split(',');
-  return _.compact(_.uniq(frequentlyUsedEmojis));
+  return this.frequentlyUsedEmojis || (() => {
+    const frequentlyUsedEmojis = _.uniq((Cookies.get('frequently_used_emojis') || '').split(','));
+    this.frequentlyUsedEmojis = frequentlyUsedEmojis.filter(
+      inputName => isEmojiNameValid(inputName),
+    );
+
+    return this.frequentlyUsedEmojis;
+  })();
 };
 
 AwardsHandler.prototype.setupSearch = function setupSearch() {
diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js
index 59741cc9b1a..19a607309e4 100644
--- a/app/assets/javascripts/behaviors/gl_emoji.js
+++ b/app/assets/javascripts/behaviors/gl_emoji.js
@@ -13,9 +13,14 @@ function emojiImageTag(name, src) {
 }
 
 function assembleFallbackImageSrc(inputName) {
-  const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+  let name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
     emojiAliases[inputName] : inputName;
-  const emojiInfo = emojiMap[name];
+  let emojiInfo = emojiMap[name];
+  // Fallback to question mark for unknown emojis
+  if (!emojiInfo) {
+    name = 'grey_question';
+    emojiInfo = emojiMap[name];
+  }
   const fallbackImageSrc = `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${emojiInfo.digest}.png`;
 
   return fallbackImageSrc;
@@ -26,9 +31,15 @@ const glEmojiTagDefaults = {
 };
 function glEmojiTag(inputName, options) {
   const opts = Object.assign({}, glEmojiTagDefaults, options);
-  const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+  let name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
     emojiAliases[inputName] : inputName;
-  const emojiInfo = emojiMap[name];
+  let emojiInfo = emojiMap[name];
+  // Fallback to question mark for unknown emojis
+  if (!emojiInfo) {
+    name = 'grey_question';
+    emojiInfo = emojiMap[name];
+  }
+
   const fallbackImageSrc = assembleFallbackImageSrc(name);
   const fallbackSpriteClass = `emoji-${name}`;
 
diff --git a/app/assets/javascripts/behaviors/gl_emoji/is_emoji_name_valid.js b/app/assets/javascripts/behaviors/gl_emoji/is_emoji_name_valid.js
new file mode 100644
index 00000000000..be4aeb32c46
--- /dev/null
+++ b/app/assets/javascripts/behaviors/gl_emoji/is_emoji_name_valid.js
@@ -0,0 +1,11 @@
+import emojiMap from 'emojis/digests.json';
+import emojiAliases from 'emojis/aliases.json';
+
+function isEmojiNameValid(inputName) {
+  const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+    emojiAliases[inputName] : inputName;
+
+  return name && emojiMap[name];
+}
+
+export default isEmojiNameValid;