Auto-updates for macOS Binaries and change default browser to Edge on Windows env with proxy (#12)

* Auto-updates for macOS Binaries
* Change default browser to Edge on Windows env with proxy

Author: Georgetxm

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "purplehatsdesktop",
   "productName": "Purple HATS",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "private": true,
   "dependencies": {
     "axios": "^1.3.3",

package.json

@@ -5,6 +5,7 @@ const { globSync } = require("glob");
 const { get } = require("http");
 const { silentLogger } = require("./logs.js");
 const { execSync } = require("child_process");
+const { app } = require("electron");
 
 const appPath =
   os.platform() === "win32"
@@ -20,11 +21,30 @@ const releaseUrl =
   "https://api.github.com/repos/GovTechSG/purple-hats/releases/latest";
 
 const frontendReleaseUrl =
-  "https://github.com/GovTechSG/purple-hats-desktop/releases/latest/download/purple-hats-desktop-windows.zip";
+  os.platform() === "win32"
+    ? "https://github.com/GovTechSG/purple-hats-desktop/releases/latest/download/purple-hats-desktop-windows.zip"
+    : "https://github.com/GovTechSG/purple-hats-desktop/releases/latest/download/purple-hats-desktop-macos.zip";
 
 const backendPath = path.join(appPath, "Purple HATS Backend");
 const frontendPath = path.join(appPath, "Purple HATS Frontend");
 
+const getMacOSExecutablePath = () => {
+  let executablePath = require("path").dirname(
+    require("electron").app.getPath("exe")
+  );
+
+  // Retrieve the path to the executable up to the .app folder
+  if (executablePath !== null) {
+    executablePath = executablePath.substring(
+      0,
+      executablePath.lastIndexOf(".app") + 4
+    );
+  }
+
+  return executablePath;
+};
+const macOSExecutablePath = getMacOSExecutablePath();
+
 const resultsPath =
   os.platform() === "win32"
     ? path.join(process.env.APPDATA, "Purple HATS")
@@ -43,12 +63,12 @@ const getEngineVersion = () =>
 
 const getFrontendVersion = () => {
   // Directory is only valid for and used by Windows
-  if (os.platform() !== "win32") {
-    return;
+  if (os.platform() === "win32") {
+    return require(path.join(frontendPath, "resources", "app", "package.json"))
+      .version;
+  } else {
+    return appVersion;
   }
-
-  return require(path.join(frontendPath, "resources", "app", "package.json"))
-    .version;
 };
 
 const appVersion = require(path.join(
@@ -607,4 +627,5 @@ module.exports = {
   artifactInstallerPath,
   frontendReleaseUrl,
   installerExePath,
+  macOSExecutablePath,
 };

public/electron/constants.js

@@ -101,10 +101,25 @@ app.on("ready", async () => {
       });
     });
 
+    updateEvent.on("frontendDownloadCompleteMacOS", (userResponse) => {
+      launchWindow.webContents.send(
+        "launchStatus",
+        "frontendDownloadCompleteMacOS"
+      );
+      ipcMain.once("restartAppAfterMacOSFrontendUpdate", (_event, response) => {
+        userResponse(response);
+      });
+    });
+
     updateEvent.on("installerLaunched", () => {
       app.exit();
     });
 
+    updateEvent.on("restartTriggered", () => {
+      app.relaunch();
+      app.exit();
+    });
+
     updateEvent.on("frontendDownloadFailed", () => {
       launchWindow.webContents.send("launchStatus", "frontendDownloadFailed");
     });

public/electron/main.js

@@ -56,6 +56,9 @@ contextBridge.exposeInMainWorld("services", {
   launchInstaller: (response) => {
     ipcRenderer.send("launchInstaller", response);
   },
+  restartAppAfterMacOSFrontendUpdate: (response) => {
+    ipcRenderer.send("restartAppAfterMacOSFrontendUpdate", response);
+  },
   setUserData: (data) => {
     ipcRenderer.send("userDataReceived", data);
   },

public/electron/preload.js

@@ -6,24 +6,19 @@ const { exec, spawn } = require("child_process");
 const axios = require("axios");
 const {
   releaseUrl,
-  enginePath,
   getEngineVersion,
   getFrontendVersion,
   appPath,
   backendPath,
-  frontendPath,
   updateBackupsFolder,
   scanResultsPath,
   phZipPath,
-  createPlaywrightContext,
-  deleteClonedProfiles,
-  artifactInstallerPath,
   resultsPath,
   frontendReleaseUrl,
   installerExePath,
+  macOSExecutablePath,
 } = require("./constants");
 const { silentLogger } = require("./logs");
-const { readUserDataFromFile } = require("./userDataManager");
 
 let currentChildProcess;
 
@@ -148,7 +143,6 @@ const isLatestFrontendVersion = async () => {
 
     const latestVersion = data.tag_name;
     const frontendVersion = getFrontendVersion();
-
     console.log("Frontend version installed: ", frontendVersion);
     console.log("Latest frontend version found: ", latestVersion);
 
@@ -161,6 +155,10 @@ const isLatestFrontendVersion = async () => {
   }
 };
 
+/**
+ * Spawns a PowerShell process to download and unzip the frontend
+ * @returns {Promise<boolean>} true if the frontend was downloaded and unzipped successfully, false otherwise
+ */
 const downloadAndUnzipFrontendWindows = async () => {
   const shellScript = `
   $webClient = New-Object System.Net.WebClient
@@ -208,6 +206,32 @@ const downloadAndUnzipFrontendWindows = async () => {
   });
 };
 
+/**
+ * Spawns a Shell Command process to download and unzip the frontend
+ */
+const downloadAndUnzipFrontendMac = async () => {
+  const command = `
+  curl -L '${frontendReleaseUrl}' -o '${resultsPath}/purple-hats-desktop-mac.zip' &&
+  mv '${macOSExecutablePath}' '${path.join(
+    macOSExecutablePath,
+    ".."
+  )}/Purple Hats Old.app' &&
+  ditto -xk '${resultsPath}/purple-hats-desktop-mac.zip' '${path.join(
+    macOSExecutablePath,
+    ".."
+  )}' &&
+  rm '${resultsPath}/purple-hats-desktop-mac.zip' &&
+  rm -rf '${path.join(macOSExecutablePath, "..")}/Purple Hats Old.app' &&
+  find '${macOSExecutablePath}' -exec xattr -d com.apple.quarantine {} \\`;
+
+  await execCommand(command);
+};
+
+/**
+ * Spawn a PowerShell process to launch the InnoSetup installer executable, which contains the frontend and backend
+ * upon confirmation from the user, the installer will be launched & Electron will exit
+ * @returns {Promise<boolean>} true if the installer executable was launched successfully, false otherwise
+ */
 const spawnScriptToLaunchInstaller = () => {
   const shellScript = `Start-Process -FilePath "${installerExePath}"`;
 
@@ -345,6 +369,29 @@ const run = async (updaterEventEmitter) => {
       }
     }
   } else {
+    if (!(await isLatestFrontendVersion())) {
+      updaterEventEmitter.emit("checking");
+      const userResponse = new Promise((resolve) => {
+        updaterEventEmitter.emit("promptFrontendUpdate", resolve);
+      });
+
+      const proceedUpdate = await userResponse;
+
+      if (proceedUpdate) {
+        updaterEventEmitter.emit("updatingFrontend");
+
+        // Relaunch the app with new binaries if the frontend update is successful
+        // If unsuccessful, the app will be launched with existing frontend
+        try {
+          await downloadAndUnzipFrontendMac();
+          currentChildProcess = null;
+          updaterEventEmitter.emit("restartTriggered");
+        } catch (e) {
+          silentLogger.error(e.toString());
+        }
+      }
+    }
+
     if (isInterruptedUpdate) {
       updaterEventEmitter.emit("updatingBackend");
       if (!backendExists) {

public/electron/updateManager.js

@@ -1,7 +1,5 @@
 const fs = require("fs");
-const {
-    userDataFilePath 
-} = require("./constants"); 
+const { userDataFilePath, proxy } = require("./constants");
 const { ipcMain } = require("electron");
 
 const readUserDataFromFile = () => {
@@ -15,18 +13,18 @@ const writeUserDataToFile = (userData) => {
 }
 
 const init = async () => {
-    const userDataExists = fs.existsSync(userDataFilePath);
-    if (!userDataExists) {
-        const defaultSettings = {
-            name: "", 
-            email: "",
-            autoSubmit: true, 
-            event: false, 
-            browser: "chrome", 
-            autoUpdate: true
-        }; 
-        fs.writeFileSync(userDataFilePath, JSON.stringify(defaultSettings));
-    }
+  const userDataExists = fs.existsSync(userDataFilePath);
+  if (!userDataExists) {
+    const defaultSettings = {
+      name: "",
+      email: "",
+      autoSubmit: true,
+      event: false,
+      browser: proxy ? "edge" : "chrome",
+      autoUpdate: true,
+    };
+    fs.writeFileSync(userDataFilePath, JSON.stringify(defaultSettings));
+  }
 
     ipcMain.handle("getUserData", (_event) => { 
         const data = readUserDataFromFile();

public/electron/userDataManager.js

@@ -47,8 +47,8 @@ const LaunchWindow = () => {
       sub: "This may take a few minutes. Please do not close the application.",
     },
     updatingFrontend: {
-      main: "Downloading new installer",
-      sub: "This may take a few minutes. The application will close after and you will be guided through the reinstallation.",
+      main: "Downloading",
+      sub: "This may take a few minutes. Please do not close the application.",
     },
     offline: {
       main: "No internet connection",
@@ -70,6 +70,11 @@ const LaunchWindow = () => {
     // setPromptUpdate(false);
   };
 
+  const handlePromptRestartAppResponse = (response) => () => {
+    window.services.restartAppAfterMacOSFrontendUpdate(response);
+    // setPromptUpdate(false);
+  };
+
   if (promptUpdate) {
     return (
       <div id="launch-window">
@@ -95,7 +100,7 @@ const LaunchWindow = () => {
     return (
       <div id="launch-window">
         <div>
-          <h1>Installer has been downloaded</h1>
+          <h1>New installer has been downloaded</h1>
           <p>Would you like to run the installer now?</p>
           <Button
             type="secondary"
@@ -115,6 +120,30 @@ const LaunchWindow = () => {
     );
   }
 
+  if (launchStatus === "frontendDownloadCompleteMacOS") {
+    return (
+      <div id="launch-window">
+        <div>
+          <h1>New App has been downloaded</h1>
+          <p>Would you like to restart the application?</p>
+          <Button
+            type="secondary"
+            onClick={handlePromptRestartAppResponse(false)}
+          >
+            Later
+          </Button>
+          <Button
+            id="proceed-button"
+            type="primary"
+            onClick={handlePromptRestartAppResponse(true)}
+          >
+            Run
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
   const { main: displayedMessage, sub: displayedSub } = messages[launchStatus];
   return (
     <div id="launch-window">

src/LaunchWindow/index.jsx

@@ -54,7 +54,7 @@ const HomePage = ({ isProxy, appVersion, setCompletedScanId }) => {
   };
 
   const startScan = async (scanDetails) => {
-    scanDetails.browser = browser;
+    scanDetails.browser = isProxy ? "edge" : browser;
 
     if (scanDetails.scanUrl.length === 0) {
       setPrevUrlErrorMessage("URL cannot be empty.");
@@ -150,7 +150,7 @@ const HomePage = ({ isProxy, appVersion, setCompletedScanId }) => {
         />
         <h1 id="app-title">Accessibility Site Scanner</h1>
         <InitScanForm
-          isProxy = {isProxy}
+          isProxy={isProxy}
           startScan={startScan}
           prevUrlErrorMessage={prevUrlErrorMessage}
         />