fix #7720 -- Document Name Overwritten when Generating Jupyter Notebook using "Help me write"

- this was surprisingly painful to write!

Author: williamstein

src/packages/frontend/project/new/file-type-selector.tsx

@@ -40,6 +40,7 @@ interface Props {
   selectedExt?: string;
   filename: string;
   makeNewFilename?: (ext: string) => void;
+  filenameChanged?: boolean;
 }
 
 // Use Rows and Cols to append more buttons to this class.
@@ -55,6 +56,7 @@ export function FileTypeSelector({
   children,
   filename,
   makeNewFilename,
+  filenameChanged,
 }: Props) {
   const { project_id } = useProjectContext();
 
@@ -103,6 +105,7 @@ export function FileTypeSelector({
             btnActive={btnActive}
             grid={[sm, md]}
             filename={filename}
+            filenameChanged={filenameChanged}
             makeNewFilename={() => makeNewFilename?.("ipynb")}
           />
           {renderLaTeX()}
@@ -362,6 +365,7 @@ export function FileTypeSelector({
                 project_id={project_id}
                 mode="flyout"
                 ext={ext}
+                filename={filenameChanged ? filename : undefined}
               />
             </Flex>
           </Flex>
@@ -375,6 +379,7 @@ export function FileTypeSelector({
             project_id={project_id}
             mode="full"
             ext={ext}
+            filename={filenameChanged ? filename : undefined}
           />
         </Col>
       );

src/packages/frontend/project/new/jupyter-buttons.tsx

@@ -52,6 +52,7 @@ interface JupyterNotebookButtonsProps {
   btnActive: (name: string) => boolean;
   grid: [number, number];
   filename: string;
+  filenameChanged?: boolean;
   mode: "full" | "flyout";
   makeNewFilename?: () => void;
 }
@@ -71,6 +72,7 @@ export function JupyterNotebookButtons({
   btnActive,
   grid,
   filename,
+  filenameChanged,
   mode,
   makeNewFilename,
 }: JupyterNotebookButtonsProps) {
@@ -244,6 +246,7 @@ export function JupyterNotebookButtons({
               project_id={project_id}
               mode="flyout"
               ext="ipynb"
+              filename={filename}
             />
           </Col>
         </>
@@ -286,6 +289,7 @@ export function JupyterNotebookButtons({
                 project_id={project_id}
                 mode="flyout"
                 ext="ipynb"
+                filename={filenameChanged ? filename : undefined}
               />
             </Flex>
           </Flex>
@@ -299,6 +303,7 @@ export function JupyterNotebookButtons({
             project_id={project_id}
             mode="full"
             ext="ipynb"
+            filename={filenameChanged ? filename : undefined}
           />
         </Col>
       );

src/packages/frontend/project/new/new-file-page.tsx

@@ -69,6 +69,7 @@ export default function NewFilePage(props: Props) {
   const [filename, setFilename] = useState<string>(
     filename0 ? filename0 : default_filename(undefined, project_id),
   );
+  const [filenameChanged, setFilenameChanged] = useState<boolean>(false);
   const file_creation_error = useTypedRedux(
     { project_id },
     "file_creation_error",
@@ -391,6 +392,7 @@ export default function NewFilePage(props: Props) {
                   "Name your file, folder, or a URL to download from..."
                 }
                 onChange={(e) => {
+                  setFilenameChanged(true);
                   if (extensionWarning) {
                     setExtensionWarning(false);
                   } else {
@@ -429,6 +431,7 @@ export default function NewFilePage(props: Props) {
             projectActions={actions}
             availableFeatures={availableFeatures}
             filename={filename}
+            filenameChanged={filenameChanged}
           >
             <Tip
               title={"Download files from the Internet"}

src/packages/frontend/project/page/flyouts/new.tsx

@@ -406,6 +406,7 @@ export function NewFlyout({
           create_file={handleOnClick}
           availableFeatures={availableFeatures}
           filename={filename}
+          filenameChanged={manual}
           makeNewFilename={(ext: string) => setFilename(getNewFilename(ext))}
         />
         <Tag color={COLORS.ANTD_ORANGE}>Additional types</Tag>

src/packages/frontend/project/page/home-page/ai-generate-document.tsx

@@ -118,12 +118,21 @@ type Ipynb = {
   metadata: { kernelspec: KernelSpec };
 };
 
+function ensureExtension(filename, ext) {
+  if (!filename) return filename;
+  if (!filename.endsWith("." + ext)) {
+    return filename + "." + ext;
+  }
+  return filename;
+}
+
 interface Props {
   project_id: string;
   onSuccess: () => void;
   ext: Ext;
   docName: string;
   show: boolean;
+  filename?: string;
 }
 
 function AIGenerateDocument({
@@ -132,6 +141,7 @@ function AIGenerateDocument({
   project_id,
   ext,
   docName,
+  filename: filename0,
 }: Props) {
   const projectActions = useActions({ project_id });
   const current_path = useTypedRedux({ project_id }, "current_path");
@@ -145,7 +155,12 @@ function AIGenerateDocument({
   const [saving, setSaving] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
   const [preview, setPreview] = useState<string | null>(null);
-  const [filename, setFilename] = useState<string>("");
+  const [filename, setFilename] = useState<string>(
+    ensureExtension(filename0 ?? "", ext),
+  );
+  useEffect(() => {
+    setFilename(ensureExtension(filename0 ?? "", ext));
+  }, [filename0]);
   const promptRef = useRef<HTMLElement>(null);
 
   const [kernelSpecs, setKernelSpecs] = useState<KernelSpec[] | null | string>(
@@ -452,6 +467,9 @@ function AIGenerateDocument({
   }
 
   function updateFilename(fnNext: string) {
+    if (filename) {
+      return;
+    }
     const fn = sanitizeFilename(fnNext, ext);
     const timestamp = getTimestamp();
     setFilename(`${fn}-${timestamp}.${ext}`);
@@ -957,12 +975,14 @@ export function AIGenerateDocumentModal({
   setShow,
   project_id,
   ext,
+  filename,
 }: {
   show: boolean;
   setShow: (val: boolean) => void;
   project_id: string;
   style?: CSS;
   ext: Props["ext"];
+  filename?: string;
 }) {
   const docName = file_options(`x.${ext}`).name ?? `${capitalize(ext)}`;
 
@@ -984,6 +1004,7 @@ export function AIGenerateDocumentModal({
         onSuccess={() => setShow(false)}
         ext={ext}
         docName={docName}
+        filename={filename}
       />
     </Modal>
   );
@@ -994,11 +1015,13 @@ export function AIGenerateDocumentButton({
   style,
   mode = "full",
   ext,
+  filename,
 }: {
   project_id: string;
   style?: CSS;
   mode?: "full" | "flyout";
   ext: Props["ext"];
+  filename?: string;
 }) {
   const [show, setShow] = useState<boolean>(false);
 
@@ -1044,6 +1067,7 @@ export function AIGenerateDocumentButton({
         show={show}
         setShow={setShow}
         project_id={project_id}
+        filename={filename}
       />
     </>
   );