manage streams: Extract add_subscribers_pill.js.

This is mostly a pure code move.  A few small tweaks:

    * The create() function is new.
    * The new module doesn't assume a `pill_widget`
      global.

This module represents the truly re-usable code
that can be shared during these two user actions:

    * edit-stream subscribers (now)
    * create-stream subscribers (future)

In both situations the input pill has (or will have)
essentially the same behavior, and the next commit
will tighten up the abstraction.

(The two processes will both also use fairly similar
ListWidgets, but the mechanics of managing the list
are going to be different, so we do not intend
to keep around stream_subscribers_ui in its current
name. More on that later.)

static/js/add_subscribers_pill.js

@@ -0,0 +1,69 @@
+import * as input_pill from "./input_pill";
+import * as pill_typeahead from "./pill_typeahead";
+import * as stream_pill from "./stream_pill";
+import * as user_group_pill from "./user_group_pill";
+import * as user_pill from "./user_pill";
+
+function create_item_from_text(text, current_items) {
+    const funcs = [
+        stream_pill.create_item_from_stream_name,
+        user_group_pill.create_item_from_group_name,
+        user_pill.create_item_from_email,
+    ];
+    for (const func of funcs) {
+        const item = func(text, current_items);
+        if (item) {
+            return item;
+        }
+    }
+    return undefined;
+}
+
+function get_text_from_item(item) {
+    const funcs = [
+        stream_pill.get_stream_name_from_item,
+        user_group_pill.get_group_name_from_item,
+        user_pill.get_email_from_item,
+    ];
+    for (const func of funcs) {
+        const text = func(item);
+        if (text) {
+            return text;
+        }
+    }
+    return undefined;
+}
+
+function set_up_pill_typeahead({pill_widget, pill_container, get_users}) {
+    const opts = {
+        user_source: get_users,
+        stream: true,
+        user_group: true,
+        user: true,
+    };
+    pill_typeahead.set_up(pill_container.find(".input"), pill_widget, opts);
+}
+
+export function create({pill_container, get_potential_subscribers}) {
+    const pill_widget = input_pill.create({
+        container: pill_container,
+        create_item_from_text,
+        get_text_from_item,
+    });
+
+    function get_users() {
+        const potential_subscribers = get_potential_subscribers();
+        return user_pill.filter_taken_users(potential_subscribers, pill_widget);
+    }
+
+    set_up_pill_typeahead({pill_widget, pill_container, get_users});
+
+    return pill_widget;
+}
+
+export function get_pill_user_ids(pill_widget) {
+    const user_ids = user_pill.get_user_ids(pill_widget);
+    const stream_user_ids = stream_pill.get_user_ids(pill_widget);
+    const group_user_ids = user_group_pill.get_user_ids(pill_widget);
+    return [...user_ids, ...stream_user_ids, ...group_user_ids];
+}

static/js/stream_subscribers_ui.js

@@ -4,69 +4,25 @@ import render_unsubscribe_private_stream_modal from "../templates/confirm_dialog
 import render_stream_member_list_entry from "../templates/stream_settings/stream_member_list_entry.hbs";
 import render_stream_subscription_request_result from "../templates/stream_settings/stream_subscription_request_result.hbs";
 
+import * as add_subscribers_pill from "./add_subscribers_pill";
 import * as blueslip from "./blueslip";
 import * as confirm_dialog from "./confirm_dialog";
 import * as hash_util from "./hash_util";
 import {$t, $t_html} from "./i18n";
-import * as input_pill from "./input_pill";
 import * as ListWidget from "./list_widget";
 import {page_params} from "./page_params";
 import * as peer_data from "./peer_data";
 import * as people from "./people";
-import * as pill_typeahead from "./pill_typeahead";
 import * as settings_data from "./settings_data";
 import * as stream_data from "./stream_data";
-import * as stream_pill from "./stream_pill";
 import * as sub_store from "./sub_store";
 import * as subscriber_api from "./subscriber_api";
 import * as ui from "./ui";
-import * as user_group_pill from "./user_group_pill";
-import * as user_pill from "./user_pill";
 
 export let pill_widget;
 let current_stream_id;
 let subscribers_list_widget;
 
-function create_item_from_text(text, current_items) {
-    const funcs = [
-        stream_pill.create_item_from_stream_name,
-        user_group_pill.create_item_from_group_name,
-        user_pill.create_item_from_email,
-    ];
-    for (const func of funcs) {
-        const item = func(text, current_items);
-        if (item) {
-            return item;
-        }
-    }
-    return undefined;
-}
-
-function get_text_from_item(item) {
-    const funcs = [
-        stream_pill.get_stream_name_from_item,
-        user_group_pill.get_group_name_from_item,
-        user_pill.get_email_from_item,
-    ];
-    for (const func of funcs) {
-        const text = func(item);
-        if (text) {
-            return text;
-        }
-    }
-    return undefined;
-}
-
-function set_up_pill_typeahead({pill_container, get_users}) {
-    const opts = {
-        user_source: get_users,
-        stream: true,
-        user_group: true,
-        user: true,
-    };
-    pill_typeahead.set_up(pill_container.find(".input"), pill_widget, opts);
-}
-
 function format_member_list_elem(person) {
     return render_stream_member_list_entry({
         name: person.full_name,
@@ -120,18 +76,14 @@ export function enable_subscriber_management({sub, parent_container}) {
     // current_stream_id and pill_widget are module-level variables
     current_stream_id = stream_id;
 
-    pill_widget = input_pill.create({
-        container: pill_container,
-        create_item_from_text,
-        get_text_from_item,
-    });
-
-    function get_users_for_subscriber_typeahead() {
-        const potential_subscribers = peer_data.potential_subscribers(stream_id);
-        return user_pill.filter_taken_users(potential_subscribers, pill_widget);
+    function get_potential_subscribers() {
+        return peer_data.potential_subscribers(stream_id);
     }
 
-    set_up_pill_typeahead({pill_container, get_users: get_users_for_subscriber_typeahead});
+    pill_widget = add_subscribers_pill.create({
+        pill_container,
+        get_potential_subscribers,
+    });
 
     const user_ids = peer_data.get_subscribers(stream_id);
 
@@ -171,20 +123,13 @@ function make_list_widget({parent_container, name, user_ids}) {
     });
 }
 
-export function get_pill_user_ids() {
-    const user_ids = user_pill.get_user_ids(pill_widget);
-    const stream_user_ids = stream_pill.get_user_ids(pill_widget);
-    const group_user_ids = user_group_pill.get_user_ids(pill_widget);
-    return [...user_ids, ...stream_user_ids, ...group_user_ids];
-}
-
 function submit_add_subscriber_form(stream_id) {
     const sub = get_sub(stream_id);
     if (!sub) {
         return;
     }
 
-    const pill_user_ids = get_pill_user_ids();
+    const pill_user_ids = add_subscribers_pill.get_pill_user_ids(pill_widget);
 
     const deactivated_users = new Set();
     const active_user_ids = pill_user_ids.filter((user_id) => {

tools/test-js-with-node

@@ -45,6 +45,7 @@ def make_set(files: List[str]) -> Set[str]:
 EXEMPT_FILES = make_set(
     [
         "static/js/about_zulip.js",
+        "static/js/add_subscribers_pill.js",
         "static/js/admin.js",
         "static/js/alert_popup.ts",
         "static/js/archive.js",