POC (WIP) - convert core bulk action links to pure HTML approach

lb- · Mar 17, 2024 · d9950d3 · d9950d3
1 parent dae51e1
commit d9950d3
Show file tree

Hide file tree

Showing 13 changed files with 85 additions and 73 deletions.
diff --git a/client/src/includes/bulk-actions.js b/client/src/includes/bulk-actions.js
@@ -5,7 +5,6 @@ import { range } from '../utils/range';
 const BULK_ACTION_PAGE_CHECKBOX_INPUT = '[data-bulk-action-checkbox]';
 const BULK_ACTION_SELECT_ALL_CHECKBOX =
   '[data-bulk-action-select-all-checkbox]';
-const BULK_ACTIONS_CHECKBOX_PARENT = '[data-bulk-action-parent-id]';
 const BULK_ACTION_FOOTER = '[data-bulk-action-footer]';
 const BULK_ACTION_NUM_OBJECTS = '[data-bulk-action-num-objects]';
 const BULK_ACTION_NUM_OBJECTS_IN_LISTING =
@@ -171,28 +170,6 @@ function onClickSelectAllInListing(e) {
     .classList.add('w-hidden');
 }
 
-/**
- * Event listener for bulk actions which appends selected ids to the corresponding action url
- */
-function onClickActionButton(e) {
-  e.preventDefault();
-  const url = e.target.getAttribute('href');
-  const urlParams = new URLSearchParams(window.location.search);
-  if (checkedState.selectAllInListing) {
-    urlParams.append('id', 'all');
-    const parentElement = document.querySelector(BULK_ACTIONS_CHECKBOX_PARENT);
-    if (parentElement) {
-      const parentPageId = parentElement.dataset.bulkActionParentId;
-      urlParams.append('childOf', parentPageId);
-    }
-  } else {
-    checkedState.checkedObjects.forEach((objectId) => {
-      urlParams.append('id', objectId);
-    });
-  }
-  window.location.href = `${url}&${urlParams.toString()}`;
-}
-
 /**
  * Adds all event listeners
  */
