user_groups: Allow deactivating groups from webapp.

web/src/types.ts

@@ -18,6 +18,7 @@ export type UserGroupUpdateEvent = {
         description?: string;
         can_manage_group?: number;
         can_mention_group?: number;
+        deactivated?: boolean;
     };
 };
 

web/src/user_group_edit.js

@@ -594,6 +594,11 @@ export function update_group(event) {
         $group_row.find(".description").text(group.description);
     }
 
+    if (event.data.deactivated) {
+        handle_deleted_group(group.id);
+        return;
+    }
+
     if (get_active_data().id === group.id) {
         // update right side pane
         update_settings_pane(group);
@@ -890,12 +895,9 @@ export function initialize() {
         if (!user_group || !settings_data.can_edit_user_group(group_id)) {
             return;
         }
-        function delete_user_group() {
-            channel.del({
-                url: "/json/user_groups/" + group_id,
-                data: {
-                    id: group_id,
-                },
+        function deactivate_user_group() {
+            channel.post({
+                url: "/json/user_groups/" + group_id + "/deactivate",
                 success() {
                     active_group_data.$row.remove();
                 },
@@ -916,9 +918,12 @@ export function initialize() {
         const user_group_name = user_group.name;
 
         confirm_dialog.launch({
-            html_heading: $t_html({defaultMessage: "Delete {user_group_name}?"}, {user_group_name}),
+            html_heading: $t_html(
+                {defaultMessage: "Deactivate {user_group_name}?"},
+                {user_group_name},
+            ),
             html_body,
-            on_click: delete_user_group,
+            on_click: deactivate_user_group,
         });
     });
 

web/src/user_groups.ts

@@ -95,6 +95,12 @@ export function update(event: UserGroupUpdateEvent): void {
         user_group_name_dict.set(group.name, group);
     }
 
+    if (event.data.deactivated !== undefined) {
+        group.deactivated = event.data.deactivated;
+        user_group_name_dict.delete(group.name);
+        user_group_name_dict.set(group.name, group);
+    }
+
     if (event.data.can_mention_group !== undefined) {
         group.can_mention_group = event.data.can_mention_group;
         user_group_name_dict.delete(group.name);

web/templates/user_group_settings/user_group_settings.hbs

@@ -10,7 +10,7 @@
                 {{/if}}
             </button>
         </div>
-        <button class="button small rounded btn-danger deactivate tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete group'}}" type="button" name="delete_button"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
+        <button class="button small rounded btn-danger deactivate tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Deactivate group'}}" type="button" name="delete_button"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
     </div>
 </div>
 <div class="user_group_settings_wrapper" data-group-id="{{group.id}}">

web/tests/user_groups.test.js

@@ -152,6 +152,15 @@ run_test("user_groups", () => {
     };
     assert.ok(!user_groups.is_user_group(object));
 
+    const update_deactivated_event = {
+        group_id: admins.id,
+        data: {
+            deactivated: true,
+        },
+    };
+    user_groups.update(update_deactivated_event);
+    assert.ok(user_groups.get_user_group_from_id(admins.id).deactivated);
+
     user_groups.init();
     assert.equal(user_groups.get_realm_user_groups().length, 0);