user groups: Add support for removing user groups.

The new `#groups` overlay had no way for user groups to be deleted.
This commit adds UI support for removing user groups along with
adding support for live update of `#groups` overlay on remove
event for user groups.

frontend_tests/node_tests/dispatch.js

@@ -78,6 +78,7 @@ const ui = mock_esm("../../static/js/ui");
 const unread_ops = mock_esm("../../static/js/unread_ops");
 const user_events = mock_esm("../../static/js/user_events");
 const user_groups = mock_esm("../../static/js/user_groups");
+const user_group_edit = mock_esm("../../static/js/user_group_edit");
 const overlays = mock_esm("../../static/js/overlays");
 const user_groups_settings_ui = mock_esm("../../static/js/user_groups_settings_ui");
 mock_esm("../../static/js/giphy");
@@ -186,9 +187,17 @@ run_test("user groups", ({override}) => {
         const stub = make_stub();
         override(user_groups, "get_user_group_from_id", stub.f);
         override(user_groups, "remove", noop);
+        const user_group_edit_stub = make_stub();
+        override(user_group_edit, "handle_deleted_group", user_group_edit_stub.f);
+
         dispatch(event);
+
         assert.equal(stub.num_calls, 1);
-        const args = stub.get_args("group_id");
+        assert.equal(user_group_edit_stub.num_calls, 1);
+
+        let args = stub.get_args("group_id");
+        assert_same(args.group_id, event.group_id);
+        args = user_group_edit_stub.get_args("group_id");
         assert_same(args.group_id, event.group_id);
     }
 

static/js/server_events_dispatch.js

@@ -67,6 +67,7 @@ import * as submessage from "./submessage";
 import * as typing_events from "./typing_events";
 import * as unread_ops from "./unread_ops";
 import * as user_events from "./user_events";
+import * as user_group_edit from "./user_group_edit";
 import * as user_groups from "./user_groups";
 import * as user_groups_settings_ui from "./user_groups_settings_ui";
 import {user_settings} from "./user_settings";
@@ -760,6 +761,7 @@ export function dispatch_normal_event(event) {
                     }
                     break;
                 case "remove":
+                    user_group_edit.handle_deleted_group(event.group_id);
                     user_groups.remove(user_groups.get_user_group_from_id(event.group_id));
                     break;
                 case "add_members":

static/js/user_group_edit.js

@@ -1,5 +1,6 @@
 import $ from "jquery";
 
+import render_confirm_delete_user from "../templates/confirm_dialog/confirm_delete_user.hbs";
 import render_change_user_group_info_modal from "../templates/user_group_settings/change_user_group_info_modal.hbs";
 import render_user_group_settings from "../templates/user_group_settings/user_group_settings.hbs";
 
@@ -7,6 +8,7 @@ import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
 import * as channel from "./channel";
 import * as components from "./components";
+import * as confirm_dialog from "./confirm_dialog";
 import * as dialog_widget from "./dialog_widget";
 import * as hash_util from "./hash_util";
 import {$t, $t_html} from "./i18n";
@@ -15,6 +17,7 @@ import * as people from "./people";
 import * as settings_data from "./settings_data";
 import * as settings_ui from "./settings_ui";
 import * as ui from "./ui";
+import * as ui_report from "./ui_report";
 import * as user_group_edit_members from "./user_group_edit_members";
 import * as user_group_ui_updates from "./user_group_ui_updates";
 import * as user_groups from "./user_groups";
@@ -121,6 +124,19 @@ export function setup_group_settings(node) {
     show_settings_for(node);
 }
 
+function open_right_panel_empty() {
+    $(".group-row.active").removeClass("active");
+    user_group_settings_ui.show_user_group_settings_pane.nothing_selected();
+    browser_history.update("#groups");
+}
+
+export function handle_deleted_group(group_id) {
+    if (!hash_util.is_editing_group(group_id)) {
+        return;
+    }
+    open_right_panel_empty();
+}
+
 export function open_group_edit_panel_for_row(group_row) {
     const group = get_user_group_for_target(group_row);
 
@@ -164,6 +180,46 @@ export function initialize() {
         });
     });
 
+    $("#manage_groups_container").on("click", ".group_settings_header .btn-danger", () => {
+        const active_group_data = user_group_settings_ui.get_active_data();
+        const group_id = active_group_data.id;
+        const user_group = user_groups.get_user_group_from_id(group_id);
+
+        if (!user_group || !can_edit(group_id)) {
+            return;
+        }
+        function delete_user_group() {
+            channel.del({
+                url: "/json/user_groups/" + group_id,
+                data: {
+                    id: group_id,
+                },
+                success() {
+                    active_group_data.$row.remove();
+                },
+                error(xhr) {
+                    ui_report.error(
+                        $t_html({defaultMessage: "Failed"}),
+                        xhr,
+                        $(".group_change_property_info"),
+                    );
+                },
+            });
+        }
+
+        const html_body = render_confirm_delete_user({
+            group_name: user_group.name,
+        });
+
+        const user_group_name = user_group.name;
+
+        confirm_dialog.launch({
+            html_heading: $t_html({defaultMessage: "Delete {user_group_name}?"}, {user_group_name}),
+            html_body,
+            on_click: delete_user_group,
+        });
+    });
+
     function save_group_info(e) {
         e.preventDefault();
         e.stopPropagation();

static/templates/user_group_settings/user_group_settings.hbs

@@ -1,5 +1,10 @@
 <div class="group_settings_header" data-group-id="{{group.id}}">
     <div class="tab-container"></div>
+    <div class="button-group">
+        {{#if can_edit}}
+        <button class="button small rounded btn-danger deactivate" type="button" name="delete_button"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
+        {{/if}}
+    </div>
 </div>
 <div class="user_group_settings_wrapper hide" data-group-id="{{group.id}}">
     <div class="inner-box">