feat(notebooks): SSR published notebooks in catchall page (#5468)

Author: IcaroG

apps/frontend/app/[...catchall]/page.tsx

@@ -1,9 +1,11 @@
-import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
+import { ComponentMeta, PlasmicComponent } from "@plasmicapp/loader-nextjs";
 import { notFound } from "next/navigation";
 import { PLASMIC } from "@/plasmic-init";
 import { PlasmicClientRootProvider } from "@/plasmic-init-client";
 import type { Metadata, Viewport } from "next";
 import { generateNotebookMetadata } from "@/lib/utils/og-metadata";
+import { logger } from "@/lib/logger";
+import { getPublishedNotebookByNames } from "@/lib/notebook/utils-server";
 
 // Use revalidate if you want incremental static regeneration
 // export const dynamic = "force-static";
@@ -29,13 +31,24 @@ export default async function PlasmicLoaderPage({
   }
 
   const pageMeta = prefetchedData.entryCompMetas[0];
+
+  let pageProps = {};
+  try {
+    pageProps = await getPageProps(pageMeta);
+  } catch (error) {
+    logger.error("Error fetching page props:", error);
+  }
+
   return (
     <PlasmicClientRootProvider
       prefetchedData={prefetchedData}
       pageParams={pageMeta.params}
       pageQuery={searchParams}
     >
-      <PlasmicComponent component={pageMeta.displayName} />
+      <PlasmicComponent
+        component={pageMeta.displayName}
+        componentProps={pageProps}
+      />
     </PlasmicClientRootProvider>
   );
 }
@@ -95,3 +108,23 @@ export async function generateStaticParams() {
     };
   });
 }
+
+async function getPageProps(
+  pageMeta: ComponentMeta & { params?: Record<string, string> },
+): Promise<Record<string, any>> {
+  const { params } = pageMeta;
+  if (pageMeta.name === "OrganizationNotebookPage") {
+    const { orgName, notebookName } = params || {};
+    if (!orgName || !notebookName) {
+      return {};
+    }
+    const publishedNotebook = await getPublishedNotebookByNames(
+      orgName,
+      notebookName,
+    );
+    return {
+      publishedHtml: publishedNotebook?.html,
+    };
+  }
+  return {};
+}

apps/frontend/app/api/v1/notebooks/publish/route.tsx

@@ -1,4 +1,4 @@
-import { gzipSync, gunzipSync } from "zlib";
+import { gzipSync } from "zlib";
 import { NextRequest, NextResponse } from "next/server";
 import { MARIMO_URL } from "@/lib/config";
 import { withPostHogTracking } from "@/lib/clients/posthog";
@@ -116,74 +116,6 @@ export const POST = withPostHogTracking(async (req: NextRequest) => {
   return NextResponse.json({});
 });
 
