stream-settings: Show system groups in subscribers form typeahead.

We now show role-based system groups in the subscribers typeahead
in stream creation and stream edit UI.

web/src/add_subscribers_pill.ts

@@ -127,9 +127,11 @@ export function set_up_handlers_for_add_button_state(
 export function create({
     $pill_container,
     get_potential_subscribers,
+    get_user_groups,
 }: {
     $pill_container: JQuery;
     get_potential_subscribers: () => User[];
+    get_user_groups: () => UserGroup[];
 }): CombinedPillContainer {
     const pill_widget = input_pill.create<CombinedPill>({
         $container: $pill_container,
@@ -144,7 +146,12 @@ export function create({
         return user_pill.filter_taken_users(potential_subscribers, pill_widget);
     }
 
-    set_up_pill_typeahead({pill_widget, $pill_container, get_users});
+    function get_groups(): UserGroup[] {
+        const groups = get_user_groups();
+        return user_group_pill.filter_taken_groups(groups, pill_widget);
+    }
+
+    set_up_pill_typeahead({pill_widget, $pill_container, get_users, get_user_groups: get_groups});
 
     set_up_handlers_for_add_button_state(pill_widget, $pill_container);
 
@@ -154,11 +161,13 @@ export function create({
 export function create_without_add_button({
     $pill_container,
     get_potential_subscribers,
+    get_user_groups,
     onPillCreateAction,
     onPillRemoveAction,
 }: {
     $pill_container: JQuery;
     get_potential_subscribers: () => User[];
+    get_user_groups: () => UserGroup[];
     onPillCreateAction: (pill_user_ids: number[]) => void;
     onPillRemoveAction: (pill_user_ids: number[]) => void;
 }): CombinedPillContainer {
@@ -175,6 +184,11 @@ export function create_without_add_button({
         return user_pill.filter_taken_users(potential_subscribers, pill_widget);
     }
 
+    function get_groups(): UserGroup[] {
+        const user_groups = get_user_groups();
+        return user_group_pill.filter_taken_groups(user_groups, pill_widget);
+    }
+
     pill_widget.onPillCreate(() => {
         onPillCreateAction(get_pill_user_ids(pill_widget));
     });
@@ -182,7 +196,7 @@ export function create_without_add_button({
         onPillRemoveAction(get_pill_user_ids(pill_widget));
     });
 
-    set_up_pill_typeahead({pill_widget, $pill_container, get_users});
+    set_up_pill_typeahead({pill_widget, $pill_container, get_users, get_user_groups: get_groups});
 
     return pill_widget;
 }

web/src/stream_create_subscribers.ts

@@ -10,6 +10,7 @@ import * as people from "./people.ts";
 import {current_user} from "./state_data.ts";
 import * as stream_create_subscribers_data from "./stream_create_subscribers_data.ts";
 import type {CombinedPillContainer} from "./typeahead_helper.ts";
+import * as user_groups from "./user_groups.ts";
 import * as user_sort from "./user_sort.ts";
 
 export let pill_widget: CombinedPillContainer;
@@ -54,9 +55,11 @@ function build_pill_widget({
 }): CombinedPillContainer {
     const $pill_container = $parent_container.find(".pill-container");
     const get_potential_subscribers = stream_create_subscribers_data.get_potential_subscribers;
+    const get_user_groups = user_groups.get_all_realm_user_groups;
     return add_subscribers_pill.create_without_add_button({
         $pill_container,
         get_potential_subscribers,
+        get_user_groups,
         onPillCreateAction: add_user_ids,
         // It is better to sync the current set of user ids in the input
         // instead of removing user_ids from the user_ids_set, otherwise

web/src/stream_edit_subscribers.ts

@@ -27,6 +27,7 @@ import * as sub_store from "./sub_store.ts";
 import type {StreamSubscription} from "./sub_store.ts";
 import * as subscriber_api from "./subscriber_api.ts";
 import type {CombinedPillContainer} from "./typeahead_helper.ts";
+import * as user_groups from "./user_groups.ts";
 import * as user_sort from "./user_sort.ts";
 
 const remove_user_id_api_response_schema = z.object({
@@ -119,6 +120,7 @@ export function enable_subscriber_management({
     pill_widget = add_subscribers_pill.create({
         $pill_container,
         get_potential_subscribers,
+        get_user_groups: user_groups.get_all_realm_user_groups,
     });
 
     $pill_container.find(".input").on("input", () => {