Added a save button to DownloadPanel (#872)

Allows mobile users to save their project and remix in place of auto
remixing (#843)

Author: sra405

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Added
+
+- Download panel save button (#872)
+
 ### Changed
 
 - Stack editor input and output panels based on container width (#869)

src/assets/stylesheets/DownloadPanel.scss

@@ -35,3 +35,7 @@
   box-sizing: border-box;
   margin: 0;
 }
+
+.download-panel__download-section {
+  margin-block-end: $space-1;
+}

src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.jsx

@@ -3,8 +3,10 @@ import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import SidebarPanel from "../SidebarPanel";
 import DownloadButton from "../../../DownloadButton/DownloadButton";
+import SaveButton from "../../../SaveButton/SaveButton";
 import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
 import DownloadIcon from "../../../../assets/icons/download.svg";
+import { isOwner } from "../../../../utils/projectHelpers";
 
 import {
   logInEvent,
@@ -15,6 +17,8 @@ import "../../../../assets/stylesheets/DownloadPanel.scss";
 export const DownloadPanel = () => {
   const { t } = useTranslation();
   const user = useSelector((state) => state.auth.user);
+  const project = useSelector((state) => state.editor.project);
+  const projectOwner = isOwner(user, project);
 
   const handleLogIn = () => {
     if (window.plausible) {
@@ -64,6 +68,7 @@ export const DownloadPanel = () => {
           fill
         />
       </div>
+      {user && !projectOwner && <SaveButton fill />}
     </SidebarPanel>
   );
 };

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

@@ -113,6 +113,10 @@ describe("DownloadPanel", () => {
       ).toBeInTheDocument();
     });
 
+    test("Does not render the save button", () => {
+      expect(container.queryByText("header.save")).not.toBeInTheDocument();
+    });
+
     test("The download button initiates a download", async () => {
       const webComponentDownloadButton = screen.getByText(
         "downloadPanel.downloadButton",
@@ -122,7 +126,7 @@ describe("DownloadPanel", () => {
     });
   });
 
-  describe("When logged in", () => {
+  describe("When logged in and not the project owner", () => {
     beforeEach(() => {
       const middlewares = [];
       const mockStore = configureStore(middlewares);
@@ -144,10 +148,14 @@ describe("DownloadPanel", () => {
               },
             ],
           },
+          loading: "success",
         },
         auth: {
           user: {
             access_token: "39a09671-be55-4847-baf5-8919a0c24a25",
+            profile: {
+              user: "some-user-id",
+            },
           },
         },
       };
@@ -201,6 +209,107 @@ describe("DownloadPanel", () => {
       ).toBeInTheDocument();
     });
 
+    test("Renders the save button", () => {
+      expect(container.getByText("header.save")).toBeInTheDocument();
+    });
+
+    test("The download button initiates a download", async () => {
+      const webComponentDownloadButton = screen.getByText(
+        "downloadPanel.downloadButton",
+      ).parentElement;
+      fireEvent.click(webComponentDownloadButton);
+      await waitFor(() => expect(FileSaver.saveAs).toHaveBeenCalled());
+    });
+  });
+
+  describe("When logged in and the project owner", () => {
+    beforeEach(() => {
+      const middlewares = [];
+      const mockStore = configureStore(middlewares);
+      const initialState = {
+        editor: {
+          project: {
+            name: "My epic project",
+            identifier: "hello-world-project",
+            components: [
+              {
+                name: "main",
+                extension: "py",
+                content: "print('hello world')",
+              },
+            ],
+            image_list: [
+              {
+                url: "a.com/b",
+              },
+            ],
+            user_id: "some-user-id",
+          },
+          loading: "success",
+        },
+        auth: {
+          user: {
+            access_token: "39a09671-be55-4847-baf5-8919a0c24a25",
+            profile: {
+              user: "some-user-id",
+            },
+          },
+        },
+      };
+      const store = mockStore(initialState);
+
+      container = render(
+        <Provider store={store}>
+          <MemoryRouter>
+            <DownloadPanel />
+          </MemoryRouter>
+        </Provider>,
+      );
+    });
+    test("Renders the correct heading", () => {
+      expect(container.getByText("downloadPanel.heading")).toBeInTheDocument();
+    });
+
+    test("Does not render the log-in subtitle", () => {
+      expect(
+        container.queryByText("downloadPanel.logInTitle"),
+      ).not.toBeInTheDocument();
+    });
+
+    test("Does not render the log-in hint", () => {
+      expect(
+        container.queryByText("downloadPanel.logInHint"),
+      ).not.toBeInTheDocument();
+    });
+
+    test("Does not render the log-in button", () => {
+      expect(
+        container.queryByText("downloadPanel.logInButton"),
+      ).not.toBeInTheDocument();
+    });
+
+    test("Does not render the sign-up button", () => {
+      expect(
+        container.queryByText("downloadPanel.signUpButton"),
+      ).not.toBeInTheDocument();
+    });
+
+    test("Renders the download hint", () => {
+      expect(
+        container.getByText("downloadPanel.downloadHint"),
+      ).toBeInTheDocument();
+    });
+
+    test("Renders the download button", () => {
+      expect(
+        container.getByText("downloadPanel.downloadButton"),
+      ).toBeInTheDocument();
+    });
+
+    test("Does not render the save button", () => {
+      expect(container.queryByText("header.save")).not.toBeInTheDocument();
+    });
+
     test("The download button initiates a download", async () => {
       const webComponentDownloadButton = screen.getByText(
         "downloadPanel.downloadButton",

src/components/SaveButton/SaveButton.jsx

@@ -10,7 +10,7 @@ import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
 import SaveIcon from "../../assets/icons/save.svg";
 import { triggerSave } from "../../redux/EditorSlice";
 
-const SaveButton = ({ className, type }) => {
+const SaveButton = ({ className, type, fill = false }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
@@ -51,6 +51,7 @@ const SaveButton = ({ className, type }) => {
         textAlways
         icon={<SaveIcon />}
         type={buttonType}
+        fill={fill}
       />
     )
   );