From 72257f5097a0f9ff4ecf063915f6b781707ddb86 Mon Sep 17 00:00:00 2001
From: Rowan Seymour <rowanseymour@gmail.com>
Date: Thu, 17 Oct 2024 22:00:20 +0000
Subject: [PATCH 1/3] Make some list pages use a common template

---
 templates/globals/global_list.html   | 116 ++++++++++++---------------
 templates/orgs/base/list.html        |  35 ++++++++
 templates/orgs/org_list.html         |  98 ++++++++++------------
 templates/orgs/user_list.html        |  96 +++++++++-------------
 templates/tickets/shortcut_list.html |  79 ++++++++----------
 5 files changed, 196 insertions(+), 228 deletions(-)
 create mode 100644 templates/orgs/base/list.html

diff --git a/templates/globals/global_list.html b/templates/globals/global_list.html
index 78f1b6ec4b..c8d29c5579 100644
--- a/templates/globals/global_list.html
+++ b/templates/globals/global_list.html
@@ -1,7 +1,13 @@
-{% extends "smartmin/list.html" %}
+{% extends "orgs/base/list.html" %}
 {% load smartmin temba i18n humanize %}
 
-{% block content %}
+{% block pre-table %}
+  <temba-modax header="{{ _("Update Global") |escapejs }}" -temba-redirected="refreshGlobals" id="update-global">
+  </temba-modax>
+  <temba-modax header="{{ _("Delete Global") |escapejs }}" -temba-redirected="refreshGlobals" id="delete-global">
+  </temba-modax>
+  <temba-modax header="{{ _("Usages") |escapejs }}" id="usages-global">
+  </temba-modax>
   <div class="mb-4">
     {% blocktrans trimmed %}
       Globals are variables you can use across all of your flows but
@@ -10,67 +16,49 @@
       might change later.
     {% endblocktrans %}
   </div>
-  {% block pre-table %}
-    <temba-modax header="{{ _("Update Global") |escapejs }}" -temba-redirected="refreshGlobals" id="update-global">
-    </temba-modax>
-    <temba-modax header="{{ _("Delete Global") |escapejs }}" -temba-redirected="refreshGlobals" id="delete-global">
-    </temba-modax>
-    <temba-modax header="{{ _("Usages") |escapejs }}" id="usages-global">
-    </temba-modax>
-  {% endblock pre-table %}
-  <form method="get" action="{{ request.path }}" id="search-form">
-    <temba-textinput placeholder="{% trans "Search" %}" name="search" value="{{ search }}" class="w-full">
-    </temba-textinput>
-    <input type="submit" class="hide">
-  </form>
-  <div class="mt-4 shadow rounded-lg rounded-bl-none rounded-br-none bg-white">{% include "includes/short_pagination.html" %}</div>
-  <div class="flex-grow overflow-y-auto shadow">
-    <table class="list lined scrolled">
-      <tbody>
-        {% for obj in object_list %}
-          <tr onclick="showUpdateGlobalModal({{ obj.id }})" class="hover-linked update">
-            <td style="min-width: 50px">{{ obj.name }}</td>
-            <td style="font-family: monospace; font-size: 12px;">@globals.{{ obj.key }}</td>
-            <td>
-              <div class="break-all">{{ obj.value|truncatechars:25 }}</div>
-            </td>
-            <td class="w-12">
-              <div class="flex text-center">
-                {% with usage_count=obj.usage_count %}
-                  {% if usage_count %}
-                    <div onclick="event.stopPropagation(); showGlobalUsagesModal('{{ obj.uuid }}');" class="uses">
-                      <div class="lbl linked">
-                        {% blocktrans trimmed count counter=usage_count %}
-                          {{ counter }} use
-                        {% plural %}
-                          {{ counter }} uses
-                        {% endblocktrans %}
-                      </div>
-                    </div>
-                  {% endif %}
-                {% endwith %}
-              </div>
-            </td>
-            <td class="w-10">
-              {% if org_perms.globals.global_delete %}
-                <div style="visibility:hidden"
-                     onclick="event.stopPropagation(); showDeleteGlobalModal('{{ obj.uuid }}');"
-                     class="pl-2 pt-1 delete-link linked text-gray-400">
-                  <temba-icon name="delete_small">
-                  </temba-icon>
+{% endblock pre-table %}
+{% block table-body %}
+  {% for obj in object_list %}
+    <tr onclick="showUpdateGlobalModal({{ obj.id }})" class="hover-linked update">
+      <td style="min-width: 50px">{{ obj.name }}</td>
+      <td style="font-family: monospace; font-size: 12px;">@globals.{{ obj.key }}</td>
+      <td>
+        <div class="break-all">{{ obj.value|truncatechars:25 }}</div>
+      </td>
+      <td class="w-12">
+        <div class="flex text-center">
+          {% with usage_count=obj.usage_count %}
+            {% if usage_count %}
+              <div onclick="event.stopPropagation(); showGlobalUsagesModal('{{ obj.uuid }}');" class="uses">
+                <div class="lbl linked">
+                  {% blocktrans trimmed count counter=usage_count %}
+                    {{ counter }} use
+                  {% plural %}
+                    {{ counter }} uses
+                  {% endblocktrans %}
                 </div>
-              {% endif %}
-            </td>
-          </tr>
-        {% empty %}
-          <tr class="empty_list">
-            <td colspan="99" class="text-center">{% trans "No globals" %}</td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-{% endblock content %}
+              </div>
+            {% endif %}
+          {% endwith %}
+        </div>
+      </td>
+      <td class="w-10">
+        {% if org_perms.globals.global_delete %}
+          <div style="visibility:hidden"
+               onclick="event.stopPropagation(); showDeleteGlobalModal('{{ obj.uuid }}');"
+               class="pl-2 pt-1 delete-link linked text-gray-400">
+            <temba-icon name="delete_small">
+            </temba-icon>
+          </div>
+        {% endif %}
+      </td>
+    </tr>
+  {% empty %}
+    <tr class="empty_list">
+      <td colspan="99" class="text-center">{% trans "No globals" %}</td>
+    </tr>
+  {% endfor %}
+{% endblock table-body %}
 {% block extra-script %}
   {{ block.super }}
   <script>
@@ -96,10 +84,6 @@
 {% block extra-style %}
   {{ block.super }}
   <style type="text/css">
