Remove success dialog

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

@@ -162,50 +162,14 @@ function openInNewTab(el, removeAttribute = false){
                     // Append the new icon reference
                     buttonIcon.setAttribute('xlink:href', baseHref + '#check');
 
-                    // Find the nearest .admin-icon-group__success-dialog and update its classes
+                    // Change the button text
-                    let parentFlexContainer = null
+                    nearestSpan = button.querySelector("span")
-                    let brElement = null
+                    nearestSpan.innerText = "Copied to clipboard"
-                    let successDialog = null
-                    if (userId) {
-                        successDialog = document.querySelector(`#email-clipboard__success-dialog-${userId}`);
-                    }else {
-                        successDialog = document.querySelector("#email-clipboard__success-dialog");
-                    }
-
-                    if (successDialog) {
-                        if (!userId) {
-                            parentFlexContainer = successDialog.closest('.flex-container');
-                            // Flex container overrides display-none
-                            parentFlexContainer.classList.remove('dja-important__display-none');
-                        }
-                        successDialog.classList.remove('display-none');
-                        // Find the associated BR if it exists
-                        brElement = successDialog.nextElementSibling
-                    }
-                    
-                    // If the element directly below the success dialog is a br, hide it.
-                    // This is for dynamic styling reasons
-                    if (brElement && brElement.tagName === 'BR' && brElement.classList.contains('admin-icon-group__br')) {
-                        brElement.classList.add('display-none');
-                    }
 
                     setTimeout(function() {
                         // Change back to the copy icon
                         buttonIcon.setAttribute('xlink:href', currentHref); 
-
+                        nearestSpan.innerText = "Copy"
-                        // Hide the success dialog
-                        if (successDialog){
-                            successDialog.classList.add("display-none");
-                        }
-                        
-                        // Show the regular br
-                        if (brElement) {
-                            brElement.classList.remove("display-none");
-                        }
-
-                        if (parentFlexContainer) {
-                            parentFlexContainer.classList.add("dja-important__display-none");
-                        }
                     }, 1500);
 
                 }

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

