Add copy button

src/registrar/admin.py

@@ -640,6 +640,17 @@ class ContactAdmin(ListHeaderAdmin):
     # in autocomplete_fields for user
     ordering = ["first_name", "last_name", "email"]
 
+    fieldsets = [
+        (
+            None,
+            {
+                "fields": ["user", "first_name", "middle_name", "last_name", "title", "email", "phone"]
+            },
+        )
+    ]
+
+    change_form_template = "django/admin/public_contact_change_form.html"
+
     # We name the custom prop 'contact' because linter
     # is not allowing a short_description attr on it
     # This gets around the linter limitation, for now.
@@ -1805,6 +1816,12 @@ class DraftDomainAdmin(ListHeaderAdmin):
     ordering = ["name"]
 
 
+class PublicContactAdmin(ListHeaderAdmin):
+    """Custom PublicContact admin class."""
+
+    change_form_template = "django/admin/public_contact_change_form.html"
+
+
 class VerifiedByStaffAdmin(ListHeaderAdmin):
     list_display = ("email", "requestor", "truncated_notes", "created_at")
     search_fields = ["email"]
@@ -1845,7 +1862,7 @@ admin.site.register(models.DraftDomain, DraftDomainAdmin)
 # do not propagate to registry and logic not applied
 admin.site.register(models.Host, MyHostAdmin)
 admin.site.register(models.Website, WebsiteAdmin)
-admin.site.register(models.PublicContact, AuditedAdmin)
+admin.site.register(models.PublicContact, PublicContactAdmin)
 admin.site.register(models.DomainRequest, DomainRequestAdmin)
 admin.site.register(models.TransitionDomain, TransitionDomainAdmin)
 admin.site.register(models.VerifiedByStaff, VerifiedByStaffAdmin)

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

@@ -299,3 +299,22 @@ input.admin-confirm-button {
         display: contents !important;
     }
 }
+
+.admin-icon-group {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .usa-button__icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+        border: none;
+        background: transparent;
+        padding: 0 1rem;
+        margin: 0;
+    }
+}
+
+

src/registrar/templates/admin/fieldset.html

@@ -0,0 +1,49 @@
+{% load i18n static %}
+
+{% comment %}
+This is copied from Djangos implementation of this template, with added "blocks"
+It is not inherently customizable on its own, so we can modify this instead.
+https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/includes/fieldset.html
+{% endcomment %}
+<fieldset class="module aligned {{ fieldset.classes }}">
+    {% block fieldset_title %}
+        {% if fieldset.name %}<h2>{{ fieldset.name }}</h2>{% endif %}
+    {% endblock fieldset_title %}
+
+    {% block fieldset_description %}
+        {% if fieldset.description %}
+            <div class="description">{{ fieldset.description|safe }}</div>
+        {% endif %}
+    {% endblock fieldset_description %}
+
+    {% block fieldset_lines %}
+        {% for line in fieldset %}
+            <div class="form-row{% if line.fields|length == 1 and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
+                {% if line.fields|length == 1 %}{{ line.errors }}{% else %}<div class="flex-container form-multiline">{% endif %}
+                {% for field in line %}
+                    <div>
+                        {% if not line.fields|length == 1 and not field.is_readonly %}{{ field.errors }}{% endif %}
+                            <div class="flex-container{% if not line.fields|length == 1 %} fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}{% elif field.is_checkbox %} checkbox-row{% endif %}">
+                                {% if field.is_checkbox %}
+                                    {{ field.field }}{{ field.label_tag }}
+                                {% else %}
+                                    {{ field.label_tag }}
+                                    {% if field.is_readonly %}
+                                        <div class="readonly">{{ field.contents }}</div>
+                                    {% else %}
+                                        {{ field.field }}
+                                    {% endif %}
+                                {% endif %}
+                            </div>
+                        {% if field.field.help_text %}
+                            <div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
+                                <div>{{ field.field.help_text|safe }}</div>
+                            </div>
+                        {% endif %}
+                    </div>
+                {% endfor %}
+                {% if not line.fields|length == 1 %}</div>{% endif %}
+            </div>
+        {% endfor %}
+    {% endblock fieldset_lines %}
+</fieldset>

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

@@ -0,0 +1,48 @@
+{% extends "admin/fieldset.html" %}
+{% load i18n static %}
+
+{% comment %}
+This is using a custom implementation fieldset.html (see admin/fieldset.html)
+{% endcomment %}
+{% block fieldset_lines %}
+{% for line in fieldset %}
+    <div class="form-row{% if line.fields|length == 1 and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
+        {% if line.fields|length == 1 %}{{ line.errors }}{% else %}<div class="flex-container form-multiline">{% endif %}
+        {% for field in line %}
+            <div>
+                {% if not line.fields|length == 1 and not field.is_readonly %}{{ field.errors }}{% endif %}
+                    <div class="flex-container{% if not line.fields|length == 1 %} fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}{% elif field.is_checkbox %} checkbox-row{% endif %}">
+                        {% if field.is_checkbox %}
+                            {{ field.field }}{{ field.label_tag }}
+                        {% else %}
+                            {{ field.label_tag }}
+                            {% if field.is_readonly %}
+                                <div class="readonly">{{ field.contents }}</div>
+                            {% elif field.field.name == "email" %}
+                                <div class="admin-icon-group">
+                                    {{ field.field }}
+                                    <button class="usa-button usa-button__icon padding-05" type="button">
+                                        <svg 
+                                        class="usa-icon" 
+                                        >
+                                            <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
+                                        </svg>
+                                    </button>
+                                </div>
+                            {% else %}
+                                {{ field.field }}
+                            {% endif %}
+                        {% endif %}
+                    </div>
+                {% if field.field.help_text %}
+                    <div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
+                        <div>{{ field.field.help_text|safe }}</div>
+                    </div>
+                {% endif %}
+            </div>
+        {% endfor %}
+        {% if not line.fields|length == 1 %}</div>{% endif %}
+    </div>
+{% endfor %}
+
+{% endblock fieldset_lines %}

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

@@ -0,0 +1,8 @@
+{% extends 'admin/change_form.html' %}
+{% load i18n static %}
+
+{% block field_sets %}
+    {% for fieldset in adminform %}
+        {% include "django/admin/includes/contact_fieldset.html" %}
+    {% endfor %}
+{% endblock %}