add old mysql support

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

@@ -93,7 +93,7 @@ export const CreateDiagramDialogImportDatabase: React.FC<
                                 variant="outline"
                                 className="h-6 gap-1 p-0 px-2 shadow-none"
                             >
-                                <Avatar className="size-4">
+                                <Avatar className="size-4 rounded-none">
                                     <AvatarImage
                                         src={
                                             databaseSecondaryLogoMap[

src/lib/data/import-metadata/scripts/mysql-script.ts

@@ -252,12 +252,12 @@ export const getMySQLQuery = (
                '","engine":"', IFNULL(tbls.ENGINE, ''),
                '","collation":"', IFNULL(tbls.TABLE_COLLATION, ''), '"}')
     ) FROM (
-        SELECT TABLE_SCHEMA,
-               TABLE_NAME,
-               TABLE_ROWS,
-               TABLE_TYPE,
-               ENGINE,
-               TABLE_COLLATION
+        SELECT \`TABLE_SCHEMA\`,
+               \`TABLE_NAME\`,
+               \`TABLE_ROWS\`,
+               \`TABLE_TYPE\`,
+               \`ENGINE\`,
+               \`TABLE_COLLATION\`
         FROM information_schema.tables tbls
         WHERE tbls.table_schema = DATABASE()
     ) AS tbls), ''),
@@ -267,8 +267,8 @@ export const getMySQLQuery = (
                '","view_name":"', vws.view_name,
                '","definition":"', definition, '"}')
     ) FROM (
-        SELECT TABLE_SCHEMA,
-               TABLE_NAME AS view_name,
+        SELECT \`TABLE_SCHEMA\`,
+               \`TABLE_NAME\` AS view_name,
                '' AS definition
         FROM information_schema.views vws
         WHERE vws.table_schema = DATABASE()
@@ -277,11 +277,14 @@ export const getMySQLQuery = (
     '", "version": "', VERSION(), '"}') AS CHAR) AS ''
 `;
 
-    // Define the base query
+    // To avoid the nondeterministic truncation and ensure that your query results are consistent.
+    const beforeQuery = `SET SESSION group_concat_max_len = 1000000; -- large enough value to handle your expected result size
+`;
+
     const query =
         databaseEdition === DatabaseEdition.MYSQL_5_7
-            ? newMySQLQuery
-            : oldMySQLQuery;
+            ? `${beforeQuery}${oldMySQLQuery}`
+            : newMySQLQuery;
 
     return query;
 };

src/lib/domain/database-edition.ts

@@ -1,26 +1,33 @@
 import { DatabaseType } from './database-type';
 import SupabaseImage from '@/assets/supabase.png';
 import TimescaleImage from '@/assets/timescale.png';
+import MySql5_7Image from '@/assets/mysql_5_7.png';
 
 export enum DatabaseEdition {
+    // PostgreSQL
     POSTGRESQL_SUPABASE = 'supabase',
     POSTGRESQL_TIMESCALE = 'timescale',
 
-    MYSQL_5_7 = 'mysql5.7',
+    // MySQL
+    MYSQL_5_7 = 'mysql_5_7',
 }
 
 export const databaseEditionToLabelMap: Record<DatabaseEdition, string> = {
+    // PostgreSQL
     [DatabaseEdition.POSTGRESQL_SUPABASE]: 'Supabase',
     [DatabaseEdition.POSTGRESQL_TIMESCALE]: 'Timescale',
 
-    [DatabaseEdition.MYSQL_5_7]: 'MySQL 5.7',
+    // MySQL
+    [DatabaseEdition.MYSQL_5_7]: 'V5.7',
 };
 
 export const databaseEditionToImageMap: Record<DatabaseEdition, string> = {
+    // PostgreSQL
     [DatabaseEdition.POSTGRESQL_SUPABASE]: SupabaseImage,
     [DatabaseEdition.POSTGRESQL_TIMESCALE]: TimescaleImage,
 
-    [DatabaseEdition.MYSQL_5_7]: TimescaleImage,
+    // MySQL
+    [DatabaseEdition.MYSQL_5_7]: MySql5_7Image,
 };
 
 export const databaseTypeToEditionMap: Record<DatabaseType, DatabaseEdition[]> =
@@ -29,7 +36,7 @@ export const databaseTypeToEditionMap: Record<DatabaseType, DatabaseEdition[]> =
             DatabaseEdition.POSTGRESQL_SUPABASE,
             DatabaseEdition.POSTGRESQL_TIMESCALE,
         ],
-        [DatabaseType.MYSQL]: [],
+        [DatabaseType.MYSQL]: [DatabaseEdition.MYSQL_5_7],
         [DatabaseType.SQLITE]: [],
         [DatabaseType.GENERIC]: [],
         [DatabaseType.SQL_SERVER]: [],