1187: add upload button to project bar

AGENTS.md

@@ -56,6 +56,11 @@ yarn exec cypress open
   `src/assets/stylesheets/InternalStyles.scss` (and external libs in
   `ExternalStyles.scss`); avoid `rem`, prefer `em` and `--scale-factor`.
 
+## Translations / locale files
+- Only update `public/translations/en.json` when adding or changing translation keys.
+- Do not add or edit keys in other locale files under `public/translations/`; Crowdin sync overwrites them.
+- Missing keys in non-en locales are intentional until Crowdin syncs; the app falls back to `en`. Do not suggest adding a new key to other locale files when it appears only in `en.json`.
+
 ## Git & Commit Guidance
 - Write descriptive commit messages that explain why a change was made.
 - When applicable, include alternatives considered and why they were not

cypress/helpers/editor.js

@@ -1,24 +1,28 @@
 export const getEditorShadow = () => cy.get("editor-wc").shadow();
 
+export const getSidebarPanel = () =>
+  getEditorShadow().findByTestId("sidebar__panel");
+
 export const openSaveAndDownloadPanel = () => {
   getEditorShadow().findByRole("button", { name: "Download project" }).click();
-  getEditorShadow()
+
+  getSidebarPanel()
     .findByRole("heading", { name: "Save & download" })
     .should("be.visible");
 
   return {
     uploadProject: (fixturePath) => {
-      getEditorShadow()
-        .find(".download-panel__download-section")
-        .findByRole("button", { name: "Upload project" })
-        .should("be.visible");
-      getEditorShadow()
-        .findByTestId("upload-file-input")
-        .selectFile(fixturePath, { force: true });
+      getSidebarPanel().within(() => {
+        cy.findByRole("button", { name: "Upload project" }).should(
+          "be.visible",
+        );
+        cy.findByTestId("upload-file-input").selectFile(fixturePath, {
+          force: true,
+        });
+      });
     },
     downloadProject: () => {
-      getEditorShadow()
-        .find(".download-panel__download-section")
+      getSidebarPanel()
         .findByRole("button", { name: "Download project" })
         .click();
     },

public/translations/en.json

@@ -74,6 +74,7 @@
   },
   "header": {
     "download": "Download",
+    "upload": "Upload",
     "downloadFileNameDefault": "my {{project_type}} project",
     "editorLogoAltText": "Editor logo",
     "projects": "Your projects",

src/components/Editor/Project/Project.jsx

@@ -10,6 +10,7 @@ import "../../../assets/stylesheets/Project.scss";
 import Output from "../Output/Output";
 import { showSavedMessage } from "../../../utils/Notifications";
 import ProjectBar from "../../ProjectBar/ProjectBar";
+import ScratchProjectBar from "../../ProjectBar/ScratchProjectBar";
 import Sidebar from "../../Menus/Sidebar/Sidebar";
 import EditorInput from "../EditorInput/EditorInput";
 import ResizableWithHandle from "../../../utils/ResizableWithHandle";
@@ -76,7 +77,12 @@ const Project = (props) => {
           />
         )}
         <div className="project-wrapper" ref={containerRef}>
-          {withProjectbar && <ProjectBar nameEditable={nameEditable} />}
+          {withProjectbar &&
+            (isCodeEditorScratchProject ? (
+              <ScratchProjectBar nameEditable={nameEditable} />
+            ) : (
+              <ProjectBar nameEditable={nameEditable} />
+            ))}
           {!loading && !isCodeEditorScratchProject && (
             <div className="proj-editor-wrapper">
               <ResizableWithHandle

src/components/Editor/Project/Project.test.js

@@ -67,6 +67,56 @@ test("Renders sidebar with correct options if withSidebar is true", () => {
   expect(screen.queryByTitle("sidebar.settings")).toBeInTheDocument();
 });
 
+describe("Project bar selection", () => {
+  test("renders default project bar for non-scratch projects", () => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: { components: [], project_type: "python" },
+        loading: "success",
+        openFiles: [[]],
+        focussedFileIndices: [0],
+      },
+      auth: {},
+    };
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Project />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(screen.getByTestId("default-project-bar")).toBeInTheDocument();
+    expect(screen.queryByTestId("scratch-project-bar")).not.toBeInTheDocument();
+  });
+
+  test("renders scratch project bar for code_editor_scratch projects", () => {
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: { components: [], project_type: "code_editor_scratch" },
+        loading: "success",
+        openFiles: [[]],
+        focussedFileIndices: [0],
+      },
+      auth: {},
+    };
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Project />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(screen.getByTestId("scratch-project-bar")).toBeInTheDocument();
+    expect(screen.queryByTestId("default-project-bar")).not.toBeInTheDocument();
+  });
+});
+
 test("Renders container for scratch projects", () => {
   const middlewares = [];
   const mockStore = configureStore(middlewares);

src/components/ProjectBar/ProjectBar.jsx

@@ -3,43 +3,29 @@ import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import SaveStatus from "../SaveStatus/SaveStatus";
 import DownloadIcon from "../../assets/icons/download.svg";
-import SaveIcon from "../../assets/icons/save.svg";
 import ProjectName from "../ProjectName/ProjectName";
 import DownloadButton from "../DownloadButton/DownloadButton";
 import SaveButton from "../SaveButton/SaveButton";
-import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
 
 import "../../assets/stylesheets/ProjectBar.scss";
 import { isOwner } from "../../utils/projectHelpers";
-import { useScratchSaveState } from "../../hooks/useScratchSaveState";
 
 const ProjectBar = ({ nameEditable = true }) => {
   const { t } = useTranslation();
-
   const project = useSelector((state) => state.editor.project);
   const user = useSelector((state) => state.auth.user);
   const loading = useSelector((state) => state.editor.loading);
   const saving = useSelector((state) => state.editor.saving);
   const lastSavedTime = useSelector((state) => state.editor.lastSavedTime);
   const projectOwner = isOwner(user, project);
   const readOnly = useSelector((state) => state.editor.readOnly);
-  const isScratchProject = project?.project_type === "code_editor_scratch";
-  const showScratchSaveButton = Boolean(isScratchProject && user && !readOnly);
-  const enableScratchSaveState = Boolean(
-    loading === "success" && showScratchSaveButton,
-  );
-  const { isScratchSaving, saveScratchProject, scratchSaveLabelKey } =
-    useScratchSaveState({
-      enabled: enableScratchSaveState,
-    });
-  const scratchSaveLabel = t(scratchSaveLabelKey);
 
   if (loading !== "success") {
     return null;
   }
 
   return (
-    <div className="project-bar">
+    <div className="project-bar" data-testid="default-project-bar">
       <ProjectName editable={!readOnly && nameEditable} isHeading={true} />
       <div className="project-bar__right">
         <div className="project-bar__btn-wrapper">
@@ -50,25 +36,12 @@ const ProjectBar = ({ nameEditable = true }) => {
             type="tertiary"
           />
         </div>
-        {!isScratchProject && !projectOwner && !readOnly && (
+        {!projectOwner && !readOnly && (
           <div className="project-bar__btn-wrapper">
             <SaveButton className="project-bar__btn btn--save" />
           </div>
         )}
-        {showScratchSaveButton && (
-          <div className="project-bar__btn-wrapper">
-            <DesignSystemButton
-              className="project-bar__btn btn--save btn--primary"
-              onClick={saveScratchProject}
-              text={scratchSaveLabel}
-              textAlways
-              icon={<SaveIcon />}
-              type="primary"
-              disabled={isScratchSaving}
-            />
-          </div>
-        )}
-        {lastSavedTime && user && !readOnly && !isScratchProject && (
+        {lastSavedTime && user && !readOnly && (
           <SaveStatus saving={saving} lastSavedTime={lastSavedTime} />
         )}
       </div>