Handle edge case with no default data

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

@@ -580,14 +580,19 @@ function initializeWidgetOnList(list, parentId) {
     // TODO fix edge case where nothing is selected
     function handleChangeActionNeededEmail(actionNeededReasonDropdown, actionNeededEmail) {
         actionNeededReasonDropdown.addEventListener("change", function() {
-            // TODO on change if not actionneeded on status, hide show email button
+            let noEmailMessage = document.getElementById("no-email-message");
             const pk = document.querySelector("#domain_request_id").value;
             const reason = actionNeededReasonDropdown.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
             if(!reason) {
-                actionNeededEmail.value = "No email will be sent";
+                // Hide the text field
+                hideElement(actionNeededEmail);
+
+                // Show the "no email" message
+                showElement(noEmailMessage);
                 return;
             }
 
@@ -601,12 +606,18 @@ function initializeWidgetOnList(list, parentId) {
 
                 if(data && data.email_body_text) {
                     actionNeededEmail.value = data.email_body_text
-                }else if (data && !data.email_body_text) {
-                    actionNeededEmail.value = "No email will be sent";
-                }
 
-                if (data) {
+                    // Show the text field
-                    actionNeededEmail.value = data.email_body_text ? data.email_body_text : "No email will be sent";
+                    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
+                    showElement(noEmailMessage);
                 }
             });
         });

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

@@ -824,3 +824,8 @@ div.dja__model-description{
 .no-border {
     border: none;
 }
+
+.display-none {
+    // Many elements in django admin try to override this, so we need !important.
+    display: none !important;
+}

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 or not action_needed_reason %}display-none{% endif %}" id="dja-status-changelog">
+    <div class="flex-container {% if not filtered_audit_log_entries or not original_object.action_needed_reason %}display-none{% endif %}" id="dja-status-changelog">
         <label aria-label="Status changelog"></label>
         <div>
             <div class="usa-table-container--scrollable collapse--dgsimple collapsed" tabindex="0">
@@ -112,9 +112,10 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                     <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="no-border" readonly>
+                    <textarea id="action_needed_reason_email_view_more" cols="40" rows="20" class="no-border {% 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>
                 </div>
             </div>