user_groups: Add banner for settings for a deactivated group.

This commit adds a banner at the top of the group settings panel, to
make it super clear when a group is deactivated.

Fixes: #33803.

web/src/user_group_edit.ts

@@ -6,6 +6,7 @@ import {z} from "zod";
 
 import render_confirm_delete_user from "../templates/confirm_dialog/confirm_delete_user.hbs";
 import render_confirm_join_group_direct_member from "../templates/confirm_dialog/confirm_join_group_direct_member.hbs";
+import render_modal_banner from "../templates/modal_banner/modal_banner.hbs";
 import render_group_info_banner from "../templates/modal_banner/user_group_info_banner.hbs";
 import render_settings_checkbox from "../templates/settings/settings_checkbox.hbs";
 import render_browse_user_groups_list_item from "../templates/user_group_settings/browse_user_groups_list_item.hbs";
@@ -1009,6 +1010,20 @@ export function show_settings_for(group: UserGroup): void {
     show_membership_settings(group);
     show_general_settings(group);
 
+    const context = {
+        banner_type: compose_banner.WARNING,
+        classname: "group_deactivated",
+        hide_close_button: true,
+        banner_text: $t({
+            defaultMessage:
+                "This group is deactivated. It can't be mentioned or used for any permissions.",
+        }),
+    };
+
+    if (group.deactivated) {
+        $("#user_group_settings .group-banner").html(render_modal_banner(context));
+    }
+
     $edit_container
         .find(".group-assigned-permissions")
         .on("change", "input", function (this: HTMLElement, e) {

web/styles/subscriptions.css

@@ -561,6 +561,10 @@ h4.user_group_setting_subsection_title {
             margin: 0 auto 10px;
         }
 
+        .main-view-banner.group_deactivated {
+            margin-bottom: 10px;
+        }
+
         .display-type {
             height: var(--settings-overlay-subheader-height);
             display: flex;

web/templates/user_group_settings/user_group_settings.hbs

@@ -19,6 +19,7 @@
     <div class="inner-box">
 
         <div class="group_general_settings group_setting_section" data-group-section="general">
+            <div class="group-banner"></div>
             <div class="group-header">
                 <div class="group-name-wrapper">
                     <span class="group-name" title="{{group.name}}">{{group.name}}