Add popup

src/registrar/admin.py

@@ -1136,7 +1136,7 @@ class DomainAdmin(ListHeaderAdmin):
             "_get_status": self.do_get_status,
             "_extend_expiration_date": self.do_extend_expiration_date,
         }
-
+        print(f"this is the response! {request.POST}")
         # Check which action button was pressed and call the corresponding function
         for action, function in ACTION_FUNCTIONS.items():
             if action in request.POST:
@@ -1147,7 +1147,7 @@ class DomainAdmin(ListHeaderAdmin):
 
     def do_extend_expiration_date(self, request, obj):
         if not isinstance(obj, Domain):
-            self.message_user(request, "Object is not of type Domain", messages.ERROR)
+            self.message_user(request, "Object is not of type Domain.", messages.ERROR)
             return None
 
         try:
@@ -1156,24 +1156,32 @@ class DomainAdmin(ListHeaderAdmin):
             if err.code:
                 self.message_user(
                     request,
-                    f"Error extending this domain: {err}",
+                    f"Error extending this domain: {err}.",
                     messages.ERROR,
                 )
             elif err.is_connection_error():
                 self.message_user(
                     request,
-                    "Error connecting to the registry",
+                    "Error connecting to the registry.",
                     messages.ERROR,
                 )
             else:
                 self.message_user(request, err, messages.ERROR)
+        except KeyError:
+            # In normal code flow, a keyerror can only occur when
+            # fresh data can't be pulled from the registry, and thus there is no cache.
+            self.message_user(
+                request,
+                "Error connecting to the registry. No expiration date was found.",
+                messages.ERROR,
+            )
         except Exception as err:
             self.message_user(request, err, messages.ERROR)
         else:
             updated_domain = Domain.objects.filter(id=obj).get()
             self.message_user(
                 request,
-                f"Successfully extended expiration date to {updated_domain.registry_expiration_date}",
+                f"Successfully extended expiration date to {updated_domain.registry_expiration_date}.",
             )
         return HttpResponseRedirect(".")
 
@@ -1328,6 +1336,17 @@ class DomainAdmin(ListHeaderAdmin):
             return True
         return super().has_change_permission(request, obj)
 
+    def changelist_view(self, request, extra_context=None):
+        extra_context = extra_context or {}
+        # Create HTML for the modal button
+        modal_button = (
+            '<button type="submit" '
+            'class="usa-button" '
+            'name="_extend_expiration_date">Confirm</button>'
+        )
+        extra_context["modal_button"] = modal_button
+        return super().changelist_view(request, extra_context=extra_context)
+
 
 class DraftDomainAdmin(ListHeaderAdmin):
     """Custom draft domain admin class."""

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

@@ -44,6 +44,29 @@ function openInNewTab(el, removeAttribute = false){
           domainSubmitButton.addEventListener("mouseover", () => openInNewTab(domainFormElement, true));
           domainSubmitButton.addEventListener("mouseout", () => openInNewTab(domainFormElement, false));
         }
+
+        let extendExpirationDateButton = document.getElementById("extend_expiration_date_button")
+        if (extendExpirationDateButton){
+            extendExpirationDateButton.addEventListener("click", () => {
+                form = document.getElementById("domain_form")
+                /*
+                For some reason, Django admin has the propensity to ignore nested
+                inputs and delete nested form objects.
+                The workaround is to manually create an element as so, after the DOM
+                has been generated.
+
+                Its not the most beautiful thing every, but it works.
+                */
+                var input = document.createElement("input");
+                input.type = "hidden";
+                input.name = "_extend_expiration_date";
+                // The value doesn't matter, just needs to be present
+                input.value = "1";
+                // Add the hidden input to the form
+                form.appendChild(input);
+                form.submit();
+            })
+        }
     }
 
     prepareDjangoAdmin();

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

@@ -270,3 +270,9 @@ h1, h2, h3,
         margin: 0!important;
     }
 }
+
+// Button groups in /admin incorrectly have bullets.
+// Remove that!
+.usa-button-group .usa-button-group__item {
+    list-style-type: none;
+}

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

@@ -5,19 +5,57 @@
     <div class="submit-row">
         <input id="manageDomainSubmitButton" type="submit" value="Manage domain" name="_edit_domain">
         <input type="submit" value="Get registry status" name="_get_status">
-        <input type="submit" value="Extend expiration date" name="_extend_expiration_date">
+        {{ modal_button }}
         <a
         href="#toggle-extend-expiration-alert"
         aria-controls="toggle-extend-expiration-alert"
         data-open-modal
-        >Disable DNSSEC</a>
+        >
+            Extend expiration date
+        </a>
         <div
         class="usa-modal"
         id="toggle-extend-expiration-alert"
-        aria-labelledby="Are you sure you want to continue?"
+        aria-labelledby="Are you sure you want to extend this expiration date?"
-        aria-describedby="Your DNSSEC records will be deleted from the registry."
+        aria-describedby="This expiration date will be extended."
         >
-            {% include 'includes/modal.html' with modal_heading="Are you sure you want to disable DNSSEC?" modal_button=modal_button|safe %}
+            <div class="usa-modal__content">
+                <div class="usa-modal__main">
+                    <h2 class="usa-modal__heading" id="modal-1-heading">
+                        Are you sure you want to extend this expiration date?
+                    </h2>
+                    <div class="usa-prose">
+                        <p id="modal-1-description">
+                            This action will extend the expiration date by a year.
+                        </p>
+                    </div>
+            
+                    <div class="usa-modal__footer">
+                        <ul class="usa-button-group">
+                            <li class="usa-button-group__item">
+                                <button
+                                id="extend_expiration_date_button"
+                                type="submit" 
+                                class="usa-button" 
+                                name="_extend_expiration_date"
+                                >
+                                    Confirm
+                                </button>
+                            </li>
+                            <li class="usa-button-group__item">
+                                <button
+                                type="button"
+                                class="usa-button usa-button--unstyled padding-105 text-center"
+                                data-close-modal
+                                >
+                                    Cancel
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            {# {% include 'includes/modal.html' with modal_heading="Are you sure you want to extend this expiration date?" modal_button=modal_button|safe %} #}
         </div>
         <div class="spacer"></div>
         {% if original.state == original.State.READY %}