Add js logic

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

@@ -146,60 +146,23 @@ function openInNewTab(el, removeAttribute = false){
     if (investigatorSelect && assignSelfButton) {
         assignSelfButton.addEventListener('click', function() {
             let currentUserId = this.getAttribute("data-user-id");
-            let select2Container = investigatorSelect.nextElementSibling.querySelector(".select2-selection");
+            let currentUserName = this.getAttribute("data-user-name");
-
+            if (currentUserId && currentUserName){
-            // Log the Select2 container to verify it's the correct element
+                // Logic borrowed from here:
-            console.log(select2Container);
+                // https://select2.org/programmatic-control/add-select-clear-items#create-if-not-exists
-
+                let selector = django.jQuery(investigatorSelect)
-            // Check if the Select2 container exists and trigger a click
+                // Set the value, creating a new option if necessary
-            if (select2Container) {
+                if (selector.find(`option[value='${currentUserId}']`).length) {
-                // Create and dispatch a mouse event to mimic user interaction
+                    selector.val(currentUserId).trigger("change");
-                var event = new MouseEvent('mousedown', {
+                } else { 
-                    'view': window,
+                    // Create a DOM Option and pre-select by default
-                    'bubbles': true,
+                    let currentUser = new Option(currentUserName, currentUserId, true, true);
-                    'cancelable': true
+                    // Append it to the select
-                });
+                    selector.append(currentUser).trigger("change");
-                select2Container.dispatchEvent(event);
+                } 
+            }else {
+                console.error("Could not assign current user.")
             }
-
-            // Wait for the dropdown to open and the search field to be visible
-            let searchField = document.querySelector(".select2-search__field");
-            if (searchField) {
-                searchField.value = "Zander Adkinson"; // Set the value you want to search for
-
-                // Trigger input event to filter results based on the entered value
-                var inputEvent = new Event('input', {
-                    'bubbles': true,
-                    'cancelable': true
-                });
-                searchField.dispatchEvent(inputEvent);
-            }
-
-            let observer = new MutationObserver(function(mutations) {
-                mutations.forEach(mutation => {
-                    if (mutation.addedNodes.length) {
-                        let options = document.querySelectorAll("#select2-id_investigator-results .select2-results__option");
-                        options.forEach(option => {
-                            if (option.innerText.trim() === "Zander Adkinson zander.adkinson@ecstech.com") {
-                                option.dispatchEvent(new MouseEvent('mouseup', { 'bubbles': true, 'cancelable': true }));
-                                console.log("Option with the desired text has been selected.");
-                                observer.disconnect(); // Stop observing after the desired action
-                            }
-                        });
-                    }
-                });
-            });
-
-            let resultsContainer = document.querySelector("#select2-id_investigator-results");
-            if (resultsContainer) {
-                observer.observe(resultsContainer, {
-                    childList: true,
-                    subtree: true
-                });
-            }
-    
-
-            // options are here: select2-results__options
         });
     }
 })();

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

@@ -773,3 +773,7 @@ div.dja__model-description{
 .module caption, .inline-group h2 {
     text-transform: capitalize;
 }
+
+.usa-button--dja-link-color {
+    color: var(--link-fg);
+}

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

@@ -177,7 +177,11 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
     {% elif field.field.name == "investigator" %}
         <div class="flex-container">
             <label aria-label="Assign yourself as the investigator"></label>
-            <button id="investigator__assign_self" data-user-id="{{ request.user.id }}" type="button" class="usa-button usa-button--unstyled margin-top-2 margin-bottom-1 margin-left-1 usa-button__small-text text-no-underline">
+            <button id="investigator__assign_self" 
+            data-user-name="{{ request.user }}" 
+            data-user-id="{{ request.user.id }}" 
+            type="button" 
+            class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-top-2 margin-bottom-1 margin-left-1">
                 <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
                     <use xlink:href="/public/img/sprite.svg#person"></use>
                 </svg>