Further simplify js logic

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

@@ -428,29 +428,19 @@ function initializeWidgetOnList(list, parentId) {
         function moveStatusChangelog(actionNeededReasonFormGroup, statusSelect) {
             let flexContainer = actionNeededReasonFormGroup.querySelector('.flex-container');
             let statusChangelog = document.getElementById('dja-status-changelog');
-            let actionNeededEmail = document.querySelector("#action_needed_reason_email_view_more");
+
-            let emailContainer = actionNeededEmail.closest(".dja-readonly-textarea-container");
+            // On action needed, show the email that will be sent out
-            let hasAuditLogs = document.getElementById("has_audit_logs").value == "true"
+            let showReasonEmailContainer = document.querySelector("#action_needed_reason_email_readonly")
         
             // Prepopulate values on page load.
             if (statusSelect.value === "action needed") {
                 flexContainer.parentNode.insertBefore(statusChangelog, flexContainer.nextSibling);
-
+                showElement(showReasonEmailContainer);
-                // Show the changelog if hidden and show the email container
-                showElement(statusChangelog);
-                showElement(emailContainer);
             } else {
                 // Move the changelog back to its original location
                 let statusFlexContainer = statusSelect.closest('.flex-container');
                 statusFlexContainer.parentNode.insertBefore(statusChangelog, statusFlexContainer.nextSibling);
-
+                hideElement(showReasonEmailContainer);
-                // Hide the email container, and show the element if we have audit logs
-                hideElement(emailContainer)
-                if (hasAuditLogs){
-                    showElement(statusChangelog);
-                }else {
-                    hideElement(statusChangelog)
-                }
             }
 
         }
@@ -562,35 +552,24 @@ function initializeWidgetOnList(list, parentId) {
  * which shows the auto generated email on action needed reason
 */
 (function () {
-    let statusDropdown = document.getElementById("id_status");
+    let actionNeededReasonDropdown = document.querySelector("#id_action_needed_reason");
-    let actionNeededReasonDropdown = document.getElementById("id_action_needed_reason");
-    // If you need to account for the non-readonly version as well, you will need to check
-    // for both of these things seperately.
     let actionNeededEmail = document.querySelector("#action_needed_reason_email_view_more");
-    let changeLog = document.querySelector(".dja-status-changelog");
+    if(actionNeededReasonDropdown && actionNeededEmail && container) {
-    if(actionNeededReasonDropdown && actionNeededEmail) {
         // Add a change listener to the action needed reason dropdown 
         handleChangeActionNeededEmail(actionNeededReasonDropdown, actionNeededEmail);
     }
 
     function handleChangeActionNeededEmail(actionNeededReasonDropdown, actionNeededEmail) {
         actionNeededReasonDropdown.addEventListener("change", function() {
-            let noEmailMessage = document.getElementById("no-email-message");
             let reason = actionNeededReasonDropdown.value;
             const pk = document.querySelector("#domain_request_id").value;
 
             // If a reason isn't specified, no email will be sent.
             // You also cannot save the model in this state.
-            // This flow occurs if you switch back to the empty picker state
+            // This flow occurs if you switch back to the empty picker state.
             if(!reason) {
-                // Hide the text field
+                showNoEmailMessage(actionNeededEmail);
-                hideElement(actionNeededEmail);
-
-                // Show the "no email" message
-                showElement(noEmailMessage);
                 return;
-            }else if(reason && changeLog && changeLog.classList.contains("display-none")){
-                showElement(changeLog);
             }
 
             fetch(`/get-domain-requests-json/${pk}/action-needed-email/${reason}`)
@@ -603,20 +582,26 @@ function initializeWidgetOnList(list, parentId) {
 
                 if(data && data.email_body_text) {
                     actionNeededEmail.value = data.email_body_text
+                    showActionNeededEmail(actionNeededEmail);
+                }else {
+                    showNoEmailMessage(actionNeededEmail);
+                }
+            });
+        });
+    }
 
-                    // Show the text field
+    // Show the text field. Hide the "no email" message.
+    function showActionNeededEmail(actionNeededEmail){
+        let noEmailMessage = document.getElementById("no-email-message");
         showElement(actionNeededEmail);
-
-                    // Hide the "no email" message
         hideElement(noEmailMessage);
-                }else if (data && !data.email_body_text) {
+    }
-                    // Hide the text field
-                    hideElement(actionNeededEmail);
 
-                    // Show the "no email" message
+    // Hide the text field. Show the "no email" message.
+    function showNoEmailMessage(actionNeededEmail) {
+        let noEmailMessage = document.getElementById("no-email-message");
+        hideElement(actionNeededEmail);
         showElement(noEmailMessage);
     }
-            });
+
-        });
-    }
 })();

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

@@ -815,8 +815,12 @@ div.dja__model-description{
 }
 
 .thin-border {
+    background-color: (--selected-bg);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: 8px;
+    label {
+        padding-top: 0 !important;
+    }
 }
 
 .display-none {

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

@@ -69,7 +69,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
 
 {% block after_help_text %}
     {% if field.field.name == "status" %}
-    <div class="flex-container {% if not filtered_audit_log_entries %}display-none{% endif %}" id="dja-status-changelog">
+    <div class="flex-container" id="dja-status-changelog">
         <label aria-label="Status changelog"></label>
         <div>
             <div class="usa-table-container--scrollable collapse--dgsimple collapsed" tabindex="0">
@@ -106,16 +106,17 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                         {% endfor %}
                     </tbody>
                 </table>
+                {% else %}
+                <p>No changelog to display.</p>
                 {% endif %}
-
+                <div id="action_needed_reason_email_readonly" class="dja-readonly-textarea-container padding-1 margin-top-2 thin-border display-none">
-                <div class="dja-readonly-textarea-container padding-1 margin-top-2 thin-border display-none">
                     <label class="max-full" for="action_needed_reason_email_view_more">
                         <strong>Auto-generated email (sent to submitter)</strong>
                     </label>
                     <textarea id="action_needed_reason_email_view_more" cols="40" rows="20" class="{% if not original_object.action_needed_reason %}display-none{% endif %}" readonly>
                         {{ original_object.action_needed_reason_email }}
                     </textarea>
-                    <p id="no-email-message" class="{% if original_object.action_needed_reason %}display-none{% endif %}">No email will be sent</p>
+                    <p id="no-email-message" class="{% if original_object.action_needed_reason %}display-none{% endif %}">No email will be sent.</p>
                 </div>
             </div>