From 876b0e0f19e1307ad556c3bbe3ae785abfb56590 Mon Sep 17 00:00:00 2001
From: Sage Abdullah <sage.abdullah@torchbox.com>
Date: Fri, 23 Jun 2023 12:46:38 +0100
Subject: [PATCH] Move comments counter badge markup to base SidePanelToggle
 component

---
 client/src/entrypoints/admin/comments.js              | 11 +++--------
 .../wagtailadmin/shared/headers/slim_header.html      |  3 ++-
 .../wagtailadmin/shared/side_panel_toggle.html        |  5 +++++
 wagtail/admin/ui/side_panels.py                       |  5 +++++
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/src/entrypoints/admin/comments.js b/client/src/entrypoints/admin/comments.js
index e7f35aaa82..9b96aa01c9 100644
--- a/client/src/entrypoints/admin/comments.js
+++ b/client/src/entrypoints/admin/comments.js
@@ -312,16 +312,10 @@ window.comments = (() => {
     });
 
     // Keep number of comments up to date with comment app
-    const commentToggle = document.querySelector(
-      '[data-side-panel-toggle="comments"]',
+    const commentCounter = document.querySelector(
+      '[data-side-panel-toggle="comments"] [data-side-panel-toggle-counter]',
     );
 
-    const commentCounter = document.createElement('div');
-    commentCounter.className =
-      '-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] rtl:w-translate-x-[4px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-bg-surface-button-default w-text-text-button w-border w-border-surface-page w-rounded-[1rem]';
-
-    commentToggle.appendChild(commentCounter);
-
     const updateCommentCount = () => {
       const commentCount = commentApp.selectors.selectCommentCount(
         commentApp.store.getState(),
@@ -334,6 +328,7 @@ window.comments = (() => {
 
       if (commentCount > 0) {
         commentCounter.innerText = commentCount.toString();
+        commentCounter.hidden = false;
       } else {
         // Note: Hide the circle when its content is empty
         commentCounter.hidden = true;
diff --git a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
index 5c228dfdf9..77d83b017e 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
@@ -1,6 +1,7 @@
 {% load wagtailadmin_tags i18n %}
 {% fragment as nav_icon_classes %}w-w-4 w-h-4 group-hover:w-transform group-hover:w-scale-110{% endfragment %}
-{% fragment as nav_icon_button_classes %}w-w-slim-header w-h-slim-header w-bg-transparent w-border-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-text-meta w-transition w-group hover:w-text-text-label focus:w-text-text-label expanded:w-text-text-label expanded:w-border-y-2 expanded:w-border-b-current{% endfragment %}
+{% fragment as nav_icon_button_classes %}w-w-slim-header w-h-slim-header w-bg-transparent w-border-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-text-meta w-transition w-group hover:w-text-text-label focus:w-text-text-label expanded:w-text-text-label expanded:w-border-y-2 expanded:w-border-b-current w-shrink-0{% endfragment %}
+{% fragment as nav_icon_counter_classes %}-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] rtl:w-translate-x-[4px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-text-text-button w-border w-border-surface-page w-rounded-[1rem]{% endfragment %}
 {# Z index 99 to ensure header is always above  #}
 <header class="w-slim-header w-flex w-flex-col sm:w-flex-row w-items-center w-justify-between w-bg-surface-header w-border-b w-border-border-furniture w-px-0 w-py-0 w-mb-0 w-relative w-top-0 w-z-header sm:w-sticky w-min-h-slim-header">
 
diff --git a/wagtail/admin/templates/wagtailadmin/shared/side_panel_toggle.html b/wagtail/admin/templates/wagtailadmin/shared/side_panel_toggle.html
index 08aabf0cc1..7225141868 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/side_panel_toggle.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/side_panel_toggle.html
@@ -10,4 +10,9 @@
     aria-expanded="false"
 >
     {% icon name=toggle.icon_name classname=nav_icon_classes %}
+    {% if toggle.has_counter %}
+        <div data-side-panel-toggle-counter class="{{ nav_icon_counter_classes }} {{ toggle.counter_classname|default:'w-bg-surface-button-default'}}" {% if not count %}hidden{% endif %}>
+            {{ count }}
+        </div>
+    {% endif %}
 </button>
diff --git a/wagtail/admin/ui/side_panels.py b/wagtail/admin/ui/side_panels.py
index 086b8b015f..90db9859d5 100644
--- a/wagtail/admin/ui/side_panels.py
+++ b/wagtail/admin/ui/side_panels.py
@@ -14,6 +14,8 @@ class BaseSidePanel(Component):
         template_name = "wagtailadmin/shared/side_panel_toggle.html"
         aria_label = ""
         icon_name = ""
+        has_counter = True
+        counter_classname = ""
 
         def __init__(self, panel):
             self.panel = panel
@@ -23,10 +25,12 @@ class BaseSidePanel(Component):
             inherit = {
                 "nav_icon_button_classes",
                 "nav_icon_classes",
+                "nav_icon_counter_classes",
             }
             context = {key: parent_context.get(key) for key in inherit}
             context["toggle"] = self
             context["panel"] = self.panel
+            context["count"] = 0
             return context
 
     def __init__(self, object, request):
@@ -311,6 +315,7 @@ class BasePreviewSidePanel(BaseSidePanel):
     class SidePanelToggle(BaseSidePanel.SidePanelToggle):
         aria_label = gettext_lazy("Toggle preview")
         icon_name = "mobile-alt"
+        has_counter = False
 
     name = "preview"
     title = gettext_lazy("Preview")