@@ -214,17 +191,6 @@ function addBulkActionListeners() {
   document.querySelectorAll(BULK_ACTION_SELECT_ALL_CHECKBOX).forEach((el) => {
     el.addEventListener('change', onSelectAllChange);
   });
-  document
-    .querySelectorAll(`${BULK_ACTION_FOOTER} [data-bulk-action-button]`)
-    .forEach((elem) => elem.addEventListener('click', onClickActionButton));
-  document.addEventListener('w-dropdown:shown', () => {
-    document
-      .querySelectorAll(`${BULK_ACTION_FOOTER} [data-bulk-action-button]`)
-      .forEach((elem) => {
-        elem.removeEventListener('click', onClickActionButton);
-        elem.addEventListener('click', onClickActionButton);
-      });
-  });
   const selectAllInListingText = document.querySelector(
     BULK_ACTION_NUM_OBJECTS_IN_LISTING,
   );

diff --git a/wagtail/admin/templates/wagtailadmin/bulk_actions/footer.html b/wagtail/admin/templates/wagtailadmin/bulk_actions/footer.html
@@ -3,10 +3,12 @@
     <h2 id="bulk-actions-heading" class="w-sr-only">{% trans "Bulk actions" %}</h2>
     <div class="footer__container">
         {% include 'wagtailadmin/bulk_actions/select_all_checkbox_input.html' with parent=parent %}
-        <ul class="bulk-actions-buttons">{% bulk_action_choices app_label model_name %}</ul>
+        <ul class="bulk-actions-buttons">{% bulk_action_choices app_label=app_label model_name=model_name form=form %}</ul>
         <span data-bulk-action-num-objects class="num-objects"></span>
         {% if objects.has_other_pages %}
+            {% comment %} <input type="checkbox" /> WIP {% endcomment %}
             <button type="button" data-bulk-action-num-objects-in-listing class="num-objects-in-listing w-hidden">{{ select_all_obj_text }}</button>
         {% endif %}
+        {% if next_url %}<input form="listing-results" type="hidden" name="next" value="{{ next_url }}">{% endif %}
     </div>
 </section>
diff --git a/wagtail/admin/templates/wagtailadmin/bulk_actions/listing_checkbox_cell.html b/wagtail/admin/templates/wagtailadmin/bulk_actions/listing_checkbox_cell.html
@@ -12,10 +12,15 @@
 {% endcomment %}
 
 <td class="bulk-action-checkbox-cell">
-    <input type="checkbox"
-           {% if obj_type == 'page' %}data-page-status="{% if instance.live %}live{% else %}draft{% endif %}"{% endif %}
-           data-object-id="{{ instance.pk|unlocalize|admin_urlquote }}" data-bulk-action-checkbox class="bulk-action-checkbox"
-           aria-label="{% trans "Select" %}"
-           {% if aria_describedby %}aria-describedby="{{ aria_describedby }}"{% endif %}
+    <input
+        type="checkbox"
+        class="bulk-action-checkbox"
+        aria-label="{% trans "Select" %}"
+        {% if aria_describedby %}aria-describedby="{{ aria_describedby }}"{% endif %}
+        name="id"
+        value="{{ instance.pk|unlocalize|admin_urlquote }}"
+        data-bulk-action-checkbox
+        data-object-id="{{ instance.pk|unlocalize|admin_urlquote }}"
+        {% if obj_type == 'page' %}data-page-status="{% if instance.live %}live{% else %}draft{% endif %}"{% endif %}
     />
 </td>
diff --git a/wagtail/admin/templates/wagtailadmin/generic/listing.html b/wagtail/admin/templates/wagtailadmin/generic/listing.html
@@ -14,13 +14,13 @@
 
     {% block listing %}
         <div class="{% if filters and not breadcrumbs_items %}filterable{% endif %}">
-            <div id="listing-results">
+            <form id="listing-results">
                 {% comment %}
                     This div will be replaced on AJAX refreshes.
                     Do not add page furniture here unless you intend it to disappear on AJAX refresh
                 {% endcomment %}
                 {% include view.results_template_name|default:"wagtailadmin/generic/listing_results.html" %}
-            </div>
+            </form>
             {% if filters and not breadcrumbs_items %}
                 {% include "wagtailadmin/shared/filters.html" %}
             {% endif %}

diff --git a/wagtail/admin/templates/wagtailadmin/pages/index.html b/wagtail/admin/templates/wagtailadmin/pages/index.html
@@ -6,16 +6,16 @@
 {% endblock %}
 
 {% block listing %}
-    <div id="listing-results">
+    <form id="listing-results">
         {% comment %}
             This div will be replaced on AJAX refreshes.
             Do not add page furniture here unless you intend it to disappear on AJAX refresh
         {% endcomment %}
         {% include 'wagtailadmin/pages/index_results.html' %}
-    </div>
+    </form>
 {% endblock %}
 {% block bulk_actions %}
-    {% include 'wagtailadmin/bulk_actions/footer.html' with select_all_obj_text=_("Select all pages in listing") app_label='wagtailcore' model_name='page' objects=page_obj %}
+    {% bulk_action_footer app_label="wagtailcore" model_name="page" objects=page_obj select_all_obj_text=_("Select all pages in listing") %}
 {% endblock %}
 
 {% block extra_js %}

diff --git a/wagtail/admin/templates/wagtailadmin/pages/search.html b/wagtail/admin/templates/wagtailadmin/pages/search.html
@@ -15,6 +15,5 @@
     <div id="page-results">
         {% include "wagtailadmin/pages/search_results.html" %}
     </div>
-    {% trans "Select all pages in listing" as select_all_text %}
-    {% include 'wagtailadmin/bulk_actions/footer.html' with app_label='wagtailcore' model_name='page' objects=page_obj select_all_obj_text=select_all_text %}
+    {% bulk_action_footer app_label="wagtailcore" model_name="page" objects=page_obj form="page-results" select_all_obj_text=_("Select all pages in listing") %}
 {% endblock %}
diff --git a/wagtail/admin/templates/wagtailadmin/shared/button.html b/wagtail/admin/templates/wagtailadmin/shared/button.html
@@ -1,7 +1,12 @@
 {% load wagtailadmin_tags %}
-<a href="{{ button.url }}" class="{{ button.classname }}" {{ button.base_attrs_string }}>
+{% fragment as content %}
     {% if button.icon_name %}
         {% icon name=button.icon_name %}
     {% endif %}
     {{ button.label }}
-</a>
+{% endfragment %}
+{% if as_link %}
+    <a href="{{ button.url }}" class="{{ button.classname }}" {{ button.base_attrs_string }}>{{ content }}</a>
+{% else %}
+    <button formaction="{{ button.url }}" class="{{ button.classname }}" {{ button.base_attrs_string }}>{{ content }}</button>
+{% endif %}
diff --git a/wagtail/admin/templatetags/wagtailadmin_tags.py b/wagtail/admin/templatetags/wagtailadmin_tags.py
@@ -21,7 +21,6 @@
 from django.utils import timezone
 from django.utils.encoding import force_str
 from django.utils.html import avoid_wrapping, json_script
-from django.utils.http import urlencode
 from django.utils.safestring import mark_safe
 from django.utils.timesince import timesince
 from django.utils.translation import gettext_lazy as _
@@ -526,8 +525,41 @@ def page_header_buttons(context, page, user, view_name):
     }
 
 