-    tr:hover .delete-link {
-      visibility: visible !important;
-    }
-
     td.dependencies {
       text-align: right;
       white-space: nowrap;
diff --git a/templates/orgs/base/list.html b/templates/orgs/base/list.html
new file mode 100644
index 0000000000..0252b1106b
--- /dev/null
+++ b/templates/orgs/base/list.html
@@ -0,0 +1,35 @@
+{% extends "smartmin/list.html" %}
+{% load i18n %}
+
+{% block content %}
+  {% block pre-table %}
+  {% endblock pre-table %}
+  {% if view.search_fields %}
+    <form method="get" action="{{ request.path }}" id="search-form">
+      <temba-textinput placeholder="{% trans "Search" %}" name="search" value="{{ search }}" class="w-full">
+      </temba-textinput>
+      <input type="submit" class="hide">
+    </form>
+  {% endif %}
+  <div class="mt-4 shadow rounded-lg rounded-bl-none rounded-br-none bg-white">{% include "includes/short_pagination.html" %}</div>
+  <div class="flex-grow overflow-y-auto shadow">
+    <table class="list lined scrolled">
+      <thead>
+        {% block table-head %}
+        {% endblock table-head %}
+      </thead>
+      <tbody>
+        {% block table-body %}
+        {% endblock table-body %}
+      </tbody>
+    </table>
+  </div>
+{% endblock content %}
+{% block extra-style %}
+  {{ block.super }}
+  <style type="text/css">
+    tr:hover .delete-link {
+      visibility: visible !important;
+    }
+  </style>
+{% endblock extra-style %}
diff --git a/templates/orgs/org_list.html b/templates/orgs/org_list.html
index 2f0e765e66..ebf43a8a54 100644
--- a/templates/orgs/org_list.html
+++ b/templates/orgs/org_list.html
@@ -1,54 +1,46 @@
-{% extends "smartmin/list.html" %}
+{% extends "orgs/base/list.html" %}
 {% load i18n temba smartmin humanize %}
 
-{% block content %}
-  {% block pre-table %}
-    <temba-modax header="{{ _("Update Workspace") |escapejs }}" id="update-child">
-    </temba-modax>
-    <temba-modax header="{{ _("Delete Workspace") |escapejs }}" id="delete-child">
-    </temba-modax>
-  {% endblock pre-table %}
-  <form method="get" action="{{ request.path }}" id="search-form">
-    <temba-textinput placeholder="{% trans "Search" %}" name="search" value="{{ search }}" class="w-full">
-    </temba-textinput>
-    <input type="submit" class="hide">
-  </form>
-  <div class="mt-4 shadow rounded-lg rounded-bl-none rounded-br-none bg-white">{% include "includes/short_pagination.html" %}</div>
-  <div class="flex-grow overflow-y-auto shadow">
-    <table class="list lined scrolled">
-      <thead>
-        <tr>
-          <th>{% trans "Name" %}</th>
-          <th style="text-align:right">{% trans "Users" %}</th>
-          <th style="text-align:right">{% trans "Contacts" %}</th>
-          <th style="text-align:right">{% trans "Created On" %}</th>
-          <th></th>
-        </tr>
-        <tbody>
-          {% for obj in object_list %}
-            <tr onclick="{% if obj.id != user_org.id %}showUpdateChildModal({{ obj.id }}){% endif %}"
-                class="{% if obj.id != user_org.id %}hover-linked update{% endif %}">
-              <td>{{ obj.name }}</td>
-              <td style="text-align:right">{{ obj.users.all|length }}</td>
-              <td style="text-align:right">{{ obj.get_contact_count|intcomma }}</td>
-              <td style="text-align:right">{{ obj.created_on|day }}</td>
-              <td class="w-2">
-                {% if obj.id != user_org.id %}
-                  <div style="visibility:hidden"
-                       onclick="event.stopPropagation(); showDeleteChildModal({{ obj.id }});"
-                       class="pl-2 pt-1 delete-link linked text-gray-400">
-                    <temba-icon name="delete_small">
-                    </temba-icon>
-                  </div>
-                {% endif %}
-              </td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </thead>
-    </table>
-  </div>
-{% endblock content %}
+{% block pre-table %}
+  <temba-modax header="{{ _("Update Workspace") |escapejs }}" id="update-child">
+  </temba-modax>
+  <temba-modax header="{{ _("Delete Workspace") |escapejs }}" id="delete-child">
+  </temba-modax>
+{% endblock pre-table %}
+{% block table-head %}
+  <tr>
+    <th>{% trans "Name" %}</th>
+    <th style="text-align:right">{% trans "Users" %}</th>
+    <th style="text-align:right">{% trans "Contacts" %}</th>
+    <th style="text-align:right">{% trans "Created On" %}</th>
+    <th></th>
+  </tr>
+{% endblock table-head %}
+{% block table-body %}
+  {% for obj in object_list %}
+    <tr onclick="{% if obj.id != user_org.id %}showUpdateChildModal({{ obj.id }}){% endif %}"
+        class="{% if obj.id != user_org.id %}hover-linked update{% endif %}">
+      <td>{{ obj.name }}</td>
+      <td style="text-align:right">{{ obj.users.all|length }}</td>
+      <td style="text-align:right">{{ obj.get_contact_count|intcomma }}</td>
+      <td style="text-align:right">{{ obj.created_on|day }}</td>
+      <td class="w-2">
+        {% if obj.id != user_org.id %}
+          <div style="visibility:hidden"
+               onclick="event.stopPropagation(); showDeleteChildModal({{ obj.id }});"
+               class="pl-2 pt-1 delete-link linked text-gray-400">
+            <temba-icon name="delete_small">
+            </temba-icon>
+          </div>
+        {% endif %}
+      </td>
+    </tr>
+  {% empty %}
+    <tr class="empty_list">
+      <td colspan="99" class="text-center">{% trans "No workspaces" %}</td>
+    </tr>
+  {% endfor %}
+{% endblock table-body %}
 {% block extra-script %}
   {{ block.super }}
   <script>
@@ -65,11 +57,3 @@
     }
   </script>
 {% endblock extra-script %}
-{% block extra-style %}
-  {{ block.super }}
-  <style type="text/css">
-    tr:hover .delete-link {
-      visibility: visible !important;
-    }
-  </style>
-{% endblock extra-style %}
diff --git a/templates/orgs/user_list.html b/templates/orgs/user_list.html
index 992ad3971c..3a7acfcdec 100644
--- a/templates/orgs/user_list.html
+++ b/templates/orgs/user_list.html
@@ -1,7 +1,11 @@
-{% extends "smartmin/list.html" %}
+{% extends "orgs/base/list.html" %}
 {% load smartmin temba i18n %}
 
