Plugin system for sidebar panels (#1251)

Author: loiswells97

CHANGELOG.md

@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Added
+- Sidebar plugin functionality (#1251)
+
 ### Changed
 
 - Changed `set_pixel` to quantise the colour before writing (#1247)

src/components/Editor/Project/Project.jsx

@@ -22,6 +22,7 @@ const Project = (props) => {
     withProjectbar = true,
     withSidebar = true,
     sidebarOptions = [],
+    sidebarPlugins = [],
   } = props;
   const saving = useSelector((state) => state.editor.saving);
   const autosave = useSelector((state) => state.editor.lastSaveAutosave);
@@ -59,7 +60,9 @@ const Project = (props) => {
           "proj-container--wc": webComponent,
         })}
       >
-        {withSidebar && <Sidebar options={sidebarOptions} />}
+        {withSidebar && (
+          <Sidebar options={sidebarOptions} plugins={sidebarPlugins} />
+        )}
         <div className="project-wrapper" ref={containerRef}>
           {withProjectbar && <ProjectBar nameEditable={nameEditable} />}
           {!loading && (

src/components/Menus/Sidebar/Sidebar.jsx

@@ -23,8 +23,9 @@ import { MOBILE_MEDIA_QUERY } from "../../../utils/mediaQueryBreakpoints";
 import FileIcon from "../../../utils/FileIcon";
 import DownloadPanel from "./DownloadPanel/DownloadPanel";
 import InstructionsPanel from "./InstructionsPanel/InstructionsPanel";
+import SidebarPanel from "./SidebarPanel";
 
-const Sidebar = ({ options = [] }) => {
+const Sidebar = ({ options = [], plugins = [] }) => {
   const { t } = useTranslation();
 
   let menuOptions = [
@@ -79,6 +80,22 @@ const Sidebar = ({ options = [] }) => {
     },
   ].filter((option) => options.includes(option.name));
 
+  let pluginMenuOptions = plugins.map((plugin) => {
+    return {
+      name: plugin.name,
+      icon: plugin.icon,
+      title: plugin.title,
+      position: plugin.position || "top",
+      panel: () => (
+        <SidebarPanel heading={plugin.heading} Button={plugin.button}>
+          {plugin.panel()}
+        </SidebarPanel>
+      ),
+    };
+  });
+
+  menuOptions = [...menuOptions, ...pluginMenuOptions];
+
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
   const projectImages = useSelector((state) => state.editor.project.image_list);
   const instructionsSteps = useSelector(
@@ -103,17 +120,23 @@ const Sidebar = ({ options = [] }) => {
     removeOption("instructions", instructionsSteps);
   }
 
+  const autoOpenPlugin = plugins?.find((plugin) => plugin.autoOpen);
+
   const [option, setOption] = useState(
-    instructionsEditable || instructionsSteps ? "instructions" : "file",
+    autoOpenPlugin
+      ? autoOpenPlugin.name
+      : instructionsEditable || instructionsSteps
+      ? "instructions"
+      : "file",
   );
 
   const hasInstructions = instructionsSteps && instructionsSteps.length > 0;
 
   useEffect(() => {
-    if (instructionsEditable || hasInstructions) {
+    if (!autoOpenPlugin && (instructionsEditable || hasInstructions)) {
       setOption("instructions");
     }
-  }, [instructionsEditable, hasInstructions]);
+  }, [autoOpenPlugin, instructionsEditable, hasInstructions]);
 
   const toggleOption = (newOption) => {
     if (option !== newOption) {

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

@@ -316,3 +316,93 @@ describe("When the project has no instructions", () => {
     });
   });
 });
+
+describe("When plugins are provided", () => {
+  const initialState = {
+    editor: {
+      project: {
+        components: [],
+        image_list: [],
+      },
+      instructionsEditable: false,
+    },
+    instructions: {},
+  };
+  const mockStore = configureStore([]);
+  const store = mockStore(initialState);
+  const defaultPlugin = {
+    name: "my-amazing-plugin",
+    icon: () => {},
+    heading: "My amazing plugin",
+    title: "my amazing plugin",
+    panel: () => <p>My amazing content</p>,
+  };
+
+  describe("when plugin has autoOpen true", () => {
+    beforeEach(() => {
+      const plugins = [
+        {
+          ...defaultPlugin,
+          autoOpen: true,
+        },
+      ];
+      render(
+        <Provider store={store}>
+          <div id="app">
+            <Sidebar options={options} plugins={plugins} />
+          </div>
+        </Provider>,
+      );
+    });
+
+    test("Shows plugin icon", () => {
+      expect(screen.queryByTitle("my amazing plugin")).toBeInTheDocument();
+    });
+
+    test("Render the plugin panel open by default", () => {
+      expect(screen.queryByText("My amazing plugin")).toBeInTheDocument();
+    });
+
+    test("Renders the plugin content", () => {
+      expect(screen.queryByText("My amazing content")).toBeInTheDocument();
+    });
+  });
+
+  describe("when plugin has autoOpen false", () => {
+    beforeEach(() => {
+      const plugins = [
+        {
+          ...defaultPlugin,
+          autoOpen: false,
+        },
+      ];
+      render(
+        <Provider store={store}>
+          <div id="app">
+            <Sidebar options={options} plugins={plugins} />
+          </div>
+        </Provider>,
+      );
+    });
+
+    test("Shows plugin icon", () => {
+      expect(screen.queryByTitle("my amazing plugin")).toBeInTheDocument();
+    });
+
+    test("Does not render the plugin panel open by default", () => {
+      expect(screen.queryByText("My amazing plugin")).not.toBeInTheDocument();
+    });
+
+    test("Opening the panel shows the plugin heading", () => {
+      const pluginButton = screen.getByTitle("my amazing plugin");
+      fireEvent.click(pluginButton);
+      expect(screen.queryByText("My amazing plugin")).toBeInTheDocument();
+    });
+
+    test("Opening the panel shows the plugin content", () => {
+      const pluginButton = screen.getByTitle("my amazing plugin");
+      fireEvent.click(pluginButton);
+      expect(screen.queryByText("My amazing content")).toBeInTheDocument();
+    });
+  });
+});

src/components/Mobile/MobileProject/MobileProject.jsx

@@ -14,7 +14,11 @@ import { useTranslation } from "react-i18next";
 import Sidebar from "../../Menus/Sidebar/Sidebar";
 import { showSidebar } from "../../../redux/EditorSlice";
 
-const MobileProject = ({ withSidebar, sidebarOptions = [] }) => {
+const MobileProject = ({
+  withSidebar,
+  sidebarOptions = [],
+  sidebarPlugins = [],
+}) => {
   const projectType = useSelector((state) => state.editor.project.project_type);
   const sidebarShowing = useSelector((state) => state.editor.sidebarShowing);
   const codeRunTriggered = useSelector(
@@ -48,7 +52,7 @@ const MobileProject = ({ withSidebar, sidebarOptions = [] }) => {
       >
         {withSidebar && (
           <TabPanel>
-            <Sidebar options={sidebarOptions} />
+            <Sidebar options={sidebarOptions} plugins={sidebarPlugins} />
           </TabPanel>
         )}
         <TabPanel>

src/components/WebComponentProject/WebComponentProject.jsx

@@ -35,6 +35,7 @@ const WebComponentProject = ({
   outputOnly = false,
   outputPanels = ["text", "visual"],
   outputSplitView = false,
+  sidebarPlugins = [],
 }) => {
   const loading = useSelector((state) => state.editor.loading);
   const project = useSelector((state) => state.editor.project);
@@ -145,13 +146,15 @@ const WebComponentProject = ({
               <MobileProject
                 withSidebar={withSidebar}
                 sidebarOptions={sidebarOptions}
+                sidebarPlugins={sidebarPlugins}
               />
             ) : (
               <Project
                 nameEditable={nameEditable}
                 withProjectbar={withProjectbar}
                 withSidebar={withSidebar}
                 sidebarOptions={sidebarOptions}
+                sidebarPlugins={sidebarPlugins}
               />
             ))}
           {outputOnly && (

src/containers/WebComponentLoader.jsx

@@ -47,6 +47,7 @@ const WebComponentLoader = (props) => {
     outputOnly = false,
     outputPanels = ["text", "visual"],
     outputSplitView = false,
+    sidebarPlugins = [],
     projectNameEditable = false,
     reactAppApiEndpoint = process.env.REACT_APP_API_ENDPOINT,
     readOnly = false,
@@ -227,6 +228,7 @@ const WebComponentLoader = (props) => {
               outputPanels={outputPanels}
               outputSplitView={outputSplitView}
               editableInstructions={editableInstructions}
+              sidebarPlugins={sidebarPlugins}
             />
             {errorModalShowing && <ErrorModal />}
             {newFileModalShowing && <NewFileModal />}

src/web-component.js

@@ -27,6 +27,7 @@ class WebComponent extends HTMLElement {
   mountPoint;
   componentAttributes = {};
   componentProperties = {};
+  sidebarPlugins = [];
 
   connectedCallback() {
     if (!this.shadowRoot) {
@@ -112,6 +113,11 @@ class WebComponent extends HTMLElement {
     this.mountReactApp();
   }
 
+  setSidebarPlugins(sidebarPlugins) {
+    this.sidebarPlugins = sidebarPlugins;
+    this.mountReactApp();
+  }
+
   get editorCode() {
     const state = store.getState();
     return state.editor.project.components[0]?.content;
@@ -177,7 +183,10 @@ class WebComponent extends HTMLElement {
       <React.StrictMode>
         <Provider store={store}>
           <BrowserRouter>
-            <WebComponentLoader {...this.reactProps()} />
+            <WebComponentLoader
+              sidebarPlugins={this.sidebarPlugins}
+              {...this.reactProps()}
+            />
           </BrowserRouter>
         </Provider>
       </React.StrictMode>,