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.
This commit is contained in:
Lauryn Menard 2023-01-14 21:28:39 +01:00 committed by Tim Abbott
parent d0de66b273
commit 019fa7e122
4 changed files with 26 additions and 5 deletions

View File

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

View File

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

View File

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

View File

@ -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>