Use TeleportController to re-render slim header's buttons on results refresh

Fixes #11726

# Conflicts:
#	CHANGELOG.txt
#	docs/releases/6.1.md
#	wagtail/admin/widgets/button.py

CHANGELOG.txt

@@ -8,6 +8,7 @@ Changelog
  * Fix: Ensure that modal tabs width are not impacted by side panel opening (LB (Ben) Johnston)
  * Fix: Resolve issue local development of docs when running `make livehtml` (Sage Abdullah)
  * Fix: Resolve issue with unwanted padding in chooser modal listings (Sage Abdullah)
+ * Fix: Ensure `get_add_url()` is always used to re-render the add button when the listing is refreshed in viewsets (Sage Abdullah)
  * Docs: Update Sphinx theme to `6.3.0` with a fix for the missing favicon (Sage Abdullah)
 
 

docs/releases/6.0.2.md

@@ -16,6 +16,7 @@ depth: 1
  * Ensure that modal tabs width are not impacted by side panel opening (LB (Ben) Johnston)
  * Resolve issue local development of docs when running `make livehtml` (Sage Abdullah)
  * Resolve issue with unwanted padding in chooser modal listings (Sage Abdullah)
+ * Ensure `get_add_url()` is always used to re-render the add button when the listing is refreshed in viewsets (Sage Abdullah)
 
 
 ### Documentation

wagtail/admin/templates/wagtailadmin/generic/index_results.html

@@ -12,6 +12,14 @@
         </template>
     {% endif %}
 
+    {% if render_buttons_fragment %}
+        <template data-controller="w-teleport" data-w-teleport-target-value="#w-slim-header-buttons" data-w-teleport-reset-value="true">
+            {% for button in header_buttons %}
+                {% component button %}
+            {% endfor %}
+        </template>
+    {% endif %}
+
     {% if is_searching and view.show_other_searches %}
         <div class="nice-padding">
             {% search_other %}

wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html

@@ -49,7 +49,7 @@
                         {% if actions or block_actions %}
                             {# Actions divider #}
                             <div class="w-w-px w-h-[30px] w-ml-auto sm:w-ml-0 w-bg-border-furniture"></div>
-                            <div class="w-flex w-items-center w-ml-3">
+                            <div id="w-slim-header-buttons" class="w-flex w-items-center w-ml-3">
                                 {% firstof actions block_actions %}
                             </div>
                         {% endif %}

wagtail/admin/views/generic/base.py

@@ -442,5 +442,8 @@ class BaseListingView(WagtailAdminTemplateMixin, BaseListView):
             and self.filters
             and self.results_only
         )
+        context["render_buttons_fragment"] = (
+            context.get("header_buttons") and self.results_only
+        )
 
         return context

wagtail/admin/views/generic/models.py

@@ -334,7 +334,6 @@ class IndexView(
                     self.add_item_label,
                     url=self.add_url,
                     icon_name="plus",
-                    attrs={"data-w-link-reflect-keys-value": '["locale"]'},
                 )
             )
         return buttons
@@ -349,10 +348,6 @@ class IndexView(
                     url=self.xlsx_export_url,
                     icon_name="download",
                     priority=90,
-                    attrs={
-                        "data-controller": "w-link",
-                        "data-w-link-preserve-keys-value": '["export"]',
-                    },
                 )
             )
             buttons.append(
@@ -361,10 +356,6 @@ class IndexView(
                     url=self.csv_export_url,
                     icon_name="download",
                     priority=100,
-                    attrs={
-                        "data-controller": "w-link",
-                        "data-w-link-preserve-keys-value": '["export"]',
-                    },
                 )
             )
 

wagtail/admin/widgets/button.py

@@ -109,9 +109,8 @@ class HeaderButton(Button):
         attrs = attrs.copy()
         attrs.update(
             {
-                "data-controller": "w-tooltip w-link",
+                "data-controller": "w-tooltip",
                 "data-w-tooltip-content-value": label,
-                "data-action": "w-swap:success@document->w-link#setParamsFromSwapRequest",
                 "aria-label": label,
             }
         )

wagtail/snippets/tests/test_viewset.py

@@ -1530,3 +1530,35 @@ class TestCustomMethods(BaseSnippetViewSetTests):
         soup = self.get_soup(response.content)
         links = soup.find_all("a", attrs={"href": add_url})
         self.assertEqual(len(links), 1)
+
+    def test_index_results_view_get_add_url_teleports_to_header(self):
+        response = self.client.get(self.get_url("list_results"))
+        add_url = self.get_url("add") + "?customised=param"
+        soup = self.get_soup(response.content)
+        template = soup.find(
+            "template",
+            {
+                "data-controller": "w-teleport",
+                "data-w-teleport-target-value": "#w-slim-header-buttons",
+            },
+        )
+        self.assertIsNotNone(template)
+        links = template.find_all("a", attrs={"href": add_url})
+        self.assertEqual(len(links), 1)
+
+    @override_settings(WAGTAIL_I18N_ENABLED=True)
+    def test_index_results_view_get_add_url_teleports_to_header_with_i18n(self):
+        Locale.objects.create(language_code="fr")
+        response = self.client.get(self.get_url("list_results") + "?locale=fr")
+        add_url = self.get_url("add") + "?locale=fr&customised=param"
+        soup = self.get_soup(response.content)
+        template = soup.find(
+            "template",
+            {
+                "data-controller": "w-teleport",
+                "data-w-teleport-target-value": "#w-slim-header-buttons",
+            },
+        )
+        self.assertIsNotNone(template)
+        links = template.find_all("a", attrs={"href": add_url})
+        self.assertEqual(len(links), 1)