-@register.inclusion_tag("wagtailadmin/shared/buttons.html", takes_context=True)
-def bulk_action_choices(context, app_label, model_name):
+class ActualPageListingButton(PageListingButton):
+    as_link = False
+
+
+class ActualButton(Button):
+    as_link = False
+
+
+@register.inclusion_tag("wagtailadmin/bulk_actions/footer.html", takes_context=True)
+def bulk_action_footer(
+    context,
+    app_label,
+    model_name,
+    objects,
+    form="listing-results",
+    parent=None,
+    select_all_obj_text=None,
+):
+    next_url = get_valid_next_url_from_request(context["request"])
+    if not next_url:
+        next_url = context["request"].path
+
+    return {
+        "app_label": app_label,
+        "model_name": model_name,
+        "objects": objects,
+        "form": form,
+        "next_url": next_url,
+        "parent": parent,
+        "select_all_obj_text": select_all_obj_text,
+    }
+
+
+@register.inclusion_tag("wagtailadmin/shared/buttons.html")
+def bulk_action_choices(app_label, model_name, form):
     bulk_actions_list = list(
         bulk_action_registry.get_bulk_actions_for_model(app_label, model_name)
     )
@@ -536,19 +568,16 @@ def bulk_action_choices(context, app_label, model_name):
     bulk_action_more_list = bulk_actions_list[4:]
     bulk_actions_list = bulk_actions_list[:4]
 
-    next_url = get_valid_next_url_from_request(context["request"])
-    if not next_url:
-        next_url = context["request"].path
-
     bulk_action_buttons = [
         PageListingButton(
             action.display_name,
             reverse(
                 "wagtail_bulk_action", args=[app_label, model_name, action.action_type]
-            )
-            + "?"
-            + urlencode({"next": next_url}),
-            attrs={"aria-label": action.aria_label, "data-bulk-action-button": ""},
+            ),
+            attrs={
+                "aria-label": action.aria_label,
+                "form": form,
+            },
             priority=action.action_priority,
             classname=" ".join(action.classes | {"bulk-action-btn"}),
         )
