add support to launch mssql instance

electron/ipc/docker.ts

@@ -57,7 +57,12 @@ export function bindDockerIpc(win: BrowserWindow) {
   ) {
     console.log("pulling", data);
     return await new Promise((resolve, reject) => {
-      docker.pull(`${data.type}:${data.version}`, {}, (err, stream) => {
+      let imageName = `${data.type}:${data.version}`;
+      if (data.type === "mssql") {
+        imageName = `mcr.microsoft.com/mssql/server:${data.version}`;
+      }
+
+      docker.pull(imageName, {}, (err, stream) => {
         if (err) reject(err);
 
         if (!stream) {
@@ -115,7 +120,6 @@ export function bindDockerIpc(win: BrowserWindow) {
       if (data.type === "mysql") {
         // Get the volume path
         const volume = getUserDataPath(`/vol/${data.id}`);
-        console.log("here", volume);
 
         await docker.createContainer({
           name: data.id,
@@ -133,7 +137,17 @@ export function bindDockerIpc(win: BrowserWindow) {
             Binds: [`${volume}:/var/lib/mysql`],
           },
         });
-      } else {
+      } else if (data.type === "mssql") {
+        await docker.createContainer({
+          name: data.id,
+          Image: `mcr.microsoft.com/mssql/server:${data.version}`,
+          Env: [`ACCEPT_EULA=Y`, `MSSQL_SA_PASSWORD=${data.config.password}`],
+          ExposedPorts: { "1433/tcp": {} },
+          HostConfig: {
+            PortBindings: { "1433/tcp": [{ HostPort: `${data.config.port}` }] },
+          },
+        });
+      } else if (data.type === "postgres") {
         const volume = getUserDataPath(`vol/${data.id}`);
 
         await docker.createContainer({

src/instance/index.tsx

@@ -30,6 +30,7 @@ import { PostgresInstance } from "./postgres-instance";
 import { Toolbar, ToolbarButton, ToolbarDropdown } from "@/components/toolbar";
 import { type PullImageProgress } from "electron/ipc/docker";
 import { parseSafeJson } from "@/lib/json-help";
+import { SqlServerInstance } from "./mssql-instance";
 
 function convertByteToMBString(byte: number) {
   return `${(byte / 1024 / 1024).toFixed(2)}mb`;
@@ -211,6 +212,10 @@ function InstanceListRoute() {
             <PostgreIcon className="h-4 w-4" />
             PostgreSQL
           </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => navigate("/instance/create/mssql")}>
+            <PostgreIcon className="h-4 w-4" />
+            Microsoft SQL
+          </DropdownMenuItem>
         </ToolbarDropdown>
 
         <ToolbarButton
@@ -427,6 +432,10 @@ export default function InstanceTab() {
               path="/instance/create/postgres"
               Component={withAnimation(PostgresInstance)}
             />
+            <Route
+              path="/instance/create/mssql"
+              Component={withAnimation(SqlServerInstance)}
+            />
             <Route
               path="/instance/create/:type"
               Component={withAnimation(InstanceCreateRoute)}

src/instance/mssql-instance.tsx

@@ -0,0 +1,121 @@
+import { Toolbar, ToolbarBackButton, ToolbarTitle } from "@/components/toolbar";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  DatabaseInstanceStoreItem,
+  DatabaseManagerStore,
+} from "@/lib/db-manager-store";
+import { MySQLIcon } from "@/lib/outerbase-icon";
+import { useNavigate } from "react-router-dom";
+import { useImmer } from "use-immer";
+
+export function SqlServerInstance() {
+  const [data, setData] = useImmer<DatabaseInstanceStoreItem>(() => ({
+    id: "mssql-" + DatabaseManagerStore.generateShortId(),
+    name: "MS SSQL Local",
+    type: "mssql",
+    version: "2017-CU11-ubuntu",
+    config: {
+      port: "1433",
+      username: "sa",
+      password: "yourStrong(!)Password",
+    },
+  }));
+  const navigate = useNavigate();
+
+  return (
+    <div>
+      <Toolbar>
+        <ToolbarBackButton />
+        <ToolbarTitle text="Create PostgresSQL Database" icon={MySQLIcon} />
+      </Toolbar>
+
+      <div className="flex flex-col gap-4 p-8">
+        <div className="flex gap-4">
+          <div className="flex flex-1 flex-col gap-2">
+            <Label>Name</Label>
+            <Input
+              value={data.name}
+              onChange={(e) =>
+                setData((d) => {
+                  d.name = e.target.value;
+                })
+              }
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <Label>Version</Label>
+            <Select
+              value={data.version}
+              onValueChange={(v) => {
+                setData((d) => {
+                  d.version = v;
+                });
+              }}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Version" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="2017-CU11-ubuntu">
+                  2017-CU11-ubuntu
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div className="flex gap-4">
+          <div className="flex flex-1 flex-col gap-2">
+            <Label>Username</Label>
+            <Input value={data.config.username} readOnly disabled />
+          </div>
+
+          <div className="flex flex-1 flex-col gap-2">
+            <Label>Password</Label>
+            <Input
+              value={data.config.password}
+              onChange={(e) =>
+                setData((d) => {
+                  d.config.password = e.target.value;
+                })
+              }
+            />
+          </div>
+
+          <div className="flex w-[150px] flex-col gap-2">
+            <Label>Port</Label>
+            <Input
+              value={data.config.port}
+              onChange={(e) =>
+                setData((d) => {
+                  d.config.port = e.target.value;
+                })
+              }
+            />
+          </div>
+        </div>
+
+        <div className="mt-8">
+          <Button
+            onClick={() => {
+              DatabaseManagerStore.add(data);
+              navigate(-1);
+            }}
+          >
+            Launch
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}