Fallback when sidebar element does not exist | Scratch editor default behaviour collapsed (#1361)

It was reported:
- Clicking the chevron icons causes a "glitchy" visual effect.
- A strange grey line appears around the border of the sidebar during or
after the interaction.
- The chevron icon itself appears to change shape or distort when
clicked.

After investigation, it was found out:
- It normally defaults to instructions, file.
- it normally requires to be expanded but not in scratch-editor
- These two situations makes it feel glitchy

### Solution

- Let still use these as default, but has as fallback the first existing
item (both from the top and bottom part)
- Let the editor now that in scratch we need to initiate collapsed
- Addded test to cover all of these cases



https://github.com/user-attachments/assets/bfac2af7-264b-4450-915f-5ab5484f6bf3

Author: abcampo-iry

src/components/Menus/Sidebar/Sidebar.jsx

@@ -162,6 +162,7 @@ const Sidebar = ({ options = [], plugins = [], allowMobileView = true }) => {
   const optionDict = menuOptions.find((menuOption) => {
     return menuOption.name === option;
   });
+  const activeOption = optionDict ? option : null;
 
   const CustomSidebarPanel =
     optionDict && optionDict.panel ? optionDict.panel : () => {};
@@ -175,12 +176,12 @@ const Sidebar = ({ options = [], plugins = [], allowMobileView = true }) => {
     >
       <SidebarBar
         menuOptions={menuOptions}
-        option={option}
+        option={activeOption}
         toggleOption={toggleOption}
         instructions={instructionsSteps}
         allowMobileView={allowMobileView}
       />
-      {option && <CustomSidebarPanel isMobile={isMobile} />}
+      {activeOption && <CustomSidebarPanel isMobile={isMobile} />}
     </div>
   );
 };

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

@@ -16,6 +16,13 @@ let images = [
 ];
 
 const options = ["file", "images", "instructions", "info"];
+const optionsWithDownload = [
+  "file",
+  "images",
+  "instructions",
+  "download",
+  "info",
+];
 
 describe("When project has images", () => {
   describe("and no instructions", () => {
@@ -416,6 +423,9 @@ describe("When the project type is code_editor_scratch", () => {
   beforeEach(() => {
     const mockStore = configureStore([]);
     const initialState = {
+      auth: {
+        user: null,
+      },
       editor: {
         project: {
           components: [],
@@ -430,7 +440,7 @@ describe("When the project type is code_editor_scratch", () => {
     render(
       <Provider store={store}>
         <div id="app">
-          <Sidebar options={options} />
+          <Sidebar options={optionsWithDownload} />
         </div>
       </Provider>,
     );
@@ -443,4 +453,14 @@ describe("When the project type is code_editor_scratch", () => {
   test("Shows the info icon", () => {
     expect(screen.queryByTitle("sidebar.information")).toBeInTheDocument();
   });
+
+  test("Starts in closed chevron state for scratch", () => {
+    expect(screen.queryByTitle("sidebar.expand")).toBeInTheDocument();
+  });
+
+  test("Clicking expand opens the first available top panel when file is hidden", () => {
+    const expandButton = screen.getByTitle("sidebar.expand");
+    fireEvent.click(expandButton);
+    expect(screen.queryByText("downloadPanel.heading")).toBeInTheDocument();
+  });
 });

src/components/Menus/Sidebar/SidebarBar.jsx

@@ -28,12 +28,29 @@ const SidebarBar = (props) => {
   const bottomMenuOptions = menuOptions.filter(
     (menuOption) => menuOption.position === "bottom",
   );
+  const menuOptionNames = menuOptions.map((menuOption) => menuOption.name);
   const viewportIsMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
   const isMobile = allowMobileView && viewportIsMobile;
 
+  const findFirstExistingOption = (candidateOptions = []) => {
+    return candidateOptions.find(
+      (optionName) => optionName && menuOptionNames.includes(optionName),
+    );
+  };
+
   const expandPopOut = () => {
-    const option = instructions.length > 0 ? "instructions" : "file";
-    toggleOption(option);
+    const hasInstructions =
+      Array.isArray(instructions) && instructions.length > 0;
+    const expandOption = findFirstExistingOption([
+      hasInstructions ? "instructions" : null,
+      "file",
+      topMenuOptions[0]?.name, // top part
+      menuOptions[0]?.name, // bottom part
+    ]);
+
+    if (expandOption) {
+      toggleOption(expandOption);
+    }
     if (window.plausible) {
       // TODO: Make dynamic events for each option or rename this event
       window.plausible("Expand file pane");

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

@@ -25,9 +25,9 @@ const menuOptions = (instructions = false) => {
       panel: () => {},
     },
     {
-      name: "home",
+      name: "projects",
       position: "top",
-      title: "home_button",
+      title: "projects_button",
       panel: () => {},
     },
     ...(instructions
@@ -43,6 +43,23 @@ const menuOptions = (instructions = false) => {
   ];
 };
 
+const menuOptionsWithoutFile = () => {
+  return [
+    {
+      name: "projects",
+      position: "top",
+      title: "projects_button",
+      panel: () => {},
+    },
+    {
+      name: "download",
+      position: "top",
+      title: "download_button",
+      panel: () => {},
+    },
+  ];
+};
+
 describe("SidebarBar", () => {
   describe("Without instructions", () => {
     beforeEach(() => {
@@ -59,10 +76,10 @@ describe("SidebarBar", () => {
       expect(toggleOption).toHaveBeenCalledWith("file");
     });
 
-    test("Clicking home button opens home panel", () => {
-      const homeButton = screen.getByTitle("home_button");
-      fireEvent.click(homeButton);
-      expect(toggleOption).toHaveBeenCalledWith("home");
+    test("Clicking projects button opens projects panel", () => {
+      const projectsButton = screen.getByTitle("projects_button");
+      fireEvent.click(projectsButton);
+      expect(toggleOption).toHaveBeenCalledWith("projects");
     });
   });
 
@@ -91,4 +108,23 @@ describe("SidebarBar", () => {
       expect(toggleOption).toHaveBeenCalledWith("instructions");
     });
   });
+
+  describe("Without file option", () => {
+    beforeEach(() => {
+      render(
+        <Provider store={store}>
+          <SidebarBar
+            menuOptions={menuOptionsWithoutFile()}
+            toggleOption={toggleOption}
+          />
+        </Provider>,
+      );
+    });
+
+    test("Clicking expand button falls back to the first top panel", () => {
+      const expandButton = screen.getByTitle("sidebar.expand");
+      fireEvent.click(expandButton);
+      expect(toggleOption).toHaveBeenCalledWith("projects");
+    });
+  });
 });

src/components/WebComponentProject/WebComponentProject.test.js

@@ -260,7 +260,7 @@ describe("When withSidebar is true", () => {
   });
 
   test("Renders the sidebar", () => {
-    expect(screen.queryByTitle("sidebar.collapse")).toBeInTheDocument();
+    expect(screen.queryByTitle("sidebar.expand")).toBeInTheDocument();
   });
 
   test("Renders the correct sidebar options", () => {