Add seperate show more buttons

src/registrar/admin.py

@@ -1485,6 +1485,12 @@ class DomainRequestAdmin(ListHeaderAdmin, ImportExportModelAdmin):
     custom_election_board.admin_order_field = "is_election_board"  # type: ignore
     custom_election_board.short_description = "Election office"  # type: ignore
 
+    # This is just a placeholder. This field will be populated in the detail_table_fieldset view.
+    # This is not a field that exists on the model.
+    def status_history(self, obj):
+        return "No changelog to display."
+    status_history.short_description = "Status History"
+
     # Filters
     list_filter = (
         StatusListFilter,
@@ -1510,6 +1516,7 @@ class DomainRequestAdmin(ListHeaderAdmin, ImportExportModelAdmin):
             {
                 "fields": [
                     "portfolio",
+                    "status_history",
                     "status",
                     "rejection_reason",
                     "action_needed_reason",
@@ -1592,6 +1599,7 @@ class DomainRequestAdmin(ListHeaderAdmin, ImportExportModelAdmin):
         "alternative_domains",
         "is_election_board",
         "federal_agency",
+        "status_history"
     )
 
     # Read only that we'll leverage for CISA Analysts
@@ -2097,6 +2105,14 @@ class DomainInformationInline(admin.StackedInline):
 
         return modified_fieldsets
 
+class DomainForm(forms.ModelForm):
+    """This form utilizes the custom widget for its class's forms"""
+
+    class Meta:
+        model = models.Domain
+        fields = "__all__"
+        widgets = {
+        }
 
 class DomainResource(FsmModelResource):
     """defines how each field in the referenced model should be mapped to the corresponding fields in the
@@ -2110,7 +2126,7 @@ class DomainAdmin(ListHeaderAdmin, ImportExportModelAdmin):
     """Custom domain admin class to add extra buttons."""
 
     resource_classes = [DomainResource]
-
+    #form = MyUserAdminForm
     class ElectionOfficeFilter(admin.SimpleListFilter):
         """Define a custom filter for is_election_board"""
 

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

@@ -421,38 +421,6 @@ function initializeWidgetOnList(list, parentId) {
             sessionStorage.removeItem(name); 
         }
     }
-
-    document.addEventListener('DOMContentLoaded', function() {
-        let statusSelect = document.getElementById('id_status');
-        
-        function moveStatusChangelog(actionNeededReasonFormGroup, statusSelect) {
-            let flexContainer = actionNeededReasonFormGroup.querySelector('.flex-container');
-            let statusChangelog = document.getElementById('dja-status-changelog');
-
-            // On action needed, show the email that will be sent out
-            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);
-            } else {
-                // Move the changelog back to its original location
-                let statusFlexContainer = statusSelect.closest('.flex-container');
-                statusFlexContainer.parentNode.insertBefore(statusChangelog, statusFlexContainer.nextSibling);
-                hideElement(showReasonEmailContainer);
-            }
-
-        }
-        
-        // Call the function on page load
-        moveStatusChangelog(actionNeededReasonFormGroup, statusSelect);
-
-        // Add event listener to handle changes to the selector itself
-        statusSelect.addEventListener('change', function() {
-            moveStatusChangelog(actionNeededReasonFormGroup, statusSelect);
-        })
-    });
 })();
 
 /** An IIFE for toggling the submit bar on domain request forms
@@ -548,13 +516,13 @@ function initializeWidgetOnList(list, parentId) {
 })();
 
 
-/** An IIFE that hooks up to the "show email" button.
+/** An IIFE that hooks to the show/hide button underneath action needed reason.
- * which shows the auto generated email on action needed reason.
+ * This shows the auto generated email on action needed reason.
 */
 (function () {
     let actionNeededReasonDropdown = document.querySelector("#id_action_needed_reason");
     let actionNeededEmail = document.querySelector("#action_needed_reason_email_view_more");
-    if(actionNeededReasonDropdown && actionNeededEmail && container) {
+    if(actionNeededReasonDropdown && actionNeededEmail) {
         // Add a change listener to the action needed reason dropdown 
         handleChangeActionNeededEmail(actionNeededReasonDropdown, actionNeededEmail);
     }

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

@@ -788,6 +788,7 @@ div.dja__model-description{
 }
 
 .dja-readonly-textarea-container {
+    overflow-x: scroll;
     textarea {
         width: 100%;
         min-width: 610px;
@@ -810,6 +811,12 @@ div.dja__model-description{
     }
 }
 
+@media (max-width: 1230px) {
+    .dja-readonly-textarea-container {
+        overflow-x: scroll;
+    }
+}
+
 .max-full {
     width: 100% !important;
 }

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

@@ -8,7 +8,60 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
 
 {% block field_readonly %}
     {% with all_contacts=original_object.other_contacts.all %}
-    {% if field.field.name == "other_contacts" %}
+    {% if field.field.name == "status_history" %}
+        {% if filtered_audit_log_entries %}
+        <div class="readonly">
+            <div class="usa-table-container--scrollable collapse--dgsimple collapsed" tabindex="0">
+                {% if filtered_audit_log_entries %}
+                <table class="usa-table usa-table--borderless">
+                    <thead>
+                        <tr>
+                            <th>Status</th>
+                            <th>User</th>
+                            <th>Changed at</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for entry in filtered_audit_log_entries %}
+                            <tr>
+                                <td>
+                                    {% if entry.status %}
+                                        {{ entry.status|default:"Error" }}
+                                    {% else %}
+                                        Error
+                                    {% endif %}
+                                    
+                                    {% if entry.rejection_reason %}
+                                        - {{ entry.rejection_reason|default:"Error" }}
+                                    {% endif %}
+                                    
+                                    {% if entry.action_needed_reason %}
+                                        - {{ entry.action_needed_reason|default:"Error" }}
+                                    {% endif %}
+                                </td>
+                                <td>{{ entry.actor|default:"Error" }}</td>
+                                <td>{{ entry.timestamp|date:"Y-m-d H:i:s" }}</td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+                {% else %}
+                <p>No changelog to display.</p>
+                {% endif %}
+            </div>
+            <button type="button" class="collapse-toggle--dgsimple usa-button usa-button--unstyled">
+                <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>
+            </button>
+        </div>
+        {% else %}
+        <div class="readonly">
+            No changelog to display.
+        </div>
+        {% endif %}
+    {% elif field.field.name == "other_contacts" %}
         {% if all_contacts.count > 2 %}
             <div class="readonly">
                 {% for contact in all_contacts %}
@@ -68,72 +121,31 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
 {% endblock field_readonly %}
 
 {% block after_help_text %}
-    {% if field.field.name == "status" %}
+    {% if field.field.name == "action_needed_reason" %}
-    <div class="flex-container" id="dja-status-changelog">
+    <div class="flex-container">
-        <label aria-label="Status changelog"></label>
+        <label aria-label="Action needed reason email"></label>
         <div>
-            <div class="usa-table-container--scrollable collapse--dgsimple collapsed" tabindex="0">
+            {% comment %}
-                {% if filtered_audit_log_entries %}
+            Store the action needed reason emails in a json-based dictionary.
-                <table class="usa-table usa-table--borderless">
+            This allows us to change the action_needed_reason_email field dynamically, depending on value.
-                    <thead>
+            The alternative to this is an API endpoint.
-                        <tr>
-                            <th>Status</th>
-                            <th>User</th>
-                            <th>Changed at</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for entry in filtered_audit_log_entries %}
-                            <tr>
-                                <td>
-                                    {% if entry.status %}
-                                        {{ entry.status|default:"Error" }}
-                                    {% else %}
-                                        Error
-                                    {% endif %}
-                                    
-                                    {% if entry.rejection_reason %}
-                                        - {{ entry.rejection_reason|default:"Error" }}
-                                    {% endif %}
-                                    
-                                    {% if entry.action_needed_reason %}
-                                        - {{ entry.action_needed_reason|default:"Error" }}
-                                    {% endif %}
-                                </td>
-                                <td>{{ entry.actor|default:"Error" }}</td>
-                                <td>{{ entry.timestamp|date:"Y-m-d H:i:s" }}</td>
-                            </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-                {% else %}
-                <p>No changelog to display.</p>
-                {% endif %}
-                
-                {% comment %}
-                Store the action needed reason emails in a json-based dictionary.
-                This allows us to change the action_needed_reason_email field dynamically, depending on value.
-                The alternative to this is an API endpoint.
 
-                Given that we have a limited number of emails, doing it this way makes sense.
+            Given that we have a limited number of emails, doing it this way makes sense.
-                {% endcomment %}
+            {% endcomment %}
-                {% if action_needed_reason_emails %}
+            {% if action_needed_reason_emails %}
-                <script id="action-needed-emails-data" type="application/json">
+            <script id="action-needed-emails-data" type="application/json">
-                    {{ action_needed_reason_emails|safe }}
+                {{ action_needed_reason_emails|safe }}
-                </script>
+            </script>
-                {% endif %}
+            {% endif %}
-                <div id="action_needed_reason_email_readonly" class="dja-readonly-textarea-container padding-1 margin-top-2 thin-border display-none">
+            <div id="action_needed_reason_email_readonly" class="dja-readonly-textarea-container padding-1 margin-top-2 margin-bottom-1 thin-border collapse--dgsimple collapsed">
-                    <label class="max-full" for="action_needed_reason_email_view_more">
+                <label class="max-full" for="action_needed_reason_email_view_more">
-                        <strong>Auto-generated email (sent to submitter)</strong>
+                    <strong>Auto-generated email (sent to submitter)</strong>
-                    </label>
+                </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>
+                <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 }}
+                    {{ original_object.action_needed_reason_email }}
-                    </textarea>
+                </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>
-            
-
             <button type="button" class="collapse-toggle--dgsimple usa-button usa-button--unstyled margin-top-2 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">