Repository: zulip/zulip

Issue:
Switch to new groups UI
<!-- Issue description -->

Now that #27912 has been merged, we are ready to:

- [ ] Remove the old user groups management panel from Organization settings.
> [#19526](https://github.com/zulip/zulip/issues/19526): Once the above are done, we can delete the settings_user_groups.js UI and cutover the UI, perhaps after a bit more work

- [ ] Make the gear menu options (in order):

Stream settings
Organization settings
Group settings
Personal settings

Icon: https://lucide.dev/icons/user-cog

@_**Vlad Korobov|22433** [said](https://chat.zulip.org/#narrow/stream/101-design/topic/settings.20order/near/1692676):
```
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#000" d="M2.668 4.668a3.332 3.332 0 1 1 6.664 0 3.332 3.332 0 0 1-6.664 0ZM6 2.666a2.002 2.002 0 1 0 0 4.003 2.002 2.002 0 0 0 0-4.003Zm8.102 5.696.118-.047a.665.665 0 0 1 .494 1.235l-.082.033a2.682 2.682 0 0 1 .017.71l.028.01a.665.665 0 1 1-.42 1.261l-.08-.026a2.68 2.68 0 0 1-.54.566l.047.116a.665.665 0 1 1-1.235.494l-.032-.08a2.692 2.692 0 0 1-.71.016l-.01.027a.665.665 0 1 1-1.261-.42l.026-.08a2.682 2.682 0 0 1-.565-.54l-.117.047a.665.665 0 1 1-.494-1.235l.081-.032a2.684 2.684 0 0 1-.016-.71l-.028-.009a.665.665 0 0 1 .42-1.261l.08.026c.152-.214.334-.404.54-.565l-.047-.119a.665.665 0 0 1 1.235-.494l.033.083a2.686 2.686 0 0 1 .709-.016l.01-.03a.665.665 0 0 1 1.261.42l-.027.082c.214.15.404.332.565.538Zm-2.785.492a1.334 1.334 0 0 0-.595 1.533.664.664 0 0 1 .134.302 1.334 1.334 0 0 0 1.53.59.664.664 0 0 1 .304-.135 1.334 1.334 0 0 0 .587-1.534.668.668 0 0 1-.132-.296 1.334 1.334 0 0 0-1.537-.59.665.665 0 0 1-.291.13ZM4 9.336a3.332 3.332 0 0 0-3.332 3.332V14a.665.665 0 1 0 1.33 0v-1.333A2.002 2.002 0 0 1 4 10.666h2.667a.665.665 0 1 0 0-1.33H4Z"/></svg>
```

- [ ] Update the help center pages/macros for user groups. Can be an immediate follow-up, but I think it shouldn't be too hard, and then we can check it off.


<!-- Link to a message in the chat.zulip.org discussion. Message links will still work even if the topic is renamed or resolved. Link back to this issue from the chat.zulip.org thread. -->

[CZO thread](https://chat.zulip.org/#narrow/stream/101-design/topic/settings.20order/near/1692676)



Discussion:

Resolving patch:
diff --git a/zerver/lib/markdown/help_relative_links.py b/zerver/lib/markdown/help_relative_links.py
--- a/zerver/lib/markdown/help_relative_links.py
+++ b/zerver/lib/markdown/help_relative_links.py
@@ -25,6 +25,10 @@
         '<i class="fa fa-bolt"></i> Organization settings',
         "/#organization/organization-profile",
     ],
+    "group-settings": [
+        '<i class="zulip-icon zulip-icon-user-cog"></i> Group settings',
+        "/#groups/your",
+    ],
     "integrations": ['<i class="fa fa-github"></i> Integrations', "/integrations/"],
     "stats": ['<i class="fa fa-bar-chart"></i> Usage statistics', "/stats"],
     "plans": ['<i class="fa fa-rocket"></i> Plans and pricing', "/plans/"],
@@ -104,6 +108,27 @@ def stream_handle_match(key: str) -> str:
     return stream_instructions_no_link
 
 
+group_info = {
+    "all": ["All groups", "/#groups/all"],
+    "subscribed": ["Your groups", "/#groups/your"],
+}
+
+group_instructions_no_link = """
+1. Click on the **gear** (<i class="fa fa-cog"></i>) icon in the upper
+   right corner of the web or desktop app.
+
+1. Click **Group settings**.
+"""
+
+
+def group_handle_match(key: str) -> str:
+    if relative_help_links:
+        return f"1. Go to [{group_info[key][0]}]({group_info[key][1]})."
+    if key == "all":
+        return group_instructions_no_link + "\n\n1. Click **All groups** in the upper left."
+    return group_instructions_no_link
+
+
 draft_instructions = """
 1. Click on <i class="fa fa-pencil"></i> **Drafts** in the left sidebar.
 """
@@ -163,6 +188,7 @@ def message_handle_match(key: str) -> str:
     "stream": stream_handle_match,
     "message": message_handle_match,
     "help": help_handle_match,
+    "group": group_handle_match,
 }
 
 
diff --git a/zerver/lib/markdown/help_settings_links.py b/zerver/lib/markdown/help_settings_links.py
--- a/zerver/lib/markdown/help_settings_links.py
+++ b/zerver/lib/markdown/help_settings_links.py
@@ -58,11 +58,6 @@
         "Authentication methods",
         "/#organization/auth-methods",
     ],
