account-settings: Disable deactivate account button when only owner.

Disables the deactivate account button in the user's account and
privacy settings tab if they are the only active organization owner.

Adds a tooltip when hovering on the deactivated button to let the
user know why the button is disabled.

The backend already returns an error for self account deactivation
requests if the user is the only organization owner.

frontend_tests/node_tests/dispatch.js

@@ -642,6 +642,7 @@ run_test("realm_domains", ({override}) => {
 });
 
 run_test("realm_user", ({override}) => {
+    override(settings_account, "maybe_update_deactivate_account_button", noop);
     let event = event_fixtures.realm_user__add;
     dispatch({...event});
     const added_person = people.get_by_user_id(event.person.user_id);

frontend_tests/node_tests/people.js

@@ -590,6 +590,20 @@ test_people("set_custom_profile_field_data", () => {
     assert.equal(person.profile_data[field.id].rendered_value, "<p>Field value</p>");
 });
 
+test_people("is_current_user_only_owner", () => {
+    const person = people.get_by_email(me.email);
+    person.is_owner = false;
+    page_params.is_owner = false;
+    assert.ok(!people.is_current_user_only_owner());
+
+    person.is_owner = true;
+    page_params.is_owner = true;
+    assert.ok(people.is_current_user_only_owner());
+
+    people.add_active_user(realm_owner);
+    assert.ok(!people.is_current_user_only_owner());
+});
+
 test_people("recipient_counts", () => {
     const user_id = 99;
     assert.equal(people.get_recipient_count({user_id}), 0);

static/js/people.js

@@ -825,6 +825,23 @@ export function is_active_user_for_popover(user_id) {
     return false;
 }
 
+export function is_current_user_only_owner() {
+    if (!page_params.is_owner || page_params.is_bot) {
+        return false;
+    }
+
+    let active_owners = 0;
+    for (const person of active_user_dict.values()) {
+        if (person.is_owner && !person.is_bot) {
+            active_owners += 1;
+        }
+        if (active_owners > 1) {
+            return false;
+        }
+    }
+    return true;
+}
+
 export function filter_all_persons(pred) {
     const ret = [];
     for (const person of people_by_user_id_dict.values()) {

static/js/server_events_dispatch.js

@@ -429,15 +429,18 @@ export function dispatch_normal_event(event) {
             switch (event.op) {
                 case "add":
                     people.add_active_user(event.person);
+                    settings_account.maybe_update_deactivate_account_button();
                     break;
                 case "remove":
                     people.deactivate(event.person);
                     stream_events.remove_deactivated_user_from_all_streams(event.person.user_id);
                     settings_users.update_view_on_deactivate(event.person.user_id);
                     buddy_list.maybe_remove_key({key: event.person.user_id});
+                    settings_account.maybe_update_deactivate_account_button();
                     break;
                 case "update":
                     user_events.update_person(event.person);
+                    settings_account.maybe_update_deactivate_account_button();
                     break;
                 default:
                     blueslip.error("Unexpected event type realm_user/" + event.op);

static/js/settings.js

@@ -106,6 +106,7 @@ export function build_page() {
         send_read_receipts_tooltip: $t({
             defaultMessage: "Read receipts are currently disabled in this organization.",
         }),
+        user_is_only_organization_owner: people.is_current_user_only_owner(),
     });
 
     $(".settings-box").html(rendered_settings_tab);

static/js/settings_account.js

@@ -135,6 +135,23 @@ export function update_account_settings_display() {
     update_avatar_change_display();
 }
 
+export function maybe_update_deactivate_account_button() {
+    if (!page_params.is_owner) {
+        return;
+    }
+
+    const $deactivate_account_container = $("#deactivate_account_container");
+    if ($deactivate_account_container) {
+        if (people.is_current_user_only_owner()) {
+            $("#user_deactivate_account_button").prop("disabled", true);
+            $deactivate_account_container.addClass("only_organization_owner_tooltip");
+        } else {
+            $("#user_deactivate_account_button").prop("disabled", false);
+            $deactivate_account_container.removeClass("only_organization_owner_tooltip");
+        }
+    }
+}
+
 export function update_send_read_receipts_tooltip() {
     if (page_params.realm_enable_read_receipts) {
         $("#send_read_receipts_label .settings-info-icon").hide();

static/js/tippyjs.js

@@ -407,6 +407,18 @@ export function initialize() {
         },
     });
 
+    delegate("body", {
+        target: ["#deactivate_account_container.only_organization_owner_tooltip"],
+        content: $t({
+            defaultMessage:
+                "Because you are the only organization owner, you cannot deactivate your account.",
+        }),
+        appendTo: () => document.body,
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
+
     delegate("body", {
         target: "#pm_tooltip_container",
         onShow(instance) {

static/styles/settings.css

@@ -183,6 +183,18 @@ h3,
     }
 }
 
+#deactivate_account_container {
+    &.only_organization_owner_tooltip {
+        cursor: not-allowed;
+    }
+}
+
+#user_deactivate_account_button {
+    &:disabled {
+        pointer-events: none;
+    }
+}
+
 .admin-realm-description {
     height: 16em;
     width: 100%;

static/templates/settings/account_settings.hbs

@@ -36,12 +36,15 @@
                 </form>
 
                 <div class="input-group">
-                    <button type="submit" class="button rounded btn-danger" id="user_deactivate_account_button">
+                    <div id="deactivate_account_container" class="inline-block {{#if user_is_only_organization_owner}}only_organization_owner_tooltip{{/if}}">
+                        <button type="submit" class="button rounded btn-danger" id="user_deactivate_account_button"
+                          {{#if user_is_only_organization_owner}}disabled="disabled"{{/if}}>
                             {{t 'Deactivate account' }}
                         </button>
                     </div>
                 </div>
             </div>
+        </div>
 
         <div class="form-horizontal" id="privacy_settings_box">
             <h3 class="inline-block">{{t "Privacy" }}</h3>