Add positive intent sorting to sort function

Added a new constant to list all the positive intent emoji string
matchers. The code then loops over the constant and sorts the result
to make sure the positive intent appears first in the list

Changelog: added
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/88407

app/assets/javascripts/emoji/constants.js

@@ -19,3 +19,5 @@ export const CATEGORY_ROW_HEIGHT = 37;
 export const CACHE_VERSION_KEY = 'gl-emoji-map-version';
 export const CACHE_KEY = 'gl-emoji-map';
+
+export const POSITIVE_INTENT_EMOJI_MATCHES = ['thumbsup'];

app/assets/javascripts/emoji/index.js

@@ -4,7 +4,13 @@ import emojiAliases from 'emojis/aliases.json';
 import { setAttributes } from '~/lib/utils/dom_utils';
 import AccessorUtilities from '../lib/utils/accessor';
 import axios from '../lib/utils/axios_utils';
-import { CACHE_KEY, CACHE_VERSION_KEY, CATEGORY_ICON_MAP, FREQUENTLY_USED_KEY } from './constants';
+import {
+  CACHE_KEY,
+  CACHE_VERSION_KEY,
+  CATEGORY_ICON_MAP,
+  FREQUENTLY_USED_KEY,
+  POSITIVE_INTENT_EMOJI_MATCHES,
+} from './constants';
 let emojiMap = null;
 let validEmojiNames = null;
@@ -144,28 +150,53 @@ function getNameMatch(emoji, query) {
   return null;
 }
-export function searchEmoji(query) {
-  const lowercaseQuery = query ? `${query}`.toLowerCase() : '';
-  const matchingAliases = getAliasesMatchingQuery(lowercaseQuery);
-  return Object.values(emojiMap)
-    .map((emoji) => {
-      const matches = [
-        getUnicodeMatch(emoji, query),
-        getDescriptionMatch(emoji, lowercaseQuery),
-        getAliasMatch(emoji, matchingAliases),
-        getNameMatch(emoji, lowercaseQuery),
-      ].filter(Boolean);
-
-      return minBy(matches, (x) => x.score);
-    })
-    .filter(Boolean);
+function sortEmojiByPositiveIntent(stringToMatch, emojiA, emojiB) {
+  if (emojiA.name.includes(stringToMatch) && emojiB.name.includes(stringToMatch)) {
+    return 0;
+  }
+  if (emojiA.name.includes(stringToMatch)) {
+    return -1;
+  }
+  // It must mean that emojiB includes the `stringToMatch`
+  return 1;
 }
 export function sortEmoji(items) {
-  // Sort results by index of and string comparison
-  return [...items].sort((a, b) => a.score - b.score || a.fieldValue.localeCompare(b.fieldValue));
+  return [...items].sort((a, b) => {
+    // Sort results by positive intent if the emoji mentions the match
+    // This makes sure that positive intent emoji appear **before** the other emoji
+    for (const stringToMatch of POSITIVE_INTENT_EMOJI_MATCHES) {
+      if (a.emoji.name.includes(stringToMatch) || b.emoji.name.includes(stringToMatch)) {
+        return sortEmojiByPositiveIntent(stringToMatch, a.emoji, b.emoji);
+      }
+    }
+
+    // Sort results by index of and string comparison
+    return a.score - b.score || a.fieldValue.localeCompare(b.fieldValue);
+  });
+}
+
+export function searchEmoji(query) {
+  const lowercaseQuery = query ? `${query}`.toLowerCase() : '';
+
+  const matchingAliases = getAliasesMatchingQuery(lowercaseQuery);
+
+  return sortEmoji(
+    Object.values(emojiMap)
+      .map((emoji) => {
+        const matches = [
+          getUnicodeMatch(emoji, query),
+          getDescriptionMatch(emoji, lowercaseQuery),
+          getAliasMatch(emoji, matchingAliases),
+          getNameMatch(emoji, lowercaseQuery),
+        ].filter(Boolean);
+
+        return minBy(matches, (x) => x.score);
+      })
+      .filter(Boolean),
+  );
 }
 export const CATEGORY_NAMES = Object.keys(CATEGORY_ICON_MAP);