Export as ipynb (#620)

Heavily cleaned up from initial vibe-coded code
- Filters out AI cells
- Validates generated JSON with ajv against a JSON schema (Jupyter Notebook v4.5 JSON schema)
- Assumes Python 3.10.0
- Hidden behind a feature flag
	- We can take it out of ff status once we can get the Python version, rather than default of 3.10.0

Author: markmiro

package.json

@@ -97,6 +97,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@uiw/codemirror-theme-github": "^4.23.14",
     "@uiw/react-codemirror": "^4.23.14",
+    "ajv": "^8.17.1",
     "ansi-to-react": "^6.1.6",
     "chroma-js": "^3.1.2",
     "class-variance-authority": "^0.7.1",

pnpm-lock.yaml

@@ -8,9 +8,11 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useFeatureFlag } from "@/contexts/FeatureFlagContext";
 import { useDuplicateNotebook } from "@/hooks/useDuplicateNotebook";
+import { useNotebookExport } from "@/hooks/useNotebookExport";
 import { useMutation } from "@tanstack/react-query";
-import { CopyPlus, MoreHorizontal, Plus, Trash2 } from "lucide-react";
+import { CopyPlus, FileDown, MoreHorizontal, Plus, Trash2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 import { useCreateNotebookAndNavigate } from "../dashboard/helpers";
@@ -19,7 +21,6 @@ import type { NotebookProcessed } from "../types";
 import { useAuthenticatedUser } from "@/auth/index.js";
 import { useDebug } from "@/components/debug/debug-mode";
 import { Spinner } from "@/components/ui/Spinner";
-import { useFeatureFlag } from "@/contexts/FeatureFlagContext";
 import { useRuntimeHealth } from "@/hooks/useRuntimeHealth";
 import { runnableCellsWithIndices$, runningCells$ } from "@/queries";
 import { generateQueueId } from "@/util/queue-id";
@@ -33,6 +34,8 @@ export function NotebookControls({
 }: {
   notebook: NotebookProcessed;
 }) {
+  const exportEnabled = useFeatureFlag("ipynb-export");
+
   const allowBulkNotebookControls = useFeatureFlag("bulk-notebook-controls");
   const { store } = useStore();
   const userId = useAuthenticatedUser();
@@ -85,6 +88,7 @@ export function NotebookControls({
           )}
           <CreateNotebookAction />
           <DuplicateAction notebook={notebook} />
+          {exportEnabled && <ExportAction />}
           <DropdownMenuSeparator />
           {debug.enabled && <DeleteAllCellsAction />}
           <DeleteAction notebook={notebook} />
@@ -210,6 +214,17 @@ function DuplicateAction({ notebook }: { notebook: NotebookProcessed }) {
   );
 }
 
+function ExportAction() {
+  const { exportToJupyter } = useNotebookExport();
+
+  return (
+    <DropdownMenuItem onSelect={exportToJupyter}>
+      <FileDown />
+      Download as .ipynb
+    </DropdownMenuItem>
+  );
+}
+
 function DeleteAction({ notebook }: { notebook: NotebookProcessed }) {
   const trpc = useTrpc();
   const { confirm } = useConfirm();

src/components/notebooks/notebook/NotebookControls.tsx

@@ -12,9 +12,9 @@ import {
 import { Button } from "../../ui/button.js";
 import { SimpleUserProfile } from "../SimpleUserProfile.js";
 import type { NotebookProcessed } from "../types.js";
+import { NotebookControls } from "./NotebookControls.js";
 import { TitleEditor } from "./TitleEditor.js";
 import { useTitle } from "react-use";
-import { NotebookControls } from "./NotebookControls.js";
 
 export function NotebookHeader({
   notebook,

src/components/notebooks/notebook/NotebookHeader.tsx

@@ -4,6 +4,7 @@ import { useSessionStorage } from "react-use";
 // Define available feature flags with strict TypeScript definitions
 export interface FeatureFlags {
   "test-flag": boolean;
+  /** Can remove this feature flag once we have a proper way to get the Python version from the kernel */
   "ipynb-export": boolean;
   "file-upload": boolean;
   /** Whether to enable the notebook controls */

src/contexts/FeatureFlagContext.tsx

@@ -0,0 +1,2 @@
+nbformat.v4.schema.json is from:
+https://github.com/jupyter/nbformat/blob/ceaf199c008c06c5bb45b7c337e520c4f154d67f/nbformat/v4/nbformat.v4.schema.json