-{% block content %}
+{% block pre-table %}
+  <temba-modax header="{{ _("Update User") |escapejs }}" -temba-redirected="refreshUsers" id="update-user">
+  </temba-modax>
+  <temba-modax header="{{ _("Remove User") |escapejs }}" -temba-redirected="refreshUsers" id="delete-user">
+  </temba-modax>
   {% if has_viewers %}
     <temba-alert level="warning" class="mb-4">
       {% blocktrans trimmed with cutoff="2024-12-31"|day %}
@@ -10,54 +14,38 @@
       {% endblocktrans %}
     </temba-alert>
   {% endif %}
-  {% block pre-table %}
-    <temba-modax header="{{ _("Update User") |escapejs }}" -temba-redirected="refreshUsers" id="update-user">
-    </temba-modax>
-    <temba-modax header="{{ _("Remove User") |escapejs }}" -temba-redirected="refreshUsers" id="delete-user">
-    </temba-modax>
-  {% endblock pre-table %}
-  <form method="get" action="{{ request.path }}" id="search-form">
-    <temba-textinput placeholder="{% trans "Search" %}" name="search" value="{{ search }}" class="w-full">
-    </temba-textinput>
-    <input type="submit" class="hide">
-  </form>
-  <div class="mt-4 shadow rounded-lg rounded-bl-none rounded-br-none bg-white">{% include "includes/short_pagination.html" %}</div>
-  <div class="flex-grow overflow-y-auto shadow">
-    <table class="list lined scrolled">
-      <thead>
-        <tr>
-          <th>{% trans "Email" %}</th>
-          <th>{% trans "Name" %}</th>
-          <th>{% trans "Role" %}</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for obj in object_list %}
-          <tr onclick="showUpdateUserModal({{ obj.id }})" class="hover-linked update">
-            <td>{{ obj.email }}</td>
-            <td>{{ obj.name }}</td>
-            <td>{{ obj.role.display }}</td>
-            <td class="w-10">
-              {% if obj.role.code != "A" or admin_count > 1 %}
-                <div style="visibility:hidden"
-                     onclick="event.stopPropagation(); showDeleteUserModal({{ obj.id }});"
-                     class="pl-2 pt-1 delete-link linked text-gray-400">
-                  <temba-icon name="delete_small">
-                  </temba-icon>
-                </div>
-              {% endif %}
-            </td>
-          </tr>
-        {% empty %}
-          <tr class="empty_list">
-            <td colspan="99" class="text-center">{% trans "No users" %}</td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-{% endblock content %}
+{% endblock pre-table %}
+{% block table-head %}
+  <tr>
+    <th>{% trans "Email" %}</th>
+    <th>{% trans "Name" %}</th>
+    <th>{% trans "Role" %}</th>
+    <th></th>
+  </tr>
+{% endblock table-head %}
+{% block table-body %}
+  {% for obj in object_list %}
+    <tr onclick="showUpdateUserModal({{ obj.id }})" class="hover-linked update">
+      <td>{{ obj.email }}</td>
+      <td>{{ obj.name }}</td>
+      <td>{{ obj.role.display }}</td>
+      <td class="w-10">
+        {% if obj.role.code != "A" or admin_count > 1 %}
+          <div style="visibility:hidden"
+               onclick="event.stopPropagation(); showDeleteUserModal({{ obj.id }});"
+               class="pl-2 pt-1 delete-link linked text-gray-400">
+            <temba-icon name="delete_small">
+            </temba-icon>
+          </div>
+        {% endif %}
+      </td>
+    </tr>
+  {% empty %}
+    <tr class="empty_list">
+      <td colspan="99" class="text-center">{% trans "No users" %}</td>
+    </tr>
+  {% endfor %}
+{% endblock table-body %}
 {% block extra-script %}
   {{ block.super }}
   <script>
@@ -74,11 +62,3 @@
     }
   </script>
 {% endblock extra-script %}
-{% block extra-style %}
-  {{ block.super }}
-  <style type="text/css">
-    tr:hover .delete-link {
-      visibility: visible !important;
-    }
-  </style>
-{% endblock extra-style %}
diff --git a/templates/tickets/shortcut_list.html b/templates/tickets/shortcut_list.html
index d168b0b6c2..be12b26247 100644
--- a/templates/tickets/shortcut_list.html
+++ b/templates/tickets/shortcut_list.html
@@ -1,48 +1,41 @@
-{% extends "smartmin/list.html" %}
-{% load smartmin temba i18n humanize %}
+{% extends "orgs/base/list.html" %}
+{% load smartmin temba i18n %}
 
-{% block content %}
+{% block pre-table %}
+  <temba-modax header="{{ _("Update Shortcut") |escapejs }}" id="update-shortcut">
+  </temba-modax>
+  <temba-modax header="{{ _("Delete Shortcut") |escapejs }}" id="delete-shortcut">
+  </temba-modax>
   <div class="mb-4">
     {% blocktrans trimmed %}
       These are canned responses that agents can use to quickly reply to tickets.
     {% endblocktrans %}
   </div>
-  {% block pre-table %}
-    <temba-modax header="{{ _("Update Shortcut") |escapejs }}" id="update-shortcut">
-    </temba-modax>
-    <temba-modax header="{{ _("Delete Shortcut") |escapejs }}" id="delete-shortcut">
-    </temba-modax>
-  {% endblock pre-table %}
-  <div class="mt-4 shadow rounded-lg rounded-bl-none rounded-br-none bg-white">{% include "includes/short_pagination.html" %}</div>
-  <div class="flex-grow overflow-y-auto shadow">
-    <table class="list lined scrolled">
-      <tbody>
-        {% for obj in object_list %}
-          <tr onclick="showUpdateShortcutModal({{ obj.id }})" class="hover-linked update">
-            <td style="min-width: 50px">{{ obj.name }}</td>
-            <td>
-              <div class="break-all">{{ obj.text|truncatechars:100 }}</div>
-            </td>
-            <td class="w-10">
-              {% if org_perms.tickets.shortcut_delete %}
-                <div style="visibility:hidden"
-                     onclick="event.stopPropagation(); showDeleteShortcutModal({{ obj.id }});"
-                     class="pl-2 pt-1 delete-link linked text-gray-400">
-                  <temba-icon name="delete_small">
-                  </temba-icon>
-                </div>
-              {% endif %}
-            </td>
-          </tr>
-        {% empty %}
-          <tr class="empty_list">
-            <td colspan="99" class="text-center">{% trans "No shortcuts" %}</td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-{% endblock content %}
+{% endblock pre-table %}
+{% block table-body %}
+  {% for obj in object_list %}
+    <tr onclick="showUpdateShortcutModal({{ obj.id }})" class="hover-linked update">
+      <td style="min-width: 50px">{{ obj.name }}</td>
+      <td>
+        <div class="break-all">{{ obj.text|truncatechars:100 }}</div>
+      </td>
+      <td class="w-10">
+        {% if org_perms.tickets.shortcut_delete %}
+          <div style="visibility:hidden"
+               onclick="event.stopPropagation(); showDeleteShortcutModal({{ obj.id }});"
+               class="pl-2 pt-1 delete-link linked text-gray-400">
+            <temba-icon name="delete_small">
+            </temba-icon>
+          </div>
+        {% endif %}
+      </td>
+    </tr>
+  {% empty %}
+    <tr class="empty_list">
+      <td colspan="99" class="text-center">{% trans "No shortcuts" %}</td>
+    </tr>
+  {% endfor %}
+{% endblock table-body %}
 {% block extra-script %}
   {{ block.super }}
   <script>
