add ssl options

outerbase · Nov 27, 2024 · 8f2286c · 8f2286c
1 parent 9121774
commit 8f2286c
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 18 deletions.
diff --git a/electron/connection-pool.ts b/electron/connection-pool.ts
@@ -22,6 +22,7 @@ export class ConnectionPool {
           user: conn.config.username || "root",
           password: conn.config.password || "",
           database: conn.config.database || "",
+          ssl: conn.config.ssl ? { rejectUnauthorized: false } : undefined,
         });
         break;
       case "sqlite":
@@ -56,6 +57,11 @@ export class ConnectionPool {
           database: conn.config.database || "postgres",
           password: conn.config.password || "",
           port: Number(conn.config.port || "5432"),
+          ssl: conn.config.ssl
+            ? {
+                rejectUnauthorized: false,
+              }
+            : undefined,
         });
         break;
       default:

diff --git a/electron/drivers/mysql.ts b/electron/drivers/mysql.ts
@@ -1,5 +1,5 @@
 import BaseDriver, { ColumnType, Result, ResultHeader } from "./base";
-import { Pool, PoolConnection, createPool } from "mysql2/promise";
+import { Pool, PoolConnection, SslOptions, createPool } from "mysql2/promise";
 
 enum MySQLType {
   MYSQL_TYPE_DECIMAL,
@@ -114,6 +114,7 @@ export interface MySqlConnectionConfig {
   password: string;
   host: string;
   port: number;
+  ssl?: SslOptions;
 }
 
 export default class MySQLDriver implements BaseDriver {

diff --git a/electron/drivers/postgres.ts b/electron/drivers/postgres.ts
@@ -7,6 +7,7 @@ export default class PostgresDriver extends BaseDriver {
 
   constructor(config: ConnectionConfig) {
     super();
+    console.log("Connecting to Postgres", config);
     this.db = new pg.Pool(config);
   }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@electron/notarize": "^2.5.0",
     "@libsql/client": "^0.14.0",
     "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.2",

diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/src/database/editor.tsx b/src/database/editor.tsx
@@ -1,16 +1,18 @@
 import FileInput from "@/components/file-input";
 import InputGroup from "@/components/input-group";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { ConnectionStoreItem } from "@/lib/conn-manager-store";
+import { cn } from "@/lib/utils";
 import type { OpenDialogOptions } from "electron";
 import { produce } from "immer";
 
 interface ConnectionEditorTemplateItem {
   name: keyof ConnectionStoreItem["config"];
   label: string;
-  type: "text" | "password" | "file" | "textarea";
+  type: "text" | "password" | "file" | "textarea" | "checkbox";
   placeholder?: string;
   size?: string;
   required?: boolean;
@@ -62,11 +64,11 @@ export default function ConnectionEditor({
                     <Label>{item.label}</Label>
                     <FileInput
                       options={item.fileOption}
-                      value={value.config[item.name]}
+                      value={value.config[item.name] as string}
                       onChange={(filePath) => {
                         onChange(
                           produce<ConnectionStoreItem>(value, (draft) => {
-                            draft.config[item.name] = filePath;
+                            draft.config[item.name] = filePath as never;
                           }),
                         );
                       }}
@@ -80,17 +82,45 @@ export default function ConnectionEditor({
                     <Textarea
                       className="resize-none"
                       placeholder={item.placeholder}
-                      value={value.config[item.name]}
+                      value={value.config[item.name] as string}
                       onChange={(e) => {
                         onChange(
                           produce<ConnectionStoreItem>(value, (draft) => {
-                            draft.config[item.name] = e.target.value;
+                            draft.config[item.name] = e.target.value as never;
                           }),
                         );
                       }}
                     />
                   </InputGroup>
                 );
+              } else if (item.type === "checkbox") {
+                return (
+                  <InputGroup
+                    key={item.name}
+                    className={cn(
+                      item.size ?? "flex-1",
+                      "flex flex-row items-center gap-2",
+                    )}
+                  >
+                    <Checkbox
+                      id={"setting-" + item.name}
+                      checked={value.config[item.name] as boolean}
+                      onCheckedChange={(checked) => {
+                        onChange(
+                          produce<ConnectionStoreItem>(value, (draft) => {
+                            draft.config[item.name] = checked as never;
+                          }),
+                        );
+                      }}
+                    />
+                    <label
+                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      htmlFor={"setting-" + item.name}
+                    >
+                      {item.label}
+                    </label>
+                  </InputGroup>
+                );
               }
 
               return (
@@ -99,12 +129,12 @@ export default function ConnectionEditor({
                   <Input
                     spellCheck={false}
                     type={item.type}
-                    value={value.config[item.name]}
+                    value={value.config[item.name] as string}
                     placeholder={item.placeholder}
                     onChange={(e) => {
                       onChange(
                         produce<ConnectionStoreItem>(value, (draft) => {
-                          draft.config[item.name] = e.target.value;
+                          draft.config[item.name] = e.target.value as never;
                         }),
                       );
                     }}

diff --git a/src/database/index.tsx b/src/database/index.tsx
@@ -114,6 +114,7 @@ function ConnectionItem({
   setConnectionList: Dispatch<SetStateAction<ConnectionStoreItem[]>>;
   setDeletingConnectionId: Dispatch<SetStateAction<ConnectionStoreItem | null>>;
 }) {
+  const [isMenuOpen, setMenuOpen] = useState(false);
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({ id: item.id });
 
@@ -128,7 +129,18 @@ function ConnectionItem({
   };
 
   return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...(!isMenuOpen && listeners)}
+      onMouseDown={() => {
+        setSelectedConnection(item.id);
+      }}
+      onDoubleClick={() => {
+        window.outerbaseIpc.connect(item);
+      }}
+    >
       <motion.div
         initial={{ transform: "translateX(100%)" }}
         animate={{ transform: "translateX(0)" }}
@@ -139,12 +151,6 @@ function ConnectionItem({
           "flex cursor-pointer items-center gap-4 border-b p-4 hover:bg-gray-100",
           selectedConnection === item.id ? "bg-gray-100" : "bg-background",
         )}
-        onClick={() => {
-          setSelectedConnection(item.id);
-        }}
-        onDoubleClick={() => {
-          window.outerbaseIpc.connect(item);
-        }}
       >
         <IconComponent className="h-8 w-8" />
         <div className="flex flex-1 flex-col gap-1 text-sm">
@@ -154,7 +160,11 @@ function ConnectionItem({
           </div>
         </div>
         <div>
-          <DropdownMenu modal={false}>
+          <DropdownMenu
+            modal={false}
+            open={isMenuOpen}
+            onOpenChange={setMenuOpen}
+          >
             <DropdownMenuTrigger asChild>
               <Button variant={"ghost"} size={"icon"}>
                 <LucideMoreHorizontal className="h-4 w-4" />

diff --git a/src/lib/conn-manager-store.tsx b/src/lib/conn-manager-store.tsx
@@ -12,6 +12,7 @@ export interface ConnectionStoreItem {
   name: string;
   type: string;
   config: {
+    ssl?: boolean;
     host: string;
     port?: string;
     database?: string;
@@ -57,6 +58,16 @@ const genericTemplate: ConnectionEditorTemplate = [
       { name: "database", label: "Database", type: "text", required: true },
     ],
   },
+  {
+    columns: [
+      {
+        name: "ssl",
+        label: "SSL",
+        type: "checkbox",
+        required: false,
+      },
+    ],
+  },
 ];
 
 export const connectionTypeTemplates: Record<string, ConnectionTypeTemplate> = {