Allow importing from sql without uploading a file (#700)

src/components/EditorHeader/Modal/ImportSource.jsx

@@ -1,6 +1,7 @@
-import { Upload, Checkbox, Banner } from "@douyinfe/semi-ui";
+import { Upload, Checkbox, Banner, Tabs, TabPane } from "@douyinfe/semi-ui";
 import { STATUS } from "../../../data/constants";
 import { useTranslation } from "react-i18next";
+import CodeEditor from "../../CodeEditor";
 
 export default function ImportSource({
   importData,
@@ -12,6 +13,21 @@ export default function ImportSource({
 
   return (
     <div>
+      <Tabs>
+        <TabPane tab={t("insert_sql")} itemKey="text-import">
+          <CodeEditor
+            className="h-56"
+            language="sql"
+            onChange={(value) => {
+              setImportData((prev) => ({ ...prev, src: value }));
+              setError({
+                type: STATUS.NONE,
+                message: "",
+              });
+            }}
+          />
+        </TabPane>
+        <TabPane tab={t("upload_file")} itemKey="file-import">
           <Upload
             action="#"
             beforeUpload={({ file, fileList }) => {
@@ -51,6 +67,9 @@ export default function ImportSource({
             }
             limit={1}
           />
+        </TabPane>
+      </Tabs>
+
       <div className="mt-2">
         <Checkbox
           aria-label="overwrite checkbox"

src/i18n/locales/en.js

@@ -279,6 +279,8 @@ const en = {
     failed_to_record_version: "Failed to record version",
     failed_to_load_diagram: "Failed to load diagram",
     see_all: "See all",
+    insert_sql: "Insert SQL",
+    upload_file: "Upload file",
   },
 };