typeahead: Ignore diacritics when filtering users.

When invoking the typeahead filter for users it is desirable to be able
to see results for users with diacritics in their names even if the
filter does not contain the matching diacritics. This PR leverages
@zulip/shared typeahead module in order to strip diacritics out of the
filtering process, unless the user explicitly uses them in the filter.

Fixes: #3710

Author: Fingel

src/users/__tests__/userHelpers-test.js

@@ -115,7 +115,7 @@ describe('getAutocompleteSuggestion', () => {
   });
 
   test('result should be in priority of startsWith, contains in name, matches in email', () => {
-    const user1 = eg.makeUser({ name: 'M Apple', email: '[email protected]' }); // satisfy initials condition
+    const user1 = eg.makeUser({ name: 'M Apple', email: '[email protected]' }); // does not match
     const user2 = eg.makeUser({ name: 'Normal boy', email: '[email protected]' }); // satisfy full_name contains condition
     const user3 = eg.makeUser({ name: 'example', email: '[email protected]' }); // random entry
     const user4 = eg.makeUser({ name: 'Example', email: '[email protected]' }); // satisfy email match condition
@@ -124,7 +124,7 @@ describe('getAutocompleteSuggestion', () => {
     const user7 = eg.makeUser({ name: 'Match App Normal', email: '[email protected]' }); // satisfy all conditions
     const user8 = eg.makeUser({ name: 'match', email: '[email protected]' }); // duplicate
     const user9 = eg.makeUser({ name: 'Laptop', email: '[email protected]' }); // random entry
-    const user10 = eg.makeUser({ name: 'Mobile App', email: '[email protected]' }); // satisfy initials and email condition
+    const user10 = eg.makeUser({ name: 'Mobile App', email: '[email protected]' }); // satisfy email condition
     const user11 = eg.makeUser({ name: 'Normal', email: '[email protected]' }); // satisfy contains in name and matches in email condition
     const allUsers = deepFreeze([
       user1,
@@ -147,7 +147,7 @@ describe('getAutocompleteSuggestion', () => {
       user2, // name contains in 'ma'
       user11, // have priority because of 'ma' contains in name
       user4, // email contains 'ma'
-      user10, // have priority because of initials condition
+      user10, // email contains 'ma'
     ];
     const filteredUsers = getAutocompleteSuggestion(
       allUsers,
@@ -257,6 +257,24 @@ describe('filterUserStartWith', () => {
     const expectedUsers = [user1, user3];
     expect(filterUserStartWith(users, 'app', selfUser.user_id)).toEqual(expectedUsers);
   });
+
+  test('returns users whose name contains diacritics but otherwise starts with filter', () => {
+    const withDiacritics = eg.makeUser({ name: 'Frödö', email: '[email protected]' });
+    const withoutDiacritics = eg.makeUser({ name: 'Frodo', email: '[email protected]' });
+    const nonMatchingUser = eg.makeUser({ name: 'Zalix', email: '[email protected]' });
+    const users = deepFreeze([withDiacritics, withoutDiacritics, nonMatchingUser]);
+    const expectedUsers = [withDiacritics, withoutDiacritics];
+    expect(filterUserStartWith(users, 'Fro', eg.makeUser().user_id)).toEqual(expectedUsers);
+  });
+
+  test('returns users whose name contains diacritics and filter uses diacritics', () => {
+    const withDiacritics = eg.makeUser({ name: 'Frödö', email: '[email protected]' });
+    const withoutDiacritics = eg.makeUser({ name: 'Frodo', email: '[email protected]' });
+    const nonMatchingUser = eg.makeUser({ name: 'Zalix', email: '[email protected]' });
+    const users = deepFreeze([withDiacritics, withoutDiacritics, nonMatchingUser]);
+    const expectedUsers = [withDiacritics];
+    expect(filterUserStartWith(users, 'Frö', eg.makeUser().user_id)).toEqual(expectedUsers);
+  });
 });
 
 describe('groupUsersByStatus', () => {
@@ -312,6 +330,24 @@ describe('filterUserThatContains', () => {
     const expectedUsers = [user2, user5];
     expect(filterUserThatContains(users, 'ma', selfUser.user_id)).toEqual(expectedUsers);
   });
+
+  test('returns users whose full_name has diacritics but otherwise contains filter', () => {
+    const withDiacritics = eg.makeUser({ name: 'Aärdvärk', email: '[email protected]' });
+    const withoutDiacritics = eg.makeUser({ name: 'Aardvark', email: '[email protected]' });
+    const nonMatchingUser = eg.makeUser({ name: 'Turtle', email: '[email protected]' });
+    const users = deepFreeze([withDiacritics, withoutDiacritics, nonMatchingUser]);
+    const expectedUsers = [withDiacritics, withoutDiacritics];
+    expect(filterUserThatContains(users, 'vark', eg.makeUser().user_id)).toEqual(expectedUsers);
+  });
+
+  test('returns users whose full_name has diacritics and filter uses diacritics', () => {
+    const withDiacritics = eg.makeUser({ name: 'Aärdvärk', email: '[email protected]' });
+    const withoutDiacritics = eg.makeUser({ name: 'Aardvark', email: '[email protected]' });
+    const nonMatchingUser = eg.makeUser({ name: 'Turtle', email: '[email protected]' });
+    const users = deepFreeze([withDiacritics, withoutDiacritics, nonMatchingUser]);
+    const expectedUsers = [withDiacritics];
+    expect(filterUserThatContains(users, 'värk', eg.makeUser().user_id)).toEqual(expectedUsers);
+  });
 });
 
 describe('filterUserMatchesEmail', () => {

src/users/userHelpers.js

@@ -1,6 +1,7 @@
 /* @flow strict-local */
 // $FlowFixMe[untyped-import]
 import uniqby from 'lodash.uniqby';
+import * as typeahead from '@zulip/shared/js/typeahead';
 
 import type {
   MutedUsersState,
@@ -86,21 +87,27 @@ export const filterUserStartWith = (
   users: $ReadOnlyArray<AutocompleteOption>,
   filter: string = '',
   ownUserId: UserId,
-): $ReadOnlyArray<AutocompleteOption> =>
-  users.filter(
-    user =>
-      user.user_id !== ownUserId && user.full_name.toLowerCase().startsWith(filter.toLowerCase()),
-  );
+): $ReadOnlyArray<AutocompleteOption> => {
+  const loweredFilter = filter.toLowerCase();
+  const isAscii = /^[a-z]+$/.test(loweredFilter);
+  return users.filter(user => {
+    const full_name = isAscii ? typeahead.remove_diacritics(user.full_name) : user.full_name;
+    return user.user_id !== ownUserId && full_name.toLowerCase().startsWith(loweredFilter);
+  });
+};
 
 export const filterUserThatContains = (
   users: $ReadOnlyArray<AutocompleteOption>,
   filter: string = '',
   ownUserId: UserId,
-): $ReadOnlyArray<AutocompleteOption> =>
-  users.filter(
-    user =>
-      user.user_id !== ownUserId && user.full_name.toLowerCase().includes(filter.toLowerCase()),
-  );
+): $ReadOnlyArray<AutocompleteOption> => {
+  const loweredFilter = filter.toLowerCase();
+  const isAscii = /^[a-z]+$/.test(loweredFilter);
+  return users.filter(user => {
+    const full_name = isAscii ? typeahead.remove_diacritics(user.full_name) : user.full_name;
+    return user.user_id !== ownUserId && full_name.toLowerCase().includes(filter.toLowerCase());
+  });
+};
 
 export const filterUserMatchesEmail = (
   users: $ReadOnlyArray<AutocompleteOption>,