Edge cases

Found a bug regarding the default display of the show more/less icons for the audit log table

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

@@ -14,7 +14,7 @@
  *
 */
 const hideElement = (element) => {
-    if (!element.classList.contains("display-none"))
+    if (element && !element.classList.contains("display-none"))
         element.classList.add('display-none');
 };
 
@@ -23,7 +23,7 @@ const hideElement = (element) => {
  *
  */
 const showElement = (element) => {
-    if (element.classList.contains("display-none"))
+    if (element && element.classList.contains("display-none"))
         element.classList.remove('display-none');
 };
 
@@ -428,13 +428,31 @@ 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");
+            let hasAuditLogs = document.getElementById("has_audit_logs").value == "true"
+        
+            // Prepopulate values on page load.
             if (statusSelect.value === "action needed") {
                 flexContainer.parentNode.insertBefore(statusChangelog, flexContainer.nextSibling);
+
+                // 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);
+
+                // Hide the email container, and show the element if we have audit logs
+                hideElement(emailContainer)
+                if (hasAuditLogs){
+                    showElement(statusChangelog);
+                }else {
+                    hideElement(statusChangelog)
+                }
             }
+
         }
         
         // Call the function on page load
@@ -550,28 +568,8 @@ function initializeWidgetOnList(list, parentId) {
     // 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) {
-        let emailContainer = actionNeededEmail.closest(".dja-readonly-textarea-container");
-        if (statusDropdown.value == "action needed") {
-            showElement(emailContainer);
-        }
-
-        statusDropdown.addEventListener("change", function() {
-            if (statusDropdown.value == "action needed") {
-                showElement(emailContainer);
-            }else {
-                hideElement(emailContainer);
-            }
-            
-            // We hide the table if there isn't any data to start with.
-            // If we add a value, show it.
-            // This edge case applies to fixtures data. Prod data will have a changelog to pull from.
-            if(changeLog && changeLog.classList.contains("display-none") && actionNeededReasonDropdown.value){
-                showElement(changeLog);
-            }
-        });
-
+        // Add a change listener to the action needed reason dropdown 
         handleChangeActionNeededEmail(actionNeededReasonDropdown, actionNeededEmail);
     }
 
@@ -621,5 +619,4 @@ function initializeWidgetOnList(list, parentId) {
             });
         });
     }
-
 })();

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

@@ -801,7 +801,7 @@ div.dja__model-description{
         }
 
         &::-webkit-scrollbar-thumb {
-            background-color: var(--hairline-color);
+            background-color: var(--body-fg);
             border-radius: 99px;
             background-clip: content-box;
             border: 3px solid transparent;

src/registrar/templates/django/admin/domain_request_change_form.html

@@ -7,6 +7,7 @@
     <a id="invisible-ineligible-modal-toggler" class="display-none" href="#toggle-set-ineligible" aria-controls="toggle-set-ineligible" data-open-modal></a>
     {# Store the current object id so we can access it easier #}
     <input id="domain_request_id" class="display-none" value="{{original.id}}" />
+    <input id="has_audit_logs" class="display-none" value="{%if filtered_audit_log_entries %}true{% else %}false{% endif %}"/>
     {% for fieldset in adminform %}
         {% comment %}
         TODO: this will eventually need to be changed to something like this

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 original_object.action_needed_reason %}display-none{% endif %}" id="dja-status-changelog">
+    <div class="flex-container {% if not filtered_audit_log_entries and original_object.status != "action needed" or not original_object.action_needed_reason and original_object.status == "action needed" and not filtered_audit_log_entries %}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">