Merge pull request #8247 from netbox-community/8231-htmx-confirmation-dialogs

Closes #8231: Use HTMX for object deletion confirmations

netbox/ipam/views.py

@@ -529,7 +529,6 @@ class PrefixEditView(generic.ObjectEditView):
 
 class PrefixDeleteView(generic.ObjectDeleteView):
     queryset = Prefix.objects.all()
-    template_name = 'ipam/prefix_delete.html'
 
 
 class PrefixBulkImportView(generic.BulkImportView):

netbox/netbox/views/generic.py

@@ -10,6 +10,7 @@ from django.db.models import ManyToManyField, ProtectedError
 from django.forms import Form, ModelMultipleChoiceField, MultipleHiddenInput, Textarea
 from django.http import HttpResponse
 from django.shortcuts import get_object_or_404, redirect, render
+from django.urls import reverse
 from django.utils.html import escape
 from django.utils.http import is_safe_url
 from django.utils.safestring import mark_safe
@@ -430,10 +431,21 @@ class ObjectDeleteView(GetReturnURLMixin, ObjectPermissionRequiredMixin, View):
         obj = self.get_object(kwargs)
         form = ConfirmationForm(initial=request.GET)
 
+        # If this is an HTMX request, return only the rendered deletion form as modal content
+        if is_htmx(request):
+            viewname = f'{self.queryset.model._meta.app_label}:{self.queryset.model._meta.model_name}_delete'
+            form_url = reverse(viewname, kwargs={'pk': obj.pk})
+            return render(request, 'htmx/delete_form.html', {
+                'object': obj,
+                'object_type': self.queryset.model._meta.verbose_name,
+                'form': form,
+                'form_url': form_url,
+            })
+
         return render(request, self.template_name, {
-            'obj': obj,
+            'object': obj,
+            'object_type': self.queryset.model._meta.verbose_name,
             'form': form,
-            'obj_type': self.queryset.model._meta.verbose_name,
             'return_url': self.get_return_url(request, obj),
         })
 
@@ -466,9 +478,9 @@ class ObjectDeleteView(GetReturnURLMixin, ObjectPermissionRequiredMixin, View):
             logger.debug("Form validation failed")
 
         return render(request, self.template_name, {
-            'obj': obj,
+            'object': obj,
+            'object_type': self.queryset.model._meta.verbose_name,
             'form': form,
-            'obj_type': self.queryset.model._meta.verbose_name,
             'return_url': self.get_return_url(request, obj),
         })
 

netbox/templates/generic/object.html

@@ -100,4 +100,8 @@
   <div class="tab-content">
     {% block content %}{% endblock %}
   </div>
-{% endblock %}
+{% endblock content-wrapper %}
+
+{% block modals %}
+  {% include 'inc/htmx_modal.html' %}
+{% endblock modals %}

netbox/templates/generic/object_delete.html

@@ -1,9 +1,16 @@
-{% extends 'generic/confirmation_form.html' %}
+{% extends 'base/layout.html' %}
 {% load form_helpers %}
 
-{% block title %}Delete {{ obj_type }}?{% endblock %}
+{% block title %}Delete {{ object_type }}?{% endblock %}
 
-{% block message %}
-  <p>Are you sure you want to <strong class="text-danger">delete</strong> {{ obj_type }} <strong>{{ obj }}</strong>?</p>
-  {% block message_extra %}{% endblock %}
-{% endblock message %}
+{% block header %}{% endblock %}
+
+{% block content %}
+  <div class="modal" tabindex="-1" style="display: block; position: static">
+    <div class="modal-dialog">
+      <div class="modal-content" >
+        {% include 'htmx/delete_form.html' %}
+      </div>
+    </div>
+  </div>
+{% endblock %}

netbox/templates/htmx/delete_form.html

@@ -0,0 +1,20 @@
+{% load form_helpers %}
+
+<form action="{{ form_url }}" method="post">
+  {% csrf_token %}
+  <div class="modal-header">
+    <h5 class="modal-title">Confirm Deletion</h5>
+  </div>
+  <div class="modal-body">
+    <p>Are you sure you want to <strong class="text-danger">delete</strong> {{ object_type }} <strong>{{ object }}</strong>?</p>
+    {% render_form form %}
+  </div>
+  <div class="modal-footer">
+    {% if return_url %}
+      <a href="{{ return_url }}" class="btn btn-outline-secondary">Cancel</a>
+    {% else %}
+      <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+    {% endif %}
+    <button type="submit" class="btn btn-danger">Delete</button>
+  </div>
+</form>

netbox/templates/inc/htmx_modal.html

@@ -0,0 +1,7 @@
+<div class="modal fade" id="htmx-modal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content" id="htmx-modal-content">
+      {# Dynamic content goes here #}
+    </div>
+  </div>
+</div>

netbox/templates/ipam/prefix_delete.html

@@ -1,5 +0,0 @@
-{% extends 'generic/object_delete.html' %}
-
-{% block message_extra %}
-    <p>Note: This will <strong>not</strong> delete any child prefixes or IP addresses.</p>
-{% endblock %}

netbox/utilities/templates/buttons/delete.html

@@ -1,3 +1,9 @@
-<a href="{{ url }}" class="btn btn-sm btn-danger" role="button">
-    <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>&nbsp;Delete
+<a href="#"
+  hx-get="{{ url }}"
+  hx-target="#htmx-modal-content"
+  class="btn btn-sm btn-danger"
+  data-bs-toggle="modal"
+  data-bs-target="#htmx-modal"
+>
+  <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>&nbsp;Delete
 </a>