Add links to urls

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

@@ -170,6 +170,50 @@ function checkToListThenInitWidget(toListId, attempts) {
     }
 }
 
+(function() {
+    function addUrlsToOtherContacts() {
+        document.addEventListener('DOMContentLoaded', function() {
+            // Select all table rows that have a data-contact-id attribute
+            let contactRows = document.querySelectorAll("tr[data-contact-url]");
+            
+            if (contactRows){
+                // Add a click event listener to each row
+                let index = 1;
+                contactRows.forEach(function(row) {
+                    let otherContactUrl = row.getAttribute("data-contact-url");
+                    if (otherContactUrl){
+                        let otherContact = document.querySelector(`.other-contact__${index}`);
+                        if (otherContact) {
+                            otherContact.href = otherContactUrl;
+                        }
+                    }
+                    index++;
+                });
+            }
+        });
+    }
+
+    addUrlsToOtherContacts()
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Select all table rows that have a data-contact-id attribute
+    let contactRows = document.querySelectorAll("tr[data-contact-url]");
+
+    // Add a click event listener to each row
+    index = 1
+    contactRows.forEach(function(row) {
+        let otherContactUrl = row.getAttribute("data-contact-url");
+        if (otherContactUrl){
+            let otherContact = document.querySelector(`.other-contact__${index}`)
+            if (otherContact) {
+                otherContact.href = otherContactUrl
+            }
+        }
+        index++
+    });
+});
+
 // Initialize the widget:
 //  add related buttons to the widget for edit, delete and view
 //  add event listeners on the from list, the to list, and selector buttons which either enable or disable the related buttons

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

@@ -330,3 +330,35 @@ details.dja-detail-table {
         }
     }
 }
+
+table.dja-user-detail-table {
+    margin-left: 160px;
+    tr {
+        background-color: var(--body-bg);
+    }
+}
+
+.admin-icon-group {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .usa-button__icon {
+        position: absolute;
+        right: 0;
+        height: 100%;
+    }
+
+    input {
+        // Allow for padding around the copy button
+        padding-right: 35px;
+        // Match the height of other inputs
+        min-height: 2.25rem;
+    }
+
+    .no-outline-on-click:focus {
+        outline: none !important;
+    }
+}
+
+

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

@@ -1,28 +1,18 @@
 {% load i18n static %}
 
-
-<details class="margin-top-1 dja-detail-table" {% if start_opened %}open{% endif %}>
-    <summary class="padding-1 dja-details-summary">Details</summary>
-    <div class="grid-container padding-left-0 padding-right-0 dja-details-contents">
-        {% if user.title or user.email or user.phone %}
-        <table>
-            <tbody>
-                <tr>
-                    <th scope="row">Title</th>
-                    <td>{{ user.title }}</td>
-                </tr>
-                <tr>
-                    <th scope="row">Email</th>
-                    <td>{{ user.email }}</td>
-                </tr>
-                <tr>
-                    <th scope="row">Phone</th>
-                    <td>{{ user.phone }}</td>
-                </tr>
-            </tbody>
-        </table>
-        {% else %}
-        <div class="padding-1">No details found</div>
-        {% endif %}
-    </div>
-</details>
+<table class="dja-user-detail-table">
+    <tbody>
+        <tr>
+            <th class="padding-left-0" scope="row">Title</th>
+            <td>{{ user.title }}</td>
+        </tr>
+        <tr>
+            <th class="padding-left-0" scope="row">Email</th>
+            <td>{{ user.email }}</td>
+        </tr>
+        <tr>
+            <th class="padding-left-0" scope="row">Phone</th>
+            <td>{{ user.phone }}</td>
+        </tr>
+    </tbody>
+</table>

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

@@ -1,5 +1,5 @@
 {% extends "admin/fieldset.html" %}
-
+{% load static url_helpers %}
 {% comment %}
 This is using a custom implementation fieldset.html (see admin/fieldset.html)
 {% endcomment %}
@@ -16,18 +16,26 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                         {% else %}
                             {{ field.label_tag }}
                             {% if field.is_readonly %}
-                                <div class="readonly">{{ field.contents }}</div>
+                                {% if field.field.name == "other_contacts" %}
+                                    <div class="readonly">
+                                        {% for contact in field.contents|split:", " %}
+                                            <a href="#" class="other-contact__{{forloop.counter}}">{{ contact }}</a>{% if not forloop.last %}, {% endif %}
+                                        {% endfor %}
+                                    </div>
+                                {% else %}
+                                    <div class="readonly">{{ field.contents }}</div>
+                                {% endif %}
                             {% else %}
                                 {{ field.field }}
                             {% endif %}
                         {% endif %}
                     </div>
                 {% if field.field.name == "creator" %}
-                    {% include "django/admin/includes/domain_request_detail_table.html" with user=original.creator start_opened=True %}
+                    {% include "django/admin/includes/domain_request_detail_table.html" with user=original.creator %}
                 {% elif field.field.name == "submitter" %}
-                    {% include "django/admin/includes/domain_request_detail_table.html" with user=original.submitter start_opened=True %}
+                    {% include "django/admin/includes/domain_request_detail_table.html" with user=original.submitter %}
                 {% elif field.field.name == "authorizing_official" %}
-                    {% include "django/admin/includes/domain_request_detail_table.html" with user=original.authorizing_official start_opened=True %}
+                    {% include "django/admin/includes/domain_request_detail_table.html" with user=original.authorizing_official %}
                 {% elif field.field.name == "other_contacts" %}
                     <details class="margin-top-1 dja-detail-table">
                         <summary class="padding-1 dja-details-summary">Details</summary>
@@ -35,7 +43,11 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                             <table>
                                 <tbody>
                                     {% for contact in original.other_contacts.all %}
-                                    <tr>
+                                    {% comment %}
+                                    Since we can't get the id from field, we can embed this information here.
+                                    Then we can link these two fields using javascript.
+                                    {% endcomment %}
+                                    <tr data-contact-id="{{ contact.id }}" data-contact-url="{% url 'admin:registrar_contact_change' contact.id %}">
                                         <th scope="row">{{contact.first_name}} {{contact.last_name}}</th>
                                         <td>{{ contact.title }}</td>
                                         <td>{{ contact.email }}</td>

src/registrar/templatetags/url_helpers.py

@@ -26,6 +26,13 @@ def endswith(text, ends):
     return False
 
 
+@register.filter("split")
+def split_string(value, key):
+    """
+    Splits a given string
+    """
+    return value.split(key)
+
 @register.simple_tag
 def public_site_url(url_path):
     """Make a full URL for this path at our public site.