Merge branch 'main' into fix/oracle-export-type-mapping

Author: Kundan-CR7

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,45 +13,63 @@ export default function ImportSource({
 
   return (
     <div>
-      <Upload
-        action="#"
-        beforeUpload={({ file, fileList }) => {
-          const f = fileList[0].fileInstance;
-          if (!f) {
-            return;
-          }
-          const reader = new FileReader();
-          reader.onload = async (e) => {
-            setImportData((prev) => ({ ...prev, src: e.target.result }));
-          };
-          reader.readAsText(f);
+      <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 }) => {
+              const f = fileList[0].fileInstance;
+              if (!f) {
+                return;
+              }
+              const reader = new FileReader();
+              reader.onload = async (e) => {
+                setImportData((prev) => ({ ...prev, src: e.target.result }));
+              };
+              reader.readAsText(f);
+
+              return {
+                autoRemove: false,
+                fileInstance: file.fileInstance,
+                status: "success",
+                shouldUpload: false,
+              };
+            }}
+            draggable={true}
+            dragMainText={t("drag_and_drop_files")}
+            dragSubText={t("upload_sql_to_generate_diagrams")}
+            accept=".sql"
+            onRemove={() => {
+              setError({
+                type: STATUS.NONE,
+                message: "",
+              });
+              setImportData((prev) => ({ ...prev, src: "" }));
+            }}
+            onFileChange={() =>
+              setError({
+                type: STATUS.NONE,
+                message: "",
+              })
+            }
+            limit={1}
+          />
+        </TabPane>
+      </Tabs>
 
-          return {
-            autoRemove: false,
-            fileInstance: file.fileInstance,
-            status: "success",
-            shouldUpload: false,
-          };
-        }}
-        draggable={true}
-        dragMainText={t("drag_and_drop_files")}
-        dragSubText={t("upload_sql_to_generate_diagrams")}
-        accept=".sql"
-        onRemove={() => {
-          setError({
-            type: STATUS.NONE,
-            message: "",
-          });
-          setImportData((prev) => ({ ...prev, src: "" }));
-        }}
-        onFileChange={() =>
-          setError({
-            type: STATUS.NONE,
-            message: "",
-          })
-        }
-        limit={1}
-      />
       <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",
   },
 };
 

src/utils/exportAs/dbml.js

@@ -40,14 +40,6 @@ function columnDefault(field, database) {
   return `default: ${parseDefaultDbml(field, database)}`;
 }
 
-function columnComment(field) {
-  if (!field.comment || field.comment.trim() === "") {
-    return "";
-  }
-
-  return `note: '${escapeQuotes(field.comment)}'`;
-}
-
 function columnSettings(field, database) {
   let constraints = [];
 
@@ -98,6 +90,23 @@ function processComment(comment) {
   return `'${escapeQuotes(comment)}'`;
 }
 
+function columnComment(field) {
+  if (!field.comment || field.comment.trim() === "") {
+    return "";
+  }
+
+  return `note: ${processComment(field.comment)}`;
+}
+
+function processType(type) {
+  // TODO: remove after a while
+  if (type.toUpperCase() === "TIMESTAMP WITH TIME ZONE") {
+    return "timestamptz";
+  }
+
+  return type.toLowerCase();
+}
+
 export function toDBML(diagram) {
   const generateRelString = (rel) => {
     const { fields: startTableFields, name: startTableName } =
@@ -142,7 +151,7 @@ export function toDBML(diagram) {
               `\t${quoteIdentifier(field.name)} ${
                 field.type === "ENUM" || field.type === "SET"
                   ? quoteIdentifier(`${field.name}_${field.values.join("_")}_t`)
-                  : field.type.toLowerCase()
+                  : processType(field.type)
               }${fieldSize(
                 field,
                 diagram.database,