From c1f439666ce228b2f6a6a50bfc497dbcd1939351 Mon Sep 17 00:00:00 2001
From: Felipe Mota <fmota@plasmic.app>
Date: Mon, 9 Dec 2024 22:02:05 -0300
Subject: [PATCH] fix(admin): Improve import projects from prod

GitOrigin-RevId: 73c3fd0eea6899150f16b1d1a8d6ba3c1830ead4
---
 .../admin/AdminImportProjectsFromProd.tsx     | 163 ++++++++++++++++++
 .../components/pages/admin/AdminPage.tsx      |   6 +-
 .../pages/admin/ImportProjectsFromProd.tsx    |  96 -----------
 platform/wab/src/wab/server/AppServer.ts      |   5 +
 platform/wab/src/wab/server/db/DbMgr.ts       |  53 ++++--
 platform/wab/src/wab/server/routes/admin.ts   |  15 ++
 .../wab/src/wab/server/routes/projects.ts     |  76 ++++++--
 platform/wab/src/wab/shared/SharedApi.ts      |   9 +
 8 files changed, 298 insertions(+), 125 deletions(-)
 create mode 100644 platform/wab/src/wab/client/components/pages/admin/AdminImportProjectsFromProd.tsx
 delete mode 100644 platform/wab/src/wab/client/components/pages/admin/ImportProjectsFromProd.tsx

diff --git a/platform/wab/src/wab/client/components/pages/admin/AdminImportProjectsFromProd.tsx b/platform/wab/src/wab/client/components/pages/admin/AdminImportProjectsFromProd.tsx
new file mode 100644
index 00000000000..3733f3d2cf1
--- /dev/null
+++ b/platform/wab/src/wab/client/components/pages/admin/AdminImportProjectsFromProd.tsx
@@ -0,0 +1,163 @@
+import { NonAuthCtx, useNonAuthCtx } from "@/wab/client/app-ctx";
+import { Modal } from "@/wab/client/components/widgets/Modal";
+import { WorkspaceId } from "@/wab/shared/ApiSchema";
+import { Bundle } from "@/wab/shared/bundles";
+import { DevFlagsType } from "@/wab/shared/devflags";
+import { Button } from "antd";
+import React, { useState } from "react";
+
+type ProjectInfo = {
+  projectId: string;
+  bundle: string;
+  name: string;
+};
+
+function useImportFromProdListener(
+  onListen: (devflags: DevFlagsType, info: ProjectInfo[]) => Promise<void>
+) {
+  React.useEffect(() => {
+    const listener = async (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.source === "import-project-from-prod") {
+          const { devflags, projectsInfo } = data;
+          await onListen(devflags, projectsInfo);
+        }
+      } catch {}
+    };
+    window.addEventListener("message", listener);
+    return () => window.removeEventListener("message", listener);
+  }, [onListen]);
+}
+
+async function setupHostlessWorkspace(
+  nonAuthCtx: NonAuthCtx,
+  hostLessWorkspaceId: WorkspaceId
+) {
+  try {
+    // If it doesn't throw an error, it means the workspace exists
+    await nonAuthCtx.api.getWorkspace(hostLessWorkspaceId);
+  } catch (e) {
+    async function getTeamId() {
+      const { teams } = await nonAuthCtx.api.listTeams();
+      const nonPersonalTeam = teams.find((t) => !t.personalTeamOwnerId);
+      if (nonPersonalTeam) {
+        return nonPersonalTeam.id;
+      }
+      const { team } = await nonAuthCtx.api.createTeam("Hostless Team");
+      return team.id;
+    }
+
+    const teamId = await getTeamId();
+
+    await nonAuthCtx.api.adminCreateWorkspace({
+      id: hostLessWorkspaceId,
+      name: "Hostless Workspace",
+      description: "Workspace for hostless projects",
+      teamId: teamId,
+    });
+  }
+}
+
+async function resetProjects(
+  nonAuthCtx: NonAuthCtx,
+  projectsInfo: ProjectInfo[]
+) {
+  console.log("## Deleting existing projects...");
+
+  const projectIds = projectsInfo.flatMap((info) => {
+    const parsedBundles = JSON.parse(info.bundle) as Array<[string, Bundle]>;
+    const dependenciesProjectIds = parsedBundles.flatMap(([_, bundle]) =>
+      Object.values(bundle.map)
+        .filter((inst) => inst.__type === "ProjectDependency")
+        .map((inst) => inst.projectId)
+    );
+
+    return [info.projectId, ...dependenciesProjectIds];
+  });
+
+  await Promise.all(
+    projectIds.map((projectId) =>
+      nonAuthCtx.api.deleteProjectAndRevisions(projectId)
+    )
+  );
+
+  console.log("## Uploading new projects...");
+  // We have to do it sync, since we can end up trying to insert the same project twice, concurrently and that will fail.
+  for (const bundle of projectsInfo) {
+    await nonAuthCtx.api.importProject(bundle.bundle, {
+      keepProjectIdsAndNames: true,
+      projectName: bundle.name,
+    });
+  }
+}
+
+export function AdminImportProjectsFromProd() {
+  const nonAuthCtx = useNonAuthCtx();
+  const [modalVisible, setModalVisible] = useState(false);
+  const ref = React.createRef<HTMLIFrameElement>();
+
+  const onListenProjectsInfo = React.useCallback(
+    async (devflags: DevFlagsType, info: ProjectInfo[]) => {
+      if (devflags.hostLessWorkspaceId) {
+        await setupHostlessWorkspace(nonAuthCtx, devflags.hostLessWorkspaceId);
+      }
+
+      devflags.hideBlankStarter = false;
+
+      await nonAuthCtx.api.setDevFlagOverrides(
+        JSON.stringify(devflags, null, 2)
+      );
+
+      await resetProjects(nonAuthCtx, info);
+
+      console.log("## Posting message to window...");
+      ref.current!.contentWindow?.postMessage(
+        JSON.stringify({
+          source: "import-project-from-prod",
+          done: true,
+        })
+      );
+
+      setModalVisible(false);
+    },
+    [nonAuthCtx, ref]
+  );
+
+  useImportFromProdListener(onListenProjectsInfo);
+
+  const showImportFromProd = window.location.hostname.includes("localhost");
+  // Don't even show this on prod, just for extra safety
+  if (!showImportFromProd) {
+    return null;
+  }
+
+  return (
+    <div>
+      <h2>Import devflags and plasmic projects from prod</h2>
+      <Modal
+        open={modalVisible}
+        footer={null}
+        title={"Import plasmic projects from prod"}
+        onCancel={() => setModalVisible(false)}
+        width={800}
+      >
+        <iframe
+          src="https://studio.plasmic.app/import-projects-from-prod"
+          width={760}
+          height={500}
+          ref={ref}
+        />
+      </Modal>
+      <Button
+        disabled={window.location.hostname.startsWith(
+          "https://studio.plasmic.app"
+        )}
+        onClick={() => setModalVisible((v) => !v)}
+      >
+        Import
+      </Button>
+      <p>This will override your current devflags</p>
+    </div>
+  );
+}
diff --git a/platform/wab/src/wab/client/components/pages/admin/AdminPage.tsx b/platform/wab/src/wab/client/components/pages/admin/AdminPage.tsx
index 8e4820616bb..33c35cf7560 100644
--- a/platform/wab/src/wab/client/components/pages/admin/AdminPage.tsx
+++ b/platform/wab/src/wab/client/components/pages/admin/AdminPage.tsx
@@ -12,9 +12,9 @@ import {
   AdminCtxProvider,
   useAdminCtx,
 } from "@/wab/client/components/pages/admin/AdminCtx";