@@ -540,15 +540,9 @@ address.dja-address-contact-list {
 // Make the clipboard button "float" inside of the input box
 .admin-icon-group {
     position: relative;
-    display: flex;
+    display: inline;
     align-items: center;
 
-    .usa-button__icon {
-        position: absolute;
-        right: 0;
-        height: 100%;
-    }
-
     input {
         // Allow for padding around the copy button
         padding-right: 35px !important;
@@ -557,7 +551,21 @@ address.dja-address-contact-list {
     }
 
     button {
-        line-height: 15px;
+        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;
     }
 
 }
@@ -566,6 +574,7 @@ address.dja-address-contact-list {
     position: relative;
     display: inline;
     align-items: center;
+    
 
     .usa-button__icon {
         position: absolute;
@@ -579,53 +588,12 @@ address.dja-address-contact-list {
         padding-top: 4px;
         line-height: 14px;
         color: var(--link-fg);
-    }
+        width: max-content;
-}
+        font-size: unset;
-
+        text-decoration: none !important;
-.usa-alert--slim.usa-alert--slim--dja-admin {
-    .usa-alert__body:before {
-        top: 0.4rem;
-        left: 10px
-    }
-    .usa-alert__body {
-        padding-left: 2.5rem;
-    }
-
-    .admin-icon-group__success-dialog--input {
-        .usa-alert__body {
-            padding-right: 53px !important;
-        }
-    }
-}
-@media (prefers-color-scheme: dark) {
-    .usa-alert--success.usa-alert--slim--dja-admin { 
-        border-left-color: var(--accent);
-        .usa-alert__body {
-            background-color: var(--darkened-bg);
-        }
-
-        .usa-alert__body:before {
-            background-color: var(--body-quiet-color);
-        }
-
-        p {
-            color: var(--body-quiet-color);
-        }
     }
 }
 
 .no-outline-on-click:focus {
     outline: none !important;
 }
-
-svg.no-pointer-events {
-    use {
-        // USWDS has weird interactions with SVGs regarding tooltips,
-        // and other components. In this event, we need to disable pointer interactions.
-        pointer-events: none;
-    }
-}
-
-.dja-important__display-none {
-    display: none !important;
-}

src/registrar/templates/admin/input_with_clipboard.html

@@ -4,20 +4,36 @@
 Template for an input field with a clipboard
 {% endcomment %}
 
+{% if not invisible_input_field %}
 <div class="admin-icon-group">
     {{ field }}
     <button 
-    class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard" 
+    class="usa-button usa-button--unstyled padding-left-1 usa-button__icon usa-button__clipboard" 
+    type="button"
+    >
+        <div class="no-outline-on-click">
+            <svg 
+            class="usa-icon"
+            >
+                <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
+            </svg>
+            <span>Copy</span>
+        </div>
+    </button>
+</div>
+{% else %}
+<div class="admin-icon-group admin-icon-group__clipboard-link">
+    <input aria-hidden="true" class="display-none" value="{{ field.email }}" />
+    <button 
+    class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard text-no-underline" 
     type="button"
     >
-        <div class="usa-tooltip no-outline-on-click"
-        data-position="right"
-        title="Copy email">
         <svg 
-        class="usa-icon no-pointer-events"
+        class="usa-icon" 
         >
             <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
         </svg>
-        </div>
+        <span class="padding-left-05">Copy</span>
     </button>
-</div>
+</div>
+{% endif %}

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

@@ -25,71 +25,11 @@
         {# Email #}
         {% if user.email or user.contact.email %}
             {% if user.contact.email %}
-                {{ user.contact.email }} |
+                {{ user.contact.email }}
-                <div class="admin-icon-group admin-icon-group__clipboard-link">
+                {% include "admin/input_with_clipboard.html" with field=user invisible_input_field=True %}
-                    <input user-id="{{ user.contact.id }}" aria-hidden="true" class="display-none" value="{{ user.contact.email }}" />
-                    <button 
-                    class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard text-no-underline" 
-                    type="button"
-                    >
-                        <svg 
-                        class="usa-icon" 
-                        >
-                            <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
-                        </svg>
-                        Copy
-                    </button>
-                </div>
-                <div
-                id="email-clipboard__success-dialog-{{ user.contact.id }}" 
-                class="admin-icon-group__success-dialog 
-                display-none 
-                usa-alert 
-                usa-alert--success 
-                usa-alert--slim 
-                usa-alert--slim--dja-admin 
-                margin-top-1 
-                margin-bottom-1"
-                >
-                    <div class="usa-alert__body">
-                        <p class="usa-alert__text">
-                            Email copied to clipboard.
-                        </p>
-                    </div>
-                </div>
             {% else %}
-                {{ user.email }} | 
+                {{ user.email }}
-                <div class="admin-icon-group admin-icon-group__clipboard-link">
+                {% include "admin/input_with_clipboard.html" with field=user invisible_input_field=True %}
-                    <input user-id="{{ user.id }}" aria-hidden="true" class="display-none" value="{{ user.email }}" />
-                    <button 
-                    class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard text-no-underline" 
-                    type="button"
-                    >
-                        <svg 
-                        class="usa-icon" 
-                        >
-                            <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
-                        </svg>
-                        Copy
-                    </button>
-                </div>
-                <div
-                id="email-clipboard__success-dialog-{{ user.id }}" 
-                class="admin-icon-group__success-dialog 
-                display-none 
-                usa-alert 
-                usa-alert--success 
-                usa-alert--slim 
-                usa-alert--slim--dja-admin 
-                margin-top-1 
-                margin-bottom-1"
-                >
-                    <div class="usa-alert__body">
-                        <p class="usa-alert__text">
-                            Email copied to clipboard.
-                        </p>
-                    </div>
-                </div>
             {% endif %}
             <br class="admin-icon-group__br">
         {% else %}

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

@@ -11,28 +11,3 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
         {{ block.super }}
     {% endif %}
 {% endblock field_other %}
-
-{% block after_help_text %}
-    {% if field.field.name == "email" %}
-        <div class="flex-container dja-important__display-none">
-            <label aria-label="Clipboard"></label>
-            <div
-            id="email-clipboard__success-dialog" 
-            class="admin-icon-group__success-dialog 
-            admin-icon-group__success-dialog--input
-            display-none 
-            usa-alert
-            usa-alert--success 
-            usa-alert--slim 
-            usa-alert--slim--dja-admin 
-            margin-top-1"
-            >
-                <div class="usa-alert__body">
-                    <p class="usa-alert__text">
-                        Email copied to clipboard.
-                    </p>
-                </div>
-            </div>
-        </div>
-    {% endif %}
-{% endblock %}