feat: bulk page imports (#1219)

* refactor imports - WIP

* Add readstream

* WIP

* fix attachmentId render

* fix attachmentId render

* turndown video tag

* feat: add stream upload support and improve file handling

- Add stream upload functionality to storage drivers\n- Improve ZIP file extraction with better encoding handling\n- Fix attachment ID rendering issues\n- Add AWS S3 upload stream support\n- Update dependencies for better compatibility

* WIP

* notion formatter

* move embed parser to editor-ext package

* import embeds

* utility files

* cleanup

* Switch from happy-dom to cheerio
* Refine code

* WIP

* bug fixes and UI

* sync

* WIP

* sync

* keep import modal mounted

* Show modal during upload

* WIP

* WIP

apps/client/src/features/page/components/page-import-modal.tsx

@@ -1,18 +1,38 @@
-import { Modal, Button, SimpleGrid, FileButton } from "@mantine/core";
 import {
+  Modal,
+  Button,
+  SimpleGrid,
+  FileButton,
+  Group,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconBrandNotion,
   IconCheck,
   IconFileCode,
+  IconFileTypeZip,
   IconMarkdown,
   IconX,
 } from "@tabler/icons-react";
-import { importPage } from "@/features/page/services/page-service.ts";
+import {
+  importPage,
+  importZip,
+} from "@/features/page/services/page-service.ts";
 import { notifications } from "@mantine/notifications";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
 import { useAtom } from "jotai";
 import { buildTree } from "@/features/page/tree/utils";
 import { IPage } from "@/features/page/types/page.types.ts";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { ConfluenceIcon } from "@/components/icons/confluence-icon.tsx";
+import { getFileImportSizeLimit, isCloud } from "@/lib/config.ts";
+import { formatBytes } from "@/lib";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { getFileTaskById } from "@/features/file-task/services/file-task-service.ts";
+import { queryClient } from "@/main.tsx";
+import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
 
 interface PageImportModalProps {
   spaceId: string;
@@ -36,6 +56,7 @@ export default function PageImportModal({
         yOffset="10vh"
         xOffset={0}
         mah={400}
+        keepMounted={true}
       >
         <Modal.Overlay />
         <Modal.Content style={{ overflow: "hidden" }}>
@@ -59,6 +80,133 @@ interface ImportFormatSelection {
 function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
   const { t } = useTranslation();
   const [treeData, setTreeData] = useAtom(treeDataAtom);
+  const [workspace] = useAtom(workspaceAtom);
+  const [fileTaskId, setFileTaskId] = useState<string | null>(null);
+  const emit = useQueryEmit();
+
+  const canUseConfluence = isCloud() || workspace?.hasLicenseKey;
+
+  const handleZipUpload = async (selectedFile: File, source: string) => {
+    if (!selectedFile) {
+      return;
+    }
+
+    try {
+      onClose();
+
+      notifications.show({
+        id: "import",
+        title: t("Uploading import file"),
+        message: t("Please don't close this tab."),
+        loading: true,
+        withCloseButton: false,
+        autoClose: false,
+      });
+
+      const importTask = await importZip(selectedFile, spaceId, source);
+      notifications.update({
+        id: "import",
+        title: t("Importing pages"),
+        message: t(
+          "Page import is in progress. You can check back later if this takes longer.",
+        ),
+        loading: true,
+        withCloseButton: true,
+        autoClose: false,
+      });
+
+      setFileTaskId(importTask.id);
+    } catch (err) {
+      console.log("Failed to upload import file", err);
+      notifications.update({
+        id: "import",
+        color: "red",
+        title: t("Failed to upload import file"),
+        message: err?.response.data.message,
+        icon: <IconX size={18} />,
+        loading: false,
+        withCloseButton: true,
+        autoClose: false,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!fileTaskId) return;
+
+    const intervalId = setInterval(async () => {
+      try {
+        const fileTask = await getFileTaskById(fileTaskId);
+        const status = fileTask.status;
+
+        if (status === "success") {
+          notifications.update({
+            id: "import",
+            color: "teal",
+            title: t("Import complete"),
+            message: t("Your pages were successfully imported."),
+            icon: <IconCheck size={18} />,
+            loading: false,
+            withCloseButton: true,
+            autoClose: false,
+          });
+          clearInterval(intervalId);
+          setFileTaskId(null);
+
+          await queryClient.refetchQueries({
+            queryKey: ["root-sidebar-pages", fileTask.spaceId],
+          });
+
+          setTimeout(() => {
+            emit({
+              operation: "refetchRootTreeNodeEvent",
+              spaceId: spaceId,
+            });
+          }, 50);
+        }
+
+        if (status === "failed") {
+          notifications.update({
+            id: "import",
+            color: "red",
+            title: t("Page import failed"),
+            message: t(
+              "Something went wrong while importing pages: {{reason}}.",
+              {
+                reason: fileTask.errorMessage,
+              },
+            ),
+            icon: <IconX size={18} />,
+            loading: false,
+            withCloseButton: true,
+            autoClose: false,
+          });
+          clearInterval(intervalId);
+          setFileTaskId(null);
+          console.error(fileTask.errorMessage);
+        }
+      } catch (err) {
+        notifications.update({
+          id: "import",
+          color: "red",
+          title: t("Import failed"),
+          message: t(
+            "Something went wrong while importing pages: {{reason}}.",
+            {
+              reason: err.response?.data.message,
+            },
+          ),
+          icon: <IconX size={18} />,
+          loading: false,
+          withCloseButton: true,
+          autoClose: false,
+        });
+        clearInterval(intervalId);
+        setFileTaskId(null);
+        console.error("Failed to fetch import status", err);
+      }
+    }, 3000);
+  }, [fileTaskId]);
 
   const handleFileUpload = async (selectedFiles: File[]) => {
     if (!selectedFiles) {
@@ -120,6 +268,7 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
     }
   };
 
+  // @ts-ignore
   return (
     <>
       <SimpleGrid cols={2}>
@@ -148,7 +297,76 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
             </Button>
           )}
         </FileButton>
+
+        <FileButton
+          onChange={(file) => handleZipUpload(file, "notion")}
+          accept="application/zip"
+        >
+          {(props) => (
+            <Button
+              justify="start"
+              variant="default"
+              leftSection={<IconBrandNotion size={18} />}
+              {...props}
+            >
+              Notion
+            </Button>
+          )}
+        </FileButton>
+        <FileButton
+          onChange={(file) => handleZipUpload(file, "confluence")}
+          accept="application/zip"
+        >
+          {(props) => (
+            <Tooltip
+              label="Available in enterprise edition"
+              disabled={canUseConfluence}
+            >
+              <Button
+                disabled={!canUseConfluence}
+                justify="start"
+                variant="default"
+                leftSection={<ConfluenceIcon size={18} />}
+                {...props}
+              >
+                Confluence
+              </Button>
+            </Tooltip>
+          )}
+        </FileButton>
       </SimpleGrid>
+
+      <Group justify="center" gap="xl" mih={150}>
+        <div>
+          <Text ta="center" size="lg" inline>
+            Import zip file
+          </Text>
+          <Text ta="center" size="sm" c="dimmed" inline py="sm">
+            {t(
+              `Upload zip file containing Markdown and HTML files. Max: {{sizeLimit}}`,
+              {
+                sizeLimit: formatBytes(getFileImportSizeLimit()),
+              },
+            )}
+          </Text>
+          <FileButton
+            onChange={(file) => handleZipUpload(file, "generic")}
+            accept="application/zip"
+          >
+            {(props) => (
+              <Group justify="center">
+                <Button
+                  justify="center"
+                  leftSection={<IconFileTypeZip size={18} />}
+                  {...props}
+                >
+                  {t("Upload file")}
+                </Button>
+              </Group>
+            )}
+          </FileButton>
+        </div>
+      </Group>
     </>
   );
 }