From 024a566c730570245931b94c07234cb7e1c368ac Mon Sep 17 00:00:00 2001
From: Kareem Mahlees <kareemmahlees@gmail.com>
Date: Fri, 22 Dec 2023 19:27:17 +0200
Subject: [PATCH] feat: mysql support

---
 docker-compose.yml                            | 11 +++
 src-tauri/src/connection.rs                   |  4 +-
 src-tauri/src/drivers/mod.rs                  |  1 +
 src-tauri/src/drivers/mysql/connection.rs     | 20 ++++
 src-tauri/src/drivers/mysql/decode.rs         | 97 +++++++++++++++++++
 src-tauri/src/drivers/mysql/mod.rs            |  4 +
 src-tauri/src/drivers/mysql/row.rs            | 89 +++++++++++++++++
 src-tauri/src/drivers/mysql/table.rs          | 75 ++++++++++++++
 src-tauri/src/drivers/sqlite/decode.rs        |  1 -
 src-tauri/src/main.rs                         |  4 +-
 src-tauri/src/row.rs                          | 18 ++--
 src-tauri/src/table.rs                        | 37 +------
 src/app/dashboard/actions.ts                  |  3 +-
 .../dashboard/details/_components/columns.tsx |  6 +-
 .../details/_components/data-table.tsx        |  3 +-
 .../details/_components/edit-row-sheet.tsx    |  2 +-
 src/app/dashboard/details/page.tsx            |  5 +-
 src/lib/utils.ts                              |  4 +-
 18 files changed, 329 insertions(+), 55 deletions(-)
 create mode 100644 docker-compose.yml
 create mode 100644 src-tauri/src/drivers/mysql/connection.rs
 create mode 100644 src-tauri/src/drivers/mysql/decode.rs
 create mode 100644 src-tauri/src/drivers/mysql/mod.rs
 create mode 100644 src-tauri/src/drivers/mysql/row.rs
 create mode 100644 src-tauri/src/drivers/mysql/table.rs

diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 00000000..30935d2e
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,11 @@
+version: "3"
+services:
+  tablex_mysql:
+    image: mysql
+    container_name: tablex_mysql
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: tablex
+      MYSQL_DATABASE: tablex
+    ports:
+      - 3306:3306
diff --git a/src-tauri/src/connection.rs b/src-tauri/src/connection.rs
index 008fd2b9..77801702 100644
--- a/src-tauri/src/connection.rs
+++ b/src-tauri/src/connection.rs
@@ -1,5 +1,5 @@
 use crate::{
-    drivers::{postgres, sqlite},
+    drivers::{mysql, postgres, sqlite},
     utils::{read_from_connections_file, write_into_connections_file, Drivers},
     DbInstance,
 };
@@ -48,7 +48,7 @@ pub async fn establish_connection(
         Drivers::PostgreSQL => {
             postgres::connection::establish_connection(&db, conn_string, driver).await
         }
-        Drivers::MySQL => unimplemented!(),
+        Drivers::MySQL => mysql::connection::establish_connection(&db, conn_string, driver).await,
     }
 }
 
diff --git a/src-tauri/src/drivers/mod.rs b/src-tauri/src/drivers/mod.rs
index bde05d13..be12554a 100644
--- a/src-tauri/src/drivers/mod.rs
+++ b/src-tauri/src/drivers/mod.rs
@@ -1,2 +1,3 @@
+pub mod mysql;
 pub mod postgres;
 pub mod sqlite;