-export const GET = withPostHogTracking(async (req: NextRequest) => {
-  const searchParams = req.nextUrl.searchParams;
-  const notebookName = searchParams.get("notebookName");
-  const orgName = searchParams.get("orgName");
-
-  if (!notebookName || !orgName) {
-    return NextResponse.json(
-      { error: "Missing notebookName or orgName" },
-      { status: 400 },
-    );
-  }
-
-  const supabaseAdmin = createAdminClient();
-  const { data, error } = await supabaseAdmin
-    .from("published_notebooks")
-    .select(
-      `
-      *,
-      notebooks!inner (
-        notebook_name,
-        organizations!inner (
-          org_name
-        )
-      )
-    `,
-    )
-    .eq("notebooks.notebook_name", notebookName)
-    .eq("notebooks.organizations.org_name", orgName)
-    .is("deleted_at", null)
-    .is("notebooks.deleted_at", null)
-    .single();
-
-  if (error) {
-    logger.error(error);
-    if (error.code === "PGRST116") {
-      return NextResponse.json(
-        { error: "Published notebook not found" },
-        { status: 404 },
-      );
-    }
-    return NextResponse.json(
-      { error: "Error fetching published notebook" },
-      { status: 500 },
-    );
-  }
-
-  const { notebooks: _, ...publishedNotebookData } = data;
-
-  const { data: blob, error: downloadError } = await supabaseAdmin.storage
-    .from("published-notebooks")
-    .download(data.data_path);
-
-  if (downloadError) {
-    logger.error(downloadError);
-    return NextResponse.json(
-      { error: "Error downloading published notebook" },
-      { status: 500 },
-    );
-  }
-
-  const html = gunzipSync(await blob.bytes()).toString();
-
-  return NextResponse.json({
-    ...publishedNotebookData,
-    html: html.toString(),
-  });
-});
-
 export const DELETE = withPostHogTracking(async (req: NextRequest) => {
   const { notebookId } = await req.json();
   if (!notebookId || typeof notebookId !== "string") {

apps/frontend/components/dataprovider/oso-global-context.tsx

@@ -59,7 +59,6 @@ const OsoGlobalActionNames: ExtractMethodNames<OsoAppClient>[] = _.sortBy([
   "deleteNotebookById",
   "publishNotebook",
   "unpublishNotebook",
-  "getPublishedNotebookByNames",
   "getOrganizationCredits",
   "getOrganizationCreditTransactions",
   "getConnectors",

apps/frontend/lib/clients/oso-app/oso-app.ts

@@ -22,7 +22,6 @@ import type {
   DynamicConnectorsInsert,
   DynamicConnectorsRow,
   DynamicTableContextsRow,
-  PublishedNotebooksRow,
 } from "@/lib/types/schema-types";
 import { NotebookKey } from "@/lib/types/db";
 import { CREDIT_PACKAGES } from "@/lib/clients/stripe";
@@ -894,33 +893,6 @@ class OsoAppClient {
     return true;
   }
 
-  async getPublishedNotebookByNames(
-    args: Partial<{ notebookName: string; orgName: string }>,
-  ): Promise<(PublishedNotebooksRow & { html: string }) | null> {
-    console.log("getPublishedNotebook: ", args);
-    const notebookName = ensure(
-      args.notebookName,
-      "Missing notebookName argument",
-    );
-    const orgName = ensure(args.orgName, "Missing orgName argument");
-
-    const searchParams = new URLSearchParams({ orgName, notebookName });
-    const response = await fetch(`/api/v1/notebooks/publish?${searchParams}`, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-
-    const json = await response.json();
-
-    if (!response.ok) {
-      throw new Error("Error fetching published notebook: " + json.error);
-    }
-
-    return json;
-  }
-
   /**
    * Gets the current credit balance for an organization.
    * @param orgName - The unique organization name

apps/frontend/lib/notebook/utils-server.ts

@@ -4,6 +4,8 @@ import puppeteer, { Browser } from "puppeteer-core";
 import chromium from "@sparticuz/chromium-min";
 import { NODE_ENV, PUPPETEER_CHROMIUM_PATH } from "@/lib/config";
 import { logger } from "@/lib/logger";
+import { createAdminClient } from "@/lib/supabase/admin";
+import { gunzipSync } from "zlib";
 
 export async function tryGenerateNotebookHtml(url: string) {
   const browser = await createBrowserInstance();
@@ -91,6 +93,56 @@ async function generateNotebookHtml(browser: Browser, url: string) {
     `;
 }
 
+export async function getPublishedNotebookByNames(
+  orgName: string,
+  notebookName: string,
+) {
+  const supabaseAdmin = createAdminClient();
+  const { data, error } = await supabaseAdmin
+    .from("published_notebooks")
+    .select(
+      `
+        *,
+        notebooks!inner (
+          notebook_name,
+          organizations!inner (
+            org_name
+          )
+        )
+      `,
+    )
+    .eq("notebooks.notebook_name", notebookName)
+    .eq("notebooks.organizations.org_name", orgName)
+    .is("deleted_at", null)
+    .is("notebooks.deleted_at", null)
+    .single();
+
+  if (error) {
+    if (error.code !== "PGRST116") {
+      logger.error(error);
+    }
+    return undefined;
+  }
+
+  const { notebooks: _, ...publishedNotebookData } = data;
+
+  const { data: blob, error: downloadError } = await supabaseAdmin.storage
+    .from("published-notebooks")
+    .download(data.data_path);
+
+  if (downloadError) {
+    logger.error(downloadError);
+    return undefined;
+  }
+
+  const html = gunzipSync(await blob.bytes()).toString();
+
+  return {
+    ...publishedNotebookData,
+    html: html.toString(),
+  };
+}
+
 async function createBrowserInstance() {
   try {
     return await puppeteer.launch({