personal_settings: Add deactivate organization button for organization.

Added a 'Deactivate Organization' button inside the
'Personal Settings > Account & Privacy'. This button only appears
when the organization owner is the only user present. To verify this,
I used the 'get_active_human_count' function from the 'people.js'.

To remove duplication, a function has been created inside settings_org
file to handle the click event for the two buttons present inside
personal_settings and organization_settings that perform the same
action of deactivating organization. The click handler is defined in
the click_handlers.js file, which calls the dialog for deactivating
the organization. Previously, the error used to appear at the top of
the organization_settings, but now it appears inside the dialog box
itself.

To remove the duplication of two buttons having the same IDs,changed
the Id `deactivate_realm_button` to a className.

Fixes: #24105

web/src/settings.js

@@ -108,6 +108,7 @@ export function build_page() {
         }),
         user_is_only_organization_owner: people.is_current_user_only_owner(),
         email_address_visibility_values: settings_config.email_address_visibility_values,
+        owner_is_only_user_in_organization: people.get_active_human_count() === 1,
     });
 
     $(".settings-box").html(rendered_settings_tab);

web/src/settings_account.js

@@ -22,6 +22,7 @@ import * as people from "./people";
 import * as pill_typeahead from "./pill_typeahead";
 import * as settings_bots from "./settings_bots";
 import * as settings_data from "./settings_data";
+import * as settings_org from "./settings_org";
 import * as settings_ui from "./settings_ui";
 import * as typeahead_helper from "./typeahead_helper";
 import * as ui_report from "./ui_report";
@@ -764,6 +765,10 @@ export function set_up() {
         }
     });
 
+    $("#account-settings .deactivate_realm_button").on(
+        "click",
+        settings_org.deactivate_organization,
+    );
     $("#user_deactivate_account_button").on("click", (e) => {
         // This click event must not get propagated to parent container otherwise the modal
         // will not show up because of a call to `close_active_modal` in `settings.js`.

web/src/settings_org.js

@@ -6,8 +6,8 @@ import render_settings_admin_auth_methods_list from "../templates/settings/admin
 
 import * as blueslip from "./blueslip";
 import * as channel from "./channel";
-import * as confirm_dialog from "./confirm_dialog";
 import {csrf_token} from "./csrf";
+import * as dialog_widget from "./dialog_widget";
 import {DropdownListWidget} from "./dropdown_list_widget";
 import {$t, $t_html, get_language_name} from "./i18n";
 import * as keydown_util from "./keydown_util";
@@ -46,7 +46,7 @@ export function maybe_disable_widgets() {
         .prop("disabled", true);
 
     if (page_params.is_admin) {
-        $("#deactivate_realm_button").prop("disabled", true);
+        $(".deactivate_realm_button").prop("disabled", true);
         $("#deactivate_realm_button_container").addClass("disabled_setting_tooltip");
         $("#org-message-retention").find("input, select").prop("disabled", true);
         $("#org-join-settings").find("input, select").prop("disabled", true);
@@ -702,6 +702,32 @@ export function discard_property_element_changes(elem, for_realm_default_setting
     update_dependent_subsettings(property_name);
 }
 
+export function deactivate_organization(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    function do_deactivate_realm() {
+        channel.post({
+            url: "/json/realm/deactivate",
+            error(xhr) {
+                ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $("#dialog_error"));
+            },
+        });
+    }
+
+    const html_body = render_settings_deactivate_realm_modal();
+
+    dialog_widget.launch({
+        html_heading: $t_html({defaultMessage: "Deactivate organization"}),
+        help_link: "/help/deactivate-your-organization",
+        html_body,
+        on_click: do_deactivate_realm,
+        close_on_submit: false,
+        focus_submit_on_open: true,
+        html_submit_button: $t_html({defaultMessage: "Confirm"}),
+    });
+}
+
 export function sync_realm_settings(property) {
     if (!meta.loaded) {
         return;
@@ -1411,30 +1437,5 @@ export function build_page() {
         realm_logo.build_realm_logo_widget(upload_realm_logo_or_icon, true);
     }
 
-    $("#deactivate_realm_button").on("click", (e) => {
+    $("#organization-profile .deactivate_realm_button").on("click", deactivate_organization);
-        e.preventDefault();
-        e.stopPropagation();
-
-        function do_deactivate_realm() {
-            channel.post({
-                url: "/json/realm/deactivate",
-                error(xhr) {
-                    ui_report.error(
-                        $t_html({defaultMessage: "Failed"}),
-                        xhr,
-                        $("#admin-realm-deactivation-status").expectOne(),
-                    );
-                },
-            });
-        }
-
-        const html_body = render_settings_deactivate_realm_modal();
-
-        confirm_dialog.launch({
-            html_heading: $t_html({defaultMessage: "Deactivate organization"}),
-            help_link: "/help/deactivate-your-organization",
-            html_body,
-            on_click: do_deactivate_realm,
-        });
-    });
 }

web/styles/settings.css

@@ -167,9 +167,13 @@ h3,
     cursor: not-allowed;
 }
 
+#account-settings .deactivate_realm_button {
+    margin-left: 10px;
+}
+
 #change_email_button,
 #user_deactivate_account_button,
-#deactivate_realm_button {
+.deactivate_realm_button {
     &:disabled {
         pointer-events: none;
     }
@@ -1863,6 +1867,12 @@ $option_title_width: 180px;
     }
 }
 
+@media (width < $mm_min) {
+    .deactivate_realm_button {
+        margin-top: 20px;
+    }
+}
+
 @media only screen and (width < $lg_min) {
     /* Show bot-information-box at full width on small
        screen sizes. Not having this media query breaks the

web/templates/settings/account_settings.hbs

@@ -42,6 +42,11 @@
                             {{t 'Deactivate account' }}
                         </button>
                     </div>
+                    {{#if owner_is_only_user_in_organization}}
+                        <button type="submit" class="button rounded btn-danger deactivate_realm_button">
+                            {{t 'Deactivate organization' }}
+                        </button>
+                    {{/if}}
                 </div>
             </div>
         </div>

web/templates/settings/organization_profile_admin.hbs

@@ -89,7 +89,7 @@
         <div class="deactivate-realm-section">
             <div class="input-group">
                 <div id="deactivate_realm_button_container" class="inline-block {{#unless is_owner}}disabled_setting_tooltip{{/unless}}">
-                    <button class="button rounded btn-danger" id="deactivate_realm_button">
+                    <button class="button rounded btn-danger deactivate_realm_button">
                         {{t 'Deactivate organization' }}
                     </button>
                 </div>