diff --git a/src-tauri/src/drivers/mysql/connection.rs b/src-tauri/src/drivers/mysql/connection.rs
new file mode 100644
index 00000000..edd4d89a
--- /dev/null
+++ b/src-tauri/src/drivers/mysql/connection.rs
@@ -0,0 +1,20 @@
+use crate::{utils::Drivers, DbInstance};
+use sqlx::mysql::MySqlPoolOptions;
+use std::time::Duration;
+use tauri::State;
+
+pub async fn establish_connection(
+    db: &State<'_, DbInstance>,
+    conn_string: String,
+    driver: Drivers,
+) -> Result<(), String> {
+    let pool = MySqlPoolOptions::new()
+        .acquire_timeout(Duration::new(5, 0))
+        .test_before_acquire(true)
+        .connect(&conn_string)
+        .await
+        .map_err(|_| "Couldn't establish connection to db".to_string())?;
+    *db.mysql_pool.lock().await = Some(pool);
+    *db.driver.lock().await = Some(driver);
+    Ok(())
+}
diff --git a/src-tauri/src/drivers/mysql/decode.rs b/src-tauri/src/drivers/mysql/decode.rs
new file mode 100644
index 00000000..e3eca962
--- /dev/null
+++ b/src-tauri/src/drivers/mysql/decode.rs
@@ -0,0 +1,97 @@
+use serde_json::Value as JsonValue;
+use sqlx::{mysql::MySqlValueRef, TypeInfo, Value, ValueRef};
+use time::{Date, OffsetDateTime, PrimitiveDateTime, Time};
+
+// this code was taken from here
+// https://github.com/tauri-apps/tauri-plugin-sql/blob/v1/src/decode/mysql.rs
+pub fn to_json(v: MySqlValueRef) -> Result<JsonValue, String> {
+    if v.is_null() {
+        return Ok(JsonValue::Null);
+    }
+
+    let res = match v.type_info().name() {
+        "CHAR" | "VARCHAR" | "TINYTEXT" | "TEXT" | "MEDIUMTEXT" | "LONGTEXT" | "ENUM" => {
+            if let Ok(v) = ValueRef::to_owned(&v).try_decode() {
+                JsonValue::String(v)
+            } else {
+                JsonValue::Null
+            }
+        }
+        "FLOAT" => {
+            if let Ok(v) = ValueRef::to_owned(&v).try_decode::<f32>() {
+                JsonValue::from(v)
+            } else {
+                JsonValue::Null
+            }
+        }
+        "DOUBLE" => {
+            if let Ok(v) = ValueRef::to_owned(&v).try_decode::<f64>() {
+                JsonValue::from(v)
+            } else {
+                JsonValue::Null
+            }
+        }
+        "TINYINT" | "SMALLINT" | "INT" | "MEDIUMINT" | "BIGINT" => {
+            if let Ok(v) = ValueRef::to_owned(&v).try_decode::<i64>() {
+                JsonValue::Number(v.into())
+            } else {
+                JsonValue::Null
+            }
+        }
+        "TINYINT UNSIGNED" | "SMALLINT UNSIGNED" | "INT UNSIGNED" | "MEDIUMINT UNSIGNED"
+        | "BIGINT UNSIGNED" | "YEAR" => {
+            if let Ok(v) = ValueRef::to_owned(&v).try_decode::<u64>() {
+                JsonValue::Number(v.into())
+            } else {
+                JsonValue::Null
+            }
+        }
+        "BOOLEAN" => {
+            if let Ok(v) = ValueRef::to_owned(&v).try_decode() {
+                JsonValue::Bool(v)
+            } else {
+                JsonValue::Null
+            }
+        }
+        "DATE" => {
+            if let Ok(v) = ValueRef::to_owned(&v).try_decode::<Date>() {
+                JsonValue::String(v.to_string())
+            } else {
+                JsonValue::Null
+            }
+        }
+        "TIME" => {
+            if let Ok(v) = ValueRef::to_owned(&v).try_decode::<Time>() {
+                JsonValue::String(v.to_string())
+            } else {
+                JsonValue::Null
+            }
+        }
+        "DATETIME" => {
+            if let Ok(v) = ValueRef::to_owned(&v).try_decode::<PrimitiveDateTime>() {
+                JsonValue::String(v.to_string())
+            } else {
+                JsonValue::Null
+            }
+        }
+        "TIMESTAMP" => {
+            if let Ok(v) = ValueRef::to_owned(&v).try_decode::<OffsetDateTime>() {
+                JsonValue::String(v.to_string())
+            } else {
+                JsonValue::Null
+            }
+        }
+        "JSON" => ValueRef::to_owned(&v).try_decode().unwrap_or_default(),
+        "TINIYBLOB" | "MEDIUMBLOB" | "BLOB" | "LONGBLOB" => {
+            if let Ok(v) = ValueRef::to_owned(&v).try_decode::<Vec<u8>>() {
+                JsonValue::Array(v.into_iter().map(|n| JsonValue::Number(n.into())).collect())
+            } else {
+                JsonValue::Null
+            }
+        }
+        "NULL" => JsonValue::Null,
+        _ => return Err("Unsupported data type".to_string()),
+    };
+
+    Ok(res)
+}
diff --git a/src-tauri/src/drivers/mysql/mod.rs b/src-tauri/src/drivers/mysql/mod.rs
new file mode 100644
index 00000000..66a55b94
--- /dev/null
+++ b/src-tauri/src/drivers/mysql/mod.rs
@@ -0,0 +1,4 @@
+pub mod connection;
+pub mod decode;
+pub mod row;
+pub mod table;
diff --git a/src-tauri/src/drivers/mysql/row.rs b/src-tauri/src/drivers/mysql/row.rs
new file mode 100644
index 00000000..d771a10f
--- /dev/null
+++ b/src-tauri/src/drivers/mysql/row.rs
@@ -0,0 +1,89 @@
+use crate::{drivers::mysql::decode, DbInstance};
+use serde_json::value::Value as JsonValue;
+use sqlx::{Column, Row};
+use std::collections::HashMap;
+use tauri::State;
+
+pub async fn get_rows(
+    db: &State<'_, DbInstance>,
+    table_name: String,
+) -> Result<Vec<HashMap<String, JsonValue>>, String> {
+    let long_lived = db.mysql_pool.lock().await;
+    let conn = long_lived.as_ref().unwrap();
+
+    let rows = sqlx::query(format!("SELECT * FROM {};", table_name).as_str())
+        .fetch_all(conn)
+        .await
+        .unwrap();
+    let mut values = Vec::new();
+    for row in rows {
+        let mut value = HashMap::default();
+        for (i, column) in row.columns().iter().enumerate() {
+            let v = row.try_get_raw(i).unwrap();
+
+            let v = decode::to_json(v)?;
+
+            value.insert(column.name().to_string(), v);
+        }
+
+        values.push(value);
+    }
+    Ok(values)
+}
+
+pub async fn delete_rows(
+    db: &State<'_, DbInstance>,
+    pk_col_name: String,
+    table_name: String,
+    params: String,
+) -> Result<u64, String> {
+    let long_lived = db.mysql_pool.lock().await;
+    let conn = long_lived.as_ref().unwrap();
+
+    let query_str = format!("DELETE FROM {table_name} WHERE {pk_col_name} in ({params});");
+    let result = sqlx::query(&query_str)
+        .execute(conn)
+        .await
+        .map_err(|_| "Failed to delete rows".to_string())?;
+    Ok(result.rows_affected())
+}
+
+pub async fn create_row(
+    db: &State<'_, DbInstance>,
+    table_name: String,
+    columns: String,
+    values: String,
+) -> Result<u64, String> {
+    let long_lived = db.mysql_pool.lock().await;
+    let conn = long_lived.as_ref().unwrap();
+
+    let res =
+        sqlx::query(format!("INSERT INTO {table_name} ({columns}) VALUES({values})").as_str())
+            .execute(conn)
+            .await
+            .map_err(|err| err.to_string())?;
+    Ok(res.rows_affected())
+}
+
+pub async fn update_row(
+    db: &State<'_, DbInstance>,
+    table_name: String,
+    set_condition: String,
+    pk_col_name: String,
+    pk_col_value: JsonValue,
+) -> Result<u64, String> {
+    let long_lived = db.mysql_pool.lock().await;
+    let conn = long_lived.as_ref().unwrap();
+
+    let res = sqlx::query(
+        format!(
+            "UPDATE {table_name} SET {set_condition} WHERE {pk_col_name}={}",
+            pk_col_value
+        )
+        .as_str(),
+    )
+    .execute(conn)
+    .await
+    .map_err(|_| "Failed to update row".to_string())?;
+    Ok(res.rows_affected())
+}
diff --git a/src-tauri/src/drivers/mysql/table.rs b/src-tauri/src/drivers/mysql/table.rs
new file mode 100644
index 00000000..80e8287a
--- /dev/null
+++ b/src-tauri/src/drivers/mysql/table.rs
@@ -0,0 +1,75 @@
+use crate::{drivers::mysql::decode, utils, DbInstance};
+use serde_json::{
+    value::Value::{Bool as JsonBool, String as JsonString},
+    Value as JsonValue,
+};
+use sqlx::Row;
+use std::collections::HashMap;
+use tauri::State;
+
+pub async fn get_tables(db: &State<'_, DbInstance>) -> Result<Option<Vec<String>>, String> {
+    let long_lived = db.mysql_pool.lock().await;
+    let conn = long_lived.as_ref().unwrap();
+
+    let rows = sqlx::query("show tables;")
+        .fetch_all(conn)
+        .await
+        .map_err(|err| err.to_string())?;
+
+    if rows.is_empty() {
+        return Ok(None);
+    }
+
+    let mut result: Vec<String> = Default::default();
+    for (_, row) in rows.iter().enumerate() {
+        result.push(row.try_get::<String, usize>(0).unwrap())
+    }
+    Ok(Some(result))
+}
+
+pub async fn get_columns_definition(
+    db: &State<'_, DbInstance>,
+    table_name: String,
+) -> Result<HashMap<String, HashMap<String, JsonValue>>, String> {
+    let long_lived = db.mysql_pool.lock().await;
+    let conn = long_lived.as_ref().unwrap();
+    let rows = sqlx::query(
+        format!(
+            "SELECT cols.column_name,
+                    cols.data_type,
+                    if(cols.is_nullable = \"YES\", TRUE, FALSE) AS is_nullable,
+                    cols.column_default,
+                    if(kcu.constraint_name = 'PRIMARY', TRUE, FALSE) AS is_pk
+            FROM information_schema.columns AS cols
+            LEFT JOIN information_schema.key_column_usage AS kcu ON cols.column_name = kcu.column_name
+            WHERE cols.table_name = \"{table_name}\";"
+        )
+        .as_str(),
+    )
+    .fetch_all(conn)
+    .await
+    .map_err(|err| err.to_string())?;
+
+    let mut result = HashMap::<String, HashMap<String, JsonValue>>::new();
+
+    rows.iter().for_each(|row| {
+        let column_props = utils::create_column_definition_map(
+            JsonString(row.get(1)),
+            JsonBool(row.get::<i16, usize>(2) == 1),
+            decode::to_json(row.try_get_raw(3).unwrap()).unwrap(),
+            JsonBool(row.get::<i16, usize>(4) == 1),
+        );
+        result.insert(row.get(0), column_props);
+    });
+    Ok(result)
+}
+
+/*
+select cols.column_name,cols.data_type,
+    if(cols.is_nullable = "YES",true,false) as is_nullable ,
+    cols.column_default,
+    if(kcu.constraint_name = 'PRIMARY',true,false) as is_pk
+from information_schema.columns  as cols
+left join information_schema.key_column_usage as kcu on cols.column_name = kcu.column_name
+where cols.table_name = "test";
+ */
diff --git a/src-tauri/src/drivers/sqlite/decode.rs b/src-tauri/src/drivers/sqlite/decode.rs
index 370effaa..0c985c47 100644
--- a/src-tauri/src/drivers/sqlite/decode.rs
+++ b/src-tauri/src/drivers/sqlite/decode.rs
@@ -1,5 +1,4 @@
 use serde_json::Value as JsonValue;
-// use sqlx::types::chrono::{DateTime, NaiveDate, NaiveTime};
 use sqlx::{sqlite::SqliteValueRef, TypeInfo, Value, ValueRef};
 use time::{Date, PrimitiveDateTime, Time};
 
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index a3614f63..1503c9d7 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -22,7 +22,7 @@ use utils::Drivers;
 pub struct DbInstance {
     sqlite_pool: Mutex<Option<SqlitePool>>,
     postgres_pool: Mutex<Option<PgPool>>,
-    _mysql_pool: Mutex<Option<MySqlPool>>,
+    mysql_pool: Mutex<Option<MySqlPool>>,
     driver: Mutex<Option<Drivers>>,
 }
 
@@ -31,7 +31,7 @@ fn main() {
         .manage(DbInstance {
             sqlite_pool: Default::default(),
             postgres_pool: Default::default(),
-            _mysql_pool: Default::default(),
+            mysql_pool: Default::default(),
             driver: Default::default(),
         })
         .invoke_handler(tauri::generate_handler![
diff --git a/src-tauri/src/row.rs b/src-tauri/src/row.rs
index b08a3ca8..7ae496a2 100644
--- a/src-tauri/src/row.rs
+++ b/src-tauri/src/row.rs
@@ -1,6 +1,8 @@
-use crate::drivers::postgres;
-use crate::utils::Drivers;
-use crate::{drivers::sqlite, DbInstance};
+use crate::{
+    drivers::{mysql, postgres, sqlite},
+    utils::Drivers,
+    DbInstance,
+};
 use serde_json::Map;
 use serde_json::Value as JsonValue;
 use std::collections::HashMap;
@@ -18,7 +20,7 @@ pub async fn get_rows(
     match driver {
         Drivers::SQLite => sqlite::row::get_rows(&db, table_name).await,
         Drivers::PostgreSQL => postgres::row::get_rows(&db, table_name).await,
-        Drivers::MySQL => todo!(),
+        Drivers::MySQL => mysql::row::get_rows(&db, table_name).await,
     }
 }
 
@@ -48,7 +50,7 @@ pub async fn delete_rows(
         Drivers::PostgreSQL => {
             postgres::row::delete_rows(&db, pk_col_name, table_name, params).await
         }
-        Drivers::MySQL => todo!(),
+        Drivers::MySQL => mysql::row::delete_rows(&db, pk_col_name, table_name, params).await,
     }
 }
 
@@ -79,7 +81,7 @@ pub async fn create_row(
     match driver {
         Drivers::SQLite => sqlite::row::create_row(&db, table_name, columns, values).await,
         Drivers::PostgreSQL => postgres::row::create_row(&db, table_name, columns, values).await,
-        Drivers::MySQL => todo!(),
+        Drivers::MySQL => mysql::row::create_row(&db, table_name, columns, values).await,
     }
 }
 
@@ -111,6 +113,8 @@ pub async fn update_row(
             postgres::row::update_row(&db, table_name, set_condition, pk_col_name, pk_col_value)
                 .await
         }
-        Drivers::MySQL => todo!(),
+        Drivers::MySQL => {
+            mysql::row::update_row(&db, table_name, set_condition, pk_col_name, pk_col_value).await
+        }
     }
 }
diff --git a/src-tauri/src/table.rs b/src-tauri/src/table.rs
index 1809a8da..d40345f3 100644
--- a/src-tauri/src/table.rs
+++ b/src-tauri/src/table.rs
@@ -1,5 +1,5 @@
 use crate::{
-    drivers::{postgres, sqlite},
+    drivers::{mysql, postgres, sqlite},
     utils::Drivers,
     DbInstance,
 };
@@ -14,7 +14,7 @@ pub async fn get_tables(db: State<'_, DbInstance>) -> Result<Option<Vec<String>>
     match driver {
         Drivers::SQLite => sqlite::table::get_tables(&db).await,
         Drivers::PostgreSQL => postgres::table::get_tables(&db).await,
-        Drivers::MySQL => unimplemented!(),
+        Drivers::MySQL => mysql::table::get_tables(&db).await,
     }
 }
 
@@ -29,37 +29,6 @@ pub async fn get_columns_definition(
     match driver {
         Drivers::SQLite => sqlite::table::get_columns_definition(&db, table_name).await,
         Drivers::PostgreSQL => postgres::table::get_columns_definition(&db, table_name).await,
-        Drivers::MySQL => todo!(),
+        Drivers::MySQL => mysql::table::get_columns_definition(&db, table_name).await,
     }
-    // let rows = sqlx::query(&query_string)
-    //     .fetch_all(conn)
-    //     .await
-    //     .map_err(|err| err.to_string())?;
-
-    // let mut result = HashMap::<String, HashMap<String, JsonValue>>::new();
-
-    // rows.iter().for_each(|row| {
-    //     let mut column_props = HashMap::<String, JsonValue>::new();
-    //     column_props.insert("type".to_string(), JsonString(row.get(1)));
-    //     column_props.insert(
-    //         "isNullable".to_string(),
-    //         match driver {
-    //             Drivers::SQLite => JsonBool(!row.get::<i16, usize>(2) == 0),
-    //             _ => JsonBool(row.get::<bool, usize>(2)),
-    //         },
-    //     );
-    //     column_props.insert(
-    //         "defaultValue".to_string(),
-    //         utils::to_json(row.try_get_raw(3).unwrap()).unwrap(),
-    //     );
-    //     column_props.insert(
-    //         "pk".to_string(),
-    //         match driver {
-    //             Drivers::SQLite => JsonBool(row.get::<i16, usize>(4) == 0),
-    //             _ => JsonBool(row.get::<bool, usize>(4)),
-    //         },
-    //     );
-    //     result.insert(row.get(0), column_props);
-    // });
-    // Ok(result)
 }
diff --git a/src/app/dashboard/actions.ts b/src/app/dashboard/actions.ts
index c0530c23..f578c215 100644
--- a/src/app/dashboard/actions.ts
+++ b/src/app/dashboard/actions.ts
@@ -49,10 +49,11 @@ export const getZodSchemaFromCols = async (tableName: string) => {
   const cols = await getColsDefinitions(tableName)
   let schemaObject: z.ZodRawShape = {}
   Object.entries(cols).forEach(([colName, colProps]) => {
+    console.log(colProps)
     let validationRule: z.ZodTypeAny
 
     switch (true) {
-      case ["integer", "INT", "REAL"].includes(colProps.type):
+      case ["integer", "int", "INT", "REAL"].includes(colProps.type):
         validationRule = z.coerce.number({
           invalid_type_error: "Field must be number"
         })
diff --git a/src/app/dashboard/details/_components/columns.tsx b/src/app/dashboard/details/_components/columns.tsx
index 5e5b1621..9ad929f9 100644
--- a/src/app/dashboard/details/_components/columns.tsx
+++ b/src/app/dashboard/details/_components/columns.tsx
@@ -12,7 +12,7 @@ export const generateColumnsDefs = async (
   columnsDefinition = Object.entries(columns).map(([colName, colProps]) => {
     const columnDefinition: ColumnDef<any> = {
       accessorKey: colName,
-      //types for `meta` come from env.d.ts
+      // types for `meta` come from env.d.ts
       meta: {
         name: colName
       },
@@ -20,7 +20,9 @@ export const generateColumnsDefs = async (
         return <SortingButton column={column} title={colName} />
       }
     }
-    if (colProps.isPK) columnDefinition.id = "pk"
+    columnDefinition.id = colProps.isPK
+      ? "pk"
+      : (columnDefinition.accessorKey as string)
     return columnDefinition
   })
 
diff --git a/src/app/dashboard/details/_components/data-table.tsx b/src/app/dashboard/details/_components/data-table.tsx
index bfa12000..1963a3e3 100644
--- a/src/app/dashboard/details/_components/data-table.tsx
+++ b/src/app/dashboard/details/_components/data-table.tsx
@@ -33,6 +33,7 @@ import { unregister } from "@tauri-apps/api/globalShortcut"
 import { type as getOsType, type OsType } from "@tauri-apps/api/os"
 import { useSearchParams } from "next/navigation"
 import {
+  useEffect,
   useLayoutEffect,
   useRef,
   useState,
@@ -188,7 +189,7 @@ const TableContextMenuContent = ({
   contextMenuRow
 }: TableContextMenuContentProps) => {
   const [osType, setOsType] = useState<OsType>()
-  useLayoutEffect(() => {
+  useEffect(() => {
     getOsType().then((type) => setOsType(type))
   })
   return (
diff --git a/src/app/dashboard/details/_components/edit-row-sheet.tsx b/src/app/dashboard/details/_components/edit-row-sheet.tsx
index c57b4cd4..617b5bf1 100644
--- a/src/app/dashboard/details/_components/edit-row-sheet.tsx
+++ b/src/app/dashboard/details/_components/edit-row-sheet.tsx
@@ -69,7 +69,7 @@ const EditRowSheet = ({ setIsSheetOpen, row, table }: EditRowSheetProps) => {
                 defaultValue={cell.getValue()}
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{cell.column.id}</FormLabel>
+                    <FormLabel>{cell.column.columnDef.meta?.name}</FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
diff --git a/src/app/dashboard/details/page.tsx b/src/app/dashboard/details/page.tsx
index df228bc1..aa2c77df 100644
--- a/src/app/dashboard/details/page.tsx
+++ b/src/app/dashboard/details/page.tsx
@@ -36,7 +36,10 @@ const TableDataPage = () => {
   if (isColumnsLoading || isRowsLoading) return <LoadingSpinner />
 
   return (
-    <section className="flex flex-col overflow-auto w-full" ref={sectionRef}>
+    <section
+      className="flex flex-col overflow-auto w-full will-change-scroll"
+      ref={sectionRef}
+    >
       <h1 className="font-bold text-2xl p-4 w-full ">{tableName}</h1>
       <DataTable columns={columns!} data={rows!} />
     </section>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 0d7dc4ec..b0d99f50 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -31,10 +31,8 @@ export function constructConnectionString(params: ConnectionStringParams) {
       connString = `${params.driver}:${params.filePath}`
       break
     case Drivers.PostgreSQL:
-      connString = `${params.driver}://${params.username}:${params.password}@${params.host}:${params.port}/${params.db}`
-      break
     case Drivers.MySQL:
-      connString = `Server=${params.host};Port=${params.port};Database=${params.db};Uid=${params.username};Pwd=${params.password};`
+      connString = `${params.driver}://${params.username}:${params.password}@${params.host}:${params.port}/${params.db}`
       break
   }
   return connString