Fix probe payload filter form

constraints.txt

@@ -30,7 +30,6 @@ decorator==5.1.1
 defusedxml==0.7.1
 Deprecated==1.2.14
 Django==4.2.18
-django-bootstrap-form==3.4
 django-celery-results==2.4.0
 django-filter==24.3
 django-redis==5.4.0

requirements.txt

@@ -8,7 +8,6 @@ celery<6
 django-celery-results==2.4.0
 cryptography                    # MDM, monolith (cloudfront), munki
 defusedxml
-django-bootstrap-form
 django>=4.2.8,<5
 djangorestframework
 djangorestframework-yaml

server/server/settings.py

@@ -69,7 +69,6 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
-    'bootstrapform',
     'rest_framework',
     'django_filters',
     'django_celery_results',

zentral/contrib/monolith/templates/monolith/machine_info.html

@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-{% load bootstrap base_extras inventory_extras %}
+{% load base_extras inventory_extras %}
 
 {% block content %}
 <ol class="breadcrumb">

zentral/contrib/monolith/templates/monolith/pkg_info_name_events.html

@@ -1,5 +1,4 @@
 {% extends 'base.html' %}
-{% load bootstrap inventory_extras %}
 
 {% block content %}
 

zentral/contrib/puppet/templates/puppet/instance_events.html

@@ -1,5 +1,4 @@
 {% extends 'base.html' %}
-{% load bootstrap inventory_extras %}
 
 {% block content %}
 

zentral/core/probes/forms.py

@@ -140,18 +140,22 @@ def get_initial(metadata_filter):
 
 class PayloadFilterItemForm(forms.Form):
     attribute = forms.CharField(
-        widget=forms.TextInput(attrs={'placeholder': 'Name of the payload attribute',
-                                      'size': '33%'}))
+        label="Payload attribute",
+        widget=forms.TextInput(attrs={'size': '40'}),
+    )
     operator = forms.ChoiceField(
         choices=PayloadFilter.operator_choices,
         initial=PayloadFilter.IN
     )
     values = CommaSeparatedQuotedStringField(
-        widget=forms.TextInput(attrs={'placeholder': 'Comma separated value list',
-                                      'size': '33%'}))
+        label="Comma separated list of values",
+        widget=forms.TextInput(attrs={'size': '50'}),
+    )
 
 
 class BasePayloadFilterFormSet(forms.BaseFormSet):
+    deletion_widget = forms.HiddenInput
+
     def get_serialized_filter(self):
         filter_l = []
         for item_cleaned_data in self.cleaned_data:

zentral/core/probes/templates/probes/payload_filter_form.html

@@ -1,5 +1,4 @@
 {% extends 'base.html' %}
-{% load bootstrap %}
 
 {% block content %}
 <ol class="breadcrumb">
@@ -10,37 +9,21 @@
 </ol>
 
 <h2>{% if add_filter %}Add{% else %}Update{% endif %} {{ section }} filter</h2>
-<div class="item-form empty-itemform" style="display:none">
-  <div class="form-group">
-    {{ form.empty_form.attribute.label_tag }}
-    {{ form.empty_form.attribute|bootstrap_inline }}
-    {{ form.empty_form.operator|bootstrap_inline }}
-  </div>
-  <div class="form-group">
-    {{ form.empty_form.values.label_tag }}
-    {{ form.empty_form.values|bootstrap_inline }}
+<div style="display:none">
+  <div class="item-form empty-itemform d-flex align-items-center gap-3">
+    {{ form.empty_form }}
+    <a href="#" class="btn btn-danger delete-filter-item mt-3">
+      <span class="bi bi-trash" aria-hidden="true"></span>
+    </a>
   </div>
-  <input type="hidden" id="id_form-__prefix__-DELETE" name="form-__prefix__-DELETE">
-  <a href="#" class="btn btn-danger delete-filter-item">
-    <span class="bi bi-trash" aria-hidden="true"></span>
-  </a>
 </div>
 <form method="POST" class="form form-inline">{% csrf_token %}
   {{ form.management_form }}
   <div id="item-forms">
     {% for itemform in form %}
-    <div class="item-form">
-      <div class="form-group">
-        {{ itemform.attribute.label_tag }}
-        {{ itemform.attribute|bootstrap_inline }}
-        {{ itemform.operator|bootstrap_inline }}
-      </div>
-      <div class="form-group">
-        {{ itemform.values.label_tag }}
-        {{ itemform.values|bootstrap_inline }}
-      </div>
-      <input type="hidden" id="id_{{ itemform.prefix }}-DELETE" name="{{ itemform.prefix }}-DELETE">
-      <a href="#" class="btn btn-danger delete-filter-item">
+    <div class="item-form d-flex align-items-center gap-3">
+      {{ itemform }}
+      <a href="#" class="btn btn-danger delete-filter-item mt-3">
         <span class="bi bi-trash" aria-hidden="true"></span>
       </a>
     </div>
@@ -90,8 +73,9 @@ <h2>{% if add_filter %}Add{% else %}Update{% endif %} {{ section }} filter</h2>
   }
 
   function delete_filter_item(btn) {
+    console.log("DELETE", btn);
     btn.prev().val(1);
-    btn.parent().hide();
+    btn.parent().hide().removeClass("d-flex");
     toggle_delete_buttons();
   }