@@ -561,17 +590,15 @@ def bulk_action_choices(context, app_label, model_name):
             attrs={"title": _("More bulk actions")},
             classname="button button-secondary button-small",
             buttons=[
-                Button(
+                ActualButton(
                     label=action.display_name,
                     url=reverse(
                         "wagtail_bulk_action",
                         args=[app_label, model_name, action.action_type],
-                    )
-                    + "?"
-                    + urlencode({"next": next_url}),
+                    ),
                     attrs={
                         "aria-label": action.aria_label,
-                        "data-bulk-action-button": "",
+                        "form": form,
                     },
                     priority=action.action_priority,
                 )

diff --git a/wagtail/admin/widgets/button.py b/wagtail/admin/widgets/button.py
@@ -17,10 +17,18 @@ class Button(Component):
     label = ""
     icon_name = None
     url = None
+    as_link = False
     attrs = {}
 
     def __init__(
-        self, label="", url=None, classname="", icon_name=None, attrs={}, priority=1000
+        self,
+        label="",
+        url=None,
+        classname="",
+        icon_name=None,
+        attrs={},
+        priority=1000,
+        as_link=True,  # Intentional default to true to support backwards compatibility
     ):
         if label:
             self.label = label
@@ -36,6 +44,9 @@ def __init__(
         self.attrs = self.attrs.copy()
         self.attrs.update(attrs)
 
+        if as_link:
+            self.as_link = True
+
         # if a 'title' attribute has been passed, correct that to aria-label
         # as that's what will be picked up in renderings that don't use button.render
         # directly (e.g. _dropdown_items.html)

diff --git a/wagtail/documents/templates/wagtaildocs/documents/index.html b/wagtail/documents/templates/wagtaildocs/documents/index.html
@@ -11,5 +11,5 @@
 
 {% block bulk_actions %}
     {% trans "Select all documents in listing" as select_all_text %}
-    {% include 'wagtailadmin/bulk_actions/footer.html' with select_all_obj_text=select_all_text app_label=model_opts.app_label model_name=model_opts.model_name objects=page_obj parent=current_collection.id %}
+    {% bulk_action_footer app_label=model_opts.app_label model_name=model_opts.model_name objects=page_obj parent=current_collection.id select_all_obj_text=select_all_text %}
 {% endblock %}
diff --git a/wagtail/images/templates/wagtailimages/images/index.html b/wagtail/images/templates/wagtailimages/images/index.html
@@ -23,6 +23,5 @@
 {% endblock %}
 
 {% block bulk_actions %}
-    {% trans "Select all images in listing" as select_all_text %}
-    {% include 'wagtailadmin/bulk_actions/footer.html' with select_all_obj_text=select_all_text app_label=model_opts.app_label model_name=model_opts.model_name objects=page_obj parent=current_collection.id %}
+    {% bulk_action_footer app_label=model_opts.app_label model_name=model_opts.model_name objects=page_obj parent=current_collection.id select_all_obj_text=_("Select all images in listing") %}
 {% endblock %}
diff --git a/wagtail/snippets/templates/wagtailsnippets/snippets/index.html b/wagtail/snippets/templates/wagtailsnippets/snippets/index.html
@@ -10,6 +10,5 @@
 {% endblock %}
 
 {% block bulk_actions %}
-    {% trans "Select all snippets in listing" as select_all_text %}
-    {% include 'wagtailadmin/bulk_actions/footer.html' with select_all_obj_text=select_all_text app_label=model_opts.app_label model_name=model_opts.model_name objects=page_obj %}
+    {% bulk_action_footer app_label=model_opts.app_label model_name=model_opts.model_name objects=page_obj select_all_obj_text=select_all_text=_("Select all snippets in listing") %}
 {% endblock %}
diff --git a/wagtail/users/templates/wagtailusers/users/index.html b/wagtail/users/templates/wagtailusers/users/index.html
@@ -12,6 +12,5 @@
     <div id="listing-results" class="users">
         {% include "wagtailusers/users/index_results.html" %}
     </div>
-    {% trans "Select all users in listing" as select_all_text %}
-    {% include 'wagtailadmin/bulk_actions/footer.html' with select_all_obj_text=select_all_text app_label=app_label model_name=model_name objects=page_obj %}
+    {% bulk_action_footer app_label=app_label model_name=model_name objects=page_obj select_all_obj_text=_("Select all users in listing") %}
 {% endblock %}