fix: save content when creating a new file via filename input (#8009)

Author: mscolnick

frontend/src/components/editor/header/filename-form.tsx

@@ -3,21 +3,34 @@
 import type { JSX } from "react";
 import { FilenameInput } from "@/components/editor/header/filename-input";
 import { useUpdateFilename } from "@/core/saving/filename";
+import { useSaveNotebook } from "@/core/saving/save-component";
 import { Paths } from "@/utils/paths";
 
 export const FilenameForm = ({
   filename,
 }: {
   filename: string | null;
 }): JSX.Element => {
-  const setFilename = useUpdateFilename();
+  const updateFilename = useUpdateFilename();
+  const { saveNotebook } = useSaveNotebook();
+
+  const handleNameChange = (newFilename: string) => {
+    const wasUnnamed = filename === null;
+    updateFilename(newFilename).then((name) => {
+      // When creating a new file (was unnamed), also save the content
+      if (name !== null && wasUnnamed) {
+        saveNotebook(name, true);
+      }
+    });
+  };
+
   return (
     <FilenameInput
       placeholderText={
         filename ? Paths.basename(filename) : "untitled marimo notebook"
       }
       initialValue={filename}
-      onNameChange={setFilename}
+      onNameChange={handleNameChange}
       flexibleWidth={true}
       resetOnBlur={true}
       data-testid="filename-input"

frontend/src/components/editor/navigation/__tests__/navigation.test.ts

@@ -109,6 +109,7 @@ const renderWithProvider = <T>(hook: () => T) => {
 // Shared mock setup
 const mockSaveOrNameNotebook = vi.fn();
 const mockSaveIfNotebookIsPersistent = vi.fn();
+const mockSaveNotebook = vi.fn();
 const mockRunCell = vi.fn();
 const mockCopyCell = vi.fn();
 const mockPasteCell = vi.fn();
@@ -156,6 +157,7 @@ describe("useCellNavigationProps", () => {
     mockUseSaveNotebook.mockReturnValue({
       saveOrNameNotebook: mockSaveOrNameNotebook,
       saveIfNotebookIsPersistent: mockSaveIfNotebookIsPersistent,
+      saveNotebook: mockSaveNotebook,
     });
     mockUseCellActions.mockReturnValue(
       mockCellActions as unknown as CellActions,

frontend/src/core/saving/save-component.tsx

@@ -190,6 +190,7 @@ export function useSaveNotebook() {
   return {
     saveOrNameNotebook,
     saveIfNotebookIsPersistent,
+    saveNotebook,
   };
 }