add electron updater

electron/main.ts

@@ -10,12 +10,25 @@ import { fileURLToPath } from "node:url";
 import path from "node:path";
 import { ConnectionPool } from "./connection-pool";
 import { DockerHelper } from "./docker-helper";
+import electronUpdater, { type AppUpdater } from "electron-updater";
+import log from "electron-log";
 import { type DatabaseInstanceStoreItem } from "@/lib/db-manager-store";
 import { type ConnectionStoreItem } from "@/lib/conn-manager-store";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 // const require = createRequire(import.meta.url);
 
+export function getAutoUpdater(): AppUpdater {
+  // Using destructuring to access autoUpdater due to the CommonJS module of 'electron-updater'.
+  // It is a workaround for ESM compatibility issues, see https://github.com/electron-userland/electron-builder/issues/7976.
+  const { autoUpdater } = electronUpdater;
+  return autoUpdater;
+}
+
+const autoUpdater = getAutoUpdater();
+// log.transports.file.level = "info";
+autoUpdater.logger = log;
+
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 // The built directory structure
@@ -111,10 +124,42 @@ function createWindow() {
   });
 
   win.webContents.on("will-redirect", (event, url) => {
-    console.log("trying to redirect", url);
+    log.info("trying to redirect", url);
     event.preventDefault();
   });
 
+  autoUpdater.checkForUpdatesAndNotify();
+
+  autoUpdater.on("checking-for-update", () => {
+    win?.webContents.send("checking-for-update");
+    log.info("checking-for-update");
+  });
+
+  autoUpdater.on("update-available", (info) => {
+    win?.webContents.send("update-available", info);
+    log.info("update-available", info);
+  });
+
+  autoUpdater.on("update-not-available", (info) => {
+    win?.webContents.send("update-not-available", info);
+    log.info("update-not-available", info);
+  });
+
+  autoUpdater.on("error", (info) => {
+    win?.webContents.send("update-error", info);
+    log.info("error", info);
+  });
+
+  autoUpdater.on("download-progress", (progress) => {
+    win?.webContents.send("update-download-progress", progress);
+    log.info("download-progress", progress);
+  });
+
+  autoUpdater.on("update-downloaded", (info) => {
+    win?.webContents.send("update-downloaded", info);
+    log.info("update-downloaded", info);
+  });
+
   if (VITE_DEV_SERVER_URL) {
     win.loadURL(VITE_DEV_SERVER_URL);
   } else {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "outerbase-studio-desktop",
   "private": true,
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "author": "Outerbase",
   "description": "Outerbase Studio",
@@ -31,6 +31,8 @@
     "docker-cli-js": "^2.10.0",
     "dockerode": "^4.0.2",
     "dotenv": "^16.4.5",
+    "electron-log": "^5.2.3",
+    "electron-updater": "^6.3.9",
     "framer-motion": "^11.11.11",
     "immer": "^10.1.1",
     "lucide-react": "^0.456.0",

src/App.tsx

@@ -3,6 +3,9 @@ import { Tab } from "./components/tabs";
 import InstanceTab from "./instance";
 import DatabaseTab from "./database";
 import { Toaster } from "./components/ui/toaster";
+import UpdateBar from "./components/update-bar";
+
+import pkg from "./../package.json";
 
 function App() {
   const [selected, setSelected] = useState("connection");
@@ -17,7 +20,7 @@ function App() {
   return (
     <>
       <div
-        className="h-screen w-screen"
+        className="flex h-screen w-screen flex-col overflow-hidden"
         onDragOver={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -36,7 +39,14 @@ function App() {
           e.preventDefault();
         }}
       >
-        <Tab selected={selected} onChange={setSelected} tabs={tabs} />
+        <div className="flex-1 overflow-hidden">
+          <Tab selected={selected} onChange={setSelected} tabs={tabs} />
+        </div>
+        <div className="flex items-center bg-gray-600 px-2 py-1 font-mono text-sm text-white">
+          <div>Outerbase Studio v{pkg.version}</div>
+          <div className="flex-1"></div>
+          <UpdateBar />
+        </div>
       </div>
       <Toaster />
     </>

src/components/tabs.tsx

@@ -22,7 +22,7 @@ export function Tab({ tabs, selected, onChange }: TabProps) {
     "p-2 border border-b-background bg-background px-4 font-semibold flex items-center cursor-pointer";
 
   return (
-    <div className="flex h-screen w-screen flex-col overflow-hidden">
+    <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="flex bg-secondary pt-1">
         <div className="w-2 border-b"></div>
         {tabs.map((tab) => (

src/components/update-bar.tsx

@@ -0,0 +1,91 @@
+import { type ProgressInfo } from "electron-updater";
+import { LucideLoader } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export default function UpdateBar() {
+  const [checkingUpdate, setCheckingUpdate] = useState(true);
+  const [isLatest, setLatest] = useState(false);
+  const [isComplete, setComplete] = useState(false);
+  const [progress, setProgress] = useState<ProgressInfo>();
+
+  // Update is not avaliable
+  useEffect(() => {
+    const handler = () => {
+      setCheckingUpdate(false);
+      setLatest(true);
+    };
+
+    window.outerbaseIpc.on("update-not-available", handler);
+    return () => {
+      window.outerbaseIpc.off("update-not-available", handler);
+    };
+  }, []);
+
+  // Progress bar
+  useEffect(() => {
+    const handler = (_: unknown, info: ProgressInfo) => {
+      setCheckingUpdate(false);
+      setProgress(info);
+    };
+
+    window.outerbaseIpc.on("update-download-progress", handler);
+
+    return () => {
+      window.outerbaseIpc.off("update-download-progress", handler);
+    };
+  }, []);
+
+  // Completed event
+  useEffect(() => {
+    const handler = () => {
+      setComplete(true);
+      setCheckingUpdate(false);
+    };
+
+    window.outerbaseIpc.on("update-downloaded", handler);
+
+    return () => {
+      window.outerbaseIpc.off("update-downloaded", handler);
+    };
+  }, []);
+
+  if (checkingUpdate) {
+    return (
+      <div className="flex items-center justify-end pr-2">
+        <LucideLoader
+          className="mr-2 inline-block h-4 w-4 animate-spin"
+          size={16}
+        />
+        Checking for update
+      </div>
+    );
+  }
+
+  if (isComplete) {
+    return (
+      <div className="flex items-center justify-end pr-2">
+        Update downloaded. Restart to apply changes.
+      </div>
+    );
+  }
+
+  if (isLatest) {
+    return (
+      <div className="flex items-center justify-end pr-2">Latest version</div>
+    );
+  }
+
+  if (progress) {
+    return (
+      <div className="flex items-center justify-end pr-2">
+        <LucideLoader
+          className="mr-2 inline-block h-4 w-4 animate-spin"
+          size={16}
+        />
+        Downloading update {progress.percent.toFixed(2)}%
+      </div>
+    );
+  }
+
+  return <div className="flex items-center justify-end pr-2"></div>;
+}