@@ -59,11 +52,3 @@
     }
   </script>
 {% endblock extra-script %}
-{% block extra-style %}
-  {{ block.super }}
-  <style type="text/css">
-    tr:hover .delete-link {
-      visibility: visible !important;
-    }
-  </style>
-{% endblock extra-style %}

From c70ffdea4ec2ed2d31c2947688a7fb77d76ae79c Mon Sep 17 00:00:00 2001
From: Rowan Seymour <rowanseymour@gmail.com>
Date: Fri, 18 Oct 2024 19:47:42 +0000
Subject: [PATCH 2/3] Use bsae list template for flows as well

---
 templates/flows/flow_list.html | 194 +++++++++++++++------------------
 templates/orgs/base/list.html  |   2 +-
 2 files changed, 90 insertions(+), 106 deletions(-)

diff --git a/templates/flows/flow_list.html b/templates/flows/flow_list.html
index a63b69fa43..ea1f69ae15 100644
--- a/templates/flows/flow_list.html
+++ b/templates/flows/flow_list.html
@@ -1,112 +1,96 @@
-{% extends "smartmin/list.html" %}
+{% extends "orgs/base/list.html" %}
 {% load smartmin temba i18n humanize %}
 
-{% block content %}
-  {% if org_perms.flows.flow_results %}
-    <temba-modax header="{% trans "Export Results" %}" id="export-results">
-    </temba-modax>
-  {% endif %}
-  {% if org_perms.flows.flowlabel_create %}
-    <temba-modax header="{% trans "Create Label" %}"
-                 endpoint="{% url 'flows.flowlabel_create' %}"
-                 -temba-loaded="handleCreateLabelModalLoaded"
-                 -temba-submitted="handleCreateLabelModalSubmitted"
-                 id="create-label-modal">
-    </temba-modax>
-  {% endif %}
-  <form method="get" action="{{ request.path }}" id="search-form">
-    <temba-textinput placeholder="{% trans "Search" %}" name="search" value="{{ search }}" class="w-full">
-    </temba-textinput>
-    <input type="submit" class="hide">
-  </form>
-  <div class="mt-4 shadow rounded-lg rounded-bl-none rounded-br-none bg-white">{% include "includes/short_pagination.html" %}</div>
-  <div class="flex-grow overflow-y-auto shadow">
-    <table class="relative list object-list lined selectable scrolled">
-      {% if object_list %}
-        <thead>
-          <tr>
-            {% if org_perms.flows.flow_update %}<th></th>{% endif %}
-            <th></th>
-            <th style="text-align:right" class="whitespace-nowrap">Runs / Completion</th>
-          </tr>
-        </thead>
+{% block pre-table %}
+  <temba-modax header="{% trans "Export Results" %}" id="export-results">
+  </temba-modax>
+  <temba-modax header="{% trans "Create Label" %}"
+               endpoint="{% url 'flows.flowlabel_create' %}"
+               -temba-loaded="handleCreateLabelModalLoaded"
+               -temba-submitted="handleCreateLabelModalSubmitted"
+               id="create-label-modal">
+  </temba-modax>
+{% endblock pre-table %}
+{% block table-head %}
+  <tr>
+    {% if actions %}<th></th>{% endif %}
+    <th></th>
+    <th style="text-align:right" class="whitespace-nowrap">{% trans "Runs / Completion" %}</th>
+  </tr>
+{% endblock table-head %}
+{% block table-body %}
+  {% for object in object_list %}
+    <tr onclick="handleRowClicked(event)"
+        data-uuid="{{ object.uuid }}"
+        data-object-id="{{ object.id }}"
+        href="{% url 'flows.flow_editor' object.uuid %}"
+        class="object-row select-row">
+      {% if actions %}
+        <td onclick="checkInner(event);" style="width:0px" class="checkbox object-row-checkbox">
+          <temba-checkbox onclick="handleRowSelection(this)">
+          </temba-checkbox>
+        </td>
       {% endif %}
-      <tbody>
-        {% for object in object_list %}
-          <tr onclick="handleRowClicked(event)"
-              data-uuid="{{ object.uuid }}"
-              data-object-id="{{ object.id }}"
-              href="{% url 'flows.flow_editor' object.uuid %}"
-              class="object-row select-row">
-            {% if org_perms.flows.flow_update %}
-              <td onclick="checkInner(event);" style="width:0px" class="checkbox object-row-checkbox">
-                <temba-checkbox onclick="handleRowSelection(this)">
-                </temba-checkbox>
-              </td>
-            {% endif %}
-            <td>
-              <div class="flex items-center">
-                <div class="flex-grow">
-                  <div style="max-width:80%" class="flex whitespace-nowrap flex-grow items-center">
-                    <div class="flex items-center text-gray-600">
-                      {% if object.flow_type == 'V' %}
-                        <temba-icon name="flow_ivr" class="mr-2">
-                        </temba-icon>
-                      {% elif object.flow_type == 'S' %}
-                        <temba-icon name="flow_surveyor" class="mr-2">
-                        </temba-icon>
-                      {% elif object.flow_type == 'B' %}
-                        <temba-icon name="flow_background" class="mr-2">
-                        </temba-icon>
-                      {% endif %}
-                    </div>
-                    <div class="name truncate flex-grow">{{ object.name }}</div>
-                  </div>
-                </div>
-                <div class="whitespace-no-break flex items-center ml-2 justify-end flex-wrap">
-                  {% for label in object.labels.all %}
-                    <a href="{% url 'flows.flow_filter' label.uuid %}" onclick="goto(event, this)">
-                      <temba-label data-id="{{ label.id }}" icon="label" clickable class="mx-1 my-1">
-                        {{ label.name }}
-                      </temba-label>
-                    </a>
-                  {% endfor %}
-                </div>
+      <td>
+        <div class="flex items-center">
+          <div class="flex-grow">
+            <div style="max-width:80%" class="flex whitespace-nowrap flex-grow items-center">
+              <div class="flex items-center text-gray-600">
+                {% if object.flow_type == 'V' %}
+                  <temba-icon name="flow_ivr" class="mr-2">
+                  </temba-icon>
+                {% elif object.flow_type == 'S' %}
+                  <temba-icon name="flow_surveyor" class="mr-2">
+                  </temba-icon>
+                {% elif object.flow_type == 'B' %}
+                  <temba-icon name="flow_background" class="mr-2">
+                  </temba-icon>
+                {% endif %}
               </div>
