Add auto-update workflow

src/main/main.ts

@@ -21,16 +21,24 @@ import icon from '../renderer/assets/img/logo-guide-draft.png?asset'
 import splashHTML from './splash-screen.html?asset'
 import preloadUrl from './../preload/preload.js?asset'
 
+import devUpdateConfig from './dev-app-update.yml?asset'
+
+
+import { autoUpdater } from 'electron-updater';
+
+
 const runByTestSuite = !!process.env.VITEST
 
+// Configure AutoUpdater
+autoUpdater.autoDownload = false; // Disable auto download of updates
+autoUpdater.channel = "latest";
+
 // Enable remote debugging port for Vitest
 if (runByTestSuite) {
   app.commandLine.appendSwitch('remote-debugging-port', `${8315}`) // Mirrors the global electronDebugPort variable
   app.commandLine.appendSwitch('remote-allow-origins', '*') // Allow all remote origins
 }
 
-// autoUpdater.channel = "latest";
-
 /*************************************************************
  * Python Process
  *************************************************************/
@@ -215,8 +223,6 @@ const killAllPreviousProcesses = async () => {
   } else console.error('Cannot kill previous processes because fetch is not defined in this version of Node.js')
 };
 
-let updatechecked = false;
-
 let hasBeenOpened = false;
 
 function initialize() {
@@ -352,15 +358,16 @@ function initialize() {
         win.show();
         createWindow();
 
-        // autoUpdater.checkForUpdatesAndNotify();
-        updatechecked = true;
+        // Check for updates
+        autoUpdater.checkForUpdates();
 
         // Clear ready queue
         readyQueue.forEach(f => onWindowReady(f))
         readyQueue = []
 
       }, hasBeenOpened ? 100 : 1000);
     });
+
   }
 
 
@@ -515,3 +522,48 @@ ipcMain.on("get-server-file-path", (event) => {
 ipcMain.on("python.status", (event) => {
   if (globals.python.sent) ((globals.python.status) ? pythonIsOpen : pythonIsClosed)(true); // Force send
 });
+
+// Add auto-updater events
+
+ipcMain.on('download-update', () => {
+  autoUpdater.downloadUpdate()
+})
+
+autoUpdater.on('update-available', (info) => {
+  onWindowReady((win) => send.call(win, 'update-available', info))
+});
+
+autoUpdater.on('update-not-available', () => {
+  onWindowReady((win) => send.call(win, 'update-available', false))
+});
+
+autoUpdater.on('error', (err) => {
+  onWindowReady((win) => send.call(win, 'update-error', err))
+});
+
+autoUpdater.on('download-progress', (progressObj) => {
+  onWindowReady((win) => send.call(win, 'update-progress', {
+    n: progressObj.transferred,
+    total: progressObj.total,
+    rate: progressObj.bytesPerSecond,
+  }))
+});
+
+autoUpdater.on('update-downloaded', (info) => {
+
+  onWindowReady((win) => {
+    send.call(win, 'update-complete', info)
+
+    // Prompt user to install update
+    dialog
+      .showMessageBox(win, {
+        type: 'info',
+        buttons: ['Restart', 'Later'],
+        title: 'Update available',
+        message: 'A new version has been downloaded. Restart now to install the update?',
+      })
+      .then((result) => {
+        if (result.response === 0) autoUpdater.quitAndInstall();
+      });
+    })
+});

src/renderer/assets/css/custom.css

@@ -0,0 +1,51 @@
+/* Update Notification Box */
+#update-available:not(:empty) {
+    margin-top: 15px;
+    background-color: #ffe5d2;
+    color: black;
+    padding: 15px 10px;
+    border: 1px solid #f6c39c;
+    border-radius: 5px;
+}
+
+#update-available .update-container {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+#update-available .update-container::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    margin-left: 5px;
+    background-color: #d17128;
+    border-radius: 50%;
+}
+
+#update-available .header {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+#update-available h4 {
+    margin: 0;
+}
+
+#update-available span {
+    color: gray;
+    font-size: 80%;
+}
+
+#update-available .header svg {
+    height: 15px;
+    width: auto;
+    cursor: pointer;
+}
+
+#update-available .controls {
+    margin-left: auto;
+    display: flex;
+    gap: 10px;
+}

src/renderer/assets/css/nav.css

