Display sql error location and message on import

src/components/EditorHeader/Modal/ImportSource.jsx

@@ -1,7 +1,12 @@
-import { Upload, Checkbox } from "@douyinfe/semi-ui";
+import { Upload, Checkbox, Banner } from "@douyinfe/semi-ui";
 import { STATUS } from "../../../data/constants";
 
-export default function ImportSource({ importData, setImportData, setError }) {
+export default function ImportSource({
+  importData,
+  setImportData,
+  error,
+  setError,
+}) {
   return (
     <div>
       <Upload
@@ -60,6 +65,29 @@ export default function ImportSource({ importData, setImportData, setError }) {
         >
           Overwrite existing diagram
         </Checkbox>
+        <div className="mt-2">
+          {error.type === STATUS.ERROR ? (
+            <Banner
+              type="danger"
+              fullMode={false}
+              description={<div>{error.message}</div>}
+            />
+          ) : error.type === STATUS.OK ? (
+            <Banner
+              type="info"
+              fullMode={false}
+              description={<div>{error.message}</div>}
+            />
+          ) : (
+            error.type === STATUS.WARNING && (
+              <Banner
+                type="warning"
+                fullMode={false}
+                description={<div>{error.message}</div>}
+              />
+            )
+          )}
+        </div>
       </div>
     </div>
   );

src/components/EditorHeader/Modal/Modal.jsx

@@ -114,9 +114,17 @@ export default function Modal({
     try {
       ast = parser.astify(importSource.src, { database: "MySQL" });
     } catch (err) {
-      Toast.error(
+      setError({
-        "Could not parse the sql file. Make sure there are no syntax errors.",
+        type: STATUS.ERROR,
-      );
+        message:
+          err.name +
+          " [Ln " +
+          err.location.start.line +
+          ", Col " +
+          err.location.start.column +
+          "]: " +
+          err.message,
+      });
       return;
     }
 
@@ -133,6 +141,7 @@ export default function Modal({
       setTables((prev) => [...prev, ...d.tables]);
       setRelationships((prev) => [...prev, ...d.relationships]);
     }
+    setModal(MODAL.NONE);
   };
 
   const createNewDiagram = (id) => {
@@ -167,7 +176,6 @@ export default function Modal({
         return;
       case MODAL.IMPORT_SRC:
         parseSQLAndLoadDiagram();
-        setModal(MODAL.NONE);
         return;
       case MODAL.OPEN:
         if (selectedDiagramId === 0) return;
@@ -207,6 +215,7 @@ export default function Modal({
           <ImportSource
             importData={importSource}
             setImportData={setImportSource}
+            error={error}
             setError={setError}
           />
         );