CSS updates

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

@@ -544,6 +544,7 @@ function initializeWidgetOnList(list, parentId) {
         // Add a change listener to dom load
         document.addEventListener('DOMContentLoaded', function() {
             let reason = actionNeededReasonDropdown.value;
+            let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null;
 
             // Handle the session boolean (to enable/disable editing)
             if (emailWasSent && emailWasSent.value === "True") {
@@ -552,29 +553,25 @@ function initializeWidgetOnList(list, parentId) {
             }
 
             // Show an editable email field or a readonly one
-            updateActionNeededEmailDisplay(reason)
+            updateActionNeededEmailDisplay(reason, emailBody)
         });
 
         editEmailButton.addEventListener("click", function() {
             let emailHasBeenSentBefore = sessionStorage.getItem(emailSentSessionVariableName) !== null;
 
-            if (true) { //emailHasBeenSentBefore
+            if (emailHasBeenSentBefore) {
                 // Show warning Modal
                 setModalVisibility(actionNeededEmailAlreadySentModal, true)
             }
             else {
                 // Show editable view
-                showElement(actionNeededEmail.parentElement)
+                showEmail(true)
-                hideElement(actionNeededEmailReadonly)
-                hideElement(placeholderText)
             }
         });
 
         confirmEditEmailButton.addEventListener("click", function() {
             // Show editable view
-            showElement(actionNeededEmail.parentElement)
+            showEmail(true)
-            hideElement(actionNeededEmailReadonly)
-            hideElement(placeholderText)
         });
 
         // Event delegation for data-close-modal buttons 
@@ -589,11 +586,8 @@ function initializeWidgetOnList(list, parentId) {
         actionNeededReasonDropdown.addEventListener("change", function() {
             let reason = actionNeededReasonDropdown.value;
             let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null;
-            if (reason && emailBody) {
-                // Replace the email content
-                actionNeededEmail.value = emailBody;
-                actionNeededEmailReadonlyTextarea.value = emailBody;
             
+            if (reason && emailBody) {
                 // Reset the session object on change since change refreshes the email content.
                 if (oldDropdownValue !== actionNeededReasonDropdown.value || oldEmailValue !== actionNeededEmail.value) {
                     let emailSent = sessionStorage.getItem(emailSentSessionVariableName)
@@ -604,7 +598,7 @@ function initializeWidgetOnList(list, parentId) {
             }
 
             // Show an editable email field or a readonly one
-            updateActionNeededEmailDisplay(reason)
+            updateActionNeededEmailDisplay(reason, emailBody)
         });
 
         const saveButton = document.querySelector('input[name=_save]');
@@ -632,9 +626,13 @@ function initializeWidgetOnList(list, parentId) {
     // Shows an editable email field or a readonly one.
     // 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) {
+    function updateActionNeededEmailDisplay(reason, emailBody) {
 
-        console.info("REASON: "+reason)
+        if (reason && emailBody) {
+            // Replace the email content
+            actionNeededEmail.value = emailBody;
+            actionNeededEmailReadonlyTextarea.value = emailBody;
+        }
 
         // showElement(actionNeededEmailHeader)
         // hideElement(actionNeededEmailHeaderOnSave)
@@ -643,23 +641,42 @@ function initializeWidgetOnList(list, parentId) {
 
         if (reason) {
             if (reason === "other") {
-                placeholderText.innerHTML = "No email will be sent.";
+                showPlaceholderText("No email will be sent");
-                hideElement(actionNeededEmailReadonly)
-                showElement(placeholderText)
             }
             else {
                 // Always show readonly view to start
-                showElement(actionNeededEmailReadonly)
+                showEmail(false)
-                hideElement(placeholderText)
             }
         } else {
-            placeholderText.innerHTML = "Select an action needed reason to see email";
+            showPlaceholderText("Select an action needed reason to see email");
+        }
+    }
+
+    function showEmail(canEdit)
+    {
+        if(!canEdit)
+        {
+            showElement(actionNeededEmailReadonly)
+            hideElement(actionNeededEmail.parentElement)
+        }
+        else
+        {
             hideElement(actionNeededEmailReadonly)
+            showElement(actionNeededEmail.parentElement)
+        }
+        showElement(actionNeededEmailFooter) // this is the same for both views, so it was separated out
+        hideElement(placeholderText)
+    }
+
+    function showPlaceholderText(innerHTML)
+    {
+        hideElement(actionNeededEmail.parentElement)
+        hideElement(actionNeededEmailReadonly)
+        hideElement(actionNeededEmailFooter)
+
+        placeholderText.innerHTML = innerHTML;
         showElement(placeholderText)
     }
-    }
-
-
 })();
 
 

src/registrar/assets/sass/_theme/_admin.scss

@@ -847,3 +847,22 @@ div.dja__model-description{
         }
     }
 }
+
+.vertical-separator {
+    min-height: 20px;
+    height: 100%;
+    width: 1px;
+    background-color: #d1d2d2;
+    vertical-align: middle
+}
+
+.usa-summary-box_admin {
+    border-color: #d1d2d2;
+    background-color: #f1f1f1;
+    max-width: fit-content !important;
+    padding: .5rem;
+}
+
+.text-faded {
+    color: #{$dhs-gray-60};
+}

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

@@ -145,11 +145,12 @@ 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-placeholder-text" class="margin-top-05">
+    <div>
-        {{ field.field.value|linebreaks }}
+        <div id="action-needed-reason-email-placeholder-text" class="margin-top-05 text-faded">
+            -
         </div>
-    <div id="action-needed-reason-email-readonly" class="display-none">
+        <div>
-
+            <div id="action-needed-reason-email-readonly" class="display-none usa-summary-box usa-summary-box_admin padding-top-0 margin-top-0">
                 <div
                 class="usa-modal"
                 id="email-already-sent-modal"
@@ -167,7 +168,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                                 </p>
                                 <ul>
                                     <li class="font-body-sm">Status: <b>Action needed</b></li>
-                            <li class="font-body-sm">Reason: <b>{{ field.field.value|linebreaks }}</b></li>
+                                    <li class="font-body-sm">Reason: <b>{{ original_object.get_action_needed_reason_display }}</b></li>
                                 </ul>
                                 <p>
                                     If you edit this email's text, <b>the system will send another email</b> to
@@ -214,25 +215,33 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                 </div>
         
                 <div class="flex-container">
+                    <div class="margin-top-05">
                         <p id="action-needed-email-header"><b>Auto-generated email that will be sent to the creator</b></p>
                         <p class="display-none" 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>
+                            <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-top-2 margin-bottom-1 margin-left-1">
+                        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></textarea>
+                <textarea cols="40" rows="10" class="vLargeTextField" id="action-needed-reason-email-readonly-textarea" readonly>
+                    {{ field.field.value|linebreaks }}
+                </textarea>
             </div>
             <div>
                 {{ field.field }}
-        <div id="action-needed-email-footer">This email will be sent to the creator of this request after saving</div>
                 <input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">
             </div>
+            <div id="action-needed-email-footer" class="text-faded margin-top-05">This email will be sent to the creator of this request after saving</div>
+        </div>
+    </div>
     {% else %}
         {{ field.field }}
     {% endif %}