-            </td>
-            <td>
-              {% if not object.is_archived %}
-                <div class="whitespace-no-break flex items-center justify-end">
-                  {% if object.has_issues %}
-                    <div>
-                      <temba-tip position="top" text="{{ _("Has issues") |escapejs }}" slot="toggle">
-                        <temba-icon name="issue" class="mr-2" clickable="true">
-                        </temba-icon>
-                      </temba-tip>
-                    </div>
-                  {% endif %}
-                  {% if object.run_stats.total %}
-                    <div onclick="goto(event)"
-                         href="{% url "flows.flow_results" object.uuid %}"
-                         class="linked mr-2 whitespace-nowrap">{{ object.run_stats.total|intcomma }}</div>
-                    /
-                    <div onclick="goto(event)"
-                         href="{% url "flows.flow_results" object.uuid %}"
-                         class="text-center linked mx-2 whitespace-nowrap">{{ object.run_stats.completion }}%</div>
-                  {% endif %}
-                </div>
-              {% endif %}
-            </td>
-          </tr>
-        {% empty %}
-          <tr class="empty_list">
-            <td colspan="99" class="text-center">{% trans "No flows" %}</td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-{% endblock content %}
+              <div class="name truncate flex-grow">{{ object.name }}</div>
+            </div>
+          </div>
+          <div class="whitespace-no-break flex items-center ml-2 justify-end flex-wrap">
+            {% for label in object.labels.all %}
+              <a href="{% url 'flows.flow_filter' label.uuid %}" onclick="goto(event, this)">
+                <temba-label data-id="{{ label.id }}" icon="label" clickable class="mx-1 my-1">
+                  {{ label.name }}
+                </temba-label>
+              </a>
+            {% endfor %}
+          </div>
+        </div>
+      </td>
+      <td>
+        {% if not object.is_archived %}
+          <div class="whitespace-no-break flex items-center justify-end">
+            {% if object.has_issues %}
+              <div>
+                <temba-tip position="top" text="{{ _("Has issues") |escapejs }}" slot="toggle">
+                  <temba-icon name="issue" class="mr-2" clickable="true">
+                  </temba-icon>
+                </temba-tip>
+              </div>
+            {% endif %}
+            {% if object.run_stats.total %}
+              <div onclick="goto(event)"
+                   href="{% url "flows.flow_results" object.uuid %}"
+                   class="linked mr-2 whitespace-nowrap">{{ object.run_stats.total|intcomma }}</div>
+              /
+              <div onclick="goto(event)"
+                   href="{% url "flows.flow_results" object.uuid %}"
+                   class="text-center linked mx-2 whitespace-nowrap">{{ object.run_stats.completion }}%</div>
+            {% endif %}
+          </div>
+        {% endif %}
+      </td>
+    </tr>
+  {% empty %}
+    <tr class="empty_list">
+      <td colspan="99" class="text-center">{% trans "No flows" %}</td>
+    </tr>
+  {% endfor %}
+{% endblock table-body %}
 {% block extra-script %}
   {{ block.super }}
   <script type="text/javascript">
diff --git a/templates/orgs/base/list.html b/templates/orgs/base/list.html
index 0252b1106b..d9ed012e93 100644
--- a/templates/orgs/base/list.html
+++ b/templates/orgs/base/list.html
@@ -13,7 +13,7 @@
   {% endif %}
   <div class="mt-4 shadow rounded-lg rounded-bl-none rounded-br-none bg-white">{% include "includes/short_pagination.html" %}</div>
   <div class="flex-grow overflow-y-auto shadow">
-    <table class="list lined scrolled">
+    <table class="list lined scrolled {% if actions %}selectable{% endif %}">
       <thead>
         {% block table-head %}
         {% endblock table-head %}

From 4b97b7f6f08402a367337a3cd43074950174d262 Mon Sep 17 00:00:00 2001
From: Rowan Seymour <rowanseymour@gmail.com>
Date: Tue, 22 Oct 2024 13:46:42 -0500
Subject: [PATCH 3/3] Use block for table

---
 templates/flows/flow_list.html       | 160 ++++++++++++++-------------
 templates/globals/global_list.html   |  84 +++++++-------
 templates/orgs/base/list.html        |  12 +-
 templates/orgs/org_list.html         |  72 ++++++------
 templates/orgs/user_list.html        |  66 +++++------
 templates/tickets/shortcut_list.html |  72 ++++++------
 6 files changed, 240 insertions(+), 226 deletions(-)

diff --git a/templates/flows/flow_list.html b/templates/flows/flow_list.html
index ea1f69ae15..194516361f 100644
--- a/templates/flows/flow_list.html
+++ b/templates/flows/flow_list.html
@@ -4,93 +4,99 @@
 {% block pre-table %}
   <temba-modax header="{% trans "Export Results" %}" id="export-results">
   </temba-modax>
-  <temba-modax header="{% trans "Create Label" %}"
+  <temba-modax header="{% trans "New Label" %}"
                endpoint="{% url 'flows.flowlabel_create' %}"
                -temba-loaded="handleCreateLabelModalLoaded"
                -temba-submitted="handleCreateLabelModalSubmitted"
                id="create-label-modal">
   </temba-modax>
 {% endblock pre-table %}
