Remove slippers

airlock/settings.py

@@ -91,7 +91,6 @@ def get_env_var(name):
     # requirements for assets library
     "django.contrib.humanize",
     "django_vite",
-    "slippers",
     "django_htmx",
     "django_extensions",
 ]
@@ -150,8 +149,7 @@ def get_env_var(name):
                 "airlock.nav.dev_users",
             ],
             "builtins": [
-                "slippers.templatetags.slippers",  # required for assets library
-                "airlock.templatetags.airlock_components",  # required for airlock custom components
+                "airlock.templatetags.template_components",
             ],
             "debug": DEBUG,  # required for template coverage
         },
@@ -383,9 +381,30 @@ class MissingVariableErrorFilter(logging.Filter):
         "_partials",
     )
 
+    def _resolve_actual_template(self, exc_info):
+        # context.template_name is the top-level template, so {% include %}d
+        # templates can't be distinguished by that name. The render_context tracks
+        # the actual template currently being rendered via push_state — look it up
+        # via the exception traceback's frame locals.
+        if not exc_info:
+            return None
+        tb = exc_info[2]
+        while tb:
+            ctx = tb.tb_frame.f_locals.get("context")
+            render_ctx = getattr(ctx, "render_context", None)
+            template = getattr(render_ctx, "template", None)
+            origin = getattr(template, "origin", None)
+            name = getattr(origin, "template_name", None)
+            if name:
+                return name
+            tb = tb.tb_next
+        return None
+
     def filter(self, record):  # pragma: no cover
         if record.msg.startswith("Exception while resolving variable "):
