Remove fuzzy search for emoji

This MR refactors and partially reverts the changes made in
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/42669

app/assets/javascripts/awards_handler.js

@@ -560,7 +560,7 @@ export class AwardsHandler {
   }
 
   findMatchingEmojiElements(query) {
-    const emojiMatches = this.emoji.searchEmoji(query, { match: 'fuzzy' }).map(({ name }) => name);
+    const emojiMatches = this.emoji.searchEmoji(query).map((x) => x.emoji.name);
     const $emojiElements = $('.emoji-menu-list:not(.frequent-emojis) [data-name]');
     const $matchingElements = $emojiElements.filter(
       (i, elm) => emojiMatches.indexOf(elm.dataset.name) >= 0,

app/assets/javascripts/behaviors/gl_emoji.js

 import 'document-register-element';
 import isEmojiUnicodeSupported from '../emoji/support';
-import { initEmojiMap, getEmojiInfo, emojiFallbackImageSrc, emojiImageTag } from '../emoji';
+import {
+  initEmojiMap,
+  getEmojiInfo,
+  emojiFallbackImageSrc,
+  emojiImageTag,
+  FALLBACK_EMOJI_KEY,
+} from '../emoji';
 
 class GlEmoji extends HTMLElement {
   connectedCallback() {
@@ -17,7 +23,7 @@ class GlEmoji extends HTMLElement {
 
         if (emojiInfo) {
           if (name !== emojiInfo.name) {
-            if (emojiInfo.fallback && this.innerHTML) {
+            if (emojiInfo.name === FALLBACK_EMOJI_KEY && this.innerHTML) {
               return; // When fallback emoji is used, but there is a <img> provided, use the <img> instead
             }
 

app/assets/javascripts/gfm_auto_complete.js

@@ -190,59 +190,43 @@ class GfmAutoComplete {
   }
 
   setupEmoji($input) {
-    const self = this;
-    const { filter, ...defaults } = this.getDefaultCallbacks();
+    const fetchData = this.fetchData.bind(this);
 
     // Emoji
     $input.atwho({
       at: ':',
-      displayTpl(value) {
-        let tmpl = GfmAutoComplete.Loading.template;
-        if (value && value.name) {
-          tmpl = GfmAutoComplete.Emoji.templateFunction(value.name);
-        }
-        return tmpl;
-      },
+      displayTpl: GfmAutoComplete.Emoji.templateFunction,
       insertTpl: GfmAutoComplete.Emoji.insertTemplateFunction,
       skipSpecialCharacterTest: true,
       data: GfmAutoComplete.defaultLoadingData,
       callbacks: {
-        ...defaults,
+        ...this.getDefaultCallbacks(),
         matcher(flag, subtext) {
           const regexp = new RegExp(`(?:[^${glRegexp.unicodeLetters}0-9:]|\n|^):([^:]*)$`, 'gi');
           const match = regexp.exec(subtext);
 
           return match && match.length ? match[1] : null;
         },
-        filter(query, items, searchKey) {
-          const filtered = filter.call(this, query, items, searchKey);
-          if (query.length === 0 || GfmAutoComplete.isLoading(items)) {
-            return filtered;
+        filter(query, items) {
+          if (GfmAutoComplete.isLoading(items)) {
+            fetchData(this.$inputor, this.at);
+            return items;
           }
 
-          // map from value to "<value> is <field> of <emoji>", arranged by emoji
-          const emojis = {};
-          filtered.forEach(({ name: value }) => {
-            self.emojiLookup[value].forEach(({ emoji: { name }, kind }) => {
-              let entry = emojis[name];
-              if (!entry) {
-                entry = {};
-                emojis[name] = entry;
-              }
-              if (!(kind in entry) || value.localeCompare(entry[kind]) < 0) {
-                entry[kind] = value;
+          return GfmAutoComplete.Emoji.filter(query);
+        },
+        sorter(query, items) {
+          this.setting.highlightFirst = this.setting.alwaysHighlightFirst || query.length > 0;
+          if (GfmAutoComplete.isLoading(items)) {
+            this.setting.highlightFirst = false;
+            return items;
           }
-            });
-          });
 
-          // collate results to list, prefering name > unicode > alias > description
-          const results = [];
-          Object.values(emojis).forEach(({ name, unicode, alias, description }) => {
-            results.push(name || unicode || alias || description);
-          });
+          if (query.length === 0) {
+            return items;
+          }
 
-          // return to the form atwho wants
-          return results.map((name) => ({ name }));
+          return GfmAutoComplete.Emoji.sorter(items);
         },
       },
     });
@@ -674,32 +658,7 @@ class GfmAutoComplete {
   async loadEmojiData($input, at) {
     await Emoji.initEmojiMap();
 
-    // All the emoji
-    const emojis = Emoji.getAllEmoji();
-
-    // Add all of the fields to atwho's database
-    this.loadData($input, at, [
-      ...Object.keys(emojis), // Names
-      ...Object.values(emojis).flatMap(({ aliases }) => aliases), // Aliases
-      ...Object.values(emojis).map(({ e }) => e), // Unicode values
-      ...Object.values(emojis).map(({ d }) => d), // Descriptions
-    ]);
-
-    // Construct a lookup that can correlate a value to "<value> is the <field> of <emoji>"
-    const lookup = {};
-    const add = (key, kind, emoji) => {
-      if (!(key in lookup)) {
-        lookup[key] = [];
-      }
-      lookup[key].push({ kind, emoji });
-    };
-    Object.values(emojis).forEach((emoji) => {
-      add(emoji.name, 'name', emoji);
-      add(emoji.d, 'description', emoji);
-      add(emoji.e, 'unicode', emoji);
-      emoji.aliases.forEach((a) => add(a, 'alias', emoji));
-    });
-    this.emojiLookup = lookup;
+    this.loadData($input, at, ['loaded']);
 
     GfmAutoComplete.glEmojiTag = Emoji.glEmojiTag;
   }
@@ -772,36 +731,38 @@ GfmAutoComplete.typesWithBackendFiltering = ['vulnerabilities'];
 GfmAutoComplete.isTypeWithBackendFiltering = (type) =>
   GfmAutoComplete.typesWithBackendFiltering.includes(GfmAutoComplete.atTypeMap[type]);
 
-function findEmoji(name) {
-  return Emoji.searchEmoji(name, { match: 'contains', raw: true }).sort((a, b) => {
-    if (a.index !== b.index) {
-      return a.index - b.index;
-    }
-    return a.field.localeCompare(b.field);
-  });
-}
-
 // Emoji
 GfmAutoComplete.glEmojiTag = null;
 GfmAutoComplete.Emoji = {
   insertTemplateFunction(value) {
-    const results = findEmoji(value.name);
-    if (results.length) {
-      return `:${results[0].emoji.name}:`;
-    }
-    return `:${value.name}:`;
+    return `:${value.emoji.name}:`;
   },
-  templateFunction(name) {
-    // glEmojiTag helper is loaded on-demand in fetchData()
-    if (!GfmAutoComplete.glEmojiTag) return `<li>${name}</li>`;
+  templateFunction(item) {
+    if (GfmAutoComplete.isLoading(item)) {
+      return GfmAutoComplete.Loading.template;
+    }
 
-    const results = findEmoji(name);
-    if (!results.length) {
-      return `<li>${name} ${GfmAutoComplete.glEmojiTag(name)}</li>`;
+    const escapedFieldValue = escape(item.fieldValue);
+    if (!GfmAutoComplete.glEmojiTag) {
+      return `<li>${escapedFieldValue}</li>`;
     }
 
-    const { field, emoji } = results[0];
-    return `<li>${field} ${GfmAutoComplete.glEmojiTag(emoji.name)}</li>`;
+    return `<li>${escapedFieldValue} ${GfmAutoComplete.glEmojiTag(item.emoji.name)}</li>`;
+  },
+  filter(query) {
+    if (query.length === 0) {
+      return Object.values(Emoji.getAllEmoji())
+        .map((emoji) => ({
+          emoji,
+          fieldValue: emoji.name,
+        }))
+        .slice(0, 20);
+    }
+
+    return Emoji.searchEmoji(query);
+  },
+  sorter(items) {
+    return Emoji.sortEmoji(items);
   },
 };
 // Team Members

changelogs/unreleased/gfm-emoji-refactor.yml

+---
+title: Remove fuzzy search for awards emoji and refactor GFM autocomplete emoji support
+merge_request: 51972
+author: Ethan Reesor (@firelizzard)
+type: other

spec/frontend/__helpers__/emoji.js

@@ -29,10 +29,6 @@ export const emojiFixtureMap = {
     unicodeVersion: '6.0',
     description: 'white question mark ornament',
   },
-
-  // used for regression tests
-  // black_heart MUST come before heart
-  // custard MUST come before star
   black_heart: {
     moji: '🖤',
     unicodeVersion: '1.1',
@@ -55,34 +51,18 @@ export const emojiFixtureMap = {
   },
 };
 
-Object.keys(emojiFixtureMap).forEach((k) => {
-  emojiFixtureMap[k].name = k;
-  if (!emojiFixtureMap[k].aliases) {
-    emojiFixtureMap[k].aliases = [];
-  }
-});
+export const mockEmojiData = Object.keys(emojiFixtureMap).reduce((acc, k) => {
+  const { moji: e, unicodeVersion: u, category: c, description: d } = emojiFixtureMap[k];
+  acc[k] = { name: k, e, u, c, d };
 
-export async function initEmojiMock() {
-  const emojiData = Object.fromEntries(
-    Object.values(emojiFixtureMap).map((m) => {
-      const { name: n, moji: e, unicodeVersion: u, category: c, description: d } = m;
-      return [n, { c, e, d, u }];
-    }),
-  );
+  return acc;
+}, {});
 
+export async function initEmojiMock(mockData = mockEmojiData) {
   const mock = new MockAdapter(axios);
-  mock.onGet(`/-/emojis/${EMOJI_VERSION}/emojis.json`).reply(200, JSON.stringify(emojiData));
+  mock.onGet(`/-/emojis/${EMOJI_VERSION}/emojis.json`).reply(200, JSON.stringify(mockData));
 
   await initEmojiMap();
 
   return mock;
 }
-
-export function describeEmojiFields(label, tests) {
-  describe.each`
-    field            | accessor
-    ${'name'}        | ${(e) => e.name}
-    ${'alias'}       | ${(e) => e.aliases[0]}
-    ${'description'} | ${(e) => e.description}
-  `(label, tests);
-}

spec/frontend/awards_handler_spec.js

@@ -53,6 +53,12 @@ describe('AwardsHandler', () => {
       d: 'smiling face with sunglasses',
       u: '6.0',
     },
+    grey_question: {
+      c: 'symbols',
+      e: '❔',
+      d: 'white question mark ornament',
+      u: '6.0',
+    },
   };
   preloadFixtures('snippets/show.html');
 
@@ -285,16 +291,6 @@ describe('AwardsHandler', () => {
       expect($('.js-emoji-menu-search').val()).toBe('');
     });
 
-    it('should fuzzy filter the emoji', async () => {
-      await openAndWaitForEmojiMenu();
-
-      awardsHandler.searchEmojis('sgls');
-
-      expect($('[data-name=angel]').is(':visible')).toBe(false);
-      expect($('[data-name=anger]').is(':visible')).toBe(false);
-      expect($('[data-name=sunglasses]').is(':visible')).toBe(true);
-    });
-
     it('should filter by emoji description', async () => {
       await openAndWaitForEmojiMenu();
 

spec/frontend/gfm_auto_complete_spec.js

@@ -2,7 +2,7 @@
 
 import $ from 'jquery';
 import MockAdapter from 'axios-mock-adapter';
-import { emojiFixtureMap, initEmojiMock, describeEmojiFields } from 'helpers/emoji';
+import { initEmojiMock } from 'helpers/emoji';
 import '~/lib/utils/jquery_at_who';
 import GfmAutoComplete, { membersBeforeSave } from 'ee_else_ce/gfm_auto_complete';
 import { TEST_HOST } from 'helpers/test_constants';
@@ -714,16 +714,20 @@ describe('GfmAutoComplete', () => {
   });
 
   describe('emoji', () => {
-    const { atom, heart, star } = emojiFixtureMap;
-    const assertInserted = ({ input, subject, emoji }) =>
-      expect(subject).toBe(`:${emoji?.name || input}:`);
-    const assertTemplated = ({ input, subject, emoji, field }) =>
-      expect(subject.replace(/\s+/g, ' ')).toBe(
-        `<li>${field || input} <gl-emoji data-name="${emoji?.name || input}"></gl-emoji> </li>`,
-      );
-
     let mock;
 
+    const mockItem = {
+      'atwho-at': ':',
+      emoji: {
+        c: 'symbols',
+        d: 'negative squared ab',
+        e: '🆎',
+        name: 'ab',
+        u: '6.0',
+      },
+      fieldValue: 'ab',
+    };
+
     beforeEach(async () => {
       mock = await initEmojiMock();
 
@@ -735,90 +739,22 @@ describe('GfmAutoComplete', () => {
       mock.restore();
     });
 
-    describe.each`
-      name                        | inputFormat             | assert
-      ${'insertTemplateFunction'} | ${(name) => ({ name })} | ${assertInserted}
-      ${'templateFunction'}       | ${(name) => name}       | ${assertTemplated}
-    `('Emoji.$name', ({ name, inputFormat, assert }) => {
-      const execute = (accessor, input, emoji) =>
-        assert({
-          input,
-          emoji,
-          field: accessor && accessor(emoji),
-          subject: GfmAutoComplete.Emoji[name](inputFormat(input)),
-        });
-
-      describeEmojiFields('for $field', ({ accessor }) => {
-        it('should work with lowercase', () => {
-          execute(accessor, accessor(atom), atom);
-        });
-
-        it('should work with uppercase', () => {
-          execute(accessor, accessor(atom).toUpperCase(), atom);
-        });
-
-        it('should work with partial value', () => {
-          execute(accessor, accessor(atom).slice(1), atom);
-        });
-      });
-
-      it('should work with unicode value', () => {
-        execute(null, atom.moji, atom);
-      });
+    describe('Emoji.templateFunction', () => {
+      it('should return a correct template', () => {
+        const actual = GfmAutoComplete.Emoji.templateFunction(mockItem);
+        const glEmojiTag = `<gl-emoji data-name="${mockItem.emoji.name}"></gl-emoji>`;
+        const expected = `<li>${mockItem.fieldValue} ${glEmojiTag}</li>`;
 
-      it('should pass through unknown value', () => {
-        execute(null, 'foo bar baz');
+        expect(actual).toBe(expected);
       });
     });
 
-    const expectEmojiOrder = (first, second) => {
-      const keys = Object.keys(emojiFixtureMap);
-      const firstIndex = keys.indexOf(first);
-      const secondIndex = keys.indexOf(second);
-      expect(firstIndex).toBeGreaterThanOrEqual(0);
-      expect(secondIndex).toBeGreaterThanOrEqual(0);
-      expect(firstIndex).toBeLessThan(secondIndex);
-    };
-
     describe('Emoji.insertTemplateFunction', () => {
-      it('should map ":heart" to :heart: [regression]', () => {
-        // the bug mapped heart to black_heart because the latter sorted first
-        expectEmojiOrder('black_heart', 'heart');
-
-        const item = GfmAutoComplete.Emoji.insertTemplateFunction({ name: 'heart' });
-        expect(item).toEqual(`:${heart.name}:`);
-      });
-
-      it('should map ":star" to :star: [regression]', () => {
-        // the bug mapped star to custard because the latter sorted first
-        expectEmojiOrder('custard', 'star');
-
-        const item = GfmAutoComplete.Emoji.insertTemplateFunction({ name: 'star' });
-        expect(item).toEqual(`:${star.name}:`);
-      });
-    });
-
-    describe('Emoji.templateFunction', () => {
-      it('should map ":heart" to ❤ [regression]', () => {
-        // the bug mapped heart to black_heart because the latter sorted first
-        expectEmojiOrder('black_heart', 'heart');
-
-        const item = GfmAutoComplete.Emoji.templateFunction('heart')
-          .replace(/(<gl-emoji)\s+(data-name)/, '$1 $2')
-          .replace(/>\s+|\s+</g, (s) => s.trim());
-        expect(item).toEqual(
-          `<li>${heart.name}<gl-emoji data-name="${heart.name}"></gl-emoji></li>`,
-        );
-      });
-
-      it('should map ":star" to ⭐ [regression]', () => {
-        // the bug mapped star to custard because the latter sorted first
-        expectEmojiOrder('custard', 'star');
+      it('should return a correct template', () => {
+        const actual = GfmAutoComplete.Emoji.insertTemplateFunction(mockItem);
+        const expected = `:${mockItem.emoji.name}:`;
 
-        const item = GfmAutoComplete.Emoji.templateFunction('star')
-          .replace(/(<gl-emoji)\s+(data-name)/, '$1 $2')
-          .replace(/>\s+|\s+</g, (s) => s.trim());
-        expect(item).toEqual(`<li>${star.name}<gl-emoji data-name="${star.name}"></gl-emoji></li>`);
+        expect(actual).toBe(expected);
       });
     });
   });

spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap

@@ -18,13 +18,9 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
       class="award-emoji-block"
       data-testid="award-html"
     >
-      
-    
       <gl-emoji
         data-name="thumbsup"
       />
-      
-  
     </span>
      
     <span
@@ -52,13 +48,9 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
       class="award-emoji-block"
       data-testid="award-html"
     >
-      
-    
       <gl-emoji
         data-name="thumbsdown"
       />
-      
-  
     </span>
      
     <span
@@ -86,13 +78,9 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
       class="award-emoji-block"
       data-testid="award-html"
     >
-      
-    
       <gl-emoji
         data-name="smile"
       />
-      
-  
     </span>
      
     <span
@@ -120,13 +108,9 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
       class="award-emoji-block"
       data-testid="award-html"
     >
-      
-    
       <gl-emoji
         data-name="ok_hand"
       />
-      
-  
     </span>
      
     <span
@@ -154,13 +138,9 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
       class="award-emoji-block"
       data-testid="award-html"
     >
-      
-    
       <gl-emoji
         data-name="cactus"
       />
-      
-  
     </span>
      
     <span
@@ -188,13 +168,9 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
       class="award-emoji-block"
       data-testid="award-html"
     >
-      
-    
       <gl-emoji
         data-name="a"
       />
-      
-  
     </span>
      
     <span
@@ -222,13 +198,9 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
       class="award-emoji-block"
       data-testid="award-html"
     >
-      
-    
       <gl-emoji
         data-name="b"
       />
-      
-  
     </span>
      
     <span

spec/frontend/vue_shared/components/gfm_autocomplete/__snapshots__/utils_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`gfm_autocomplete/utils emojis config shows the emoji name and icon in the menu item 1`] = `
-"raised_hands 
-    <gl-emoji
-      
-      data-name=\\"raised_hands\\"></gl-emoji>
-  "
-`;
+exports[`gfm_autocomplete/utils emojis config shows the emoji name and icon in the menu item 1`] = `"raised_hands <gl-emoji data-name=\\"raised_hands\\"></gl-emoji>"`;
 
 exports[`gfm_autocomplete/utils issues config shows the iid and title in the menu item within a project context 1`] = `"<small>123456</small> Project context issue title &lt;script&gt;alert(&#39;hi&#39;)&lt;/script&gt;"`;