From 19f2795e4183a6c27bd23cd33fb8dca39396a75b Mon Sep 17 00:00:00 2001
From: Lauryn Menard <lauryn@zulip.com>
Date: Fri, 9 Dec 2022 17:43:36 +0100
Subject: [PATCH] settings-account: Move tooltip for email change disabled to
 button.

Moves the tooltip when email changes are disabled to be shown on
hovering over the email button text and pencil icon. Removes the
question icon that previously showed the tooltip on hover.
---
 static/js/settings_account.js                  |  4 ++--
 static/js/tippyjs.js                           |  9 +++++++++
 static/styles/settings.css                     | 13 ++++++++++++-
 static/templates/settings/account_settings.hbs | 14 +++++++-------
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/static/js/settings_account.js b/static/js/settings_account.js
index 072079a0bf..d4813b42c7 100644
--- a/static/js/settings_account.js
+++ b/static/js/settings_account.js
@@ -62,10 +62,10 @@ export function update_name_change_display() {
 export function update_email_change_display() {
     if (!settings_data.user_can_change_email()) {
         $("#change_email_button").prop("disabled", true);
-        $(".change_email_tooltip").show();
+        $("#change_email_button_container").addClass("email_changes_disabled_tooltip");
     } else {
         $("#change_email_button").prop("disabled", false);
-        $(".change_email_tooltip").hide();
+        $("#change_email_button_container").removeClass("email_changes_disabled_tooltip");
     }
 }
 
diff --git a/static/js/tippyjs.js b/static/js/tippyjs.js
index d2d013ffa9..fcf9b4f8ec 100644
--- a/static/js/tippyjs.js
+++ b/static/js/tippyjs.js
@@ -398,6 +398,15 @@ export function initialize() {
         },
     });
 
+    delegate("body", {
+        target: ["#change_email_button_container.email_changes_disabled_tooltip"],
+        content: $t({defaultMessage: "Email address changes are disabled in this 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 d605e65ef4..7fa638fded 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -50,7 +50,6 @@ h3,
     }
 }
 
-.email-change-form,
 .user-name-section {
     .settings-info-icon {
         position: relative;
@@ -161,6 +160,18 @@ h3,
     }
 }
 
+#change_email_button_container {
+    &.email_changes_disabled_tooltip {
+        cursor: not-allowed;
+    }
+}
+
+#change_email_button {
+    &:disabled {
+        pointer-events: none;
+    }
+}
+
 #change_password_modal,
 #change_email_modal {
     max-width: 480px;
diff --git a/static/templates/settings/account_settings.hbs b/static/templates/settings/account_settings.hbs
index b608911d1e..6616c2e6c6 100644
--- a/static/templates/settings/account_settings.hbs
+++ b/static/templates/settings/account_settings.hbs
@@ -5,15 +5,15 @@
             <div id="user_details_section">
                 <h3 class="inline-block">{{t "Account" }}</h3>
                 <div class="alert-notification" id="account-settings-status"></div>
-                <form class="email-change-form grid">
+                <form class="grid">
                     <div class="input-group">
                         <label class="inline-block title">{{t "Email" }}</label>
-                        <button id="change_email_button" type="button" class="button btn-link small rounded inline-block" {{#unless user_can_change_email}}disabled="disabled"{{/unless}}>
-                            {{page_params.delivery_email}}
-                            <i class="fa fa-pencil"></i>
-                        </button>
-                        <i class="tippy-zulip-tooltip fa fa-question-circle change_email_tooltip settings-info-icon" {{#if user_can_change_email}}style="display: none;"{{/if}} data-tippy-content="{{t 'Email address changes are disabled in this organization.' }}">
-                        </i>
+                        <div id="change_email_button_container" class="inline-block {{#unless user_can_change_email}}email_changes_disabled_tooltip{{/unless}}">
+                            <button id="change_email_button" type="button" class="button btn-link small rounded inline-block" {{#unless user_can_change_email}}disabled="disabled"{{/unless}}>
+                                {{page_params.delivery_email}}
+                                <i class="fa fa-pencil"></i>
+                            </button>
+                        </div>
                     </div>
                 </form>