+import { AdminImportProjectsFromProd } from "@/wab/client/components/pages/admin/AdminImportProjectsFromProd";
 import { AdminTeamsView } from "@/wab/client/components/pages/admin/AdminTeamsView";
 import { AdminUsersView } from "@/wab/client/components/pages/admin/AdminUsersView";
-import { ImportProjectsFromProd } from "@/wab/client/components/pages/admin/ImportProjectsFromProd";
 import {
   LinkButton,
   SearchBox,
@@ -131,7 +131,7 @@ function AdminPageTabs() {
               <TourCypressTest />
               <DownloadPkgForPkgMgr />
               <DownloadPlumePkg />
-              <ImportProjectsFromProd />
+              <AdminImportProjectsFromProd />
               <CopilotFeedbackView />
               <AppAuthMetrics />
             </div>
@@ -1272,7 +1272,7 @@ function EditPkgVersionBundle() {
                 onClick={async () => {
                   const data = editorRef.current?.getValue();
                   if (data && JSON.parse(data)) {
-                    const res = await nonAuthCtx.api.savePkgVersionAsAdmin({
+                    await nonAuthCtx.api.savePkgVersionAsAdmin({
                       pkgVersionId: pkgVersion.id,
                       data,
                     });
diff --git a/platform/wab/src/wab/client/components/pages/admin/ImportProjectsFromProd.tsx b/platform/wab/src/wab/client/components/pages/admin/ImportProjectsFromProd.tsx
deleted file mode 100644
index 188f9937a53..00000000000
--- a/platform/wab/src/wab/client/components/pages/admin/ImportProjectsFromProd.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { useNonAuthCtx } from "@/wab/client/app-ctx";
-import { Modal } from "@/wab/client/components/widgets/Modal";
-import { spawn } from "@/wab/shared/common";
-import { Button } from "antd";
-import React, { useState } from "react";
-
-export function ImportProjectsFromProd() {
-  const nonAuthCtx = useNonAuthCtx();
-  const [projectsInfo, setProjectsInfo] = React.useState<
-    { projectId: string; bundle: string; name: string }[] | undefined
-  >(undefined);
-  const [modalVisible, setModalVisible] = useState(false);
-  const ref = React.createRef<HTMLIFrameElement>();
-  React.useEffect(() => {
-    const listener = (event: MessageEvent) => {
-      try {
-        const data = JSON.parse(event.data);
-        if (data.source === "import-project-from-prod") {
-          setProjectsInfo(data.projectsInfo);
-          spawn(
-            nonAuthCtx.api.setDevFlagOverrides(
-              JSON.stringify(data.devflags, null, 2)
-            )
-          );
-        }
-      } catch {}
-    };
-    window.addEventListener("message", listener);
-    return () => window.removeEventListener("message", listener);
-  }, []);
-
-  const updateProjects = async () => {
-    if (projectsInfo) {
-      console.log("## Deleting existing projects...");
-      for (const bundle of projectsInfo) {
-        await nonAuthCtx.api.deleteProjectAndRevisions(bundle.projectId);
-      }
-      console.log("## Uploading new projects...");
-      // We have to do it sync, since we can end up trying to insert the same project twice, concurrently and that will fail.
-      for (const bundle of projectsInfo) {
-        await nonAuthCtx.api.importProject(bundle.bundle, {
-          keepProjectIdsAndNames: true,
-          projectName: bundle.name,
-        });
-      }
-
-      ref.current!.contentWindow?.postMessage(
-        JSON.stringify({
-          source: "import-project-from-prod",
-          done: true,
-        })
-      );
-
-      setModalVisible(false);
-    }
-  };
-
-  React.useEffect(() => {
-    spawn(updateProjects());
-  }, [projectsInfo]);
-
-  const showImportFromProd = window.location.hostname.includes("localhost");
-  // Don't even show this on prod, just for extra safety
-  if (!showImportFromProd) {
-    return null;
-  }
-
-  return (
-    <div>
-      <h2>Import devflags and plasmic projects from prod</h2>
-      <Modal
-        open={modalVisible}
-        footer={null}
-        title={"Import plasmic projects from prod"}
-        onCancel={() => setModalVisible(false)}
-        width={800}
-      >
-        <iframe
-          src="https://studio.plasmic.app/import-projects-from-prod"
-          width={760}
-          height={500}
-          ref={ref}
-        />
-      </Modal>
-      <Button
-        disabled={window.location.hostname.startsWith(
-          "https://studio.plasmic.app"
-        )}
-        onClick={() => setModalVisible((v) => !v)}
-      >
-        Import
-      </Button>
-      <p>This will override your current devflags</p>
-    </div>
-  );
-}
diff --git a/platform/wab/src/wab/server/AppServer.ts b/platform/wab/src/wab/server/AppServer.ts
index 3b126cfea43..778dea11f90 100644
--- a/platform/wab/src/wab/server/AppServer.ts
+++ b/platform/wab/src/wab/server/AppServer.ts
@@ -1413,6 +1413,11 @@ export function addMainAppServerRoutes(
     adminOnly,
     withNext(adminRoutes.listProjects)
   );
+  app.post(
+    "/api/v1/admin/workspaces",
+    adminOnly,
+    withNext(adminRoutes.createWorkspace)
+  );
   app.post(
     "/api/v1/admin/delete-project",
     adminOnly,
diff --git a/platform/wab/src/wab/server/db/DbMgr.ts b/platform/wab/src/wab/server/db/DbMgr.ts
index 86d363fd618..f21308cf4b4 100644
--- a/platform/wab/src/wab/server/db/DbMgr.ts
+++ b/platform/wab/src/wab/server/db/DbMgr.ts
@@ -2314,6 +2314,29 @@ export class DbMgr implements MigrationDbMgr {
     return workspace;
   }
 
+  async createWorkspaceWithId({
+    id,
+    name,
+    description,
+    teamId,
+  }: {
+    id: WorkspaceId;
+    name: string;
+    description: string;
+    teamId: TeamId;
+  }): Promise<Workspace> {
+    this.checkSuperUser();
+    const workspace = this.workspaces().create({
+      ...this.stampNew(true),
+      id,
+      name,
+      description,
+      team: { id: teamId },
+    });
+    await this.entMgr.save(workspace);
+    return workspace;
+  }
+
   async deleteWorkspace(id: WorkspaceId) {
     return this._deleteResource({ type: "workspace", id });
   }
@@ -2591,17 +2614,10 @@ export class DbMgr implements MigrationDbMgr {
       ...(ownerId ? { createdBy: { id: ownerId } } : {}),
       ...(projectId ? { id: projectId } : {}),
     });
-    const rev = this.entMgr.create(ProjectRevision, {
-      ...this.stampNew(),
-      revision: 1,
-      project: { id: project.id },
-      // This is a placeholder.  The first client to load this placeholder will save back a valid initial
-      // project.
-      //
-      // Longer-term, the project code will actually be running on the server.
-      data: "{}",
-    });
-    await this.entMgr.save([project, rev]);
+
+    await this.entMgr.save(project);
+    const rev = await this.createFirstProjectRev(project.id);
+
     if (project.createdById) {
       await this.sudo()._assignResourceOwner(
         { type: "project", id: project.id },
@@ -3288,6 +3304,21 @@ export class DbMgr implements MigrationDbMgr {
     return await this.projectRevs().save(rev);
   }
 
+  async createFirstProjectRev(projectId: ProjectId) {
+    const revision = this.entMgr.create(ProjectRevision, {
+      ...this.stampNew(),
+      revision: 1,
+      project: { id: projectId },
+      // This is a placeholder.  The first client to load this placeholder will save back a valid initial
+      // project.
+      data: "{}",
+    });
+
+    await this.entMgr.save(revision);
+
+    return revision;
+  }
+
   async getPreviousPkgId(
     projectId: ProjectId,
     branchId: BranchId | undefined,
diff --git a/platform/wab/src/wab/server/routes/admin.ts b/platform/wab/src/wab/server/routes/admin.ts
index fb4f9cc9b3e..e3f61d8a8f6 100644
--- a/platform/wab/src/wab/server/routes/admin.ts
+++ b/platform/wab/src/wab/server/routes/admin.ts
@@ -53,6 +53,7 @@ import { getTeamDiscourseInfo as doGetTeamDiscourseInfo } from "@/wab/server/dis
 import { sendTeamSupportWelcomeEmail as doSendTeamSupportWelcomeEmail } from "@/wab/server/discourse/sendTeamSupportWelcomeEmail";
 import { syncTeamDiscourseInfo as doSyncTeamDiscourseInfo } from "@/wab/server/discourse/syncTeamDiscourseInfo";
 import { checkAndResetTeamTrial } from "@/wab/server/routes/team-plans";
+import { mkApiWorkspace } from "@/wab/server/routes/workspaces";
 import { broadcastProjectsMessage } from "@/wab/server/socket-util";
 
 export async function createUser(req: Request, res: Response) {
@@ -132,6 +133,20 @@ export async function listProjects(req: Request, res: Response) {
   res.json({ projects: projects.map(mkApiProject) });
 }
 
+export async function createWorkspace(req: Request, res: Response) {
+  const mgr = superDbMgr(req);
+
+  const { id, name, description, teamId } = req.body;
+  const workspace = await mgr.createWorkspaceWithId({
+    id,
+    name,
+    description,
+    teamId,
+  });
+
+  res.json({ workspace: mkApiWorkspace(workspace) });
+}
+
 export async function deleteProjectAndRevisions(req: Request, res: Response) {
   const mgr = superDbMgr(req);
   const { projectId } = req.body;
diff --git a/platform/wab/src/wab/server/routes/projects.ts b/platform/wab/src/wab/server/routes/projects.ts
index a11e46671b9..eee363cae50 100644
--- a/platform/wab/src/wab/server/routes/projects.ts
+++ b/platform/wab/src/wab/server/routes/projects.ts
@@ -547,36 +547,70 @@ export async function doImportProject(
 
     let pkgVersion: PkgVersion;
     let newBundle: Bundle;
+
+    // If we are going to keep the project ids and names, we will keep the versions as well
+    const pkgVersionToUse = opts?.keepProjectIdsAndNames
+      ? projectDep.version
+      : "0.0.1";
+
+    const projectDepExists = await mgr.checkIfProjectIdExists(
+      projectDep.projectId
+    );
+
+    const currentPkg = projectDepExists
+      ? await mgr.getPkgByProjectId(projectDep.projectId)
+      : undefined;
+
     if (
-      !(await mgr.checkIfProjectIdExists(projectDep.projectId)) ||
+      !currentPkg ||
+      !(await mgr.tryGetPkgVersion(currentPkg.id, pkgVersionToUse)) ||
       !opts?.keepProjectIdsAndNames
     ) {
-      const { project, rev: fstRev } = await mgr.createProject({
-        name: !opts?.keepProjectIdsAndNames
-          ? `Imported Dep${depBundles.length > 1 ? ` ${i + 1}` : ""}`
-          : projectDep.name,
-        projectId: opts?.keepProjectIdsAndNames
-          ? projectDep.projectId
-          : undefined,
-      });
+      async function getOrCreateProject() {
+        if (projectDepExists && opts?.keepProjectIdsAndNames) {
+          return mgr.getProjectById(projectDep.projectId);
+        } else {
+          const { project } = await mgr.createProject({
+            name: !opts?.keepProjectIdsAndNames
+              ? `Imported Dep${depBundles.length > 1 ? ` ${i + 1}` : ""}`
+              : projectDep.name,
+            projectId: opts?.keepProjectIdsAndNames
+              ? projectDep.projectId
+              : undefined,
+          });
+          return project;
+        }
+      }
+
+      const project = await getOrCreateProject();
       const pkg = await mgr.createPkgByProjectId(project.id);
 
       projectDep.pkgId = pkg.id;
       projectDep.projectId = project.id;
-      projectDep.version = "0.0.1";
+      projectDep.version = pkgVersionToUse;
 
       const depSite = bundler.bundle(projectDep.site, tmpUuid, dep.version);
       newBundle = bundler.bundle(projectDep, tmpUuid, dep.version);
 
+      async function getNextRevisionNum() {
+        try {
+          const lastRev = await mgr.getLatestProjectRev(project.id);
+          return lastRev.revision + 1;
+        } catch (err) {
+          const rev = await mgr.createFirstProjectRev(project.id);
+          return rev.revision + 1;
+        }
+      }
+
       const rev = await mgr.saveProjectRev({
         projectId: project.id,
         data: JSON.stringify(depSite),
-        revisionNum: fstRev.revision + 1,
+        revisionNum: await getNextRevisionNum(),
       });
 
       pkgVersion = await mgr.insertPkgVersion(
         pkg.id,
-        "0.0.1",
+        pkgVersionToUse,
         JSON.stringify(newBundle),
         [],
         "",
@@ -584,10 +618,10 @@ export async function doImportProject(
       );
     } else {
       newBundle = bundler.bundle(projectDep, tmpUuid, dep.version);
-      const pkg = await mgr.getPkgByProjectId(projectDep.projectId);
-      assert(pkg, "Pkg not found");
-      pkgVersion = await mgr.getPkgVersion(pkg.id, "0.0.1");
+      assert(currentPkg, "Pkg not found");
+      pkgVersion = await mgr.getPkgVersion(currentPkg.id, pkgVersionToUse);
     }
+
     newPkgVersionById.set(pkgVersion.id, pkgVersion);
     // unbundle with the correct uuid
     ensureKnownProjectDependency(bundler.unbundle(newBundle, pkgVersion.id));
@@ -610,6 +644,18 @@ export async function doImportProject(
     bundler.unbundle(siteBundle, project.id)
   );
 
+  if (unbundledSite.hostLessPackageInfo) {
+    const devflagsStr = (await mgr.tryGetDevFlagOverrides())?.data;
+    if (devflagsStr) {
+      const devflags = JSON.parse(devflagsStr);
+      const { hostLessWorkspaceId } = devflags;
+      await mgr.updateProject({
+        id: project.id,
+        workspaceId: hostLessWorkspaceId,
+      });
+    }
+  }
+
   if (opts?.dataSourceReplacement) {
     let oldToNewSourceIds: Record<string, string> = {};
     const sourceIds = getAllOpExprSourceIdsUsedInSite(unbundledSite);
diff --git a/platform/wab/src/wab/shared/SharedApi.ts b/platform/wab/src/wab/shared/SharedApi.ts
index cd976456c31..3cfa7a2ddae 100644
--- a/platform/wab/src/wab/shared/SharedApi.ts
+++ b/platform/wab/src/wab/shared/SharedApi.ts
@@ -1079,6 +1079,15 @@ export abstract class SharedApi {
     return this.post(`/admin/projects`, { ownerId });
   }
 
+  async adminCreateWorkspace(data: {
+    id: WorkspaceId;
+    name: string;
+    description: string;
+    teamId: TeamId;
+  }) {
+    return this.post(`/admin/workspaces`, data);
+  }
+
   async listBranchesForProject(
     projectId: ProjectId
   ): Promise<ListBranchesResponse> {