Allow footer text to be set on sub menus

client/src/components/Sidebar/Sidebar.stories.tsx

@@ -118,6 +118,7 @@ function bogStandardMenuModule(): MainMenuModuleDefinition {
           label: 'Settings',
           icon_name: 'cogs',
           classnames: '',
+          footer_text: 'Wagtail Version',
         },
         [
           new LinkMenuItemDefinition({
@@ -372,6 +373,7 @@ export function withLargeSubmenu() {
         label: 'Large menu',
         icon_name: 'cogs',
         classnames: '',
+        footer_text: 'Footer text',
       },
       menuItems
     )

client/src/components/Sidebar/menu/SubMenuItem.scss

@@ -77,10 +77,9 @@
 
     &__footer {
         margin: 0;
+        padding: 0.9em 1.7em;
         text-align: center;
         color: $color-menu-text;
-        line-height: $nav-footer-closed-height;
-        padding: 0;
     }
 
     &--visible {

client/src/components/Sidebar/menu/SubMenuItem.tsx

@@ -88,6 +88,7 @@ export const SubMenuItem: React.FunctionComponent<SubMenuItemProps> = (
         <ul aria-labelledby={`wagtail-sidebar-submenu${path.split('.').join('-')}-title`}>
           {renderMenu(path, item.menuItems, slim, state, dispatch, navigate)}
         </ul>
+        {item.footerText && <p className="sidebar-sub-menu-panel__footer">{item.footerText}</p>}
       </div>
     </li>
   );
@@ -98,14 +99,16 @@ export class SubMenuItemDefinition implements MenuItemDefinition {
   label: string;
   menuItems: MenuItemDefinition[];
   iconName: string | null;
-  classNames?: string
+  classNames?: string;
+  footerText: string;
 
   constructor(
     {
       name,
       label,
       icon_name: iconName = null,
-      classnames = undefined
+      classnames = undefined,
+      footer_text: footerText = '',
     }: any,
     menuItems: MenuItemDefinition[]
   ) {
@@ -114,6 +117,7 @@ export class SubMenuItemDefinition implements MenuItemDefinition {
     this.menuItems = menuItems;
     this.iconName = iconName;
     this.classNames = classnames;
+    this.footerText = footerText;
   }
 
   render({ path, slim, state, dispatch, navigate }) {
@@ -130,6 +134,3 @@ export class SubMenuItemDefinition implements MenuItemDefinition {
     );
   }
 }
-
-export class SettingsMenuItemDefinition extends SubMenuItemDefinition {
-}

client/src/entrypoints/admin/sidebar.js

@@ -1,6 +1,6 @@
 import { initSidebar } from '../../components/Sidebar';
 import { LinkMenuItemDefinition } from '../../components/Sidebar/menu/LinkMenuItem';
-import { SubMenuItemDefinition, SettingsMenuItemDefinition } from '../../components/Sidebar/menu/SubMenuItem';
+import { SubMenuItemDefinition } from '../../components/Sidebar/menu/SubMenuItem';
 import { PageExplorerMenuItemDefinition } from '../../components/Sidebar/menu/PageExplorerMenuItem';
 
 import { CustomBrandingModuleDefinition } from '../../components/Sidebar/modules/CustomBranding';
@@ -11,7 +11,6 @@ import { MainMenuModuleDefinition } from '../../components/Sidebar/modules/MainM
 window.telepath.register('wagtail.sidebar.LinkMenuItem', LinkMenuItemDefinition);
 window.telepath.register('wagtail.sidebar.SubMenuItem', SubMenuItemDefinition);
 window.telepath.register('wagtail.sidebar.PageExplorerMenuItem', PageExplorerMenuItemDefinition);
-window.telepath.register('wagtail.sidebar.SettingsMenuItem', SettingsMenuItemDefinition);
 
 window.telepath.register('wagtail.sidebar.WagtailBrandingModule', WagtailBrandingModuleDefinition);
 window.telepath.register('wagtail.sidebar.CustomBrandingModule', CustomBrandingModuleDefinition);

wagtail/admin/tests/ui/test_sidebar.py

@@ -6,7 +6,7 @@ from django.urls import reverse
 from wagtail.admin.search import SearchArea
 from wagtail.admin.ui.sidebar import (
     CustomBrandingModule, LinkMenuItem, MainMenuModule, PageExplorerMenuItem, SearchModule,
-    SettingsMenuItem, SubMenuItem, WagtailBrandingModule)
+    SubMenuItem, WagtailBrandingModule)
 from wagtail.core.telepath import JSContext
 from wagtail.tests.utils import WagtailTestUtils
 
@@ -50,7 +50,7 @@ class TestAdaptSubMenuItem(TestCase):
         packed = JSContext().pack(
             SubMenuItem('sub-menu', "Sub menu", [
                 LinkMenuItem('link', "Link", '/link/', icon_name='link-icon'),
-            ])
+            ], footer_text='Footer text')
         )
 
         self.assertEqual(packed, {
@@ -60,7 +60,8 @@ class TestAdaptSubMenuItem(TestCase):
                     'name': 'sub-menu',
                     'label': 'Sub menu',
                     'icon_name': '',
-                    'classnames': ''
+                    'classnames': '',
+                    'footer_text': 'Footer text'
                 },
                 [
                     {
@@ -79,53 +80,33 @@ class TestAdaptSubMenuItem(TestCase):
             ]
         })
 
-
-class TestAdaptPageExplorerMenuItem(TestCase):
-    def test_adapt(self):
-        packed = JSContext().pack(PageExplorerMenuItem('pages', "Pages", '/pages/', 1))
-
-        self.assertEqual(packed, {
-            '_type': 'wagtail.sidebar.PageExplorerMenuItem',
-            '_args': [
-                {
-                    'classnames': '',
-                    'icon_name': '',
-                    'label': 'Pages',
-                    'name': 'pages',
-                    'url': '/pages/'
-                },
-                1
-            ]
-        })
-
-
-class TestAdaptSettingsMenuItem(TestCase):
-    def test_adapt(self):
+    def test_adapt_without_footer_text(self):
         packed = JSContext().pack(
-            SettingsMenuItem('settings', "Settings", [
-                LinkMenuItem('groups', "Groups", '/groups/', icon_name='people'),
+            SubMenuItem('sub-menu', "Sub menu", [
+                LinkMenuItem('link', "Link", '/link/', icon_name='link-icon'),
             ])
         )
 
         self.assertEqual(packed, {
-            '_type': 'wagtail.sidebar.SettingsMenuItem',
+            '_type': 'wagtail.sidebar.SubMenuItem',
             '_args': [
                 {
-                    'name': 'settings',
-                    'label': 'Settings',
+                    'name': 'sub-menu',
+                    'label': 'Sub menu',
                     'icon_name': '',
-                    'classnames': ''
+                    'classnames': '',
+                    'footer_text': ''
                 },
                 [
                     {
                         '_type': 'wagtail.sidebar.LinkMenuItem',
                         '_args': [
                             {
-                                'name': 'groups',
-                                'label': 'Groups',
-                                'icon_name': 'people',
+                                'name': 'link',
+                                'label': 'Link',
+                                'icon_name': 'link-icon',
                                 'classnames': '',
-                                'url': '/groups/'
+                                'url': '/link/'
                             }
                         ]
                     }
@@ -134,6 +115,25 @@ class TestAdaptSettingsMenuItem(TestCase):
         })
 
 
+class TestAdaptPageExplorerMenuItem(TestCase):
+    def test_adapt(self):
+        packed = JSContext().pack(PageExplorerMenuItem('pages', "Pages", '/pages/', 1))
+
+        self.assertEqual(packed, {
+            '_type': 'wagtail.sidebar.PageExplorerMenuItem',
+            '_args': [
+                {
+                    'classnames': '',
+                    'icon_name': '',
+                    'label': 'Pages',
+                    'name': 'pages',
+                    'url': '/pages/'
+                },
+                1
+            ]
+        })
+
+
 class TestAdaptWagtailBrandingModule(TestCase):
     def test_adapt(self):
         packed = JSContext().pack(WagtailBrandingModule())

wagtail/admin/ui/sidebar.py

@@ -60,12 +60,14 @@ class LinkMenuItem(MenuItem):
 
 @adapter('wagtail.sidebar.SubMenuItem', base=BaseSidebarAdapter)
 class SubMenuItem(MenuItem):
-    def __init__(self, name: str, label: str, menu_items: List[MenuItem], icon_name: str = '', classnames: str = ''):
+    def __init__(self, name: str, label: str, menu_items: List[MenuItem], icon_name: str = '', classnames: str = '', footer_text: str = ''):
         super().__init__(name, label, icon_name=icon_name, classnames=classnames)
         self.menu_items = menu_items
+        self.footer_text = footer_text
 
     def js_args(self):
         args = super().js_args()
+        args[0]['footer_text'] = self.footer_text
         args.append(self.menu_items)
         return args
 
@@ -77,6 +79,7 @@ class SubMenuItem(MenuItem):
             and self.menu_items == other.menu_items
             and self.icon_name == other.icon_name
             and self.classnames == other.classnames
+            and self.footer_text == other.footer_text
         )
 
 
@@ -103,11 +106,6 @@ class PageExplorerMenuItem(LinkMenuItem):
         )
 
 
-@adapter('wagtail.sidebar.SettingsMenuItem', base=BaseSidebarAdapter)
-class SettingsMenuItem(SubMenuItem):
-    pass
-
-
 # Modules
 
 @adapter('wagtail.sidebar.WagtailBrandingModule', base=BaseSidebarAdapter)

wagtail/admin/wagtail_hooks.py

@@ -8,6 +8,7 @@ from draftjs_exporter.dom import DOM
 
 import wagtail.admin.rich_text.editors.draftail.features as draftail_features
 
+from wagtail import __version__
 from wagtail.admin.auth import user_has_any_page_permission
 from wagtail.admin.menu import MenuItem, SubmenuMenuItem, reports_menu, settings_menu
 from wagtail.admin.navigation import get_explorable_root_page
@@ -22,7 +23,7 @@ from wagtail.admin.rich_text.converters.html_to_contentstate import (
 from wagtail.admin.search import SearchArea
 from wagtail.admin.site_summary import PagesSummaryItem
 from wagtail.admin.ui.sidebar import PageExplorerMenuItem as PageExplorerMenuItemComponent
-from wagtail.admin.ui.sidebar import SettingsMenuItem as SettingsMenuItemComponent
+from wagtail.admin.ui.sidebar import SubMenuItem as SubMenuItemComponent
 from wagtail.admin.viewsets import viewsets
 from wagtail.admin.widgets import Button, ButtonWithDropdownFromHook, PageListingButton
 from wagtail.core import hooks
@@ -69,7 +70,14 @@ class SettingsMenuItem(SubmenuMenuItem):
     template = 'wagtailadmin/shared/menu_settings_menu_item.html'
 
     def render_component(self, request):
-        return SettingsMenuItemComponent(self.name, self.label, self.menu.render_component(request), icon_name=self.icon_name, classnames=self.classnames)
+        return SubMenuItemComponent(
+            self.name,
+            self.label,
+            self.menu.render_component(request),
+            icon_name=self.icon_name,
+            classnames=self.classnames,
+            footer_text="Wagtail v." + __version__
+        )
 
 
 @hooks.register('register_admin_menu_item')