diff --git a/src/database/editor-route.tsx b/src/database/editor-route.tsx index dc4430d..4955136 100644 --- a/src/database/editor-route.tsx +++ b/src/database/editor-route.tsx @@ -1,6 +1,6 @@ import { Toolbar, ToolbarBackButton, ToolbarTitle } from "@/components/toolbar"; import ConnectionEditor from "./editor"; -import { useNavigate, useParams } from "react-router-dom"; +import { useLocation, useNavigate, useParams } from "react-router-dom"; import { ConnectionStoreItem, ConnectionStoreManager, @@ -14,8 +14,11 @@ export function ConnectionCreateUpdateRoute() { connectionId?: string; }>(); + const { state: locationState } = useLocation(); + const navigate = useNavigate(); const template = connectionTypeTemplates[type as string]; + const [value, setValue] = useState(() => { if (connectionId) { const connectionValue = ConnectionStoreManager.get(connectionId); @@ -26,7 +29,7 @@ export function ConnectionCreateUpdateRoute() { id: crypto.randomUUID(), name: "Unnamed Connection", type: type!, - config: structuredClone(template.defaultValue), + config: structuredClone({ ...template.defaultValue, ...locationState }), }; }); diff --git a/src/database/import-connection-string.tsx b/src/database/import-connection-string.tsx new file mode 100644 index 0000000..f311071 --- /dev/null +++ b/src/database/import-connection-string.tsx @@ -0,0 +1,85 @@ +import { Toolbar, ToolbarBackButton, ToolbarTitle } from "@/components/toolbar"; +import { Button } from "@/components/ui/button"; +import { Textarea } from "@/components/ui/textarea"; +import { useToast } from "@/hooks/use-toast"; +import { ConnectionStoreItemConfig } from "@/lib/conn-manager-store"; +import { useCallback, useState } from "react"; +import { useNavigate } from "react-router-dom"; + +export default function ImportConnectionStringRoute() { + const { toast } = useToast(); + const navigate = useNavigate(); + const [connectionString, setConnectionString] = useState(""); + + const onImportClick = useCallback(() => { + let url = new URL(connectionString); + const protocol = url.protocol.replace(":", ""); + const supportedProtocols = ["mysql", "postgresql"]; + + if (!supportedProtocols.includes(protocol)) { + toast({ + title: "Import Failed", + description: "Invalid connection string", + }); + + return; + } + + // Replace the connection string protocol with http for better parsing + url = new URL(connectionString.replace(`${protocol}:`, "http:")); + + if (protocol === "mysql") { + console.log("Importing MySQL connection string"); + navigate("/connection/create/mysql", { + replace: true, + state: { + host: url.hostname, + port: url.port ?? 3306, + username: url.username, + password: url.password, + database: url.pathname.replace("/", ""), + ssl: !!url.searchParams.get("ssl-mode"), + } as ConnectionStoreItemConfig, + }); + return; + } else if (protocol === "postgresql") { + console.log("Importing Postgres connection string"); + navigate("/connection/create/postgres", { + replace: true, + state: { + host: url.hostname, + port: url.port ?? 5432, + username: url.username, + password: url.password, + database: url.pathname.replace("/", ""), + ssl: !!url.searchParams.get("sslmode"), + } as ConnectionStoreItemConfig, + }); + } + }, [connectionString, navigate, toast]); + + return ( +
+ + + + + +
+