-{% block table-head %}
-  <tr>
-    {% if actions %}<th></th>{% endif %}
-    <th></th>
-    <th style="text-align:right" class="whitespace-nowrap">{% trans "Runs / Completion" %}</th>
-  </tr>
-{% endblock table-head %}
-{% block table-body %}
-  {% for object in object_list %}
-    <tr onclick="handleRowClicked(event)"
-        data-uuid="{{ object.uuid }}"
-        data-object-id="{{ object.id }}"
-        href="{% url 'flows.flow_editor' object.uuid %}"
-        class="object-row select-row">
-      {% if actions %}
-        <td onclick="checkInner(event);" style="width:0px" class="checkbox object-row-checkbox">
-          <temba-checkbox onclick="handleRowSelection(this)">
-          </temba-checkbox>
-        </td>
-      {% endif %}
-      <td>
-        <div class="flex items-center">
-          <div class="flex-grow">
-            <div style="max-width:80%" class="flex whitespace-nowrap flex-grow items-center">
-              <div class="flex items-center text-gray-600">
-                {% if object.flow_type == 'V' %}
-                  <temba-icon name="flow_ivr" class="mr-2">
-                  </temba-icon>
-                {% elif object.flow_type == 'S' %}
-                  <temba-icon name="flow_surveyor" class="mr-2">
-                  </temba-icon>
-                {% elif object.flow_type == 'B' %}
-                  <temba-icon name="flow_background" class="mr-2">
-                  </temba-icon>
-                {% endif %}
+{% block table %}
+  <table class="relative list object-list lined selectable scrolled">
+    {% if object_list %}
+      <thead>
+        <tr>
+          {% if org_perms.flows.flow_update %}<th></th>{% endif %}
+          <th></th>
+          <th style="text-align:right" class="whitespace-nowrap">Runs / Completion</th>
+        </tr>
+      </thead>
+    {% endif %}
+    <tbody>
+      {% for object in object_list %}
+        <tr onclick="handleRowClicked(event)"
+            data-uuid="{{ object.uuid }}"
+            data-object-id="{{ object.id }}"
+            href="{% url 'flows.flow_editor' object.uuid %}"
+            class="object-row select-row">
+          {% if org_perms.flows.flow_update %}
+            <td onclick="checkInner(event);" style="width:0px" class="checkbox object-row-checkbox">
+              <temba-checkbox onclick="handleRowSelection(this)">
+              </temba-checkbox>
+            </td>
+          {% endif %}
+          <td>
+            <div class="flex items-center">
+              <div class="flex-grow">
+                <div style="max-width:80%" class="flex whitespace-nowrap flex-grow items-center">
+                  <div class="flex items-center text-gray-600">
+                    {% if object.flow_type == 'V' %}
+                      <temba-icon name="flow_ivr" class="mr-2">
+                      </temba-icon>
+                    {% elif object.flow_type == 'S' %}
+                      <temba-icon name="flow_surveyor" class="mr-2">
+                      </temba-icon>
+                    {% elif object.flow_type == 'B' %}
+                      <temba-icon name="flow_background" class="mr-2">
+                      </temba-icon>
+                    {% endif %}
+                  </div>
+                  <div class="name truncate flex-grow">{{ object.name }}</div>
+                </div>
+              </div>
+              <div class="whitespace-no-break flex items-center ml-2 justify-end flex-wrap">
+                {% for label in object.labels.all %}
+                  <a href="{% url 'flows.flow_filter' label.uuid %}" onclick="goto(event, this)">
+                    <temba-label data-id="{{ label.id }}" icon="label" clickable class="mx-1 my-1">
+                      {{ label.name }}
+                    </temba-label>
+                  </a>
+                {% endfor %}
               </div>
-              <div class="name truncate flex-grow">{{ object.name }}</div>
             </div>
-          </div>
-          <div class="whitespace-no-break flex items-center ml-2 justify-end flex-wrap">
-            {% for label in object.labels.all %}
-              <a href="{% url 'flows.flow_filter' label.uuid %}" onclick="goto(event, this)">
-                <temba-label data-id="{{ label.id }}" icon="label" clickable class="mx-1 my-1">
-                  {{ label.name }}
-                </temba-label>
-              </a>
-            {% endfor %}
-          </div>
-        </div>
-      </td>
-      <td>
-        {% if not object.is_archived %}
-          <div class="whitespace-no-break flex items-center justify-end">
-            {% if object.has_issues %}
-              <div>
-                <temba-tip position="top" text="{{ _("Has issues") |escapejs }}" slot="toggle">
-                  <temba-icon name="issue" class="mr-2" clickable="true">
-                  </temba-icon>
-                </temba-tip>
+          </td>
+          <td>
+            {% if not object.is_archived %}
+              <div class="whitespace-no-break flex items-center justify-end">
+                {% if object.has_issues %}
+                  <div>
+                    <temba-tip position="top" text="{{ _("Has issues") |escapejs }}" slot="toggle">
+                      <temba-icon name="issue" class="mr-2" clickable="true">
+                      </temba-icon>
+                    </temba-tip>
+                  </div>
+                {% endif %}
+                {% if object.run_stats.total %}
+                  <div onclick="goto(event)"
+                       href="{% url "flows.flow_results" object.uuid %}"
+                       class="linked mr-2 whitespace-nowrap">{{ object.run_stats.total|intcomma }}</div>
+                  /
+                  <div onclick="goto(event)"
+                       href="{% url "flows.flow_results" object.uuid %}"
+                       class="text-center linked mx-2 whitespace-nowrap">{{ object.run_stats.completion }}%</div>
+                {% endif %}
               </div>
             {% endif %}
-            {% if object.run_stats.total %}
-              <div onclick="goto(event)"
-                   href="{% url "flows.flow_results" object.uuid %}"
-                   class="linked mr-2 whitespace-nowrap">{{ object.run_stats.total|intcomma }}</div>
-              /
-              <div onclick="goto(event)"
-                   href="{% url "flows.flow_results" object.uuid %}"
-                   class="text-center linked mx-2 whitespace-nowrap">{{ object.run_stats.completion }}%</div>
-            {% endif %}
-          </div>
-        {% endif %}
-      </td>
-    </tr>
-  {% empty %}
-    <tr class="empty_list">
-      <td colspan="99" class="text-center">{% trans "No flows" %}</td>
-    </tr>
-  {% endfor %}
-{% endblock table-body %}
+          </td>
+        </tr>
+      {% empty %}
+        <tr class="empty_list">
+          <td colspan="99" class="text-center">{% trans "No flows" %}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+{% endblock table %}
 {% block extra-script %}
   {{ block.super }}
   <script type="text/javascript">
diff --git a/templates/globals/global_list.html b/templates/globals/global_list.html
index c8d29c5579..d49cdb9eb1 100644
--- a/templates/globals/global_list.html
+++ b/templates/globals/global_list.html
@@ -17,48 +17,52 @@
     {% endblocktrans %}
   </div>
 {% endblock pre-table %}
