Refactor sidepanel for multiple buttons (#1270)

closes
RaspberryPiFoundation/digital-editor-issues#991

Author: jamiebenstead

CHANGELOG.md

@@ -9,16 +9,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - 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)
 
 ### Changed
 
 - Changed the horizontal scrollbar to show without needing to scroll to the bottom of the editor window (#1257)
+- Changed SidebarPanel to accept an array of buttons (#1270)
 - Updated Design System react to v2.6.2 (#1261)
 
-### Added
-
-- Material symbols font to web component preview page since the Design System depends on this (#1261)
-
 ### Fixed
 
 - Styling design system components used in the web component (#1263)

src/assets/stylesheets/Sidebar.scss

@@ -131,6 +131,12 @@
   scrollbar-width: thin;
 }
 
+.sidebar__panel-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: $space-1;
+}
+
 .sidebar__panel-footer {
   border-block-start: 1px solid $rpf-grey-150;
   inset-block-end: 0px;

src/components/Editor/NewComponentButton/NewComponentButton.jsx

@@ -3,24 +3,25 @@ import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 
 import FileMenu from "../../FileMenu/FileMenu";
-import NewComponentButton from "../../../Editor/NewComponentButton/NewComponentButton";
 import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
 import {
   openFile,
   setFocussedFileIndex,
   hideSidebar,
+  showNewFileModal,
 } from "../../../../redux/EditorSlice";
 
 import "../../../../assets/stylesheets/FilePanel.scss";
 import "../../../../assets/stylesheets/Sidebar.scss";
 import SidebarPanel from "../SidebarPanel";
 import FileIcon from "../../../../utils/FileIcon";
+import PlusIcon from "../../../../assets/icons/plus.svg";
 
 const FilePanel = ({ isMobile }) => {
   const project = useSelector((state) => state.editor.project);
   const openFiles = useSelector((state) => state.editor.openFiles);
   const readOnly = useSelector((state) => state.editor.readOnly);
-
+  const { t } = useTranslation();
   const dispatch = useDispatch();
 
   const switchToFileTab = (panelIndex, fileIndex) => {
@@ -42,16 +43,30 @@ const FilePanel = ({ isMobile }) => {
       dispatch(hideSidebar());
     }
   };
-  const { t } = useTranslation();
 
-  const Button = readOnly ? null : NewComponentButton;
+  const openNewFileModal = () => {
+    dispatch(showNewFileModal());
+  };
+
+  const buttons = readOnly
+    ? []
+    : [
+        {
+          text: t("filePanel.newFileButton"),
+          textAlways: true,
+          icon: <PlusIcon />,
+          onClick: openNewFileModal,
+          className: "btn--primary",
+          fill: true,
+        },
+      ];
 
   if (!project || !project.components) {
     return null;
   }
 
   return (
-    <SidebarPanel heading={t("filePanel.files")} Button={Button}>
+    <SidebarPanel heading={t("filePanel.files")} buttons={buttons}>
       {project.components.map((file, i) => (
         <div className="files-list-item-wrapper" key={i}>
           <DesignSystemButton

src/components/Editor/NewComponentButton/NewComponentButton.test.js

@@ -4,7 +4,11 @@ import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
 import FilePanel from "./FilePanel";
-import { openFile, setFocussedFileIndex } from "../../../../redux/EditorSlice";
+import {
+  openFile,
+  setFocussedFileIndex,
+  showNewFileModal,
+} from "../../../../redux/EditorSlice";
 
 const createMockStore = function ({ components, openFiles = [[]], readOnly }) {
   const mockStore = configureStore([]);
@@ -166,8 +170,10 @@ describe("it renders the expected icon for individual files", () => {
 });
 
 describe("When not read only", () => {
+  let store;
+
   beforeEach(() => {
-    const store = createMockStore({
+    store = createMockStore({
       components: [{ name: "a", extension: "py" }],
       readOnly: false,
     });
@@ -187,6 +193,13 @@ describe("When not read only", () => {
   test("it renders the file menu button", () => {
     expect(screen.queryByTitle("filePanel.fileMenu.label")).toBeInTheDocument();
   });
+
+  test("Clicking button opens new file modal", () => {
+    const button = screen.queryByText("filePanel.newFileButton");
+    fireEvent.click(button);
+    const expectedActions = [showNewFileModal()];
+    expect(store.getActions()).toEqual(expectedActions);
+  });
 });
 
 describe("When read only", () => {

src/components/Menus/Sidebar/FilePanel/FilePanel.jsx

@@ -135,34 +135,6 @@ const InstructionsPanel = () => {
     setShowModal(false);
   };
 
-  const AddInstructionsButton = () => {
-    return (
-      <DesignSystemButton
-        className="btn--primary"
-        icon="add"
-        text={t("instructionsPanel.emptyState.addInstructions")}
-        onClick={addInstructions}
-        fill
-        textAlways
-        small
-      />
-    );
-  };
-
-  const RemoveInstructionsButton = () => {
-    return (
-      <DesignSystemButton
-        className="btn--secondary"
-        text={t("instructionsPanel.removeInstructions")}
-        onClick={() => {
-          setShowModal(true);
-        }}
-        fill
-        textAlways
-        small
-      />
-    );
-  };
   const onChange = (e) => {
     dispatch(setProjectInstructions(e.target.value));
   };
@@ -171,11 +143,30 @@ const InstructionsPanel = () => {
     <SidebarPanel
       defaultWidth="30vw"
       heading={t("instructionsPanel.projectSteps")}
-      Button={
+      buttons={
         instructionsEditable
           ? hasInstructions
-            ? RemoveInstructionsButton
-            : AddInstructionsButton
+            ? [
+                {
+                  className: "btn--secondary",
+                  text: t("instructionsPanel.removeInstructions"),
+                  onClick: () => setShowModal(true),
+                  fill: true,
+                  textAlways: true,
+                  small: true,
+                },
+              ]
+            : [
+                {
+                  className: "btn--primary",
+                  icon: "add",
+                  text: t("instructionsPanel.emptyState.addInstructions"),
+                  onClick: addInstructions,
+                  fill: true,
+                  textAlways: true,
+                  small: true,
+                },
+              ]
           : null
       }
       {...{ Footer: hasMultipleSteps && ProgressBar }}

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

@@ -12,7 +12,6 @@ import { useSelector } from "react-redux";
 import { MOBILE_MEDIA_QUERY } from "../../../../utils/mediaQueryBreakpoints";
 import { useMediaQuery } from "react-responsive";
 import SaveStatus from "../../../SaveStatus/SaveStatus";
-import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
 import { navigateToProjectsPageEvent } from "../../../../events/WebComponentCustomEvents";
 
 const ProjectsPanel = () => {
@@ -37,18 +36,21 @@ const ProjectsPanel = () => {
     document.dispatchEvent(navigateToProjectsPageEvent);
   };
 
+  const buttons = isLoggedIn
+    ? [
+        {
+          className: "btn--primary projects-panel__your-projects-button",
+          onClick: navigateToProjectsPage,
+          text: t("projectsPanel.yourProjectsButton"),
+          textAlways: true,
+        },
+      ]
+    : [];
+
   return (
     <SidebarPanel
       heading={t("projectsPanel.projects")}
-      Button={() =>
-        isLoggedIn && (
-          <DesignSystemButton
-            className="btn--primary projects-panel__your-projects-button"
-            onClick={navigateToProjectsPage}
-            text={t("projectsPanel.yourProjectsButton")}
-          />
-        )
-      }
+      buttons={buttons}
       className="projects-panel-wrapper"
     >
       <ProjectName

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx

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

src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx

@@ -4,14 +4,15 @@ import classNames from "classnames";
 import PropTypes from "prop-types";
 import { MOBILE_MEDIA_QUERY } from "../../../utils/mediaQueryBreakpoints";
 import { useMediaQuery } from "react-responsive";
+import DesignSystemButton from "../../DesignSystemButton/DesignSystemButton";
 
 const SidebarPanel = (props) => {
   const {
     children,
     heading,
     Footer,
     className,
-    Button,
+    buttons = [],
     defaultWidth = "225px",
   } = props;
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
@@ -20,9 +21,14 @@ const SidebarPanel = (props) => {
     <>
       <div className="sidebar__panel-header">
         <h2 className="sidebar__panel-heading">{heading}</h2>
-        {Button ? <Button /> : null}
+        {buttons?.length > 0 && (
+          <div className="sidebar__panel-buttons">
+            {buttons.map((btn, i) => (
+              <DesignSystemButton key={i} {...btn} />
+            ))}
+          </div>
+        )}
       </div>
-
       <div className="sidebar__panel-content">{children}</div>
       {Footer && <div className="sidebar__panel-footer">{<Footer />}</div>}
     </>
@@ -62,7 +68,7 @@ SidebarPanel.propTypes = {
   children: PropTypes.any.isRequired,
   heading: PropTypes.string.isRequired,
   className: PropTypes.string,
-  Button: PropTypes.func,
+  buttons: PropTypes.arrayOf(PropTypes.object),
 };
 
 export default SidebarPanel;