Migrate avatar template to an include tag

Includes style guide & storybook implementation
Fixes wagtail#8655

CHANGELOG.txt

@@ -123,6 +123,7 @@ Changelog
  * Maintenance: Migrate workflow and workflow tasks enable action and lock/unlock actions to a Stimulus controller (Loveth Omokaro)
  * Maintenance: Pull out icon sprite setup function from inline script to its own TypeScript file & add unit tests (Loveth Omokaro)
  * Maintenance: Upgraded Transifex configuration to v3 (Loic Teixeira)
+ * Maintenance: Replace repeated HTML `avatar` component with a template tag include `{% avatar ... %}` throughout the admin interface (Aman Pandey)
 
 
 4.1.2 (xx.xx.xxxx) - IN DEVELOPMENT

docs/releases/4.2.md

@@ -167,6 +167,7 @@ This feature was developed by Matt Westcott, and sponsored by [YouGov](https://y
  * Migrate workflow and workflow tasks enable action and lock/unlock actions to a Stimulus controller (Loveth Omokaro)
  * Pull out icon sprite setup function from inline script to its own TypeScript file & add unit tests (Loveth Omokaro)
  * Upgraded Transifex configuration to v3 (Loic Teixeira)
+ * Replace repeated HTML `avatar` component with a template tag include `{% avatar ... %}` throughout the admin interface (Aman Pandey)
 
 ## Upgrade considerations
 

wagtail/admin/templates/wagtailadmin/account/settings_panels/avatar.html

@@ -2,9 +2,7 @@
 {% block content %}
     <div class="avatar-panel">
         <div class="avatar-panel__image">
-            <div class="avatar large">
-                <img src="{% avatar_url request.user 70 %}" alt="">
-            </div>
+            {% avatar user=request.user size="large" %}
         </div>
         <div class="avatar-panel__form">
             <label for="id_avatar-avatar">{% trans "Upload a profile picture:" %}</label>

wagtail/admin/templates/wagtailadmin/pages/workflow_history/detail.html

@@ -18,7 +18,7 @@ <h2>{% icon "clipboard-list" class_name="initial" %} {{ workflow_state.workflow.
 
         <p>
             {% blocktrans trimmed with modified_by=workflow_state.requested_by|user_display_name %}Requested by <b>{{ modified_by }}</b>{% endblocktrans %}
-            <span class="avatar small"><img src="{% avatar_url workflow_state.requested_by size=25 %}" alt="" decoding="async" loading="lazy"/></span>
+            {% avatar user=workflow_state.requested_by size="small" %}
         </p>
 
         <p>

wagtail/admin/templates/wagtailadmin/shared/avatar.html

@@ -0,0 +1,21 @@
+{% load wagtailadmin_tags %}
+{% comment "text/markdown" %}
+    Displays a user avatar using the avatar template
+    Variables this template accepts:
+
+    - `classname` - if present, adds classname to the root class list
+    - `user` - A user object to use for the avatar image
+    - `size` (string?) - small, large, square
+    - `tooltip` (string?) - Modifier classes
+{% endcomment %}
+<span class='{% classnames "avatar" size classname %}' {% if tooltip %} data-wagtail-tooltip="{{ tooltip }}" {% endif %}>
+    {% if size == 'small' %}
+        <img src="{% avatar_url user size=25 %}" alt="" decoding="async" loading="lazy"/>
+    {% elif size == 'large' %}
+        <img src="{% avatar_url user size=100 %}" alt="" decoding="async" loading="lazy"/>
+    {% elif size == 'square' %}
+        <img src="{% avatar_url user %}" alt="" decoding="async" loading="lazy"/>
+    {% else %}
+        <img src="{% avatar_url user %}" alt="" decoding="async" loading="lazy"/>
+    {% endif %}
+</span>

wagtail/admin/templates/wagtailadmin/shared/avatar.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Pattern, generateDocs } from 'storybook-django/src/react';
+
+import template from './avatar.html';
+
+const { docs, argTypes } = generateDocs(template);
+
+export default {
+  parameters: {
+    docs,
+  },
+  argTypes: {
+    ...argTypes,
+    size: {
+      options: [null, 'small', 'large', 'square'],
+    },
+  },
+};
+
+const Template = (args) => <Pattern filename={__filename} context={args} />;
+
+export const Base = Template.bind({});
+Base.args = {
+  size: 'null',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+};
+
+export const Square = Template.bind({});
+Square.args = {
+  size: 'square',
+};

wagtail/admin/templates/wagtailadmin/shared/user_avatar.html

@@ -1,7 +1,5 @@
 {% load wagtailadmin_tags %}
 
-<span class="avatar small">
-    <img src="{% avatar_url user size=25 %}" alt="" decoding="async" loading="lazy"/>
-</span>
+{% avatar user=user size="small" %}
 
 {% if not username %}{{ user }}{% else %}{{ username }}{% endif %}

wagtail/admin/templatetags/wagtailadmin_tags.py

@@ -589,6 +589,22 @@ def bulk_action_choices(context, app_label, model_name):
     return {"buttons": bulk_action_buttons}
 
 
+@register.inclusion_tag("wagtailadmin/shared/avatar.html")
+def avatar(user=None, classname=None, size=None, tooltip=None):
+    """
+    Displays a user avatar using the avatar template
+    Usage:
+    {% load wagtailadmin_tags %}
+    ...
+    {% avatar user=request.user size='small' tooltip='JaneDoe' %}
+    :param user: the user to get avatar information from (User)
+    :param size: default None (None|'small'|'large'|'square')
+    :param tooltip: Optional tooltip to display under the avatar (string)
+    :return: Rendered template snippet
+    """
+    return {"user": user, "classname": classname, "size": size, "tooltip": tooltip}
+
+
 @register.simple_tag
 def message_level_tag(message):
     """

wagtail/contrib/modeladmin/templates/modeladmin/includes/header_with_history.html

@@ -6,7 +6,7 @@
         {% if latest_log_entry %}
             <ul>
                 <li>
-                    <span class="avatar small" data-wagtail-tooltip="{{ latest_log_entry.user_display_name }}"><img src="{% avatar_url latest_log_entry.user size=25 %}" alt="" decoding="async" loading="async" /></span>
+                    {% avatar user=latest_log_entry.user size="small" tooltip=latest_log_entry.user_display_name %}
                     {% trans "Last updated" %}
                     {% include "wagtailadmin/shared/last_updated.html" with last_updated=latest_log_entry.timestamp show_time_prefix=True %}
                 </li>

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -568,9 +568,9 @@ <h2>Progress indicators</h2>
             <h2>Misc formatters</h2>
             <h3>Avatar icons</h3>
 
-            <p><span class="avatar"><img src="{% versioned_static 'wagtailadmin/images/default-user-avatar.png' %}" alt="" /></span> Avatar normal</p>
-            <p><span class="avatar square"><img src="{% versioned_static 'wagtailadmin/images/default-user-avatar.png' %}" alt="" /></span> Avatar square</p>
-            <p><span class="avatar small"><img src="{% versioned_static 'wagtailadmin/images/default-user-avatar.png' %}" alt="" /></span> Avatar small</p>
+            <p>{% avatar %} Avatar normal</p>
+            <p>{% avatar size="square" %} Avatar square</p>
+            <p>{% avatar size="small" %} Avatar small</p>
 
             <h3>Status tags</h3>
             <div class="status-tag primary">Primary tag</div>

wagtail/snippets/templates/wagtailsnippets/snippets/_header_with_history.html

@@ -6,7 +6,7 @@
         <div class="row last-updated">
             <ul>
                 <li>
-                    <span class="avatar small" data-wagtail-tooltip="{{ latest_log_entry.user_display_name }}"><img src="{% avatar_url latest_log_entry.user size=25 %}" alt="" decoding="async" loading="lazy"/></span>
+                    {% avatar user=latest_log_entry.user size="small" tooltip=latest_log_entry.user_display_name %}
                     {% trans "Last updated" %}
                     {% include "wagtailadmin/shared/last_updated.html" with last_updated=latest_log_entry.timestamp show_time_prefix=True %}
                 </li>

wagtail/users/templates/wagtailusers/users/list.html

@@ -36,7 +36,7 @@
                 {% include "wagtailadmin/bulk_actions/listing_checkbox_cell.html" with obj_type="user" obj=user aria_labelledby_prefix="user_" aria_labelledby=user.pk|unlocalize aria_labelledby_suffix="_title" %}
                 <td id="user_{{ user.pk|unlocalize }}_title" class="title" valign="top">
                     <div class="title-wrapper">
-                        <span class="avatar small"><img src="{% avatar_url user size=25 %}" alt="" decoding="async" loading="lazy"/></span>
+                        {% avatar user=user size="small" %}
                         <a href="{% url 'wagtailusers_users:edit' user.pk %}">{{ user|user_display_name }}</a>
                     </div>
                     <ul class="actions">