From ebda1dfc8b50d2da2ba7fbc12cb167757f3d66cd Mon Sep 17 00:00:00 2001 From: Steve Howell Date: Sun, 20 Feb 2022 12:39:38 +0000 Subject: [PATCH] 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 | 69 +++++++++++++++++++++++++++++ static/js/stream_subscribers_ui.js | 71 ++++-------------------------- tools/test-js-with-node | 1 + 3 files changed, 78 insertions(+), 63 deletions(-) create mode 100644 static/js/add_subscribers_pill.js diff --git a/static/js/add_subscribers_pill.js b/static/js/add_subscribers_pill.js new file mode 100644 index 0000000000..45c1f755e2 --- /dev/null +++ b/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]; +} diff --git a/static/js/stream_subscribers_ui.js b/static/js/stream_subscribers_ui.js index 09c2b938fd..7a11ae8282 100644 --- a/static/js/stream_subscribers_ui.js +++ b/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) => { diff --git a/tools/test-js-with-node b/tools/test-js-with-node index 22cad8c050..5bd8dbc20c 100755 --- a/tools/test-js-with-node +++ b/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",