-            template_name = record.args[1]
+            template_name = (
+                self._resolve_actual_template(record.exc_info) or record.args[1]
+            )
             if (
                 not template_name.startswith(self.ignored_prefixes)
                 # This shows up when rendering Django's internal error pages

airlock/templates/_components/clusterize-table.html

@@ -172,7 +172,7 @@
     {% endcomment %}
     <table id="clusterize-table-content" style="display:none">
       <tbody>
-        {{ children }}
+        {% body %}
       </tbody>
     </table>
   </div>

airlock/templates/_components/datatable.html

@@ -14,7 +14,7 @@
       {% endif %}
       {% attrs id data-column-filter=column_filter data-sortable=sortable data-searchable=searchable %}
     >
-      {{ children }}
+      {% body %}
     </table>
   </div>
 </div>

airlock/templates/_components/header/base.html

@@ -5,9 +5,7 @@ <h1 class="header__title">
 
   {% block content %}{% endblock %}
 
-  {% if children %}
-    <div class="header__actions">
-      {{ children }}
-    </div>
+  {% body as body_content %}{% if body_content %}
+    <div class="header__actions">{{ body_content }}</div>
   {% endif %}
 </header>

airlock/templates/_components/header/request/header.html

@@ -1,7 +1,7 @@
 {% extends "../base.html" %}
 
 {% block extra_title %}
-  {% pill variant="info" text=release_request.status.description %}
+  {% include "_components/pill/pill.html" with variant="info" text=release_request.status.description %}
 {% endblock %}
 
 {% block content %}
@@ -37,7 +37,7 @@
           <span class="sr-only">User</span>
           <img class="icon" src="/static/icons/person.svg" alt="">
         </dt>
-        <dd>{% airlock_user user=release_request.author %}</dd>
+        <dd>{% include "_components/user.html" with user=release_request.author %}</dd>
       </div>
       <div>
         <dt>

airlock/templates/_components/list-group/list-group-item-dropdown.html

@@ -1,8 +1,8 @@
 <li {% if disabled %}class="block px-4 py-3 font-semibold cursor-not-allowed text-slate-700 break-words sm:px-6 {{ class }}"{% endif %}>
   <div class="flex items-center justify-between px-4 sm:px-6">
     {% if not disabled %}
-      <a class="transition-colors duration-200 px-2 py-3 font-semibold text-oxford-600 break-words sm:px-2 {{ class }}" {% attrs aria-checked aria-labelled-by href role %}>
-        {{ children }}
+      <a class="transition-colors duration-200 px-2 py-3 font-semibold text-oxford-600 break-words sm:px-2 {{ class }}" {% attrs aria_checked aria_labelled_by href role %}>
+        {% body %}
       </a>
       {% if custom_button %}
         {{ custom_button }}

airlock/templates/_components/list-group/list-group-rich-item.html

@@ -50,22 +50,22 @@
           {% if status_text %}
 
             {% if status_text == "APPROVED - FILES UPLOADING" or status_text == "RELEASED" %}
-              {% pill variant="success" text=status_text %}
+              {% include "_components/pill/pill.html" with variant="success" text=status_text %}
 
             {% elif status_text == "SUBMITTED" or status_text == "ONE REVIEW SUBMITTED" or status_text == "ALL REVIEWS SUBMITTED" %}
-              {% pill variant="primary" text=status_text %}
+              {% include "_components/pill/pill.html" with variant="primary" text=status_text %}
 
             {% elif status_text == "REJECTED" %}
-              {% pill variant="danger" text=status_text %}
+              {% include "_components/pill/pill.html" with variant="danger" text=status_text %}
 
             {% elif status_text == "RETURNED" %}
-              {% pill variant="warning" text=status_text %}
+              {% include "_components/pill/pill.html" with variant="warning" text=status_text %}
 
             {% elif status_text == "PENDING" %}
-              {% pill variant="info" text=status_text %}
+              {% include "_components/pill/pill.html" with variant="info" text=status_text %}
 
             {% elif status_text == "WITHDRAWN" %}
-              {% pill variant="danger-outline" text=status_text %}
+              {% include "_components/pill/pill.html" with variant="danger-outline" text=status_text %}
             {% endif %}
           {% elif custom_status %}
             {{ custom_status }}
@@ -74,6 +74,6 @@
         </dd>
       {% endif %}
     </div>
-    {{ children }}
+    {% body %}
   </dl>
 </li>

airlock/templates/_includes/header.html

@@ -60,7 +60,7 @@
                         "
                   data-testid="switch-user"
                 >
-                  {% airlock_user user=request.user %}
+                  {% include "_components/user.html" with user=request.user %}
                   <span class="opacity-75 ml-1">
                     <img height="16" width="16" class="icon inline-block group-open:hidden" src="/static/icons/keyboard_arrow_down.svg" alt="">
                     <img height="16" width="16" class="icon hidden group-open:inline-block" src="/static/icons/keyboard_arrow_up.svg" alt="">

airlock/templates/activity.html

@@ -1,9 +1,9 @@
 {% load airlock %}
 {% load django_vite %}
 
-{% #card title=title class="mt-5" %}
+{% component "_components/card/card.html" with title=title class="mt-5" %}
   {% if activity %}
-    {% #datatable per_page="10" column_filter searchable sortable %}
+    {% component "_components/datatable.html" with per_page="10" column_filter=True searchable=True sortable=True %}
       <thead>
         <tr>
           <th>
@@ -44,7 +44,7 @@
         {% for log in activity %}
           <tr>
             <td>{{ log.created_at|date:'Y-m-d H:i' }}</td>
-            <td>{% airlock_user user=log.user %}</td>
+            <td>{% include "_components/user.html" with user=log.user %}</td>
             <td>{{ log.description }}</td>
             <td>
               <ul>
@@ -57,12 +57,12 @@
           </tr>
         {% endfor %}
       </tbody>
-    {% /datatable %}
+    {% endcomponent %}
   {% else %}
-    {% #list_group %}
-      {% list_group_empty title="No activity" description="There has been no recent activity on this workspace" %}
-    {% /list_group %}
+    {% component "_components/list-group/list-group.html" %}
+      {% include "_components/list-group/list-group-empty.html" with title="No activity" description="There has been no recent activity on this workspace" %}
+    {% endcomponent %}
   {% endif %}
-{% /card %}
+{% endcomponent %}
 
 {% vite_asset "assets/src/scripts/datatable.js" %}

airlock/templates/add_or_change_files.html

@@ -5,46 +5,46 @@
   div.filetype-radio div { display: inline; }
   div.filetype-radio label { display: inline; }
 </style>
-{% #modal id="addOrChangeRequestFile" custom_button=button autoshow=True %}
-  {% #card container=True title=modal_title %}
+{% component "_components/modal/modal.html" with id="addOrChangeRequestFile" custom_button=button autoshow=True %}
+  {% component "_components/card/card.html" with container=True title=modal_title %}
     <form action="{{ form_url }}" method="POST" aria-label="add-or-change-file-form">
       {% csrf_token %}
       {{ form.next_url }}
       {{ formset.management_form }}
-      {% #list_group %}
+      {% component "_components/list-group/list-group.html" %}
         {% for name, reason in files_ignored.items %}
-          {% #list_group_item %}
+          {% component "_components/list-group/list-group-item.html" %}
             <div class="flex items-center gap-2 justify-between">
               <span>{{ name }}</span>
               <span class="flex flex-row">{{ reason }}</span>
             </div>
-          {% /list_group_item %}
+          {% endcomponent %}
         {% endfor %}
         {% for formset_form in formset %}
-          {% #list_group_item %}
+          {% component "_components/list-group/list-group-item.html" %}
             <div class="flex flex-col gap-1">
               <div class="flex items-center gap-2 justify-between">
                 <span>{{ formset_form.file.value }}</span>
                 {{ formset_form.file }}
-                {% form_radios field=formset_form.filetype class="flex flex-row whitespace-nowrap gap-2" selected=formset_form.filetype.initial %}
+                {% include "_components/form/radio_list.html" with field=formset_form.filetype class="flex flex-row whitespace-nowrap gap-2" selected=formset_form.filetype.initial %}
               </div>
               {% if formset_form.filetype.help_text %}
                 <div class="text-xs text-slate-600">{{ formset_form.filetype.help_text }}</div>
               {% endif %}
             </div>
-          {% /list_group_item %}
+          {% endcomponent %}
         {% endfor %}
-      {% /list_group %}
+      {% endcomponent %}
 
       {% if not no_valid_files %}
-        {% form_select class="w-full max-w-lg mx-auto" label="Select a file group" field=form.filegroup choices=form.filegroup.field.choices selected=form.filegroup.initial %}
-        {% form_input class="w-full max-w-lg mx-auto" label="Or create a new file group" field=form.new_filegroup %}
+        {% include "_components/form/select.html" with class="w-full max-w-lg mx-auto" label="Select a file group" field=form.filegroup choices=form.filegroup.field.choices selected=form.filegroup.initial %}
+        {% include "_components/form/input.html" with class="w-full max-w-lg mx-auto" label="Or create a new file group" field=form.new_filegroup %}
       {% endif %}
 
       <div class="mt-2">
-        {% #button type="submit" variant="success" id="add-or-change-file-button" disabled=no_valid_files %}{{ modal_button_text }}{% /button %}
-        {% #button variant="danger" type="cancel" %}Cancel{% /button %}
+        {% component "_components/button.html" with type="submit" variant="success" id="add-or-change-file-button" disabled=no_valid_files %}{{ modal_button_text }}{% endcomponent %}
+        {% component "_components/button.html" with variant="danger" type="cancel" %}Cancel{% endcomponent %}
       </div>
     </form>
-  {% /card %}
-{% /modal %}
+  {% endcomponent %}
+{% endcomponent %}

airlock/templates/all_workspaces.html

@@ -7,7 +7,7 @@
 
 {% block content %}
   <div class="flex flex-col gap-4 max-w-3xl">
-    {% airlock_header title="All Workspaces" %}
+    {% include "_components/header/base.html" with title="All Workspaces" %}
 
     <input
       type="text"

airlock/templates/all_workspaces_results.html

@@ -1,11 +1,11 @@
 <div id="workspace-results">
-  {% #card %}
-    {% #list_group id="workspaces" %}
+  {% component "_components/card/card.html" %}
+    {% component "_components/list-group/list-group.html" with id="workspaces" %}
       {% for workspace in workspaces %}
-        {% #list_group_item href=workspace.get_url %}{{ workspace.display_name }}{% /list_group_item %}
+        {% component "_components/list-group/list-group-item.html" with href=workspace.get_url %}{{ workspace.display_name }}{% endcomponent %}
       {% empty %}
-        {% list_group_empty title="No workspaces found" description="No workspaces match your search" %}
+        {% include "_components/list-group/list-group-empty.html" with title="No workspaces found" description="No workspaces match your search" %}
       {% endfor %}
-    {% /list_group %}
-  {% /card %}
+    {% endcomponent %}
+  {% endcomponent %}
 </div>

airlock/templates/base.html

@@ -31,7 +31,7 @@
 
     <main class="max-h-full bg-slate-100 flex flex-col flex-1">
       <div class="container xl:max-w-screen-xl pt-4 pb-4" id="content">
-        {% alerts messages=messages %}
+        {% include "_partials/alerts.html" %}
         {% block content %}{% endblock %}
       </div>
       {% block full_width_content %}{% endblock full_width_content %}

airlock/templates/file_browser/_includes/file_content.html

@@ -1,5 +1,5 @@
 {% load static %}
-{% #card id="fileCard" title=path_item.name container=False custom_button=buttons %}
+{% component "_components/card/card.html" with id="fileCard" title=path_item.name container=False custom_button=buttons %}
   <div class="loading-indicator htmx-indicator pointer-events-none fixed w-full h-full bg-white border-t border-slate-200 pl-4">
     Loading...
     <img height="16" width="16" class="icon animate-spin" src="{% static 'icons/progress_activity.svg' %}" alt="">
@@ -14,4 +14,4 @@
     src="{{ path_item.contents_url }}"
     title="{{ path_item.relpath }}"
   ></iframe>
-{% /card %}
+{% endcomponent %}

airlock/templates/file_browser/_includes/uploaded_files_count.html

@@ -8,9 +8,9 @@
   <div class="flex flex-row flex-wrap gap-6" id="uploaded-files-count">
     {{ release_request.uploaded_files_count }}
     {% if release_request.status.value == "RELEASED" %}
-      {% icon_check_circle_solid class="h-5 w-5 text-green-700" %}
+      {% include "_icons/check-circle-solid.svg" with class="h-5 w-5 text-green-700" %}
     {% elif upload_in_progress %}
-      {% icon_custom_spinner class="h-5 w-5 text-bn-egg-500 animate-spin stroke-current stroke-2" %}
+      {% include "_icons/custom/spinner.svg" with class="h-5 w-5 text-bn-egg-500 animate-spin stroke-current stroke-2" %}
     {% endif %}
   </div>
 </div>

airlock/templates/file_browser/file_content/_includes/csv_summary.html

@@ -3,7 +3,7 @@
   #notes-list {list-style: circle; list-style-position: inside;}
 </style>
 
-{% #card container=True %}
+{% component "_components/card/card.html" with container=True %}
   <div class="text-sm">
     <table class="table-auto" id="csv-summary-table">
       <thead>
@@ -30,4 +30,4 @@
     {{ summary.notes }}
   </details>
 
-{% /card %}
+{% endcomponent %}

airlock/templates/file_browser/file_content/csv.html

@@ -47,12 +47,12 @@
           {% endfor %}
         </tr>
       {% endfragment %}
-      {% #clusterize_table header_row=header_row %}
+      {% component "_components/clusterize-table.html" with header_row=header_row %}
         {% for index, row in rows %}
           <tr><td class="datatable-row-number">{{ index }}</td>
             {% for cell in row %}<td>{{ cell }}</td>{% endfor %}</tr>
         {% endfor %}
-      {% /clusterize_table %}
+      {% endcomponent %}
 
     {% else %}
       <table>

airlock/templates/file_browser/file_content/text.html

@@ -2,10 +2,10 @@
 {% block metatitle %}{{ filename }}{% endblock %}
 {% block content %}
   {% if truncated|default:False %}
-    {% #alert variant="info" title="Log truncated" class="mt-4" no_icon=True %}
+    {% component "_components/alert/alert.html" with variant="info" title="Log truncated" class="mt-4" no_icon=True %}
       This log file is larger than the log viewing limit of {{ limit_kb }}kb, so we have only shown you the last {{ limit_kb }}kb.
       If you need to see more of the log, contact OpenSAFELY tech support.
-    {% /alert %}
+    {% endcomponent %}
   {% endif %}
 <pre class="{{ class }}">{{ text }}</pre>
 {% endblock %}

airlock/templates/file_browser/repo/dir.html

@@ -2,7 +2,7 @@
 {% load static %}
 {% load airlock %}
 
-{% #card title=path_item.name container=True %}
+{% component "_components/card/card.html" with title=path_item.name container=True %}
   {% fragment as header_row %}
     <tr>
       <th class="sort-ascending">
@@ -17,14 +17,14 @@
       </th>
     </tr>
   {% endfragment %}
-  {% #clusterize_table header_row=header_row %}
+  {% component "_components/clusterize-table.html" with header_row=header_row %}
     {% for path in path_item.children %}
       <tr>
         <td class="name"><a class="{{ path.html_classes }}" href="{{ path.url }}">{{ path.name }}</a></td>
       </tr>
     {% endfor %}
-  {% /clusterize_table %}
-{% /card %}
+  {% endcomponent %}
+{% endcomponent %}
 
 {% vite_hmr_client %}
 {% vite_asset "assets/src/scripts/datatable.js" %}

airlock/templates/file_browser/repo/index.html

@@ -1,6 +1,5 @@
 {% extends "file_browser/index.html" %}
 
 {% block content %}
-  {% #airlock_repo_header current_request=current_request title=title workspace=workspace return_url=return_url %}
-  {% /airlock_repo_header %}
+  {% include "_components/header/repo/header.html" with current_request=current_request title=title workspace=workspace return_url=return_url %}
 {% endblock content %}