-{% block table-body %}
-  {% for obj in object_list %}
-    <tr onclick="showUpdateGlobalModal({{ obj.id }})" class="hover-linked update">
-      <td style="min-width: 50px">{{ obj.name }}</td>
-      <td style="font-family: monospace; font-size: 12px;">@globals.{{ obj.key }}</td>
-      <td>
-        <div class="break-all">{{ obj.value|truncatechars:25 }}</div>
-      </td>
-      <td class="w-12">
-        <div class="flex text-center">
-          {% with usage_count=obj.usage_count %}
-            {% if usage_count %}
-              <div onclick="event.stopPropagation(); showGlobalUsagesModal('{{ obj.uuid }}');" class="uses">
-                <div class="lbl linked">
-                  {% blocktrans trimmed count counter=usage_count %}
-                    {{ counter }} use
-                  {% plural %}
-                    {{ counter }} uses
-                  {% endblocktrans %}
-                </div>
+{% block table %}
+  <table class="list lined scrolled">
+    <tbody>
+      {% for obj in object_list %}
+        <tr onclick="showUpdateGlobalModal({{ obj.id }})" class="hover-linked update">
+          <td style="min-width: 50px">{{ obj.name }}</td>
+          <td style="font-family: monospace; font-size: 12px;">@globals.{{ obj.key }}</td>
+          <td>
+            <div class="break-all">{{ obj.value|truncatechars:25 }}</div>
+          </td>
+          <td class="w-12">
+            <div class="flex text-center">
+              {% with usage_count=obj.usage_count %}
+                {% if usage_count %}
+                  <div onclick="event.stopPropagation(); showGlobalUsagesModal('{{ obj.uuid }}');" class="uses">
+                    <div class="lbl linked">
+                      {% blocktrans trimmed count counter=usage_count %}
+                        {{ counter }} use
+                      {% plural %}
+                        {{ counter }} uses
+                      {% endblocktrans %}
+                    </div>
+                  </div>
+                {% endif %}
+              {% endwith %}
+            </div>
+          </td>
+          <td class="w-10">
+            {% if org_perms.globals.global_delete %}
+              <div style="visibility:hidden"
+                   onclick="event.stopPropagation(); showDeleteGlobalModal('{{ obj.uuid }}');"
+                   class="pl-2 pt-1 delete-link linked text-gray-400">
+                <temba-icon name="delete_small">
+                </temba-icon>
               </div>
             {% endif %}
-          {% endwith %}
-        </div>
-      </td>
-      <td class="w-10">
-        {% if org_perms.globals.global_delete %}
-          <div style="visibility:hidden"
-               onclick="event.stopPropagation(); showDeleteGlobalModal('{{ obj.uuid }}');"
-               class="pl-2 pt-1 delete-link linked text-gray-400">
-            <temba-icon name="delete_small">
-            </temba-icon>
-          </div>
-        {% endif %}
-      </td>
-    </tr>
-  {% empty %}
-    <tr class="empty_list">
-      <td colspan="99" class="text-center">{% trans "No globals" %}</td>
-    </tr>
-  {% endfor %}
-{% endblock table-body %}
+          </td>
+        </tr>
+      {% empty %}
+        <tr class="empty_list">
+          <td colspan="99" class="text-center">{% trans "No globals" %}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+{% endblock table %}
 {% block extra-script %}
   {{ block.super }}
   <script>
diff --git a/templates/orgs/base/list.html b/templates/orgs/base/list.html
index d9ed012e93..857f5b22d6 100644
--- a/templates/orgs/base/list.html
+++ b/templates/orgs/base/list.html
@@ -13,16 +13,8 @@
   {% endif %}
   <div class="mt-4 shadow rounded-lg rounded-bl-none rounded-br-none bg-white">{% include "includes/short_pagination.html" %}</div>
   <div class="flex-grow overflow-y-auto shadow">
-    <table class="list lined scrolled {% if actions %}selectable{% endif %}">
-      <thead>
-        {% block table-head %}
-        {% endblock table-head %}
-      </thead>
-      <tbody>
-        {% block table-body %}
-        {% endblock table-body %}
-      </tbody>
-    </table>
+    {% block table %}
+    {% endblock table %}
   </div>
 {% endblock content %}
 {% block extra-style %}
diff --git a/templates/orgs/org_list.html b/templates/orgs/org_list.html
index ebf43a8a54..22752f44a0 100644
--- a/templates/orgs/org_list.html
+++ b/templates/orgs/org_list.html
@@ -7,40 +7,44 @@
   <temba-modax header="{{ _("Delete Workspace") |escapejs }}" id="delete-child">
   </temba-modax>
 {% endblock pre-table %}
-{% block table-head %}
-  <tr>
-    <th>{% trans "Name" %}</th>
-    <th style="text-align:right">{% trans "Users" %}</th>
-    <th style="text-align:right">{% trans "Contacts" %}</th>
-    <th style="text-align:right">{% trans "Created On" %}</th>
-    <th></th>
-  </tr>
-{% endblock table-head %}
-{% block table-body %}
-  {% for obj in object_list %}
-    <tr onclick="{% if obj.id != user_org.id %}showUpdateChildModal({{ obj.id }}){% endif %}"
-        class="{% if obj.id != user_org.id %}hover-linked update{% endif %}">
-      <td>{{ obj.name }}</td>
-      <td style="text-align:right">{{ obj.users.all|length }}</td>
-      <td style="text-align:right">{{ obj.get_contact_count|intcomma }}</td>
-      <td style="text-align:right">{{ obj.created_on|day }}</td>
-      <td class="w-2">
-        {% if obj.id != user_org.id %}
-          <div style="visibility:hidden"
-               onclick="event.stopPropagation(); showDeleteChildModal({{ obj.id }});"
-               class="pl-2 pt-1 delete-link linked text-gray-400">
-            <temba-icon name="delete_small">
-            </temba-icon>
-          </div>
-        {% endif %}
-      </td>
-    </tr>
-  {% empty %}
-    <tr class="empty_list">
-      <td colspan="99" class="text-center">{% trans "No workspaces" %}</td>
-    </tr>
-  {% endfor %}
-{% endblock table-body %}
+{% block table %}
+  <table class="list lined scrolled">
+    <thead>
+      <tr>
+        <th>{% trans "Name" %}</th>
+        <th style="text-align:right">{% trans "Users" %}</th>
+        <th style="text-align:right">{% trans "Contacts" %}</th>
+        <th style="text-align:right">{% trans "Created On" %}</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for obj in object_list %}
+        <tr onclick="{% if obj.id != user_org.id %}showUpdateChildModal({{ obj.id }}){% endif %}"
+            class="{% if obj.id != user_org.id %}hover-linked update{% endif %}">
+          <td>{{ obj.name }}</td>
+          <td style="text-align:right">{{ obj.users.all|length }}</td>
+          <td style="text-align:right">{{ obj.get_contact_count|intcomma }}</td>
+          <td style="text-align:right">{{ obj.created_on|day }}</td>
+          <td class="w-2">
+            {% if obj.id != user_org.id %}
+              <div style="visibility:hidden"
+                   onclick="event.stopPropagation(); showDeleteChildModal({{ obj.id }});"
+                   class="pl-2 pt-1 delete-link linked text-gray-400">
+                <temba-icon name="delete_small">
+                </temba-icon>
+              </div>
+            {% endif %}
+          </td>
+        </tr>
+      {% empty %}
+        <tr class="empty_list">
+          <td colspan="99" class="text-center">{% trans "No workspaces" %}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+{% endblock table %}
 {% block extra-script %}
   {{ block.super }}
   <script>