@@ -158,8 +158,10 @@ a[data-toggle="collapse"] {
 
 #main-nav .sidebar-body a {
     font-size: 14px;
-    display: block;
-    line-height: 45px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 15px 0px;
     padding-left: 20px;
     margin-bottom: 5px;
     text-align: left;
@@ -170,6 +172,19 @@ a[data-toggle="collapse"] {
     border-left: 4px solid transparent;
 }
 
+[data-update-available] [data-id="settings"] > div {
+    display: flex;
+    flex-direction: column;
+}
+
+[data-update-available] [data-id="settings"] > div::after {
+    content: "Update Available";
+    color: gray;
+    font-size: 70%;
+    font-weight: normal;
+    line-height: 1.5;
+}
+
 #main-nav .sidebar-body svg {
     fill: #000;
 }

src/renderer/src/electron/index.js

@@ -14,6 +14,32 @@ export let path = null;
 export let log = null;
 export let crypto = null;
 
+let updateAvailable = false;
+const updateAvailableCallbacks = [];
+export const onUpdateAvailable = (callback) => {
+    if (updateAvailable) callback(updateAvailable);
+    else updateAvailableCallbacks.push(callback);
+};
+
+let updateProgress = null;
+
+const updateProgressCallbacks = [];
+export const onUpdateProgress = (callback) => {
+    if (updateProgress) callback(updateProgress);
+    else updateProgressCallbacks.push(callback);
+};
+
+export const registerUpdateProgress = (info) => {
+    updateProgress = info;
+    updateProgressCallbacks.forEach((cb) => cb(info));
+};
+
+const registerUpdate = (info) => {
+    updateAvailable = info;
+    document.body.setAttribute("data-update-available", JSON.stringify(info));
+    updateAvailableCallbacks.forEach((cb) => cb(info));
+};
+
 // Used in tests
 try {
     crypto = require("crypto");
@@ -39,6 +65,15 @@ if (isElectron) {
             electron.ipcRenderer.on(`console.${method}`, (_, ...args) => console[method](`[main-process]:`, ...args))
         );
 
+        electron.ipcRenderer.on(`checking-for-update`, (_, ...args) => console.log(`[Update]:`, ...args));
+
+        electron.ipcRenderer.on(`update-available`, (_, info) => (info ? registerUpdate(info) : ""));
+
+        electron.ipcRenderer.on(`update-progress`, (_, info) => registerUpdateProgress(info));
+        electron.ipcRenderer.on(`update-complete`, (_, ...args) => console.log(`[Update]:`, ...args));
+
+        electron.ipcRenderer.on(`update-error`, (_, ...args) => console.log(`[Update]:`, ...args));
+
         port = electron.ipcRenderer.sendSync("get-port");
         console.log("User OS:", os.type(), os.platform(), "version:", os.release());
 

src/renderer/src/pages.js

@@ -45,7 +45,7 @@ const guidedIcon = `
     fill="white"
     class="bi bi-compass-fill"
     viewBox="0 0 16 16"
-    style="margin-right: 30px; margin-bottom: -5px"
+    style="margin-right: 30px;"
 >
 <path
     d="M8 16.016a7.5 7.5 0 0 0 1.962-14.74A1 1 0 0 0 9 0H7a1 1 0 0 0-.962 1.276A7.5 7.5 0 0 0 8 16.016zm6.5-7.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
@@ -60,7 +60,7 @@ const documentationIcon = `
     viewBox="0 0 448 512"
     height="20px"
     width="20px"
-    style="margin-right: 30px; margin-bottom: -5px"
+    style="margin-right: 30px;"
 >
 <path
   d="M448 336v-288C448 21.49 426.5 0 400 0H96C42.98 0 0 42.98 0 96v320c0 53.02 42.98 96 96 96h320c17.67 0 32-14.33 32-31.1c0-11.72-6.607-21.52-16-27.1v-81.36C441.8 362.8 448 350.2 448 336zM143.1 128h192C344.8 128 352 135.2 352 144C352 152.8 344.8 160 336 160H143.1C135.2 160 128 152.8 128 144C128 135.2 135.2 128 143.1 128zM143.1 192h192C344.8 192 352 199.2 352 208C352 216.8 344.8 224 336 224H143.1C135.2 224 128 216.8 128 208C128 199.2 135.2 192 143.1 192zM384 448H96c-17.67 0-32-14.33-32-32c0-17.67 14.33-32 32-32h288V448z"
@@ -73,7 +73,7 @@ xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 512 512"
 height="20px"
 width="20px"
-style="margin-right: 30px; margin-bottom: -5px"
+style="margin-right: 30px;"
 >                  <path
   d="M511.1 63.1v287.1c0 35.25-28.75 63.1-64 63.1h-144l-124.9 93.68c-7.875 5.75-19.12 .0497-19.12-9.7v-83.98h-96c-35.25 0-64-28.75-64-63.1V63.1c0-35.25 28.75-63.1 64-63.1h384C483.2 0 511.1 28.75 511.1 63.1z"
 ></path></svg>

src/renderer/src/stories/Dashboard.js

@@ -5,6 +5,8 @@ import { Main, checkIfPageIsSkipped } from "./Main.js";
 import { Sidebar } from "./sidebar.js";
 import { NavigationSidebar } from "./NavigationSidebar.js";
 
+import "../../assets/css/custom.css"; // Defined by Garrett late in GUIDE development to clearly separate global styles unrelated to SODA (May 20th, 2024)
+
 // Global styles to apply with the dashboard
 import "../../assets/css/variables.css";
 import "../../assets/css/nativize.css";

src/renderer/src/stories/ProgressBar.ts

@@ -5,13 +5,37 @@ import { LitElement, html, css, unsafeCSS } from 'lit';
 export type ProgressProps = {
     size?: string,
 
+    isBytes?: boolean,
+
     format?: {
         n: number,
         total: number,
         [key: string]: any,
-    },
+    }
 }
 
