A bit of cleanup

src/registrar/assets/js/get-gov-admin.js

@@ -518,9 +518,6 @@ function initializeWidgetOnList(list, parentId) {
     var actionNeededEmailReadonly = document.querySelector("#action-needed-reason-email-readonly")
     var actionNeededEmailReadonlyTextarea = document.querySelector("#action-needed-reason-email-readonly-textarea")
 
-    // Edit e-mail button (appears only in readonly view for e-mail text)
-    var editEmailButton = document.querySelector("#action-needed-reason-email-edit-button")
-
     // Edit e-mail modal (and its confirmation button)
     var actionNeededEmailAlreadySentModal = document.querySelector("#email-already-sent-modal")
     var confirmEditEmailButton = document.querySelector("#email-already-sent-modal_continue-editing-button")
@@ -565,12 +562,7 @@ function initializeWidgetOnList(list, parentId) {
         });
 
         editEmailButton.addEventListener("click", function() {
-            if (checkEmailAlreadySent()) {
+            if (!checkEmailAlreadySent()) {
-                // Show warning Modal
-                setModalVisibility(actionNeededEmailAlreadySentModal, true)
-            }
-            else {
-                // Show editable view
                 showEmail(canEdit=true)
             }
         });
@@ -580,13 +572,6 @@ function initializeWidgetOnList(list, parentId) {
             showEmail(canEdit=true)
         });
 
-        // Event delegation for data-close-modal buttons 
-        // (since manually opening the modal interferes with how this normally works)
-        document.addEventListener('click', function(event) {
-            if (event.target.matches('[data-close-modal]')) {
-                setModalVisibility(actionNeededEmailAlreadySentModal, false)
-            }
-        });
 
         // Add a change listener to the action needed reason dropdown
         actionNeededReasonDropdown.addEventListener("change", function() {
@@ -612,8 +597,6 @@ function initializeWidgetOnList(list, parentId) {
     {
         lastEmailSent = lastSentEmailText.value.replace(/\s+/g, '')
         currentEmailInTextArea = actionNeededEmail.value.replace(/\s+/g, '')
-        console.log("old email value = " + lastEmailSent)
-        console.log("current email value = " + currentEmailInTextArea)
         return lastEmailSent === currentEmailInTextArea
     }
 
@@ -633,16 +616,6 @@ function initializeWidgetOnList(list, parentId) {
         actionNeededEmailFooter.innerHTML = "This email will be sent to the creator of this request after saving";
     }
 
-    function setModalVisibility(modalToToggle, isVisible) {
-        if (!isVisible) {
-            modalToToggle.classList.remove('is-visible');
-            modalToToggle.setAttribute('aria-hidden', 'true');
-        } else {
-            modalToToggle.classList.add('is-visible');
-            modalToToggle.setAttribute('aria-hidden', 'false');
-        }
-    }
-
     // Shows either a preview of the email or some text describing no email will be sent.
     // If the email doesn't exist or if we're of reason "other", display that no email was sent.
     function updateActionNeededEmailDisplay(reason) {

src/registrar/templates/django/admin/includes/detail_table_fieldset.html

@@ -151,12 +151,31 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
         </div>
         <div>
             <div id="action-needed-reason-email-readonly" class="display-none usa-summary-box_admin padding-top-0 margin-top-0">
+                <div class="flex-container">
+                    <div class="margin-top-05">
+                        <p class="{% if action_needed_email_sent %}display-none{% endif %}" id="action-needed-email-header"><b>Auto-generated email that will be sent to the creator</b></p>
+                        <p class="{% if not action_needed_email_sent %}display-none{% endif %}" id="action-needed-email-header-email-sent">
+                            <svg class="usa-icon text-green" aria-hidden="true" focusable="false" role="img">
+                                <use xlink:href="{%static 'img/sprite.svg'%}#check_circle"></use>
+                            </svg>
+                            <b>Email sent to the creator</b>
+                        </p>
+                    </div>
+                    <div class="vertical-separator margin-top-1 margin-bottom-1"></div>
+                    <a
+                        href="#email-already-sent-modal"
+                        class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-left-1"
+                        aria-controls="email-already-sent-modal"
+                        data-open-modal
+                        >Edit email</a
+                    >
+                </div>
                 <div
-                class="usa-modal"
+                    class="usa-modal"
-                id="email-already-sent-modal"
+                    id="email-already-sent-modal"
-                aria-labelledby="Are you sure you want to edit this email?"
+                    aria-labelledby="Are you sure you want to edit this email?"
-                aria-describedby="The creator of this request already received an email"
+                    aria-describedby="The creator of this request already received an email"
-                >
+                    >
                     <div class="usa-modal__content">
                         <div class="usa-modal__main">
                             <h2 class="usa-modal__heading" id="modal-1-heading">
@@ -172,10 +191,10 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                                 </ul>
                                 <p>
                                     If you edit this email's text, <b>the system will send another email</b> to
-                                    the creator after you "save" your changes.  If you do not want to send another email, click "cancel" below.
+                                    the creator after you “save” your changes.  If you do not want to send another email, click “cancel” below.
                                 </p>
                             </div>
-        
+
                             <div class="usa-modal__footer">
                                 <ul class="usa-button-group">
                                     <li class="usa-button-group__item">
@@ -213,24 +232,6 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                         </button>
                     </div>
                 </div>
-        
-                <div class="flex-container">
-                    <div class="margin-top-05">
-                        <p class="{% if action_needed_email_sent %}display-none{% endif %}" id="action-needed-email-header"><b>Auto-generated email that will be sent to the creator</b></p>
-                        <p class="{% if not action_needed_email_sent %}display-none{% endif %}" id="action-needed-email-header-email-sent">
-                            <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
-                                <use xlink:href="{%static 'img/sprite.svg'%}#check_circle"></use>
-                            </svg>
-                            <b>Email sent to the creator</b>
-                        </p>
-                    </div>
-                    <div class="vertical-separator margin-top-1 margin-bottom-1"></div>
-                    <button id="action-needed-reason-email-edit-button" 
-                        type="button" 
-                        class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-left-1">
-                            <span>Edit email</span>
-                    </button>
-                </div>
                 <textarea cols="40" rows="10" class="vLargeTextField" id="action-needed-reason-email-readonly-textarea" readonly>{{ field.field.value|striptags }}
                 </textarea>
             </div>