Make senior official readonly

src/registrar/admin.py

@@ -2982,6 +2982,8 @@ class PortfolioAdmin(ListHeaderAdmin):
         "display_admins",
         "display_members",
         "creator",
+        # As of now this means that only federal agency can update this, but this will change.
+        "senior_official",
     ]
 
     analyst_readonly_fields = [
@@ -3208,6 +3210,11 @@ class PortfolioAdmin(ListHeaderAdmin):
         is_federal = obj.organization_type == DomainRequest.OrganizationChoices.FEDERAL
         if is_federal and obj.organization_name is None:
             obj.organization_name = obj.federal_agency.agency
+        
+        # Remove this line when senior_official is no longer readonly in /admin.
+        if obj.federal_agency and obj.federal_agency.so_federal_agency.exists():
+            obj.senior_official = obj.federal_agency.so_federal_agency.first()
+
         super().save_model(request, obj, form, change)
 
 

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

@@ -937,13 +937,6 @@ function initializeWidgetOnList(list, parentId) {
             }
         }
 
-        // Get the associated senior official with this federal agency
-        let $seniorOfficial = django.jQuery("#id_senior_official");
-        if (!$seniorOfficial) {
-            console.log("Could not find the senior official field");
-            return;
-        }
-
         // Determine if any changes are necessary to the display of portfolio type or federal type
         // based on changes to the Federal Agency
         let federalPortfolioApi = document.getElementById("federal_and_portfolio_types_from_agency_json_url").value;
@@ -965,6 +958,7 @@ function initializeWidgetOnList(list, parentId) {
         // If we can update the contact information, it'll be shown again.
         hideElement(contactList.parentElement);
         
+        let $seniorOfficial = django.jQuery("#id_senior_official");
         let seniorOfficialApi = document.getElementById("senior_official_from_agency_json_url").value;
         fetch(`${seniorOfficialApi}?agency_name=${selectedText}`)
         .then(response => {
@@ -987,27 +981,41 @@ function initializeWidgetOnList(list, parentId) {
             updateContactInfo(data);
             showElement(contactList.parentElement);
             
+            // Get the associated senior official with this federal agency
             let seniorOfficialId = data.id;
             let seniorOfficialName = [data.first_name, data.last_name].join(" ");
+            if (!$seniorOfficial) {
+                // If the senior official is a dropdown field, edit that
+                updateSeniorOfficialDropdown($seniorOfficial, seniorOfficialId, seniorOfficialName);
+            }else {
+                let readonlySeniorOfficial = document.querySelector(".field-senior_official .readonly");
+                if (readonlySeniorOfficial) {
+                    let seniorOfficialLink = `<a href=/admin/registrar/seniorofficial/${seniorOfficialId}/change/>${seniorOfficialName}</a>`
+                    readonlySeniorOfficial.innerHTML = seniorOfficialName ? seniorOfficialLink : "-";
+                }
+            }
+        })
+        .catch(error => console.error("Error fetching senior official: ", error));
+
+    }
+
+    function updateSeniorOfficialDropdown(dropdown, seniorOfficialId, seniorOfficialName) {
         if (!seniorOfficialId || !seniorOfficialName || !seniorOfficialName.trim()){
             // Clear the field if the SO doesn't exist
-                $seniorOfficial.val("").trigger("change");
+            dropdown.val("").trigger("change");
             return;
         }
 
         // Add the senior official to the dropdown.
         // This format supports select2 - if we decide to convert this field in the future.
-            if ($seniorOfficial.find(`option[value='${seniorOfficialId}']`).length) {
+        if (dropdown.find(`option[value='${seniorOfficialId}']`).length) {
             // Select the value that is associated with the current Senior Official.
-                $seniorOfficial.val(seniorOfficialId).trigger("change");
+            dropdown.val(seniorOfficialId).trigger("change");
         } else { 
             // Create a DOM Option that matches the desired Senior Official. Then append it and select it.
             let userOption = new Option(seniorOfficialName, seniorOfficialId, true, true);
-                $seniorOfficial.append(userOption).trigger("change");
+            dropdown.append(userOption).trigger("change");
         }
-        })
-        .catch(error => console.error("Error fetching senior official: ", error));
-
     }
 
     function handleStateTerritoryChange(stateTerritory, urbanizationField) {

src/registrar/migrations/0130_alter_portfolio_federal_agency_and_more.py

@@ -1,4 +1,4 @@
-# Generated by Django 4.2.10 on 2024-09-25 17:59
+# Generated by Django 4.2.10 on 2024-09-26 15:09
 
 from django.db import migrations, models
 import django.db.models.deletion
@@ -45,4 +45,15 @@ class Migration(migrations.Migration):
                 null=True,
             ),
         ),
+        migrations.AlterField(
+            model_name="portfolio",
+            name="senior_official",
+            field=models.ForeignKey(
+                blank=True,
+                null=True,
+                on_delete=django.db.models.deletion.PROTECT,
+                related_name="portfolios",
+                to="registrar.seniorofficial",
+            ),
+        ),
     ]

src/registrar/models/portfolio.py

@@ -61,6 +61,7 @@ class Portfolio(TimeStampedModel):
         unique=False,
         null=True,
         blank=True,
+        related_name="portfolios",
     )
 
     address_line1 = models.CharField(