refactor: Extract `set_up_typeahead_on_pills` to a new file.

We move this function from `user_pill.js` to `pill_typeahead.js`.
The function has also been renamed to `set_up`.

The move was made because there are plans to update the pills
typeahead (i.e. to include user-groups/streams in the results).
Thus this function should not belong in `user_pill.js`.

.eslintrc.json

@@ -188,6 +188,7 @@
                 "padded_widget": false,
                 "page_params": false,
                 "panels": false,
+                "pill_typeahead": false,
                 "people": false,
                 "pm_conversations": false,
                 "pm_list": false,

frontend_tests/node_tests/settings_user_groups.js

@@ -3,6 +3,7 @@
 const _ = require("lodash");
 
 zrequire("user_pill");
+zrequire("pill_typeahead");
 zrequire("settings_user_groups");
 
 set_global("$", global.make_zjquery());

frontend_tests/node_tests/user_pill.js

@@ -3,6 +3,7 @@
 zrequire("people");
 set_global("md5", (s) => "md5-" + s);
 zrequire("user_pill");
+zrequire("pill_typeahead");
 
 set_global("page_params", {});
 

static/js/bundles/app.js

@@ -115,6 +115,7 @@ import "../typeahead_helper.js";
 import "../search_suggestion.js";
 import "../search.js";
 import "../composebox_typeahead.js";
+import "../pill_typeahead.js";
 import "../navigate.js";
 import "../list_util.js";
 import "../hotkey.js";

static/js/global.d.ts

@@ -89,6 +89,7 @@ declare let padded_widget: any;
 declare let page_params: any;
 declare let panels: any;
 declare let people: any;
+declare let pill_typeahead: any;
 declare let pm_conversations: any;
 declare let pm_list: any;
 declare let pointer: any;

static/js/pill_typeahead.js

@@ -0,0 +1,44 @@
+"use strict";
+
+const settings_data = require("./settings_data");
+
+exports.set_up = function (input, pills, opts) {
+    let source = opts.source;
+    if (!opts.source) {
+        source = () => user_pill.typeahead_source(pills);
+    }
+
+    input.typeahead({
+        items: 5,
+        fixed: true,
+        dropup: true,
+        source,
+        highlighter(item) {
+            return typeahead_helper.render_person(item);
+        },
+        matcher(item) {
+            let query = this.query.toLowerCase();
+            query = query.replace(/\u00A0/g, String.fromCharCode(32));
+            if (!settings_data.show_email()) {
+                return item.full_name.toLowerCase().includes(query);
+            }
+            const email = people.get_visible_email(item);
+            return (
+                email.toLowerCase().includes(query) || item.full_name.toLowerCase().includes(query)
+            );
+        },
+        sorter(matches) {
+            return typeahead_helper.sort_recipientbox_typeahead(this.query, matches, "");
+        },
+        updater(user) {
+            user_pill.append_user(user, pills);
+            input.trigger("focus");
+            if (opts.update_func) {
+                opts.update_func();
+            }
+        },
+        stopAdvance: true,
+    });
+};
+
+window.pill_typeahead = exports;

static/js/settings_account.js

@@ -257,12 +257,12 @@ exports.initialize_custom_user_type_fields = function (
                 const input = pill_container.children(".input");
                 if (set_handler_on_update) {
                     const opts = {update_func: update_custom_user_field};
-                    user_pill.set_up_typeahead_on_pills(input, pills, opts);
+                    pill_typeahead.set_up(input, pills, opts);
                     pills.onPillRemove(() => {
                         update_custom_user_field();
                     });
                 } else {
-                    user_pill.set_up_typeahead_on_pills(input, pills, {});
+                    pill_typeahead.set_up(input, pills, {});
                 }
             }
             user_pills.set(field.id, pills);

static/js/settings_user_groups.js

@@ -265,7 +265,7 @@ exports.populate_user_groups = function () {
         const input = pill_container.children(".input");
         if (exports.can_edit(data.id)) {
             const opts = {update_func: update_cancel_button};
-            user_pill.set_up_typeahead_on_pills(input, pills, opts);
+            pill_typeahead.set_up(input, pills, opts);
         }
 
         (function pill_remove() {

static/js/stream_edit.js

@@ -343,7 +343,7 @@ function show_subscription_settings(sub_row) {
     });
 
     const opts = {source: get_users_for_subscriber_typeahead};
-    user_pill.set_up_typeahead_on_pills(sub_settings.find(".input"), exports.pill_widget, opts);
+    pill_typeahead.set_up(sub_settings.find(".input"), exports.pill_widget, opts);
 }
 
 exports.is_notification_setting = function (setting_label) {

static/js/user_pill.js

@@ -2,7 +2,6 @@
 
 // This will be used for pills for things like composing PMs
 // or adding users to a stream/group.
-const settings_data = require("./settings_data");
 
 exports.create_item_from_email = function (email, current_items) {
     // For normal Zulip use, we need to validate the email for our realm.
@@ -90,7 +89,7 @@ exports.has_unconverted_data = function (pill_widget) {
 
 exports.typeahead_source = function (pill_widget) {
     const persons = people.get_realm_users();
-    return exports.filter_taken_users(persons, pill_widget);
+    return user_pill.filter_taken_users(persons, pill_widget);
 };
 
 exports.filter_taken_users = function (items, pill_widget) {
@@ -119,43 +118,4 @@ exports.create_pills = function (pill_container) {
     return pills;
 };
 
-exports.set_up_typeahead_on_pills = function (input, pills, opts) {
-    let source = opts.source;
-    if (!opts.source) {
-        source = () => exports.typeahead_source(pills);
-    }
-
-    input.typeahead({
-        items: 5,
-        fixed: true,
-        dropup: true,
-        source,
-        highlighter(item) {
-            return typeahead_helper.render_person(item);
-        },
-        matcher(item) {
-            let query = this.query.toLowerCase();
-            query = query.replace(/\u00A0/g, String.fromCharCode(32));
-            if (!settings_data.show_email()) {
-                return item.full_name.toLowerCase().includes(query);
-            }
-            const email = people.get_visible_email(item);
-            return (
-                email.toLowerCase().includes(query) || item.full_name.toLowerCase().includes(query)
-            );
-        },
-        sorter(matches) {
-            return typeahead_helper.sort_recipientbox_typeahead(this.query, matches, "");
-        },
-        updater(user) {
-            exports.append_user(user, pills);
-            input.trigger("focus");
-            if (opts.update_func) {
-                opts.update_func();
-            }
-        },
-        stopAdvance: true,
-    });
-};
-
 window.user_pill = exports;