Allow setting permission of collections during import (#6799)

* Allow setting permission of collections during import

closes #6767

* Remove unused column

app/scenes/Settings/components/DropToImport.tsx

@@ -6,9 +6,13 @@ import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import { AttachmentPreset } from "@shared/types";
+import { AttachmentPreset, CollectionPermission } from "@shared/types";
+import { bytesToHumanReadable } from "@shared/utils/files";
+import Button from "~/components/Button";
 import Flex from "~/components/Flex";
+import InputSelectPermission from "~/components/InputSelectPermission";
 import LoadingIndicator from "~/components/LoadingIndicator";
+import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
 import { uploadFile } from "~/utils/files";
 
@@ -23,38 +27,43 @@ type Props = {
 function DropToImport({ disabled, onSubmit, children, format }: Props) {
   const { t } = useTranslation();
   const { collections } = useStores();
+  const [file, setFile] = React.useState<File | null>(null);
   const [isImporting, setImporting] = React.useState(false);
+  const [permission, setPermission] =
+    React.useState<CollectionPermission | null>(CollectionPermission.ReadWrite);
 
-  const handleFiles = React.useCallback(
-    async (files) => {
-      if (files.length > 1) {
-        toast.error(t("Please choose a single file to import"));
-        return;
-      }
-      const file = files[0];
+  const handleFiles = (files: File[]) => {
+    if (files.length > 1) {
+      toast.error(t("Please choose a single file to import"));
+      return;
+    }
+    setFile(files[0]);
+  };
 
-      setImporting(true);
+  const handleStartImport = async () => {
+    if (!file) {
+      return;
+    }
+    setImporting(true);
 
-      try {
-        const attachment = await uploadFile(file, {
-          name: file.name,
-          preset: AttachmentPreset.WorkspaceImport,
-        });
-        await collections.import(attachment.id, format);
-        onSubmit();
-        toast.message(file.name, {
-          description: t(
-            "Your import is being processed, you can safely leave this page"
-          ),
-        });
-      } catch (err) {
-        toast.error(err.message);
-      } finally {
-        setImporting(false);
-      }
-    },
-    [t, onSubmit, collections, format]
-  );
+    try {
+      const attachment = await uploadFile(file, {
+        name: file.name,
+        preset: AttachmentPreset.WorkspaceImport,
+      });
+      await collections.import(attachment.id, { format, permission });
+      onSubmit();
+      toast.message(file.name, {
+        description: t(
+          "Your import is being processed, you can safely leave this page"
+        ),
+      });
+    } catch (err) {
+      toast.error(err.message);
+    } finally {
+      setImporting(false);
+    }
+  };
 
   const handleRejection = React.useCallback(() => {
     toast.error(t("File not supported – please upload a valid ZIP file"));
@@ -65,30 +74,53 @@ function DropToImport({ disabled, onSubmit, children, format }: Props) {
   }
 
   return (
-    <>
+    <Flex gap={8} column>
       {isImporting && <LoadingIndicator />}
-      <Dropzone
-        accept="application/zip, application/x-zip-compressed"
-        onDropAccepted={handleFiles}
-        onDropRejected={handleRejection}
-        disabled={isImporting}
-      >
-        {({ getRootProps, getInputProps, isDragActive }) => (
-          <DropzoneContainer
-            {...getRootProps()}
-            $disabled={isImporting}
-            $isDragActive={isDragActive}
-            tabIndex={-1}
-          >
-            <input {...getInputProps()} />
-            <Flex align="center" gap={4} column>
-              <Icon size={32} color="#fff" />
-              {children}
-            </Flex>
-          </DropzoneContainer>
-        )}
-      </Dropzone>
-    </>
+      <Text as="p" type="secondary">
+        <Dropzone
+          accept="application/zip, application/x-zip-compressed"
+          onDropAccepted={handleFiles}
+          onDropRejected={handleRejection}
+          disabled={isImporting}
+        >
+          {({ getRootProps, getInputProps, isDragActive }) => (
+            <DropzoneContainer
+              {...getRootProps()}
+              $disabled={isImporting}
+              $isDragActive={isDragActive}
+              tabIndex={-1}
+            >
+              <input {...getInputProps()} />
+              <Flex align="center" gap={4} column>
+                <Icon size={32} color="#fff" />
+                {file
+                  ? t(`${file.name} (${bytesToHumanReadable(file.size)})`)
+                  : children}
+              </Flex>
+            </DropzoneContainer>
+          )}
+        </Dropzone>
+      </Text>
+      <div>
+        <InputSelectPermission
+          value={permission}
+          onChange={(value: CollectionPermission) => {
+            setPermission(value);
+          }}
+        />
+        <Text as="span" type="secondary">
+          {t(
+            "Set the default permission level for collections created from the import"
+          )}
+          .
+        </Text>
+      </div>
+      <Flex justify="flex-end">
+        <Button disabled={!file} onClick={handleStartImport}>
+          {t("Start import")}
+        </Button>
+      </Flex>
+    </Flex>
   );
 }