Initial draft logic for updating action needed email behavior

src/registrar/admin.py

@@ -223,7 +223,7 @@ class DomainRequestAdminForm(forms.ModelForm):
             "other_contacts": NoAutocompleteFilteredSelectMultiple("other_contacts", False),
         }
         labels = {
-            "action_needed_reason_email": "Auto-generated email",
+            "action_needed_reason_email": "E-mail",
         }
 
     def __init__(self, *args, **kwargs):

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

@@ -353,7 +353,7 @@ function initializeWidgetOnList(list, parentId) {
     let rejectionReasonFormGroup = document.querySelector('.field-rejection_reason')
     // This is the "action needed reason" field
     let actionNeededReasonFormGroup = document.querySelector('.field-action_needed_reason');
-    // This is the "auto-generated email" field
+    // This is the "Email" field
     let actionNeededReasonEmailFormGroup = document.querySelector('.field-action_needed_reason_email')
 
     if (rejectionReasonFormGroup && actionNeededReasonFormGroup && actionNeededReasonEmailFormGroup) {
@@ -510,7 +510,10 @@ function initializeWidgetOnList(list, parentId) {
     // Since this is an iife, these vars will be removed from memory afterwards
     var actionNeededReasonDropdown = document.querySelector("#id_action_needed_reason");
     var actionNeededEmail = document.querySelector("#id_action_needed_reason_email");
-    var readonlyView = document.querySelector("#action-needed-reason-email-readonly");
+    var helptext = document.querySelector("#action-needed-reason-email-placeholder-text")
+    var actionNeededEmailReadonly = document.querySelector("#action-needed-reason-email-readonly");
+    var actionNeededEmailReadonlyTextarea = document.querySelector("#action-needed-reason-email-readonly-textarea")
+    var editEmailButton = document.querySelector("#action-needed-reason-email-edit-button")
 
     let emailWasSent = document.getElementById("action-needed-email-sent");
     let actionNeededEmailData = document.getElementById('action-needed-emails-data').textContent;
@@ -536,6 +539,21 @@ function initializeWidgetOnList(list, parentId) {
             updateActionNeededEmailDisplay(reason)
         });
 
+        editEmailButton.addEventListener("click", function() {
+            let emailHasBeenSentBefore = sessionStorage.getItem(emailSentSessionVariableName) !== null;
+
+            if (emailHasBeenSentBefore) {
+                // Show warning Modal
+
+            }
+            else {
+                // Show editable view
+                showElement(actionNeededEmail.parentElement)
+                hideElement(actionNeededEmailReadonly)
+                hideElement(helptext)
+            }
+        });
+
         // Add a change listener to the action needed reason dropdown
         actionNeededReasonDropdown.addEventListener("change", function() {
             let reason = actionNeededReasonDropdown.value;
@@ -543,6 +561,7 @@ function initializeWidgetOnList(list, parentId) {
             if (reason && emailBody) {
                 // Replace the email content
                 actionNeededEmail.value = emailBody;
+                actionNeededEmailReadonlyTextarea.value = emailBody;
 
                 // Reset the session object on change since change refreshes the email content.
                 if (oldDropdownValue !== actionNeededReasonDropdown.value || oldEmailValue !== actionNeededEmail.value) {
@@ -562,27 +581,30 @@ function initializeWidgetOnList(list, parentId) {
     // If the email doesn't exist or if we're of reason "other", display that no email was sent.
     // Likewise, if we've sent this email before, we should just display the content.
     function updateActionNeededEmailDisplay(reason) {
-        let emailHasBeenSentBefore = sessionStorage.getItem(emailSentSessionVariableName) !== null;
-        let collapseableDiv = readonlyView.querySelector(".collapse--dgsimple");
-        let showMoreButton = document.querySelector("#action_needed_reason_email__show_details");
-        if ((reason && reason != "other") && !emailHasBeenSentBefore) {
-            showElement(actionNeededEmail.parentElement)
-            hideElement(readonlyView)
-            hideElement(showMoreButton)
-        } else {
-            if (!reason || reason === "other") {
-                collapseableDiv.innerHTML = reason ? "No email will be sent." : "-";
-                hideElement(showMoreButton)
-                if (collapseableDiv.classList.contains("collapsed")) {
-                    showMoreButton.click()
-                }
-            }else {
-                showElement(showMoreButton)
-            }
+
+        console.info("REASON: "+reason)
+
+        if (reason) {
+            if (reason === "other") {
+                helptext.innerHTML = "No email will be sent.";
                 hideElement(actionNeededEmail.parentElement)
-            showElement(readonlyView)
+                hideElement(actionNeededEmailReadonly)
+                showElement(helptext)
+            }
+            else {
+                // Always show readonly view to start
+                hideElement(actionNeededEmail.parentElement)
+                showElement(actionNeededEmailReadonly)
+                hideElement(helptext)
+            }
+        } else {
+            helptext.innerHTML = "Select an action needed reason to see email";
+            hideElement(actionNeededEmail.parentElement)
+            hideElement(actionNeededEmailReadonly)
+            showElement(helptext)
         }
     }
+
 })();
 
 

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

@@ -145,17 +145,30 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
 
 {% block field_other %}
     {% if field.field.name == "action_needed_reason_email" %}
-    <div id="action-needed-reason-email-readonly" class="readonly margin-top-0 padding-top-0 display-none">
-        <div class="margin-top-05 collapse--dgsimple collapsed">
+    <div id="action-needed-reason-email-placeholder-text" class="margin-top-05">
         {{ field.field.value|linebreaks }}
     </div>
-        <button id="action_needed_reason_email__show_details" type="button" class="collapse-toggle--dgsimple usa-button usa-button--unstyled margin-top-0 margin-bottom-1 margin-left-1">
-            <span>Show details</span>
-            <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
-                <use xlink:href="/public/img/sprite.svg#expand_more"></use>
-            </svg>
+    <div id="action-needed-reason-email-readonly" class="display-none">
+
+        <div
+            class="usa-modal"
+            id="toggle-email-already-sent-alert"
+            aria-labelledby="Are you sure you want to edit this email?"
+            aria-describedby="The creator of this request already received an email"
+        >
+            {% include 'includes/modal.html' with modal_heading="Are you sure you want to edit this email?" modal_button=modal_button|safe %}
+        </div>
+
+        <div class="flex-container">
+            <label><b>Auto-generated email that will be sent to the creator</b></label> | 
+            <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-top-2 margin-bottom-1 margin-left-1">
+                    <span>Edit email</span>
             </button>
         </div>
+        <textarea cols="40" rows="10" class="vLargeTextField" id="action-needed-reason-email-readonly-textarea" readonly></textarea>
+    </div>
     <div>
         {{ field.field }}
         <input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">