1143 hide project files panel for scratch projects (#1339)

closes
RaspberryPiFoundation/digital-editor-issues#1143

Author: jamiebenstead

src/components/Menus/Sidebar/Sidebar.jsx

@@ -27,6 +27,15 @@ import SidebarPanel from "./SidebarPanel";
 
 const Sidebar = ({ options = [], plugins = [] }) => {
   const { t } = useTranslation();
+  const projectType = useSelector((state) => state.editor.project.project_type);
+  const projectImages = useSelector((state) => state.editor.project.image_list);
+  const instructionsSteps = useSelector(
+    (state) => state.instructions?.project?.steps,
+  );
+  const instructionsEditable = useSelector(
+    (state) => state.editor.instructionsEditable,
+  );
+  const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
 
   let menuOptions = [
     {
@@ -78,7 +87,12 @@ const Sidebar = ({ options = [], plugins = [] }) => {
       position: "bottom",
       panel: InfoPanel,
     },
-  ].filter((option) => options.includes(option.name));
+  ].filter((option) => {
+    if (!options.includes(option.name)) return false;
+    if (projectType === "code_editor_scratch" && option.name === "file")
+      return false;
+    return true;
+  });
 
   let pluginMenuOptions = useMemo(
     () =>
@@ -103,15 +117,6 @@ const Sidebar = ({ options = [], plugins = [] }) => {
 
   menuOptions = [...menuOptions, ...pluginMenuOptions];
 
-  const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
-  const projectImages = useSelector((state) => state.editor.project.image_list);
-  const instructionsSteps = useSelector(
-    (state) => state.instructions?.project?.steps,
-  );
-  const instructionsEditable = useSelector(
-    (state) => state.editor.instructionsEditable,
-  );
-
   const removeOption = (optionName, depArray = []) => {
     if ((!depArray || depArray.length === 0) && options.includes(optionName)) {
       menuOptions.splice(

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

@@ -15,7 +15,7 @@ let images = [
   },
 ];
 
-const options = ["file", "images", "instructions"];
+const options = ["file", "images", "instructions", "info"];
 
 describe("When project has images", () => {
   describe("and no instructions", () => {
@@ -411,3 +411,36 @@ describe("When plugins are provided", () => {
     });
   });
 });
+
+describe("When the project type is code_editor_scratch", () => {
+  beforeEach(() => {
+    const mockStore = configureStore([]);
+    const initialState = {
+      editor: {
+        project: {
+          components: [],
+          image_list: [],
+          project_type: "code_editor_scratch",
+        },
+        instructionsEditable: false,
+      },
+      instructions: {},
+    };
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <div id="app">
+          <Sidebar options={options} />
+        </div>
+      </Provider>,
+    );
+  });
+
+  test("Does not show file icon", () => {
+    expect(screen.queryByTitle("sidebar.file")).not.toBeInTheDocument();
+  });
+
+  test("Shows the info icon", () => {
+    expect(screen.queryByTitle("sidebar.information")).toBeInTheDocument();
+  });
+});