diff --git a/templates/orgs/user_list.html b/templates/orgs/user_list.html
index 3a7acfcdec..4831d7c63c 100644
--- a/templates/orgs/user_list.html
+++ b/templates/orgs/user_list.html
@@ -15,37 +15,41 @@
     </temba-alert>
   {% endif %}
 {% endblock pre-table %}
-{% block table-head %}
-  <tr>
-    <th>{% trans "Email" %}</th>
-    <th>{% trans "Name" %}</th>
-    <th>{% trans "Role" %}</th>
-    <th></th>
-  </tr>
-{% endblock table-head %}
-{% block table-body %}
-  {% for obj in object_list %}
-    <tr onclick="showUpdateUserModal({{ obj.id }})" class="hover-linked update">
-      <td>{{ obj.email }}</td>
-      <td>{{ obj.name }}</td>
-      <td>{{ obj.role.display }}</td>
-      <td class="w-10">
-        {% if obj.role.code != "A" or admin_count > 1 %}
-          <div style="visibility:hidden"
-               onclick="event.stopPropagation(); showDeleteUserModal({{ obj.id }});"
-               class="pl-2 pt-1 delete-link linked text-gray-400">
-            <temba-icon name="delete_small">
-            </temba-icon>
-          </div>
-        {% endif %}
-      </td>
-    </tr>
-  {% empty %}
-    <tr class="empty_list">
-      <td colspan="99" class="text-center">{% trans "No users" %}</td>
-    </tr>
-  {% endfor %}
-{% endblock table-body %}
+{% block table %}
+  <table class="list lined scrolled">
+    <thead>
+      <tr>
+        <th>{% trans "Email" %}</th>
+        <th>{% trans "Name" %}</th>
+        <th>{% trans "Role" %}</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for obj in object_list %}
+        <tr onclick="showUpdateUserModal({{ obj.id }})" class="hover-linked update">
+          <td>{{ obj.email }}</td>
+          <td>{{ obj.name }}</td>
+          <td>{{ obj.role.display }}</td>
+          <td class="w-10">
+            {% if obj.role.code != "A" or admin_count > 1 %}
+              <div style="visibility:hidden"
+                   onclick="event.stopPropagation(); showDeleteUserModal({{ obj.id }});"
+                   class="pl-2 pt-1 delete-link linked text-gray-400">
+                <temba-icon name="delete_small">
+                </temba-icon>
+              </div>
+            {% endif %}
+          </td>
+        </tr>
+      {% empty %}
+        <tr class="empty_list">
+          <td colspan="99" class="text-center">{% trans "No users" %}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+{% endblock table %}
 {% block extra-script %}
   {{ block.super }}
   <script>
diff --git a/templates/tickets/shortcut_list.html b/templates/tickets/shortcut_list.html
index dba009e388..3dec455018 100644
--- a/templates/tickets/shortcut_list.html
+++ b/templates/tickets/shortcut_list.html
@@ -12,40 +12,44 @@
     {% endblocktrans %}
   </div>
 {% endblock pre-table %}
-{% block table-body %}
-  {% for obj in object_list %}
-    <tr onclick="showUpdateShortcutModal({{ obj.id }})" class="hover-linked update">
-      <td class="whitespace-nowrap"
-          style="min-width: 50px;
-                 max-width:150px;
-                 overflow: hidden;
-                 text-overflow: ellipsis">{{ obj.name }}</td>
-      <td>
-        <div style="overflow: hidden;
-                    text-overflow: ellipsis;
-                    display: -webkit-box;
-                    line-height: 16px;
-                    max-height: 16px;
-                    -webkit-line-clamp: 1;
-                    -webkit-box-orient: vertical">{{ obj.text }}</div>
-      </td>
-      <td class="w-10">
-        {% if org_perms.tickets.shortcut_delete %}
-          <div style="visibility:hidden"
-               onclick="event.stopPropagation(); showDeleteShortcutModal({{ obj.id }});"
-               class="pl-2 pt-1 delete-link linked text-gray-400">
-            <temba-icon name="delete_small">
-            </temba-icon>
-          </div>
-        {% endif %}
-      </td>
-    </tr>
-  {% empty %}
-    <tr class="empty_list">
-      <td colspan="99" class="text-center">{% trans "No shortcuts" %}</td>
-    </tr>
-  {% endfor %}
-{% endblock table-body %}
+{% block table %}
+  <table class="list lined scrolled">
+    <tbody>
+      {% for obj in object_list %}
+        <tr onclick="showUpdateShortcutModal({{ obj.id }})" class="hover-linked update">
+          <td class="whitespace-nowrap"
+              style="min-width: 50px;
+                     max-width:150px;
+                     overflow: hidden;
+                     text-overflow: ellipsis">{{ obj.name }}</td>
+          <td>
+            <div style="overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        line-height: 16px;
+                        max-height: 16px;
+                        -webkit-line-clamp: 1;
+                        -webkit-box-orient: vertical">{{ obj.text }}</div>
+          </td>
+          <td class="w-10">
+            {% if org_perms.tickets.shortcut_delete %}
+              <div style="visibility:hidden"
+                   onclick="event.stopPropagation(); showDeleteShortcutModal({{ obj.id }});"
+                   class="pl-2 pt-1 delete-link linked text-gray-400">
+                <temba-icon name="delete_small">
+                </temba-icon>
+              </div>
+            {% endif %}
+          </td>
+        </tr>
+      {% empty %}
+        <tr class="empty_list">
+          <td colspan="99" class="text-center">{% trans "No shortcuts" %}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+{% endblock table %}
 {% block extra-script %}
   {{ block.super }}
   <script>