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

@@ -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");

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) {

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;
     }

static/templates/settings/organization_profile_admin.hbs

@@ -84,14 +84,16 @@
         </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">
+                <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>
 </div>