Better styling for snippets 'last updated' link

client/scss/components/_header.scss

@@ -126,6 +126,25 @@ header {
         width: auto;
         padding: 0;
     }
+
+    .last-updated {
+        ul {
+            padding: 0;
+        }
+
+        li {
+            display: inline;
+            margin-right: 2em;
+        }
+
+        .avatar.small {
+            margin-left: 0;
+        }
+
+        a {
+            font-weight: bold;
+        }
+    }
 }
 
 @include media-breakpoint-up(sm) {

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

@@ -50,4 +50,5 @@
             {% endblock %}
         </div>
     </div>
+    {% block extra_rows %}{% endblock %}
 </header>

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

@@ -0,0 +1,22 @@
+{% extends "wagtailadmin/shared/header_with_locale_selector.html" %}
+{% load wagtailadmin_tags i18n %}
+
+{% block extra_rows %}
+    {% url 'wagtailsnippets:history' model_opts.app_label model_opts.model_name instance.pk|admin_urlquote as history_url %}
+
+    {% if latest_log_entry %}
+    <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="" /></span>
+                {% trans "Last updated" %}
+                {% include "wagtailadmin/shared/last_updated.html" with last_updated=latest_log_entry.timestamp time_prefix="at" %}
+            </li>
+            {% if history_url %}
+                <li><a href="{{ history_url }}">{% icon "history" class_name="default" %} {% trans "History" %}</a></li>
+            {% endif %}
+            <li>{% icon "snippet" class_name="default" %} {{ model_opts.verbose_name|capfirst }}</li>
+        </ul>
+    </div>
+    {% endif %}
+{% endblock %}

wagtail/snippets/templates/wagtailsnippets/snippets/edit.html

@@ -3,14 +3,7 @@
 {% block titletag %}{% blocktrans with snippet_type_name=model_opts.verbose_name %}Editing {{ snippet_type_name }} - {{ instance }}{% endblocktrans %}{% endblock %}
 {% block content %}
     {% trans "Editing" as editing_str %}
-    {% include "wagtailadmin/shared/header_with_locale_selector.html" with title=editing_str subtitle=instance icon="snippet" tabbed=1 merged=1 %}
-
-    {% if latest_log_entry %}
-        <span class="avatar small" data-wagtail-tooltip="{{ latest_log_entry.user_display_name }}"><img src="{% avatar_url latest_log_entry.user size=25 %}" alt="" /></span>
-        {% trans "Last updated" %}
-        {% include "wagtailadmin/shared/last_updated.html" with last_updated=latest_log_entry.timestamp time_prefix="at" %}
-        - <a href="{% url 'wagtailsnippets:history' model_opts.app_label model_opts.model_name instance.pk|admin_urlquote %}">History</a>
-    {% endif %}
+    {% include "wagtailsnippets/snippets/_header_with_history.html" with title=editing_str subtitle=instance icon="snippet" tabbed=1 merged=1 %}
 
     <div class="row row-flush">
 
@@ -66,5 +59,16 @@
             window.wagtailConfig = window.wagtailConfig || {};
             window.wagtailConfig.ACTIVE_CONTENT_LOCALE = '{{ locale.language_code|escapejs }}';
         {% endif %}
+
+        $(function() {
+            $('[data-wagtail-tooltip]').tooltip({
+                animation: false,
+                title: function() {
+                    return $(this).attr('data-wagtail-tooltip');
+                },
+                trigger: 'hover',
+                placement: 'bottom',
+            });
+        })
     </script>
 {% endblock %}

wagtail/snippets/tests.py

@@ -531,6 +531,13 @@ class TestSnippetEditView(BaseTestSnippetEditView):
     def setUp(self):
         super().setUp()
         self.test_snippet = Advert.objects.get(pk=1)
+        ModelLogEntry.objects.create(
+            content_type=ContentType.objects.get_for_model(Advert),
+            label="Test Advert",
+            action='wagtail.create',
+            timestamp=make_aware(datetime.datetime(2021, 9, 30, 10, 1, 0)),
+            object_id='1',
+        )
 
     def test_get_with_limited_permissions(self):
         self.user.is_superuser = False
@@ -550,6 +557,11 @@ class TestSnippetEditView(BaseTestSnippetEditView):
         self.assertNotContains(response, '<a href="#advert" class="active" data-tab="advert">Advert</a>', html=True)
         self.assertNotContains(response, '<a href="#other" class="" data-tab="other">Other</a>', html=True)
 
+        # "Last updated" timestamp should be present
+        self.assertContains(response, 'data-wagtail-tooltip="Sept. 30, 2021, 10:01 a.m."')
+        # History link should be present
+        self.assertContains(response, 'href="/admin/snippets/tests/advert/history/%d/"' % self.test_snippet.pk)
+
         url_finder = AdminURLFinder(self.user)
         expected_url = '/admin/snippets/tests/advert/edit/%d/' % self.test_snippet.pk
         self.assertEqual(url_finder.get_edit_url(self.test_snippet), expected_url)