[staging]: feat: shareable folders / dataroom

Pipfile

@@ -4,7 +4,7 @@ verify_ssl = true
 name = "pypi"
 
 [packages]
-tinybird-cli = "3.3.0"
+tinybird-cli = "*"
 
 [dev-packages]
 

components/Sidebar.tsx

@@ -20,9 +20,10 @@ import {
   PlusIcon,
   FolderIcon as FolderLucideIcon,
   FolderOpenIcon,
+  ServerIcon,
 } from "lucide-react";
 import SiderbarFolders from "./sidebar-folders";
-import { AddFolderModal } from "./documents/add-folder-modal";
+import { AddFolderModal } from "./folders/add-folder-modal";
 import { ScrollArea } from "./ui/scroll-area";
 
 export default function Sidebar() {
@@ -97,6 +98,14 @@ export const SidebarComponent = ({ className }: { className?: string }) => {
       active: router.pathname.includes("documents"),
       disabled: false,
     },
+    {
+      name: "Datarooms",
+      href: "/datarooms",
+      icon: ServerIcon,
+      current: router.pathname.includes("datarooms"),
+      active: false,
+      disabled: false,
+    },
     {
       name: "Branding",
       href: "/settings/branding",

components/datarooms/add-dataroom-document-modal.tsx

@@ -0,0 +1,118 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useTeam } from "@/context/team-context";
+import { useState } from "react";
+import { toast } from "sonner";
+import { mutate } from "swr";
+import { SidebarFolderTreeSelection } from "@/components/sidebar-folders";
+import { useRouter } from "next/router";
+
+export function AddDataroomDocumentModal({
+  open,
+  setOpen,
+  dataroomId,
+  documentName,
+}: {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  dataroomId?: string;
+  documentName?: string;
+}) {
+  const router = useRouter();
+  const [folderId, setFolderId] = useState<string>("");
+  const [documentId, setDocumentId] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const teamInfo = useTeam();
+
+  /** current folder name */
+  const currentFolderPath = router.query.name as string[] | undefined;
+
+  const handleSubmit = async (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (folderId === "") return;
+
+    setLoading(true);
+    try {
+      const response = await fetch(
+        `/api/teams/${teamInfo?.currentTeam?.id}/datarooms/${dataroomId}/documents`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            documentId: documentId,
+            folderPathName: currentFolderPath?.join("/"),
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        const { message } = await response.json();
+        setLoading(false);
+        toast.error(message);
+        return;
+      }
+
+      const { newPath, oldPath } = (await response.json()) as {
+        newPath: string;
+        oldPath: string;
+      };
+
+      toast.success("Document moved successfully!");
+
+      // mutate(`/api/teams/${teamInfo?.currentTeam?.id}/folders`);
+      // mutate(`/api/teams/${teamInfo?.currentTeam?.id}/folders${oldPath}`);
+      // mutate(`/api/teams/${teamInfo?.currentTeam?.id}/folders${newPath}`).then(
+      //   () => {
+      //     router.push(`/documents/tree${newPath}`);
+      //   },
+      // );
+    } catch (error) {
+      console.error("Error moving document", error);
+      toast.error("Failed to move document. Try again.");
+    } finally {
+      setLoading(false);
+      setOpen(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader className="text-start">
+          <DialogTitle>Add Document</DialogTitle>
+          <DialogDescription>Add your document to dataroom</DialogDescription>
+        </DialogHeader>
+        <form>
+          <div className="mb-2">
+            <SidebarFolderTreeSelection
+              selectedFolderId={folderId}
+              setFolderId={setFolderId}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              onClick={handleSubmit}
+              className="w-full h-9"
+              loading={loading}
+            >
+              Add to dataroom
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

components/datarooms/add-dataroom-modal.tsx

@@ -0,0 +1,113 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useTeam } from "@/context/team-context";
+import { useState } from "react";
+import { toast } from "sonner";
+import { UpgradePlanModal } from "../billing/upgrade-plan-modal";
+import { usePlan } from "@/lib/swr/use-billing";
+import { useAnalytics } from "@/lib/analytics";
+import { mutate } from "swr";
+
+export function AddDataroomModal({ children }: { children?: React.ReactNode }) {
+  const [dataroomName, setDataroomName] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false);
+
+  const teamInfo = useTeam();
+  const { plan } = usePlan();
+  const analytics = useAnalytics();
+
+  const handleSubmit = async (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (dataroomName == "") return;
+
+    setLoading(true);
+
+    try {
+      const response = await fetch(
+        `/api/teams/${teamInfo?.currentTeam?.id}/datarooms`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: dataroomName,
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        const { message } = await response.json();
+        setLoading(false);
+        toast.error(message);
+        return;
+      }
+
+      analytics.capture("Dataroom Created", { dataroomName: dataroomName });
+      toast.success("Dataroom successfully created! 🎉");
+
+      mutate(`/api/teams/${teamInfo?.currentTeam?.id}/datarooms`);
+    } catch (error) {
+      setLoading(false);
+      toast.error("Error adding folder. Please try again.");
+      return;
+    } finally {
+      setLoading(false);
+      setOpen(false);
+    }
+  };
+
+  // If the team is on a free plan, show the upgrade modal
+  if (plan && plan.plan === "free") {
+    if (children) {
+      return (
+        <UpgradePlanModal clickedPlan="Pro" trigger={"add_dataroom_overview"}>
+          {children}
+        </UpgradePlanModal>
+      );
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader className="text-start">
+          <DialogTitle>Create dataroom</DialogTitle>
+          <DialogDescription>
+            Start creating a dataroom with a name.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit}>
+          <Label htmlFor="dataroom-name" className="opacity-80">
+            Dataroom Name
+          </Label>
+          <Input
+            id="dataroom-name"
+            placeholder="ACME Aquisition"
+            className="w-full mt-1 mb-4"
+            onChange={(e) => setDataroomName(e.target.value)}
+          />
+          <DialogFooter>
+            <Button type="submit" className="w-full h-9" loading={loading}>
+              Add new dataroom
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}