Use table UI component for workflow task index (#10518)

Follow-up to #10516

CHANGELOG.txt

@@ -21,6 +21,7 @@ Changelog
  * Maintenance: Switch to ruff for flake8 / isort code checking (Oliver Parker)
  * Maintenance: Deprecate `insert_editor_css` in favour of `insert_global_admin_css` (Ester Beltrami)
  * Maintenance: Optimise use of `specific` on Task and TaskState (Matt Westcott)
+ * Maintenance: Use table UI component for workflow task index view (Matt Westcott)
 
 
 5.0.1 (25.05.2023)

docs/releases/5.1.md

@@ -42,6 +42,7 @@ FieldPanels can now be marked as read-only with the `read_only=True` keyword arg
  * Switch to ruff for flake8 / isort code checking (Oliver Parker)
  * Deprecate `insert_editor_css` in favour of `insert_global_admin_css` (Ester Beltrami)
  * Optimise use of `specific` on Task and TaskState (Matt Westcott)
+ * Use table UI component for workflow task index view (Matt Westcott)
 
 
 ## Upgrade considerations

wagtail/admin/templates/wagtailadmin/tables/title_cell.html

@@ -1,11 +1,13 @@
 <td class="{% if column.classname %}{{ column.classname }} {% endif %}title">
     <div class="title-wrapper">
-        {% if link_url %}
-            <a {% include "wagtailadmin/tables/attrs.html" with attrs=link_attrs %}>{{ value }}</a>
-        {% elif label_id %}
-            <label for="{{ label_id }}">{{ value }}</label>
-        {% else %}
-            {{ value }}
-        {% endif %}
+        {% block title %}
+            {% if link_url %}
+                <a {% include "wagtailadmin/tables/attrs.html" with attrs=link_attrs %}>{{ value }}</a>
+            {% elif label_id %}
+                <label for="{{ label_id }}">{{ value }}</label>
+            {% else %}
+                {{ value }}
+            {% endif %}
+        {% endblock %}
     </div>
 </td>

wagtail/admin/templates/wagtailadmin/workflows/includes/task_title_cell.html

@@ -0,0 +1,8 @@
+{% extends "wagtailadmin/tables/title_cell.html" %}
+{% load i18n wagtailadmin_tags %}
+
+{% block title %}
+    {{ block.super }}
+    {% trans "Disabled" as status_label %}
+    {% if not instance.active %}{% status status_label %}{% endif %}
+{% endblock %}

wagtail/admin/templates/wagtailadmin/workflows/includes/task_usage_cell.html

@@ -0,0 +1,11 @@
+{% load i18n %}
+<td {% if column.classname %}class="{{ column.classname }}"{% endif %}>
+    {% for workflow in value|slice:":5" %}
+        <a href="{% url 'wagtailadmin_workflows:edit' workflow.pk %}">{{ workflow.name }}{% if not forloop.last %}, {% endif %}</a>
+    {% empty %}
+        {% trans "Not used" %}
+    {% endfor %}
+    {% if value.count > 5 %}
+        {% blocktrans trimmed count counter=value.count|add:-5 %}+{{ counter }} more{% plural %}+{{ counter }} more{% endblocktrans %}
+    {% endif %}
+</td>

wagtail/admin/templates/wagtailadmin/workflows/task_index.html

@@ -16,47 +16,7 @@
 
     <div class="nice-padding">
         {% if tasks %}
-            <table class="listing">
-                <thead>
-                    <tr>
-                        <th>
-                            {% trans "Name" %}
-                        </th>
-                        <th>
-                            {% trans "Type" %}
-                        </th>
-                        <th>
-                            {% trans "Used on" %}
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for task in tasks %}
-                        <tr>
-                            <td class="title">
-                                <div class="title-wrapper">
-                                    <a href="{% url view.edit_url_name task.pk %}">{{ task }}</a>
-                                    {% trans "Disabled" as status_label %}
-                                    {% if not task.active %}{% status status_label %}{% endif %}
-                                </div>
-                            </td>
-                            <td>
-                                {{ task.get_verbose_name }}
-                            </td>
-                            <td>
-                                {% for workflow in task.active_workflows|slice:":5" %}
-                                    <a href="{% url 'wagtailadmin_workflows:edit' workflow.pk %}">{{ workflow.name }}{% if not forloop.last %}, {% endif %}</a>
-                                {% empty %}
-                                    {% trans "Not used" %}
-                                {% endfor %}
-                                {% if task.active_workflows.count > 5 %}
-                                    {% blocktrans trimmed count counter=task.active_workflows.count|add:-5 %}+{{ counter }} more{% plural %}+{{ counter }} more{% endblocktrans %}
-                                {% endif %}
-                            </td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
+            {% component table %}
         {% else %}
             {% url view.add_url_name as add_url %}
             {% if showing_disabled %}

wagtail/admin/views/workflows.py

@@ -25,6 +25,7 @@ from wagtail.admin.forms.workflows import (
     get_workflow_edit_handler,
 )
 from wagtail.admin.modal_workflow import render_modal_workflow
+from wagtail.admin.ui.tables import Column, TitleColumn
 from wagtail.admin.views.generic import CreateView, DeleteView, EditView, IndexView
 from wagtail.coreutils import resolve_model_string
 from wagtail.models import (
@@ -382,6 +383,14 @@ def remove_workflow(request, page_pk, workflow_pk=None):
         return redirect("wagtailadmin_explore", page.id)
 
 
+class TaskTitleColumn(TitleColumn):
+    cell_template_name = "wagtailadmin/workflows/includes/task_title_cell.html"
+
+
+class TaskUsageColumn(Column):
+    cell_template_name = "wagtailadmin/workflows/includes/task_usage_cell.html"
+
+
 class TaskIndex(IndexView):
     permission_policy = task_permission_policy
     model = Task
@@ -393,6 +402,13 @@ class TaskIndex(IndexView):
     page_title = _("Workflow tasks")
     add_item_label = _("New workflow task")
     header_icon = "thumbtack"
+    columns = [
+        TaskTitleColumn(
+            "name", label=_("Name"), url_name="wagtailadmin_workflows:edit_task"
+        ),
+        Column("type", label=_("Type"), accessor="get_verbose_name"),
+        TaskUsageColumn("usage", label=_("Used on"), accessor="active_workflows"),
+    ]
 
     def show_disabled(self):
         return self.request.GET.get("show_disabled", "false") == "true"