feat(import-db): add DBML syntax to import database dialog (#768)

* feat(editor): add import DBML syntax in import database dialog

* fix

* fix

* fix

* fix

* fix

---------

Co-authored-by: Guy Ben-Aharon <baguy3@gmail.com>

src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx

@@ -22,6 +22,11 @@ import { sqlImportToDiagram } from '@/lib/data/sql-import';
 import type { SelectedTable } from '@/lib/data/import-metadata/filter-metadata';
 import { filterMetadataByTables } from '@/lib/data/import-metadata/filter-metadata';
 import { MAX_TABLES_WITHOUT_SHOWING_FILTER } from '../common/select-tables/constants';
+import {
+    defaultDBMLDiagramName,
+    importDBMLToDiagram,
+} from '@/lib/dbml/dbml-import/dbml-import';
+import type { ImportMethod } from '@/lib/import-method/import-method';
 
 export interface CreateDiagramDialogProps extends BaseDialogProps {}
 
@@ -30,7 +35,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
 }) => {
     const { diagramId } = useChartDB();
     const { t } = useTranslation();
-    const [importMethod, setImportMethod] = useState<'query' | 'ddl'>('query');
+    const [importMethod, setImportMethod] = useState<ImportMethod>('query');
     const [databaseType, setDatabaseType] = useState<DatabaseType>(
         DatabaseType.GENERIC
     );
@@ -89,6 +94,14 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
                     sourceDatabaseType: databaseType,
                     targetDatabaseType: databaseType,
                 });
+            } else if (importMethod === 'dbml') {
+                diagram = await importDBMLToDiagram(scriptResult, {
+                    databaseType,
+                });
+                // Update the diagram name if it's the default
+                if (diagram.name === defaultDBMLDiagramName) {
+                    diagram.name = `Diagram ${diagramNumber}`;
+                }
             } else {
                 let metadata: DatabaseMetadata | undefined = databaseMetadata;
 
@@ -171,7 +184,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
         try {
             setIsParsingMetadata(true);
 
-            if (importMethod === 'ddl') {
+            if (importMethod === 'ddl' || importMethod === 'dbml') {
                 await importNewDiagram();
             } else {
                 // Parse metadata asynchronously to avoid blocking the UI