From 019fa7e1222d8301fff52751b8cbeb7c9a0a4878 Mon Sep 17 00:00:00 2001
From: Lauryn Menard <lauryn@zulip.com>
Date: Sat, 14 Jan 2023 21:28:39 +0100
Subject: [PATCH] organization-profile: Update deactivate organization section.

Removes the info icon with the tooltip information and replaces
it with a question help link icon to the help center article on
deactivating an organization.

Also, when the button is disabled, adds a tooltip on hover that
explains only organization owners can deactivate an organization.

If the current user's owner role is changed, then the button and
tooltip are live updated.

Part of #22892.
---
 static/js/settings_org.js                             |  1 +
 static/js/tippyjs.js                                  | 11 +++++++++++
 static/styles/settings.css                            |  9 ++++++++-
 .../templates/settings/organization_profile_admin.hbs | 10 ++++++----
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/static/js/settings_org.js b/static/js/settings_org.js
index 90b1c7e6f2..25470db5d2 100644
--- a/static/js/settings_org.js
+++ b/static/js/settings_org.js
@@ -47,6 +47,7 @@ export function maybe_disable_widgets() {
 
     if (page_params.is_admin) {
         $("#deactivate_realm_button").prop("disabled", true);
+        $("#deactivate_realm_button_container").addClass("realm_deactivation_tooltip");
         $("#org-message-retention").find("input, select").prop("disabled", true);
         $("#org-join-settings").find("input, select").prop("disabled", true);
         $("#id_realm_invite_required_label").parent().addClass("control-label-disabled");
diff --git a/static/js/tippyjs.js b/static/js/tippyjs.js
index b3781adb6d..c2f7f6a4f1 100644
--- a/static/js/tippyjs.js
+++ b/static/js/tippyjs.js
@@ -431,6 +431,17 @@ export function initialize() {
         },
     });
 
+    delegate("body", {
+        target: ["#deactivate_realm_button_container.realm_deactivation_tooltip"],
+        content: $t({
+            defaultMessage: "Only organization owners may deactivate an organization.",
+        }),
+        appendTo: () => document.body,
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
+
     delegate("body", {
         target: "#pm_tooltip_container",
         onShow(instance) {
diff --git a/static/styles/settings.css b/static/styles/settings.css
index b41dad70a1..f88d3a5244 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -175,13 +175,20 @@ h3,
     }
 }
 
+#deactivate_realm_button_container {
+    &.realm_deactivation_tooltip {
+        cursor: not-allowed;
+    }
+}
+
 #deactivate_account_container {
     &.only_organization_owner_tooltip {
         cursor: not-allowed;
     }
 }
 
-#user_deactivate_account_button {
+#user_deactivate_account_button,
+#deactivate_realm_button {
     &:disabled {
         pointer-events: none;
     }
diff --git a/static/templates/settings/organization_profile_admin.hbs b/static/templates/settings/organization_profile_admin.hbs
index 586de8cde9..5d4c02c7a9 100644
--- a/static/templates/settings/organization_profile_admin.hbs
+++ b/static/templates/settings/organization_profile_admin.hbs
@@ -84,13 +84,15 @@
         </div>
         <h3 class="light">
             {{t "Deactivate organization" }}
-            <i class="fa fa-info-circle settings-info-icon realm_deactivation_tooltip tippy-zulip-tooltip" aria-hidden="true" data-tippy-content="{{t 'Only owners can deactivate the organization.' }}"></i>
+            {{> ../help_link_widget link="/help/deactivate-your-organization" }}
         </h3>
         <div class="deactivate-realm-section">
             <div class="input-group">
-                <button class="button rounded btn-danger" id="deactivate_realm_button">
-                    {{t 'Deactivate organization' }}
-                </button>
+                <div id="deactivate_realm_button_container" class="inline-block {{#unless is_owner}}realm_deactivation_tooltip{{/unless}}">
+                    <button class="button rounded btn-danger" id="deactivate_realm_button">
+                        {{t 'Deactivate organization' }}
+                    </button>
+                </div>
             </div>
         </div>
     </form>