Tweak plugin buttons to be function (#1274)

This is needed to support the use of hooks in the button components
without breaking React rules of hooks or forcing the panel to rerender
whenever a property of the buttons changes

Author: loiswells97

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Font-family variables that can be used to customise the sans-serif and monospace fonts used in the editor (#1264)
 - Material symbols font to web component preview page since the Design System depends on this (#1261)
+- Ability for plugins to add buttons to the SidebarPanel header (#1270, #1271, #1274)
 
 ### Changed
 

src/components/Menus/Sidebar/Sidebar.jsx

@@ -87,7 +87,10 @@ const Sidebar = ({ options = [], plugins = [] }) => {
       title: plugin.title,
       position: plugin.position || "top",
       panel: () => (
-        <SidebarPanel heading={plugin.heading} buttons={plugin.buttons || []}>
+        <SidebarPanel
+          heading={plugin.heading}
+          buttons={plugin.buttons ? plugin.buttons() : []}
+        >
           {plugin.panel()}
         </SidebarPanel>
       ),

src/components/Menus/Sidebar/Sidebar.test.js

@@ -336,6 +336,7 @@ describe("When plugins are provided", () => {
     heading: "My amazing plugin",
     title: "my amazing plugin",
     panel: () => <p>My amazing content</p>,
+    buttons: () => [<button>My amazing button</button>],
   };
 
   describe("when plugin has autoOpen true", () => {
@@ -366,6 +367,10 @@ describe("When plugins are provided", () => {
     test("Renders the plugin content", () => {
       expect(screen.queryByText("My amazing content")).toBeInTheDocument();
     });
+
+    test("Renders the plugin buttons", () => {
+      expect(screen.queryByText("My amazing button")).toBeInTheDocument();
+    });
   });
 
   describe("when plugin has autoOpen false", () => {

src/components/Menus/Sidebar/SidebarPanel.jsx

@@ -11,16 +11,19 @@ const SidebarPanel = (props) => {
     heading,
     Footer,
     className,
-    buttons = [],
+    buttons,
     defaultWidth = "320px",
   } = props;
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
 
+  const buttonsIsEmptyArray =
+    buttons && Array.isArray(buttons) && buttons.length === 0;
+
   const panelContent = (
     <>
       <div className="sidebar__panel-header">
         <h2 className="sidebar__panel-heading">{heading}</h2>
-        {buttons?.length > 0 && (
+        {buttons && !buttonsIsEmptyArray && (
           <div className="sidebar__panel-buttons">{buttons}</div>
         )}
       </div>