Minor rewrite

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

@@ -8,6 +8,25 @@
 
 // <<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>>
 // Helper functions.
+
+/**
+ * Hide element
+ *
+*/
+const hideElement = (element) => {
+    if (!element.classList.contains("display-none"))
+        element.classList.add('display-none');
+};
+
+/**
+ * Show element
+ *
+ */
+const showElement = (element) => {
+    if (element.classList.contains("display-none"))
+        element.classList.remove('display-none');
+};
+
 /** Either sets attribute target="_blank" to a given element, or removes it */
 function openInNewTab(el, removeAttribute = false){
     if(removeAttribute){
@@ -521,30 +540,35 @@ function initializeWidgetOnList(list, parentId) {
 })();
 
 
-
 /** An IIFE that hooks up to the "show email" button
  * which shows the auto generated email on action needed reason
 */
 (function () {
     let statusDropdown = document.getElementById("id_status");
-
-    statusDropdown.addEventListener('change', function() {
-        // TODO we should also handle when action needed
-        if (statusDropdown.value != "action needed"){
-            formRow.classList.add("display-none")
-        }
-    });
-
-    let actionNeededDropdownReason = document.getElementById("id_action_needed_reason");
-    // Store the domain request id on this record for simplicity
-    let showEmailButton = document.getElementById("show_action_needed_email");
+    let actionNeededReasonDropdown = document.getElementById("id_action_needed_reason");
     let actionNeededEmail = document.getElementById("id_action_needed_reason_email")
-    let formRow = actionNeededEmail.closest('.form-row');
-    if(actionNeededDropdownReason && showEmailButton && actionNeededEmail && formRow) {
-        actionNeededDropdownReason.addEventListener('change', function() {
+    let reasonFormRow = actionNeededEmail.closest(".form-row");
+
+    if(actionNeededReasonDropdown && actionNeededEmail && reasonFormRow) {
+        statusDropdown.addEventListener('change', function() {
+            if (statusDropdown.value != "action needed") {
+                // Hide the email field by default
+                hideElement(reasonFormRow)
+            }else {
+                showElement(reasonFormRow)
+            }
+        });
+
+        if (statusDropdown.value == "action needed")
+            handleChangeActionNeededEmail(actionNeededReasonDropdown, actionNeededEmail, reasonFormRow);
+    }
+
+    // TODO fix edge case where nothing is selected
+    function handleChangeActionNeededEmail(actionNeededReasonDropdown, actionNeededEmail, reasonFormRow) {
+        actionNeededReasonDropdown.addEventListener('change', function() {
             // TODO on change if not actionneeded on status, hide show email button
-            const pk = showEmailButton.getAttribute("domain-request-id")
-            const reason = actionNeededDropdownReason.value
+            const pk = document.querySelector("#domain_request_id").value
+            const reason = actionNeededReasonDropdown.value
             fetch(`/get-domain-requests-json/${pk}/action-needed-email/${reason}`)
             .then(response => response.json())
             .then(data => {
@@ -558,13 +582,11 @@ function initializeWidgetOnList(list, parentId) {
                     actionNeededEmail.value = data.email_body_text
 
                     // Show the text field
-                    if(actionNeededEmail.classList.contains("display-none")) {
-                        actionNeededEmail.classList.remove("display-none")
-                    }
+                    showElement(actionNeededEmail);
 
-                    // Hide the message
-                    if(noEmailMessage && !noEmailMessage.classList.contains("display-none")) {
-                        noEmailMessage.classList.add("display-none")
+                    // Hide the "no email" message
+                    if(noEmailMessage) {
+                        hideElement(noEmailMessage);
                     }
 
                 }else if (data && !data.email_body_text) {
@@ -576,22 +598,16 @@ function initializeWidgetOnList(list, parentId) {
                     }
 
                     // Hide the text field
-                    if(!actionNeededEmail.classList.contains("display-none")) {
-                        actionNeededEmail.classList.add("display-none")
-                    }
+                    hideElement(actionNeededEmail);
 
                     // Show the message
-                    if(noEmailMessage.classList.contains("display-none")) {
-                        noEmailMessage.classList.remove("display-none")
-                    }
+                    showElement(noEmailMessage);
                 }
-                console.log(data)
+
+                showElement(reasonFormRow)
             });
         });
 
-        showEmailButton.addEventListener('click', function() {
-            formRow.classList.remove("display-none")
-        });
     }
 
 })();

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

@@ -5,7 +5,8 @@
 {% block field_sets %}
     {# Create an invisible <a> tag so that we can use a click event to toggle the modal. #}
     <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}}" />
     {% 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

@@ -62,7 +62,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
             {% endwith %}
         </div>
     {% else %}
-    <div class="readonly">{{ field.contents }}</div>
+        <div class="readonly">{{ field.contents }}</div>
     {% endif %}
     {% endwith %}
 {% endblock field_readonly %}
@@ -113,12 +113,6 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                     <use xlink:href="/public/img/sprite.svg#expand_more"></use>
                 </svg>
             </button>
-            <button id="show_action_needed_email" domain-request-id="{{original_object.id}}" type="button" class="{% if field.field.value != "action needed" %}display-none{% endif %} collapse-toggle--dgsimple usa-button usa-button--unstyled margin-top-2 margin-bottom-1 margin-left-1">
-                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
-                    <use xlink:href="/public/img/sprite.svg#mail"></use>
-                </svg>
-                <span>Show email</span>
-            </button>
             {% comment %}
             <div class="usa-button-group">
                 <li class="usa-button-group__item">