Merge pull request #2879 from cisagov/rjm/1846-copy-email-btn

#2846: Fix bugs with the copy email button UI plus code cleanup - [RJM]

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>`;
             

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

@@ -385,6 +385,7 @@ a.button,
     font-kerning: auto;
     font-family: inherit;
     font-weight: normal;
+    text-decoration: none !important;
 }
 .button svg,
 .button span,
@@ -392,6 +393,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);
 }
@@ -421,11 +425,34 @@ input[type=submit].button--dja-toolbar {
 input[type=submit].button--dja-toolbar:focus, input[type=submit].button--dja-toolbar:hover {
     border-color: var(--body-quiet-color);
 }
-// Targets the DJA buttom with a nested icon
+.admin-icon-group {
-button .usa-icon,
+    position: relative;
-.button .usa-icon,
+    display: inline;
-.button--clipboard .usa-icon {
+    align-items: center;
-    vertical-align: middle;      
+
+    input {
+        // Allow for padding around the copy button
+        padding-right: 35px !important;
+    }
+
+    button {
+        width: max-content;
+    }
+
+    @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 {
@@ -673,71 +700,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;
@@ -887,6 +853,9 @@ div.dja__model-description{
     padding-top: 0 !important;
 }
 
+.padding-bottom-0 {
+    padding-bottom: 0 !important;
+}
 
 .flex-container {
     @media screen and (min-width: 700px) and (max-width: 1150px) {

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" 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>

src/registrar/templates/admin/input_with_clipboard.html

@@ -8,7 +8,7 @@ Template for an input field with a clipboard
 <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 copy-to-clipboard" 
     type="button"
     >
         <div class="no-outline-on-click">
@@ -17,23 +17,27 @@ Template for an input field with a clipboard
             >
                 <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 
+    {% if field.email is not None %}
-    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-05" 
+        <button 
-    type="button"
+        class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-right-1 usa-button--icon copy-to-clipboard text-no-underline padding-left-05" 
-    >
+        type="button"
-        <svg 
-        class="usa-icon" 
         >
-            <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
+            <svg 
-        </svg>
+            class="usa-icon" 
-        Copy
+            >
-    </button>
+                <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 %}

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 %}

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

@@ -254,7 +254,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                     <table>
                         <thead>
                             <tr>
-                                <th colspan="4">Other contact information</th>
+                                <th colspan="5">Other contact information</th>
                             <tr>
                         </thead>
                         <tbody>
@@ -267,18 +267,31 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                                 </td>
                                 <td class="padding-left-1">{{ contact.phone }}</td>
                                 <td class="padding-left-1 text-size-small">
-                                    <input aria-hidden="true" class="display-none" value="{{ contact.email }}" />
+                                    {% if contact.email %}
-                                    <button 
+                                        <input aria-hidden="true" class="display-none" value="{{ contact.email }}" />
-                                    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline" 
+                                        <button 
-                                    type="button"
+                                        class="
-                                    >
+                                            usa-button--dja 
-                                        <svg 
+                                            usa-button 
-                                        class="usa-icon" 
+                                            usa-button__small-text 
+                                            usa-button--unstyled 
+                                            padding-right-1 
+                                            padding-top-0
+                                            padding-bottom-0
+                                            usa-button--icon 
+                                            copy-to-clipboard 
+                                            text-no-underline" 
+                                        type="button"
                                         >
-                                            <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
+                                            <svg 
-                                        </svg>
+                                            class="usa-icon" 
-                                        <span>Copy email</span>
+                                            >
-                                    </button>
+                                                <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>
+                                    {% endif %}
                                 </td>
                             </tr>
                             {% endfor %}

src/registrar/tests/test_admin.py

@@ -654,7 +654,7 @@ class TestDomainInformationAdmin(TestCase):
         self.test_helper.assert_response_contains_distinct_values(response, expected_other_employees_fields)
 
         # Test for the copy link
-        self.assertContains(response, "button--clipboard", count=3)
+        self.assertContains(response, "copy-to-clipboard", count=3)
 
         # cleanup this test
         domain_info.delete()

src/registrar/tests/test_admin_domain.py

@@ -535,7 +535,7 @@ class TestDomainAdminWithClient(TestCase):
         self.assertContains(response, "Testy Tester")
 
         # Test for the copy link
-        self.assertContains(response, "button--clipboard")
+        self.assertContains(response, "copy-to-clipboard")
 
         # cleanup from this test
         domain.delete()

src/registrar/tests/test_admin_request.py

@@ -1511,7 +1511,7 @@ class TestDomainRequestAdmin(MockEppLib):
         self.test_helper.assert_response_contains_distinct_values(response, expected_other_employees_fields)
 
         # Test for the copy link
-        self.assertContains(response, "button--clipboard", count=4)
+        self.assertContains(response, "copy-to-clipboard", count=4)
 
         # Test that Creator counts display properly
         self.assertNotContains(response, "Approved domains")