Merge branch 'fix-import-from-source'

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(
-        "Could not parse the sql file. Make sure there are no syntax errors.",
-      );
+      setError({
+        type: STATUS.ERROR,
+        message:
+          err.name +
+          " [Ln " +
+          err.location.start.line +
+          ", Col " +
+          err.location.start.column +
+          "]: " +
+          err.message,
+      });
       return;
     }
 
@@ -124,6 +132,7 @@ export default function Modal({
     if (importSource.overwrite) {
       setTables(d.tables);
       setRelationships(d.relationships);
+      setTransform((prev) => ({ ...prev, pan: { x: 0, y: 0 } }));
       setNotes([]);
       setAreas([]);
       setTypes([]);
@@ -133,6 +142,7 @@ export default function Modal({
       setTables((prev) => [...prev, ...d.tables]);
       setRelationships((prev) => [...prev, ...d.relationships]);
     }
+    setModal(MODAL.NONE);
   };
 
   const createNewDiagram = (id) => {
@@ -167,7 +177,6 @@ export default function Modal({
         return;
       case MODAL.IMPORT_SRC:
         parseSQLAndLoadDiagram();
-        setModal(MODAL.NONE);
         return;
       case MODAL.OPEN:
         if (selectedDiagramId === 0) return;
@@ -207,6 +216,7 @@ export default function Modal({
           <ImportSource
             importData={importSource}
             setImportData={setImportSource}
+            error={error}
             setError={setError}
           />
         );

src/components/EditorSidePanel/TablesTab/FieldDetails.jsx

@@ -80,7 +80,7 @@ export default function FieldDetails({ data, tid, index }) {
                   undo: editField,
                   redo: { values: data.values },
                   message: `Edit table field values to "${JSON.stringify(
-                    data.values
+                    data.values,
                   )}"`,
                 },
               ]);
@@ -123,9 +123,11 @@ export default function FieldDetails({ data, tid, index }) {
           <div className="font-semibold">Precision</div>
           <Input
             className="my-2 w-full"
-            placeholder="Set precision: (size, d)"
+            placeholder="Set precision: size, d"
             validateStatus={
-              /^\(\d+,\s*\d+\)$|^$/.test(data.size) ? "default" : "error"
+              !data.size || /^\d+,\s*\d+$|^$/.test(data.size)
+                ? "default"
+                : "error"
             }
             value={data.size}
             onChange={(value) => updateField(tid, index, { size: value })}