Add dialog

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

@@ -163,9 +163,21 @@ function openInNewTab(el, removeAttribute = false){
                     buttonIcon.setAttribute('xlink:href', baseHref + '#check');
 
                     // Find the nearest .admin-icon-group__success-dialog and update its classes
+                    let parentFlexContainer = null
                     let brElement = null
-                    let successDialog = document.querySelector(`#email-clipboard__success-dialog-${userId}`);
+                    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
@@ -190,6 +202,10 @@ function openInNewTab(el, removeAttribute = false){
                         if (brElement) {
                             brElement.classList.remove("display-none");
                         }
+
+                        if (parentFlexContainer) {
+                            parentFlexContainer.classList.add("dja-important__display-none");
+                        }
                     }, 1500);
 
                 }

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

@@ -590,6 +590,12 @@ address.dja-address-contact-list {
     .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 { 
@@ -619,3 +625,7 @@ svg.no-pointer-events {
         pointer-events: none;
     }
 }
+
+.dja-important__display-none {
+    display: none !important;
+}

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

@@ -27,7 +27,7 @@
             {% if user.contact.email %}
                 {{ user.contact.email }} |
                 <div class="admin-icon-group admin-icon-group__clipboard-link">
-                    <input aria-hidden="true" class="display-none" value="{{ user.email }}" />
+                    <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"
@@ -40,6 +40,23 @@
                         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 }} | 
                 <div class="admin-icon-group admin-icon-group__clipboard-link">

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

@@ -11,3 +11,28 @@ 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 %}