Split legacy Import into states

questdb · Oct 30, 2023 · 0a4e79e · 0a4e79e
1 parent 24fe621
commit 0a4e79e
Show file tree

Hide file tree

Showing 4 changed files with 485 additions and 373 deletions.
diff --git a/packages/web-console/src/scenes/Import/ImportCSVFiles/dropbox.tsx b/packages/web-console/src/scenes/Import/ImportCSVFiles/dropbox.tsx
@@ -1,9 +1,6 @@
 import React, { useRef, useState, useEffect } from "react"
 import styled from "styled-components"
-import { Search2 } from "@styled-icons/remix-line"
 import { Box } from "../../../components/Box"
-import { Text } from "@questdb/react-components"
-import { Button, Heading } from "@questdb/react-components"
 import { ProcessedFile } from "./types"
 
 const getFileDuplicates = (
@@ -19,6 +16,7 @@ const getFileDuplicates = (
 const Root = styled(Box).attrs({ flexDirection: "column" })<{
   isDragging: boolean
 }>`
+  flex: 1;
   width: 100%;
   padding: 4rem 0 0;
   gap: 2rem;
@@ -28,29 +26,22 @@ const Root = styled(Box).attrs({ flexDirection: "column" })<{
   transition: all 0.15s ease-in-out;
 `
 
-const Caution = styled.div`
-  margin-top: 2rem;
-  padding: 2rem;
-  width: 100%;
-  background: ${({ theme }) => theme.color.backgroundDarker};
-  text-align: center;
-`
-
-const CautionText = styled(Text)`
-  color: #8b8fa7;
-
-  a {
-    color: ${({ theme }) => theme.color.foreground};
-  }
-`
-
 type Props = {
   files: ProcessedFile[]
   onFilesDropped: (files: File[]) => void
   dialogOpen: boolean
+  render: (props: {
+    duplicates: File[]
+    addToQueue: (inputFiles: FileList) => void
+  }) => React.ReactNode
 }
 
-export const DropBox = ({ files, onFilesDropped, dialogOpen }: Props) => {
+export const DropBox = ({
+  files,
+  onFilesDropped,
+  dialogOpen,
+  render,
+}: Props) => {
   const [isDragging, setIsDragging] = useState(false)
   const [duplicates, setDuplicates] = useState<File[]>([])
   const uploadInputRef = useRef<HTMLInputElement | null>(null)
@@ -112,55 +103,7 @@ export const DropBox = ({ files, onFilesDropped, dialogOpen }: Props) => {
       onDrop={handleDrop}
       isDragging={isDragging}
     >
-      <img
-        alt="File upload icon"
-        width="60"
-        height="80"
-        src="/assets/upload.svg"
-      />
-      <Heading level={3}>Drag CSV files here or paste from clipboard</Heading>
-      <input
-        type="file"
-        id="file"
-        onChange={(e) => {
-          if (e.target.files === null) return
-          addToQueue(e.target.files)
-        }}
-        multiple={true}
-        ref={uploadInputRef}
-        style={{ display: "none" }}
-        value=""
-      />
-      <Button
-        onClick={() => {
-          uploadInputRef.current?.click()
-        }}
-        prefixIcon={<Search2 size="18px" />}
-        skin="secondary"
-      >
-        Browse from disk
-      </Button>
-      {duplicates.length > 0 && (
-        <Text color="red">
-          File{duplicates.length > 1 ? "s" : ""} already added to queue:{" "}
-          {duplicates.map((f) => f.name).join(", ")}. Change target table name
-          and try again.
-        </Text>
-      )}
-      <Caution>
-        <CautionText>
-          Suitable for small batches of CSV file upload. For database
-          migrations, we recommend the{" "}
-          <a
-            href="https://questdb.io/docs/guides/importing-data"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            COPY SQL
-          </a>{" "}
-          command.
-        </CautionText>
-      </Caution>
+      {render({ duplicates, addToQueue })}
     </Root>
   )
 }