From ad31e18ea2708d82f91808566c926e96447f7d46 Mon Sep 17 00:00:00 2001
From: Tianzhou Chen <t@bytebase.com>
Date: Sun, 21 May 2023 15:22:28 +0800
Subject: [PATCH] fix: make port field editable

---
 src/components/CreateConnectionModal.tsx | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/CreateConnectionModal.tsx b/src/components/CreateConnectionModal.tsx
index aeea38d..3066a3e 100644
--- a/src/components/CreateConnectionModal.tsx
+++ b/src/components/CreateConnectionModal.tsx
@@ -37,33 +37,26 @@ const SSLTypeOptions = [
   },
 ];
 
-const defaultPort = {
-  [Engine.MySQL]: "3306",
-  [Engine.PostgreSQL]: "5432",
-  [Engine.MSSQL]: "1433",
-  [Engine.TiDBServerless]: "4000",
-};
-
 const engines = [
   {
     type: Engine.MySQL,
     name: "MySQL",
-    defualtPort: "3306",
+    defaultPort: "3306",
   },
   {
     type: Engine.PostgreSQL,
     name: "PostgreSQL",
-    defualtPort: "5432",
+    defaultPort: "5432",
   },
   {
     type: Engine.MSSQL,
     name: "SQL Server",
-    defualtPort: "1433",
+    defaultPort: "1433",
   },
   {
     type: Engine.TiDBServerless,
     name: "TiDB Serverless",
-    defualtPort: "4000",
+    defaultPort: "4000",
   },
 ];
 
@@ -72,7 +65,7 @@ const defaultConnection: Connection = {
   title: "",
   engineType: Engine.MySQL,
   host: "",
-  port: defaultPort[Engine.MySQL],
+  port: "3306",
   username: "",
   password: "",
 };
@@ -126,7 +119,6 @@ const CreateConnectionModal = (props: Props) => {
     setConnection({
       ...connection,
       ...state,
-      port: defaultPort[state.engineType || Engine.MySQL],
     });
   };
 
@@ -249,7 +241,7 @@ const CreateConnectionModal = (props: Props) => {
                   <Radio
                     value={engine.type}
                     checked={connection.engineType === engine.type}
-                    onChange={(value) => setPartialConnection({ engineType: value as Engine })}
+                    onChange={(value) => setPartialConnection({ engineType: value as Engine, port: engine.defaultPort as string })}
                   />
                   <EngineIcon className="h-8 w-8 rounded-full" engine={engine.type} />
                   <label htmlFor={engine.type} className="ml-3 block text-sm font-medium leading-6 text-gray-900">