[FIX] mail: improved (fuzzy) search of emoji picker

Before this commit, search in emoji picker was case-sensitive
and had no scoring of items. For example:
- typing "ok" did not match with 🆗
- "ok" 1st suggestion was 😘 because of keyword "face blowing a kiss"
 and this is one of the 1st emoji having characters "o" and "k" in
 search terms.

After this commit, search is now fuzzy:
- typing "ok" shows 🆗
- "ok" 1st suggestions are 👌 & 🆗

Task-3175520

closes odoo/odoo#126801

X-original-commit: 4953172398719df829735f381f4e8939f17b1989
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/mail/static/src/core/common/emoji_picker.js

@@ -19,7 +19,7 @@ import { browser } from "@web/core/browser/browser";
 import { _t } from "@web/core/l10n/translation";
 import { usePopover } from "@web/core/popover/popover_hook";
 import { memoize } from "@web/core/utils/functions";
-import { escapeRegExp } from "@web/core/utils/strings";
+import { fuzzyLookup } from "@web/core/utils/search";
 
 /**
  *
@@ -269,16 +269,8 @@ export class EmojiPicker extends Component {
     getEmojis() {
         const search = this.state.searchStr;
         if (search.length > 1) {
-            const regexp = new RegExp(
-                search
-                    .split("")
-                    .map((x) => escapeRegExp(x))
-                    .join(".*")
-            );
-            return this.emojis.filter((emoji) =>
-                [emoji.name, ...emoji.keywords, ...emoji.emoticons, ...emoji.shortcodes].some((x) =>
-                    x.match(regexp)
-                )
+            return fuzzyLookup(this.state.searchStr, this.emojis, (emoji) =>
+                [emoji.name, ...emoji.keywords, ...emoji.emoticons, ...emoji.shortcodes].join(" ")
             );
         }
         return this.emojis;

addons/mail/static/tests/emoji/emoji_tests.js

@@ -23,6 +23,16 @@ QUnit.test("search emoji from keywords", async (assert) => {
     assert.containsOnce($, ".o-mail-Emoji:contains(🌮)");
 });
 
+QUnit.test("search emoji from keywords should be case insensitive", async (assert) => {
+    const pyEnv = await startServer();
+    const channelId = pyEnv["discuss.channel"].create({ name: "" });
+    const { openDiscuss } = await start();
+    await openDiscuss(channelId);
+    await click("button[aria-label='Emojis']");
+    await insertText("input[placeholder='Search for an emoji']", "ok");
+    assert.containsOnce($, ".o-mail-Emoji:contains(🆗)"); // all search terms are uppercase OK
+});
+
 QUnit.test("search emoji from keywords with special regex character", async (assert) => {
     const pyEnv = await startServer();
     const channelId = pyEnv["discuss.channel"].create({ name: "" });