-    "user-groups-admin": [
-        "Organization settings",
-        "User groups",
-        "/#organization/user-groups-admin",
-    ],
     "user-list-admin": ["Organization settings", "Users", "/#organization/user-list-admin"],
     "deactivated-users-admin": [
         "Organization settings",


Test patch:
diff --git a/web/tests/dispatch.test.js b/web/tests/dispatch.test.js
--- a/web/tests/dispatch.test.js
+++ b/web/tests/dispatch.test.js
@@ -63,7 +63,6 @@ const settings_realm_user_settings_defaults = mock_esm(
 );
 const settings_realm_domains = mock_esm("../src/settings_realm_domains");
 const settings_streams = mock_esm("../src/settings_streams");
-const settings_user_groups_legacy = mock_esm("../src/settings_user_groups_legacy");
 const settings_users = mock_esm("../src/settings_users");
 const sidebar_ui = mock_esm("../src/sidebar_ui");
 const stream_data = mock_esm("../src/stream_data");
@@ -171,7 +170,6 @@ run_test("attachments", ({override}) => {
 
 run_test("user groups", ({override}) => {
     let event = event_fixtures.user_group__add;
-    override(settings_user_groups_legacy, "reload", noop);
     {
         const stub = make_stub();
         const user_group_settings_ui_stub = make_stub();
@@ -1165,7 +1163,7 @@ run_test("realm_export", ({override}) => {
     assert.equal(args.exports, event.exports);
 });
 
-run_test("server_event_dispatch_op_errors", ({override}) => {
+run_test("server_event_dispatch_op_errors", () => {
     blueslip.expect("error", "Unexpected event type subscription/other");
     server_events_dispatch.dispatch_normal_event({type: "subscription", op: "other"});
     blueslip.expect("error", "Unexpected event type reaction/other");
@@ -1190,7 +1188,6 @@ run_test("server_event_dispatch_op_errors", ({override}) => {
         sender: {user_id: 5},
         op: "other",
     });
-    override(settings_user_groups_legacy, "reload", noop);
     blueslip.expect("error", "Unexpected event type user_group/other");
     server_events_dispatch.dispatch_normal_event({type: "user_group", op: "other"});
 });
diff --git a/web/tests/pill_typeahead.test.js b/web/tests/pill_typeahead.test.js
--- a/web/tests/pill_typeahead.test.js
+++ b/web/tests/pill_typeahead.test.js
@@ -124,6 +124,11 @@ run_test("set_up", ({mock_template}) => {
         get_text_from_item: noop,
     });
 
+    let update_func_called = false;
+    function update_func() {
+        update_func_called = true;
+    }
+
     let opts = {};
     $fake_input.typeahead = (config) => {
         assert.equal(config.items, 5);
@@ -297,6 +302,8 @@ run_test("set_up", ({mock_template}) => {
                 assert.equal(number_of_pills(), 2);
                 config.updater.call(fake_group_this, testers);
                 assert.equal(number_of_pills(), 3);
+
+                assert.ok(update_func_called);
             }
         })();
 
@@ -324,7 +331,7 @@ run_test("set_up", ({mock_template}) => {
         {user_group: true, stream: true},
         {user_group: true, user: true},
         {user: true, stream: true},
-        {user_group: true, stream: true, user: true},
+        {user_group: true, stream: true, user: true, update_func},
     ];
 
     for (const config of all_possible_opts) {
diff --git a/web/tests/settings_user_groups_legacy.test.js b/web/tests/settings_user_groups_legacy.test.js
deleted file mode 100644
--- a/web/tests/settings_user_groups_legacy.test.js
+++ /dev/null
@@ -1,854 +0,0 @@
-"use strict";
-
-const {strict: assert} = require("assert");
-
-const {$t} = require("./lib/i18n");
-const {mock_esm, set_global, zrequire} = require("./lib/namespace");
-const {run_test} = require("./lib/test");
-const blueslip = require("./lib/zblueslip");
-const $ = require("./lib/zjquery");
-const {page_params} = require("./lib/zpage_params");
-
-const noop = () => {};
-
-const pills = {
-    pill: {},
-};
-
-let create_item_handler;
-
-const channel = mock_esm("../src/channel");
-const confirm_dialog = mock_esm("../src/confirm_dialog");
-const dialog_widget = mock_esm("../src/dialog_widget");
-const input_pill = mock_esm("../src/input_pill");
-const settings_data = mock_esm("../src/settings_data");
-const typeahead_helper = mock_esm("../src/typeahead_helper");
-const user_groups = mock_esm("../src/user_groups", {
-    get_user_group_from_id: noop,
-    remove: noop,
-    add: noop,
-});
-const ui_report = mock_esm("../src/ui_report");
-
-const people = zrequire("people");
-const settings_user_groups_legacy = zrequire("settings_user_groups_legacy");
-const user_pill = zrequire("user_pill");
-
-function reset_test_setup($pill_container_stub) {
-    function input_pill_stub(opts) {
-        assert.equal(opts.$container, $pill_container_stub);
-        create_item_handler = opts.create_item_from_text;
-        assert.ok(create_item_handler);
-        return pills;
-    }
-    input_pill.create = input_pill_stub;
-}
-
-function test_ui(label, f) {
-    // The sloppy_$ flag lets us reuse setup from prior tests.
-    run_test(label, f, {sloppy_$: true});
-}
-
-test_ui("can_edit", ({override}) => {
-    override(settings_data, "user_can_edit_user_groups", () => false);
-    assert.ok(!settings_user_groups_legacy.can_edit(1));
-
-    override(settings_data, "user_can_edit_user_groups", () => true);
-    user_groups.is_direct_member_of = (user_id, group_id) => {
-        assert.equal(group_id, 1);
-        assert.equal(user_id, undefined);
-        return false;
-    };
-    assert.ok(!settings_user_groups_legacy.can_edit(1));
-
-    page_params.is_admin = true;
-    assert.ok(settings_user_groups_legacy.can_edit(1));
-
-    page_params.is_admin = false;
-    page_params.is_moderator = true;
-    assert.ok(settings_user_groups_legacy.can_edit(1));
-
-    page_params.is_admin = false;
-    page_params.is_moderator = false;
-    user_groups.is_direct_member_of = (user_id, group_id) => {
-        assert.equal(group_id, 1);
-        assert.equal(user_id, undefined);
-        return true;
-    };
-    assert.ok(settings_user_groups_legacy.can_edit(1));
-});
-
-const user_group_selector = `#user-groups #${CSS.escape(1)}`;
-const cancel_selector = `#user-groups #${CSS.escape(1)} .save-status.btn-danger`;
-const saved_selector = `#user-groups #${CSS.escape(1)} .save-status.sea-green`;
-const name_selector = `#user-groups #${CSS.escape(1)} .name`;
-const description_selector = `#user-groups #${CSS.escape(1)} .description`;
-const instructions_selector = `#user-groups #${CSS.escape(1)} .save-instructions`;
-
-test_ui("populate_user_groups", ({mock_template, override, override_rewire}) => {
-    override(settings_data, "user_can_edit_user_groups", () => true);
-
-    const realm_user_group = {
-        id: 1,
-        name: "Mobile",
-        description: "All mobile people",
-        members: new Set([2, 4]),
-    };
-    const iago = {
-        email: "iago@zulip.com",
-        user_id: 2,
-        full_name: "Iago",
-    };
-    const alice = {
-        email: "alice@example.com",
-        user_id: 31,
-        full_name: "Alice",
-    };
-    const bob = {
-        email: "bob@example.com",
-        user_id: 32,
-        full_name: "Bob",
-    };
-
-    people.add_active_user(iago);
-    people.add_active_user(alice);
-    people.add_active_user(bob);
-
-    override_rewire(people, "get_realm_users", () => [iago, alice, bob]);
-
-    user_groups.get_realm_user_groups = () => [realm_user_group];
-
-    let templates_render_called = false;
-    const $fake_rendered_temp = $.create("fake_admin_user_group_list_template_rendered");
-    mock_template("settings/admin_user_group_list.hbs", false, (args) => {
-        assert.equal(args.user_group.id, 1);
-        assert.equal(args.user_group.name, "Mobile");
-        assert.equal(args.user_group.description, "All mobile people");
-        templates_render_called = true;
-        return $fake_rendered_temp;
-    });
-
-    let user_groups_list_append_called = false;
-    $("#user-groups").append = (rendered_temp) => {
-        assert.equal(rendered_temp, $fake_rendered_temp);
-        user_groups_list_append_called = true;
-    };
-
-    let get_by_user_id_called = false;
-    override_rewire(people, "get_by_user_id", (user_id) => {
-        if (user_id === iago.user_id) {
-            return iago;
-        }
-        assert.equal(user_id, 4);
-        blueslip.expect("warn", "Undefined user in function append_user");
-        get_by_user_id_called = true;
-        return undefined;
-    });
-    override_rewire(
-        people,
-        "is_known_user",
-        () => people.get_by_user_id !== undefined && people.get_by_user_id !== noop,
-    );
-
-    page_params.is_admin = true;
-
-    const all_pills = new Map();
-
-    const $pill_container_stub = $(`.pill-container[data-group-pills="${CSS.escape(1)}"]`);
-    pills.appendValidatedData = (item) => {
-        const id = item.user_id;
-        assert.ok(!all_pills.has(id));
-        all_pills.set(id, item);
-    };
-    pills.items = () => [...all_pills.values()];
-
-    let text_cleared;
-    pills.clear_text = () => {
-        text_cleared = true;
-    };
-
-    const $input_field_stub = $.create("fake-input-field");
-    $pill_container_stub.children = () => $input_field_stub;
-
-    let input_typeahead_called = false;
-    $input_field_stub.typeahead = (config) => {
-        assert.equal(config.items, 5);
-        assert.ok(config.fixed);
-        assert.ok(config.dropup);
-        assert.ok(config.stopAdvance);
-        assert.equal(typeof config.source, "function");
-        assert.equal(typeof config.highlighter, "function");
-        assert.equal(typeof config.matcher, "function");
-        assert.equal(typeof config.sorter, "function");
-        assert.equal(typeof config.updater, "function");
-
-        (function test_highlighter() {
-            const $fake_person = $.create("fake-person");
-            typeahead_helper.render_person = () => $fake_person;
-            assert.equal(config.highlighter(), $fake_person);
-        })();
-
-        const fake_context = {
-            query: "ali",
-        };
-
-        const fake_context_for_email = {
-            query: "am",
-        };
-
-        (function test_source() {
-            const result = config.source.call(fake_context, iago);
-            const emails = result.map((user) => user.email).sort();
-            assert.deepEqual(emails, [alice.email, bob.email]);
-        })();
-
-        (function test_matcher() {
-            /* Here the query doesn't begin with an '@' because typeahead is triggered
-            by the '@' sign and thus removed in the query. */
-            let result = config.matcher.call(fake_context, iago);
-            assert.ok(!result);
-
-            result = config.matcher.call(fake_context, alice);
-            assert.ok(result);
-
-            bob.delivery_email = null;
-            result = config.matcher.call(fake_context_for_email, bob);
-            assert.ok(!result);
-
-            bob.delivery_email = "bob-delivery@example.com";
-            result = config.matcher.call(fake_context_for_email, bob);
-            assert.ok(result);
-        })();
-
-        (function test_sorter() {
-            let sort_recipients_typeahead_called = false;
-            typeahead_helper.sort_recipients = function () {
-                sort_recipients_typeahead_called = true;
-            };
-            config.sorter.call(fake_context, []);
-            assert.ok(sort_recipients_typeahead_called);
-        })();
-
-        (function test_updater() {
-            $input_field_stub.text("@ali");
-            user_groups.get_user_group_from_id = () => realm_user_group;
-
-            let saved_fade_out_called = false;
-            let cancel_fade_to_called = false;
-            let instructions_fade_to_called = false;
-            $(saved_selector).fadeOut = () => {
-                saved_fade_out_called = true;
-            };
-            $(cancel_selector).css = (data) => {
-                assert.equal(typeof data, "object");
-                assert.equal(data.display, "inline-block");
-                assert.equal(data.opacity, "0");
-                return $(cancel_selector);
-            };
-            $(cancel_selector).fadeTo = () => {
-                cancel_fade_to_called = true;
-            };
-            $(instructions_selector).css = (data) => {
-                assert.equal(typeof data, "object");
-                assert.equal(data.display, "block");
-                assert.equal(data.opacity, "0");
-                return $(instructions_selector);
-            };
-            $(instructions_selector).fadeTo = () => {
-                instructions_fade_to_called = true;
-            };
-
-            text_cleared = false;
-            config.updater(alice);
-            // update_cancel_button is called.
-            assert.ok(saved_fade_out_called);
-            assert.ok(cancel_fade_to_called);
-            assert.ok(instructions_fade_to_called);
-            assert.equal(text_cleared, true);
-        })();
-        input_typeahead_called = true;
-    };
-
-    let get_by_email_called = false;
-    override_rewire(people, "get_by_email", (user_email) => {
-        get_by_email_called = true;
-        switch (user_email) {
-            case iago.email:
-                return iago;
-            case bob.email:
-                return bob;
-            /* istanbul ignore next */
-            default:
-                throw new Error("Expected user email to be of Iago or Bob here.");
-        }
-    });
-
-    function test_create_item(handler) {
-        (function test_rejection_path() {
-            const item = handler(iago.email, pills.items());
-            assert.ok(get_by_email_called);
-            assert.equal(item, undefined);
-        })();
-
-        (function test_success_path() {
-            get_by_email_called = false;
-            const res = handler(bob.email, pills.items());
-            assert.ok(get_by_email_called);
-            assert.equal(typeof res, "object");
-            assert.equal(res.user_id, bob.user_id);
-            assert.equal(res.display_value, bob.full_name);
-        })();
-
-        (function test_deactivated_pill() {
-            people.deactivate(bob);
-            get_by_email_called = false;
-            const res = handler(bob.email, pills.items());
-            assert.ok(get_by_email_called);
-            assert.equal(typeof res, "object");
-            assert.equal(res.user_id, bob.user_id);
-            assert.equal(res.display_value, bob.full_name);
-            assert.ok(res.deactivated);
-            people.add_active_user(bob);
-        })();
-    }
-
-    pills.onPillRemove = (handler) => {
-        set_global("setTimeout", (func) => {
-            func();
-        });
-        realm_user_group.members = new Set([2, 31]);
-        handler();
-    };
-
-    reset_test_setup($pill_container_stub);
-    settings_user_groups_legacy.set_up();
-    assert.ok(templates_render_called);
-    assert.ok(user_groups_list_append_called);
-    assert.ok(get_by_user_id_called);
-    assert.ok(input_typeahead_called);
-    test_create_item(create_item_handler);
-
-    // Tests for settings_user_groups_legacy.set_up workflow.
-    assert.equal(typeof $("#user-groups").get_on_handler("click", ".delete"), "function");
-    assert.equal(
-        typeof $("#user-groups").get_on_handler("keypress", ".user-group h4 > span"),
-        "function",
-    );
-});
-test_ui("with_external_user", ({disallow_rewire, override_rewire, mock_template}) => {
-    const realm_user_group = {
-        id: 1,
-        name: "Mobile",
-        description: "All mobile people",
-        members: new Set([2, 4]),
-    };
-
-    user_groups.get_realm_user_groups = () => [realm_user_group];
-
-    // These are already tested, so we skip them
-    disallow_rewire(people, "get_realm_users");
-
-    mock_template(
-        "settings/admin_user_group_list.hbs",
-        false,
-        () => "settings/admin_user_group_list.hbs",
-    );
-
-    override_rewire(people, "get_by_user_id", () => "user stub");
-
-    override_rewire(user_pill, "append_person", noop);
-
-    let can_edit_called = 0;
-    override_rewire(settings_user_groups_legacy, "can_edit", () => {
-        can_edit_called += 1;
-        return false;
-    });
-
-    // Reset zjquery to test stuff with user who cannot edit
-    $.clear_all_elements();
-
-    let user_group_find_called = 0;
-    const $user_group_stub = $(`div.user-group[id="${CSS.escape(1)}"]`);
-    const $name_field_stub = $.create("fake-name-field");
-    const $description_field_stub = $.create("fake-description-field");
-    const $input_stub = $.create("fake-input");
-    $user_group_stub.find = (elem) => {
-        user_group_find_called += 1;
-        switch (elem) {
-            case ".name":
-                return $name_field_stub;
-            case ".description":
-                return $description_field_stub;
-            /* istanbul ignore next */
-            default:
-                throw new Error(`Unknown element ${elem}`);
-        }
-    };
-
-    const $pill_container_stub = $(`.pill-container[data-group-pills="${CSS.escape(1)}"]`);
-    const $pill_stub = $.create("fake-pill");
-    let pill_container_find_called = 0;
-    $pill_container_stub.find = (elem) => {
-        pill_container_find_called += 1;
-        switch (elem) {
-            case ".input":
-                return $input_stub;
-            case ".pill":
-                return $pill_stub;
-            /* istanbul ignore next */
-            default:
-                throw new Error(`Unknown element ${elem}`);
-        }
-    };
-
-    $input_stub.css = (property, val) => {
-        assert.equal(property, "display");
-        assert.equal(val, "none");
-    };
-
-    // Test the 'off' handlers on the pill-container
-    const turned_off = {};
-    $pill_container_stub.off = (event_name, sel = "whole") => {
-        turned_off[event_name + "/" + sel] = true;
-    };
-
-    const $exit_button = $.create("fake-pill-exit");
-    $pill_stub.set_find_results(".exit", $exit_button);
-    let exit_button_called = false;
-    $exit_button.css = (property, value) => {
-        exit_button_called = true;
-        assert.equal(property, "opacity");
-        assert.equal(value, "0.5");
-    };
-
-    // We return [] because these are already tested, so we skip them
-    $pill_container_stub.children = () => [];
-
-    $("#user-groups").append = noop;
-
-    reset_test_setup($pill_container_stub);
-
-    settings_user_groups_legacy.set_up();
-
-    let set_parents_result_called = 0;
-    let set_attributes_called = 0;
-
-    // Test different handlers with an external user
-    const delete_handler = $("#user-groups").get_on_handler("click", ".delete");
-    const $fake_delete = $.create("fk-#user-groups.delete_btn");
-    $fake_delete.set_parents_result(".user-group", $(".user-group"));
-    set_parents_result_called += 1;
-    $(".user-group").attr("id", "1");
-    set_attributes_called += 1;
-
-    const name_update_handler = $(user_group_selector).get_on_handler("input", ".name");
-
-    const des_update_handler = $(user_group_selector).get_on_handler("input", ".description");
-
-    const member_change_handler = $(user_group_selector).get_on_handler("blur", ".input");
-
-    const name_change_handler = $(user_group_selector).get_on_handler("blur", ".name");
-
-    const des_change_handler = $(user_group_selector).get_on_handler("blur", ".description");
-
-    const event = {
-        stopPropagation: noop,
-    };
-    const pill_mouseenter_handler = $pill_stub.get_on_handler("mouseenter");
-    const pill_click_handler = $pill_container_stub.get_on_handler("click");
-    pill_mouseenter_handler(event);
-    pill_click_handler(event);
-    assert.equal(delete_handler.call($fake_delete), undefined);
-    assert.equal(name_update_handler(), undefined);
-    assert.equal(des_update_handler(), undefined);
-    assert.equal(member_change_handler(), undefined);
-    assert.equal(name_change_handler(), undefined);
-    assert.equal(des_change_handler(), undefined);
-    assert.equal(set_parents_result_called, 1);
-    assert.equal(set_attributes_called, 1);
-    assert.equal(can_edit_called, 9);
-    assert.ok(exit_button_called);
-    assert.equal(user_group_find_called, 2);
-    assert.equal(pill_container_find_called, 4);
-    assert.equal(turned_off["keydown/.pill"], true);
-    assert.equal(turned_off["keydown/.input"], true);
-    assert.equal(turned_off["click/whole"], true);
-});
-
-test_ui("reload", ({override_rewire}) => {
-    $("#user-groups").html("Some text");
-    let populate_user_groups_called = false;
-    override_rewire(settings_user_groups_legacy, "populate_user_groups", () => {
-        populate_user_groups_called = true;
-    });
-    settings_user_groups_legacy.reload();
-    assert.ok(populate_user_groups_called);
-    assert.equal($("#user-groups").html(), "");
-});
-
-test_ui("reset", () => {
-    settings_user_groups_legacy.reset();
-    const result = settings_user_groups_legacy.reload();
-    assert.equal(result, undefined);
-});
-
-test_ui("on_events", ({mock_template, override, override_rewire}) => {
-    override(settings_data, "user_can_edit_user_groups", () => true);
-    mock_template("confirm_dialog/confirm_delete_user.hbs", false, (data) => {
-        assert.deepEqual(data, {
-            group_name: "Mobile",
-        });
-        return "stub";
-    });
-
-    page_params.is_admin = true;
-
-    (function test_admin_user_group_form_submit_triggered() {
-        const handler = settings_user_groups_legacy.add_user_group;
-        const event = {
-            stopPropagation: noop,
-            preventDefault: noop,
-        };
-        const $fake_this = $.create("#add-user-group-form");
-        const fake_object_array = [
-            {
-                name: "fake-name",
-                value: "",
-            },
-            {
-                name: "fake-name",
-                value: "fake-value",
-            },
-        ];
-        $fake_this.serializeArray = () => fake_object_array;
-        channel.post = (opts) => {
-            const data = {
-                members: "[null]",
-            };
-            data[fake_object_array[1].name] = fake_object_array[1].value;
-            assert.equal(opts.url, "/json/user_groups/create");
-            assert.deepEqual(opts.data, data);
-
-            (function test_post_success() {
-                $("#dialog_error").show();
-                $("#add-user-group-form input[type='text']").val("fake-content");
-                ui_report.success = (text, ele) => {
-                    assert.equal(text, "translated HTML: User group added!");
-                    assert.equal(ele, $("#dialog_error"));
-                };
-                dialog_widget.close = () => {};
-
-                opts.success();
-
-                assert.ok(!$("#dialog_error").visible());
-            })();
-            (function test_post_error() {
-                $("#dialog_error").show();
-                ui_report.error = (error_msg, error_obj, ele) => {
-                    assert.equal(error_msg, "translated HTML: Failed");
-                    assert.deepEqual(error_obj, {responseJson: {msg: "fake-msg"}});
-                    assert.equal(ele, $("#dialog_error"));
-                };
-                opts.error({responseJson: {msg: "fake-msg"}});
-
-                assert.ok(!$("#dialog_error").visible());
-            })();
-        };
-
-        handler(event);
-    })();
-
-    (function test_user_groups_delete_click_triggered() {
-        const handler = $("#user-groups").get_on_handler("click", ".delete");
-        const $fake_this = $.create("fake-#user-groups.delete_btn");
-        $fake_this.set_parents_result(".user-group", $(".user-group"));
-        $(".user-group").attr("id", "1");
-
-        channel.del = (opts) => {
-            const data = {
-                id: 1,
-            };
-            assert.equal(opts.url, "/json/user_groups/1");
-            assert.deepEqual(opts.data, data);
-
-            $fake_this.text($t({defaultMessage: "fake-text"}));
-            opts.error();
-            assert.equal($fake_this.text(), "translated: Failed!");
-        };
-
-        confirm_dialog.launch = (conf) => {
-            conf.on_click();
-        };
-
-        handler.call($fake_this);
-    })();
-
-    (function test_user_groups_keypress_enter_triggered() {
-        const handler = $("#user-groups").get_on_handler("keypress", ".user-group h4 > span");
-        let default_action_for_enter_stopped = false;
-        const event = {
-            key: "Enter",
-            preventDefault() {
-                default_action_for_enter_stopped = true;
-            },
-        };
-        handler(event);
-        assert.ok(default_action_for_enter_stopped);
-    })();
-
-    (function test_do_not_blur() {
-        const blur_event_classes = [".name", ".description", ".input"];
-        let api_endpoint_called = false;
-        /* istanbul ignore next */
-        channel.post = () => {
-            api_endpoint_called = true;
-        };
-        channel.patch = noop;
-        const $fake_this = $.create("fake-#user-groups_do_not_blur");
-        const event = {
-            // FIXME: event.relatedTarget should not be a jQuery object
-            relatedTarget: $fake_this,
-        };
-
-        // Any of the blur_exceptions trigger blur event.
-        for (const class_name of blur_event_classes) {
-            const handler = $(user_group_selector).get_on_handler("blur", class_name);
-
-            for (const blur_exception of [
-                ".pill-container",
-                ".name",
-                ".description",
-                ".input",
-                ".delete",
-            ]) {
-                if (blur_exception === class_name) {
-                    continue;
-                }
-                api_endpoint_called = false;
-                $fake_this.closest = (class_name) => {
-                    if (class_name === blur_exception || class_name === user_group_selector) {
-                        return [1];
-                    }
-                    return [];
-                };
-                handler.call($fake_this, event);
-                assert.ok(!api_endpoint_called);
-            }
-
-            api_endpoint_called = false;
-            $fake_this.closest = (class_name) => {
-                assert.equal(class_name, ".typeahead");
-                return [1];
-            };
-            handler.call($fake_this, event);
-            assert.ok(!api_endpoint_called);
-
-            // Cancel button triggers blur event.
-            let settings_user_groups_legacy_reload_called = false;
-            override_rewire(settings_user_groups_legacy, "reload", () => {
-                settings_user_groups_legacy_reload_called = true;
-            });
-            api_endpoint_called = false;
-            $fake_this.closest = (class_name) => {
-                if (
-                    class_name === ".save-status.btn-danger" ||
-                    class_name === user_group_selector
-                ) {
-                    return [1];
-                }
-                return [];
-            };
-            handler.call($fake_this, event);
-            assert.ok(!api_endpoint_called);
-            assert.ok(settings_user_groups_legacy_reload_called);
-        }
-    })();
-
-    (function test_update_cancel_button() {
-        const handler_name = $(user_group_selector).get_on_handler("input", ".name");
-        const handler_desc = $(user_group_selector).get_on_handler("input", ".description");
-        const $sib_des = $(description_selector);
-        const $sib_name = $(name_selector);
-        $sib_name.text($t({defaultMessage: "mobile"}));
-        $sib_des.text($t({defaultMessage: "All mobile members"}));
-
-        const group_data = {
-            name: "translated: mobile",
-            description: "translated: All mobile members",
-            members: new Set([2, 31]),
-        };
-        user_groups.get_user_group_from_id = () => group_data;
-
-        let cancel_fade_out_called = false;
-        let instructions_fade_out_called = false;
-        $(cancel_selector).show();
-        $(cancel_selector).fadeOut = () => {
-            cancel_fade_out_called = true;
-        };
-        $(instructions_selector).fadeOut = () => {
-            instructions_fade_out_called = true;
-        };
-
-        // Cancel button removed if user group if user group has no changes.
-        const $fake_this = $.create("fake-#update_cancel_button");
-        handler_name.call($fake_this);
-        assert.ok(cancel_fade_out_called);
-        assert.ok(instructions_fade_out_called);
-
-        // Check if cancel button removed if user group error is showing.
-        $(user_group_selector + " .user-group-status").show();
-        cancel_fade_out_called = false;
-        instructions_fade_out_called = false;
-        handler_name.call($fake_this);
-        assert.ok(cancel_fade_out_called);
-        assert.ok(instructions_fade_out_called);
-
-        // Check for handler_desc to achieve 100% coverage.
-        cancel_fade_out_called = false;
-        instructions_fade_out_called = false;
-        handler_desc.call($fake_this);
-        assert.ok(cancel_fade_out_called);
-        assert.ok(instructions_fade_out_called);
-    })();
-
-    (function test_user_groups_save_group_changes_triggered() {
-        const handler_name = $(user_group_selector).get_on_handler("blur", ".name");
-        const handler_desc = $(user_group_selector).get_on_handler("blur", ".description");
-        const $sib_des = $(description_selector);
-        const $sib_name = $(name_selector);
-        $sib_name.text($t({defaultMessage: "mobile"}));
-        $sib_des.text($t({defaultMessage: "All mobile members"}));
-
-        const group_data = {members: new Set([2, 31])};
-        user_groups.get_user_group_from_id = () => group_data;
-        let api_endpoint_called = false;
-        let cancel_fade_out_called = false;
-        let saved_fade_to_called = false;
-        let instructions_fade_out_called = false;
-        $(instructions_selector).fadeOut = () => {
-            instructions_fade_out_called = true;
-        };
-        $(cancel_selector).fadeOut = () => {
-            cancel_fade_out_called = true;
-        };
-        $(saved_selector).css = (data) => {
-            assert.equal(typeof data, "object");
-            assert.equal(data.display, "inline-block");
-            assert.equal(data.opacity, "0");
-            return $(saved_selector);
-        };
-        $(saved_selector).fadeTo = () => {
-            saved_fade_to_called = true;
-            return $(saved_selector);
-        };
-
-        channel.patch = (opts) => {
-            assert.equal(opts.url, "/json/user_groups/1");
-            assert.equal(opts.data.name, "translated: mobile");
-            assert.equal(opts.data.description, "translated: All mobile members");
-            api_endpoint_called = true;
-            (function test_post_success() {
-                set_global("setTimeout", (func) => {
-                    func();
-                });
-                opts.success();
-                assert.ok(cancel_fade_out_called);
-                assert.ok(instructions_fade_out_called);
-                assert.ok(saved_fade_to_called);
-            })();
-            (function test_post_error() {
-                const $user_group_error = $(user_group_selector + " .user-group-status");
-                $user_group_error.show();
-                ui_report.error = (error_msg, error_obj, ele) => {
-                    assert.equal(error_msg, "translated HTML: Failed");
-                    assert.deepEqual(error_obj, {responseJson: {msg: "fake-msg"}});
-                    assert.equal(ele, $user_group_error);
-                };
-                opts.error({responseJson: {msg: "fake-msg"}});
-
-                assert.ok($user_group_error.visible());
-            })();
-        };
-
-        const $fake_this = $.create("fake-#user-groups_blur_name");
-        $fake_this.closest = () => [];
-        $fake_this.set_parents_result(user_group_selector, $(user_group_selector));
-        const event = {
-            // FIXME: event.relatedTarget should not be a jQuery object
-            relatedTarget: $fake_this,
-        };
-
-        api_endpoint_called = false;
-        handler_name.call($fake_this, event);
-        assert.ok(api_endpoint_called);
-
-        // Check API endpoint isn't called if name and desc haven't changed.
-        group_data.name = "translated: mobile";
-        group_data.description = "translated: All mobile members";
-        api_endpoint_called = false;
-        handler_name.call($fake_this, event);
-        assert.ok(!api_endpoint_called);
-
-        // Check for handler_desc to achieve 100% coverage.
-        api_endpoint_called = false;
-        handler_desc.call($fake_this, event);
-        assert.ok(!api_endpoint_called);
-    })();
-
-    (function test_user_groups_save_member_changes_triggered() {
-        const handler = $(user_group_selector).get_on_handler("blur", ".input");
-        const realm_user_group = {
-            id: 1,
-            name: "Mobile",
-            description: "All mobile people",
-            members: new Set([2, 4]),
-        };
-
-        user_groups.get_user_group_from_id = (id) => {
-            assert.equal(id, 1);
-            return realm_user_group;
-        };
-
-        let cancel_fade_out_called = false;
-        let saved_fade_to_called = false;
-        let instructions_fade_out_called = false;
-        $(instructions_selector).fadeOut = () => {
-            instructions_fade_out_called = true;
-        };
-        $(cancel_selector).fadeOut = () => {
-            cancel_fade_out_called = true;
-        };
-        $(saved_selector).css = () => $(saved_selector);
-        $(saved_selector).fadeTo = () => {
-            saved_fade_to_called = true;
-            return $(saved_selector);
-        };
-
-        let api_endpoint_called = false;
-        channel.post = (opts) => {
-            assert.equal(opts.url, "/json/user_groups/1/members");
-            assert.equal(opts.data.add, "[31]");
-            assert.equal(opts.data.delete, "[4]");
-            api_endpoint_called = true;
-
-            (function test_post_success() {
-                opts.success();
-                assert.ok(cancel_fade_out_called);
-                assert.ok(instructions_fade_out_called);
-                assert.ok(saved_fade_to_called);
-            })();
-        };
-
-        const $fake_this = $.create("fake-#user-groups_blur_input");
-        $fake_this.set_parents_result(user_group_selector, $(user_group_selector));
-        $fake_this.closest = () => [];
-        const event = {
-            // FIXME: event.relatedTarget should not be a jQuery object
-            relatedTarget: $fake_this,
-        };
-
-        api_endpoint_called = false;
-        handler.call($fake_this, event);
-        assert.ok(api_endpoint_called);
-    })();
-});
diff --git a/web/tests/user_pill.test.js b/web/tests/user_pill.test.js
--- a/web/tests/user_pill.test.js
+++ b/web/tests/user_pill.test.js
@@ -4,6 +4,7 @@ const {strict: assert} = require("assert");
 
 const {zrequire} = require("./lib/namespace");
 const {run_test} = require("./lib/test");
+const blueslip = require("./lib/zblueslip");
 const {page_params} = require("./lib/zpage_params");
 
 const people = zrequire("people");
@@ -102,6 +103,9 @@ test("append", () => {
 
     assert.ok(appended);
     assert.ok(cleared);
+
+    blueslip.expect("warn", "Undefined user in function append_user");
+    user_pill.append_user(undefined, pill_widget);
 });
 
 test("get_items", () => {