From dd29081fffa65f1a151f6c011f8cd233fe3d019b Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Tue, 1 Oct 2024 18:51:10 -0400
Subject: [PATCH] Fix bugs with the copy email button UI plus code cleanup

---
 src/registrar/admin.py                        |  2 +-
 src/registrar/assets/js/get-gov-admin.js      | 21 ++--
 src/registrar/assets/sass/_theme/_admin.scss  | 95 +++++++------------
 .../admin/change_form_object_tools.html       |  3 +-
 .../templates/admin/input_with_clipboard.html | 30 +++---
 .../admin/includes/contact_detail_list.html   |  2 +-
 .../admin/includes/detail_table_fieldset.html |  3 +-
 7 files changed, 63 insertions(+), 93 deletions(-)

diff --git a/src/registrar/admin.py b/src/registrar/admin.py
index 8718da9bad..a282e6c256 100644
--- a/src/registrar/admin.py
+++ b/src/registrar/admin.py
@@ -3112,7 +3112,7 @@ def display_admins(self, obj):
             admin_details += f'<a href="{change_url}">{escape(portfolio_admin)}</a><br>'
             admin_details += f"{escape(portfolio_admin.title)}<br>"
             admin_details += f"{escape(portfolio_admin.email)}"
-            admin_details += "<div class='admin-icon-group admin-icon-group__clipboard-link'>"
+            admin_details += "<div class='admin-icon-group'>"
             admin_details += f"<input aria-hidden='true' class='display-none' value='{escape(portfolio_admin.email)}'>"
             admin_details += (
                 "<button class='usa-button usa-button--unstyled padding-right-1 usa-button--icon padding-left-05"
diff --git a/src/registrar/assets/js/get-gov-admin.js b/src/registrar/assets/js/get-gov-admin.js
index 7e3c086c44..a0fe484208 100644
--- a/src/registrar/assets/js/get-gov-admin.js
+++ b/src/registrar/assets/js/get-gov-admin.js
@@ -515,10 +515,14 @@ document.addEventListener('DOMContentLoaded', function() {
     const formLabel = document.querySelector('label[for="id_action_needed_reason_email"]');
     let lastSentEmailContent = document.getElementById("last-sent-email-content");
     const initialDropdownValue = dropdown ? dropdown.value : null;
-    const initialEmailValue = textarea.value;
+    let initialEmailValue;
+    if (textarea)
+        initialEmailValue = textarea.value
 
     // We will use the const to control the modal
-    let isEmailAlreadySentConst = lastSentEmailContent.value.replace(/\s+/g, '') === textarea.value.replace(/\s+/g, '');
+    let isEmailAlreadySentConst;
+    if (lastSentEmailContent)
+        isEmailAlreadySentConst = lastSentEmailContent.value.replace(/\s+/g, '') === textarea.value.replace(/\s+/g, '');
     // We will use the function to control the label and help
     function isEmailAlreadySent() {
         return lastSentEmailContent.value.replace(/\s+/g, '') === textarea.value.replace(/\s+/g, '');
@@ -706,18 +710,6 @@ document.addEventListener('DOMContentLoaded', function() {
                 }
                 return '';
             }
-            // Extract the submitter name, title, email, and phone number
-            const submitterDiv = document.querySelector('.form-row.field-submitter');
-            const submitterNameElement = document.getElementById('id_submitter');
-            // We have to account for different superuser and analyst markups
-            const submitterName = submitterNameElement 
-                ? submitterNameElement.options[submitterNameElement.selectedIndex].text 
-                : submitterDiv.querySelector('a').text;
-            const submitterTitle = extractTextById('contact_info_title', submitterDiv);
-            const submitterEmail = extractTextById('contact_info_email', submitterDiv);
-            const submitterPhone = extractTextById('contact_info_phone', submitterDiv);
-            let submitterInfo = `${submitterName}${submitterTitle}${submitterEmail}${submitterPhone}`;
-
 
             //------ Senior Official
             const seniorOfficialDiv = document.querySelector('.form-row.field-senior_official');
@@ -734,7 +726,6 @@ document.addEventListener('DOMContentLoaded', function() {
                             `<strong>Current Websites:</strong> ${existingWebsites.join(', ')}</br>` +
                             `<strong>Rationale:</strong></br>` +
                             `<strong>Alternative Domains:</strong> ${alternativeDomains.join(', ')}</br>` +
-                            `<strong>Submitter:</strong> ${submitterInfo}</br>` +
                             `<strong>Senior Official:</strong> ${seniorOfficialInfo}</br>` +
                             `<strong>Other Employees:</strong> ${otherContactsSummary}</br>`;
             
diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss
index 7bc7dc53ce..40258ec412 100644
--- a/src/registrar/assets/sass/_theme/_admin.scss
+++ b/src/registrar/assets/sass/_theme/_admin.scss
@@ -390,6 +390,9 @@ a.button,
 .usa-button--dja span {
     vertical-align: middle;
 }
+.usa-button--dja.usa-button--unstyled {
+    color: var(--link-fg);
+}
 .usa-button--dja:not(.usa-button--unstyled, .usa-button--outline, .usa-modal__close, .usa-button--secondary) {
     background: var(--button-bg);
 }
@@ -425,6 +428,37 @@ button .usa-icon,
 .button--clipboard .usa-icon {
     vertical-align: middle;      
 }
+// Make the clipboard button "float" inside of the input box
+.admin-icon-group {
+    position: relative;
+    display: inline;
+    align-items: center;
+
+    input {
+        // Allow for padding around the copy button
+        padding-right: 35px !important;
+    }
+
+    button {
+        width: max-content;
+        text-decoration: none !important;
+    }
+
+    @media (max-width: 1000px) {
+        button {
+            display: block;
+        }
+    }
+
+    span {
+        padding-left: 0.05rem;
+    }
+
+}
+.usa-button__small-text,
+.usa-button__small-text span {
+    font-size: 13px;
+}
 
 .module--custom {
     a {
@@ -670,71 +704,10 @@ address.dja-address-contact-list {
     }
 }
 
-// Make the clipboard button "float" inside of the input box
-.admin-icon-group {
-    position: relative;
-    display: inline;
-    align-items: center;
-
-    input {
-        // Allow for padding around the copy button
-        padding-right: 35px !important;
-        // Match the height of other inputs
-        min-height: 2.25rem !important;
-    }
-
-    button {
-        line-height: 14px;
-        width: max-content;
-        font-size: unset;
-        text-decoration: none !important;
-    }
-
-    @media (max-width: 1000px) {
-        button {
-            display: block;
-            padding-top: 8px;
-        }
-    }
-
-    span {
-        padding-left: 0.1rem;
-    }
-
-}
-
-.admin-icon-group.admin-icon-group__clipboard-link {
-    position: relative;
-    display: inline;
-    align-items: center;
-    
-
-    .usa-button--icon {
-        position: absolute;
-        right: auto;
-        left: 4px;
-        height: 100%;
-        top: -1px;
-    }
-    button {
-        font-size: unset !important;
-        display: inline-flex;
-        padding-top: 4px;
-        line-height: 14px;
-        width: max-content;
-        font-size: unset;
-        text-decoration: none !important;
-    }
-}
-
 .no-outline-on-click:focus {
     outline: none !important;
 }
 
-.usa-button__small-text {
-    font-size: small;
-}
-
 // Get rid of padding on all help texts
 form .aligned p.help, form .aligned div.help {
     padding-left: 0px !important;
diff --git a/src/registrar/templates/admin/change_form_object_tools.html b/src/registrar/templates/admin/change_form_object_tools.html
index 198140c19d..55c374419a 100644
--- a/src/registrar/templates/admin/change_form_object_tools.html
+++ b/src/registrar/templates/admin/change_form_object_tools.html
@@ -20,10 +20,11 @@
             </li>
             {% if opts.model_name == 'domainrequest' %}
             <li>
-                <a id="id-copy-to-clipboard-summary" class="button--clipboard" type="button" href="#">
+                <a id="id-copy-to-clipboard-summary" class="usa-button--dja button--clipboard" type="button" href="#">
                     <svg class="usa-icon" >
                         <use xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
                     </svg>
+                    <!-- the span is targeted in JS, do not remove -->
                     <span>{% translate "Copy request summary" %}</span>
                 </a>
             </li>
diff --git a/src/registrar/templates/admin/input_with_clipboard.html b/src/registrar/templates/admin/input_with_clipboard.html
index 5ad2b27f78..de89602b81 100644
--- a/src/registrar/templates/admin/input_with_clipboard.html
+++ b/src/registrar/templates/admin/input_with_clipboard.html
@@ -8,7 +8,7 @@
 <div class="admin-icon-group">
     {{ field }}
     <button 
-    class="usa-button usa-button--unstyled padding-left-1 usa-button--icon button--clipboard copy-to-clipboard" 
+    class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-left-1 usa-button--icon button--clipboard copy-to-clipboard" 
     type="button"
     >
         <div class="no-outline-on-click">
@@ -17,23 +17,27 @@
             >
                 <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
             </svg>
-            Copy
+            <!-- the span is targeted in JS, do not remove -->
+            <span>Copy</span>
         </div>
     </button>
 </div>
 {% else %}
-<div class="admin-icon-group admin-icon-group__clipboard-link">
+<div class="admin-icon-group">
     <input aria-hidden="true" class="display-none" value="{{ field.email }}" />
-    <button 
-    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-05" 
-    type="button"
-    >
-        <svg 
-        class="usa-icon" 
+    {% if field.email is not None %}
+        <button 
+        class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-05" 
+        type="button"
         >
-            <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
-        </svg>
-        Copy
-    </button>
+            <svg 
+            class="usa-icon" 
+            >
+                <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
+            </svg>
+            <!-- the span is targeted in JS, do not remove -->
+            <span>Copy</span>
+        </button>
+    {% endif %}
 </div>
 {% endif %}
\ No newline at end of file
diff --git a/src/registrar/templates/django/admin/includes/contact_detail_list.html b/src/registrar/templates/django/admin/includes/contact_detail_list.html
index 7cc72e8e1a..b855dcf12e 100644
--- a/src/registrar/templates/django/admin/includes/contact_detail_list.html
+++ b/src/registrar/templates/django/admin/includes/contact_detail_list.html
@@ -26,7 +26,7 @@
         {% if user.email %}
             <span id="contact_info_email">{{ user.email }}</span>
             {% include "admin/input_with_clipboard.html" with field=user invisible_input_field=True %}
-            <br class="admin-icon-group__br">
+            <br>
         {% else %}
             None<br>
         {% endif %}
diff --git a/src/registrar/templates/django/admin/includes/detail_table_fieldset.html b/src/registrar/templates/django/admin/includes/detail_table_fieldset.html
index bee42d24e2..1e8fcaaeb5 100644
--- a/src/registrar/templates/django/admin/includes/detail_table_fieldset.html
+++ b/src/registrar/templates/django/admin/includes/detail_table_fieldset.html
@@ -269,7 +269,7 @@ <h2 class="usa-modal__heading">
                                 <td class="padding-left-1 text-size-small">
                                     <input aria-hidden="true" class="display-none" value="{{ contact.email }}" />
                                     <button 
-                                    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline" 
+                                    class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline" 
                                     type="button"
                                     >
                                         <svg 
@@ -277,6 +277,7 @@ <h2 class="usa-modal__heading">
                                         >
                                             <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
                                         </svg>
+                                        <!-- the span is targeted in JS, do not remove -->
                                         <span>Copy email</span>
                                     </button>
                                 </td>