+export function humanReadableBytes(size: number | string) {
+
+    // Define the units
+    const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+    // Initialize the index to 0
+    let index = 0;
+
+    // Convert the size to a floating point number
+    size = parseFloat(size);
+
+    // Loop until the size is less than 1024 and increment the unit
+    while (size >= 1024 && index < units.length - 1) {
+        size /= 1024;
+        index += 1;
+    }
+
+    // Return the size formatted with 2 decimal places and the appropriate unit
+    return `${size.toFixed(2)} ${units[index]}`;
+}
+
+
 const animationDuration = 500 // ms
 
 export class ProgressBar extends LitElement {
@@ -88,12 +112,14 @@ export class ProgressBar extends LitElement {
 
     declare format: any
     declare size: string
+    declare isBytes: boolean
 
 
     constructor(props: ProgressProps = {}) {
         super();
         this.size = props.size ?? 'medium'
         this.format = props.format ?? {}
+        this.isBytes = props.isBytes ?? false
         if (!('n' in this.format)) this.format.n = 0
         if (!('total' in this.format)) this.format.total = 0
     }
@@ -103,6 +129,17 @@ export class ProgressBar extends LitElement {
         const percent = this.format.total ? 100 * (this.format.n / this.format.total) : 0;
         const remaining = this.format.rate && this.format.total ? (this.format.total - this.format.n) / this.format.rate : 0; // Seconds
 
+        const numerator = this.isBytes ? humanReadableBytes(this.format.n) : this.format.n
+        const denominator = this.isBytes ? humanReadableBytes(this.format.total) : this.format.total
+
+
+        const elapsed = this.format.elapsed
+
+        let subMessage = ''
+        if ('elapsed' in this.format && 'rate' in this.format) subMessage = `${elapsed?.toFixed(1)}s elapsed, ${remaining.toFixed(1)}s remaining`
+        else if ('elapsed' in this.format) subMessage = `${elapsed?.toFixed(1)}s elapsed`
+        else if ('rate' in this.format) subMessage = `${remaining.toFixed(1)}s remaining`
+
         return html`
         <div class="bar">
             ${this.format.prefix ? html`<div>
@@ -112,10 +149,10 @@ export class ProgressBar extends LitElement {
                 <div class="progress">
                     <div style="width: ${percent}%"></div>
                 </div>
-                <small>${this.format.n} / ${this.format.total} (${percent.toFixed(1)}%)</small>
+                <small>${numerator} / ${denominator} (${percent.toFixed(1)}%)</small>
             </div>
             <div>
-            ${'elapsed' in this.format && 'rate' in this.format ? html`<small>${this.format.elapsed?.toFixed(1)}s elapsed, ${remaining.toFixed(1)}s remaining</small>` : ''}
+            ${subMessage ? html`<small>${subMessage}</small>` : ''}
             </div>
         </div>
         `;