Merge pull request #513 from dolthub/taylor/merge-fix

web: Fix nextron build, some conflicts improvements

Author: tbantle22

web/eslint.config.js renamed to web/eslint.config.mjs

@@ -22,6 +22,12 @@ export default [
       "build/**",
       "node_modules/**",
       "*.config.js",
+      "*.config.mjs",
+      "renderer/*.config.js",
+      "renderer/*.config.mjs",
+      "main/preload.d.ts",
+      ".next/**",
+      "build/**",
     ],
   },
   {
@@ -96,7 +102,7 @@ export default [
     rules: {
       // ESLint base rules
       ...js.configs.recommended.rules,
-      
+
       // TypeScript rules
       "@typescript-eslint/array-type": ["error", { default: "array-simple" }],
       "@typescript-eslint/await-thenable": "error",
@@ -218,4 +224,4 @@ export default [
     },
   },
   prettierConfig,
-];
+];

web/jest.setup.ts

@@ -1,6 +1,6 @@
 import "@testing-library/jest-dom";
 import { setConfig } from "next/config";
-import config from "./renderer/next.config.js";
+import config from "./renderer/next.config.mjs";
 
 // Make sure you can use "publicRuntimeConfig" within tests.
 setConfig({

web/main/background.ts

@@ -1,27 +1,27 @@
-import path from "path";
+import { ChildProcess } from "child_process";
 import {
   app,
   BrowserWindow,
+  crashReporter,
   ipcMain,
+  IpcMainEvent,
   Menu,
   shell,
+  systemPreferences,
   utilityProcess,
   UtilityProcess,
-  IpcMainEvent,
-  systemPreferences,
-  crashReporter,
 } from "electron";
 import serve from "electron-serve";
-import { initMenu } from "./helpers/menu";
-import { startServer } from "./doltServer";
-import { ChildProcess } from "child_process";
+import path from "path";
+import { cloneAndStartDatabase } from "./doltClone";
 import { doltLogin } from "./doltLogin";
+import { startServer } from "./doltServer";
+import { createWindow } from "./helpers/createWindow";
+import { initMenu } from "./helpers/menu";
 import {
   getErrorMessage,
   removeDoltServerFolder,
 } from "./helpers/removeDoltServerFolder";
-import { cloneAndStartDatabase } from "./doltClone";
-import { createWindow } from "./helpers/createWindow";
 
 const isProd = process.env.NODE_ENV === "production";
 const userDataPath = app.getPath("userData");
@@ -30,6 +30,8 @@ const schemaPath = isProd
   : "../graphql-server/schema.gql";
 process.env.SCHEMA_PATH = schemaPath;
 process.env.NEXT_PUBLIC_FOR_ELECTRON = "true";
+process.env.NEXT_PUBLIC_FOR_MAC_NAV =
+  process.platform === "darwin" ? "true" : "false";
 process.env.NEXT_PUBLIC_USER_DATA_PATH = userDataPath;
 
 const HEADER_HEIGHT = 48;
@@ -66,7 +68,7 @@ function isExternalUrl(url: string) {
   return !url.includes("localhost:") && !url.includes("app://");
 }
 
-function createGraphqlSeverProcess() {
+async function createGraphqlSeverProcess() {
   const serverPath =
     process.env.NODE_ENV === "production"
       ? path.join(
@@ -79,17 +81,17 @@ function createGraphqlSeverProcess() {
       : path.join("../graphql-server", "dist", "main.js");
   graphqlServerProcess = utilityProcess.fork(serverPath, [], { stdio: "pipe" });
 
-  graphqlServerProcess?.stdout?.on("data", (chunk: Buffer) => {
+  graphqlServerProcess.stdout?.on("data", async (chunk: Buffer) => {
     console.log("server data", chunk.toString("utf8"));
     // Send the Server console.log messages to the main browser window
-    mainWindow?.webContents.executeJavaScript(`
+    await mainWindow.webContents.executeJavaScript(`
         console.info('Server Log:', ${JSON.stringify(chunk.toString("utf8"))})`);
   });
 
-  graphqlServerProcess?.stderr?.on("data", (chunk: Buffer) => {
+  graphqlServerProcess.stderr?.on("data", async (chunk: Buffer) => {
     console.error("server error", chunk.toString("utf8"));
     // Send the Server console.error messages out to the main browser window
-    mainWindow?.webContents.executeJavaScript(`
+    await mainWindow.webContents.executeJavaScript(`
         console.error('Server Log:', ${JSON.stringify(chunk.toString("utf8"))})`);
   });
 }
@@ -168,7 +170,7 @@ app.on("ready", async () => {
 
   Menu.setApplicationMenu(initMenu(mainWindow, isProd));
   setupTitleBarClickMac();
-  createGraphqlSeverProcess();
+  await createGraphqlSeverProcess();
 
   await waitForGraphQLServer("http://localhost:9002/graphql");
 
@@ -183,7 +185,9 @@ app.on("ready", async () => {
   // always deny, optionally redirect to browser
   mainWindow.webContents.setWindowOpenHandler(({ url }) => {
     if (isExternalUrl(url)) {
-      shell.openExternal(url);
+      shell
+        .openExternal(url)
+        .catch(err => console.error("Failed to open URL:", err));
     }
 
     return { action: "deny" };
@@ -192,9 +196,9 @@ app.on("ready", async () => {
 
   // hit when clicking <a href/> with no target
   // optionally redirect to browser
-  mainWindow.webContents.on("will-navigate", (event, url) => {
+  mainWindow.webContents.on("will-navigate", async (event, url) => {
     if (isExternalUrl(url)) {
-      shell.openExternal(url);
+      await shell.openExternal(url);
       event.preventDefault();
     }
   });

web/main/doltClone.ts

@@ -1,12 +1,12 @@
-import path from "path";
-import { BrowserWindow } from "electron";
 import { ChildProcess, execFile } from "child_process";
+import { BrowserWindow } from "electron";
+import path from "path";
+import { startServerProcess } from "./doltServer";
 import {
   createFolder,
   getDatabasesPath,
   getDoltPaths,
 } from "./helpers/filePath";
-import { startServerProcess } from "./doltServer";
 
 export async function cloneAndStartDatabase(
   owner: string,
@@ -41,7 +41,7 @@ export async function cloneAndStartDatabase(
   }
 }
 
-function cloneDatabase(
+async function cloneDatabase(
   owner: string,
   remoteDatabase: string,
   newDbName: string,

web/main/doltLogin.ts

@@ -20,12 +20,11 @@ export async function doltLogin(
 
     let timedOut = false;
     const timeoutDuration = 1 * 60 * 1000; // 1 minutes
+    let child: ChildProcess | undefined;
 
     let timeoutId = setTimeout(() => {
       timedOut = true;
-      if (child) {
-        child.kill(); // Terminate the process
-      }
+      child?.kill(); // Terminate the process
       activeProcesses.delete(requestId);
       mainWindow.webContents.send(
         "server-error",
@@ -34,7 +33,7 @@ export async function doltLogin(
       reject(new Error("Login timed out"));
     }, timeoutDuration);
 
-    const child = execFile(
+    child = execFile(
       doltPath,
       ["login"],
       { cwd: dbFolderPath, maxBuffer: 1024 * 1024 * 10 },

web/main/doltServer.ts

@@ -1,7 +1,7 @@
-import path from "path";
-import { BrowserWindow } from "electron";
 import { ChildProcess, execFile, spawn } from "child_process";
+import { BrowserWindow } from "electron";
 import fs from "fs";
+import path from "path";
 import {
   createFolder,
   getDatabasesPath,
@@ -43,7 +43,7 @@ export async function startServer(
 }
 
 //initialize the Dolt repository by running `dolt init` in dbFolderPath
-function initializeDoltRepository(
+async function initializeDoltRepository(
   doltPath: string,
   dbFolderPath: string,
   mainWindow: BrowserWindow,
@@ -56,7 +56,7 @@ function initializeDoltRepository(
       { cwd: dbFolderPath },
       async (error, stdout, stderr) => {
         if (error) {
-          const initErr = `Error initializing Dolt: ${error}`;
+          const initErr = `Error initializing Dolt: ${error.message}`;
           mainWindow.webContents.send("server-error", initErr);
 
           reject(new Error(initErr));
@@ -89,7 +89,7 @@ function initializeDoltRepository(
   });
 }
 
-export function startServerProcess(
+export async function startServerProcess(
   doltPath: string,
   dbFolderPath: string,
   port: string,
@@ -103,7 +103,9 @@ export function startServerProcess(
       fs.mkdirSync(path.dirname(socketPath), { recursive: true });
       try {
         fs.unlinkSync(socketPath);
-      } catch {}
+      } catch {
+        // Ignore error if the socket does not exist
+      }
       argsArray = ["sql-server", "-P", port, "--socket", socketPath];
     }
 
@@ -119,7 +121,7 @@ export function startServerProcess(
       reject(err);
     });
 
-    doltServerProcess.stdout?.on("data", async data => {
+    doltServerProcess.stdout.on("data", async data => {
       const logMsg = data.toString();
       console.log("dolt server process log", logMsg);
       if (
@@ -139,7 +141,7 @@ export function startServerProcess(
       }
     });
 
-    doltServerProcess.stderr?.on("data", async data => {
+    doltServerProcess.stderr.on("data", async data => {
       const errorMsg = data.toString();
       console.log("dolt server process stderr", errorMsg);
       // Check if the message is a warning or an error

web/main/helpers/createWindow.ts

@@ -1,8 +1,8 @@
 import {
-  screen,
   BrowserWindow,
   BrowserWindowConstructorOptions,
   Rectangle,
+  screen,
 } from "electron";
 import Store from "electron-store";
 
@@ -20,6 +20,7 @@ export const createWindow = (
     y: options.y ?? 0,
   };
   let state = {};
+  let win: BrowserWindow;
 
   const restore = () => store.get(key, defaultSize);
 
@@ -34,14 +35,11 @@ export const createWindow = (
     };
   };
 
-  const windowWithinBounds = (windowState: Rectangle, bounds: Rectangle) => {
-    return (
-      windowState.x >= bounds.x &&
-      windowState.y >= bounds.y &&
-      windowState.x + windowState.width <= bounds.x + bounds.width &&
-      windowState.y + windowState.height <= bounds.y + bounds.height
-    );
-  };
+  const windowWithinBounds = (windowState: Rectangle, bounds: Rectangle) =>
+    windowState.x >= bounds.x &&
+    windowState.y >= bounds.y &&
+    windowState.x + windowState.width <= bounds.x + bounds.width &&
+    windowState.y + windowState.height <= bounds.y + bounds.height;
 
   const resetToDefaults = () => {
     const bounds = screen.getPrimaryDisplay().bounds;
@@ -52,9 +50,9 @@ export const createWindow = (
   };
 
   const ensureVisibleOnSomeDisplay = (windowState: Rectangle) => {
-    const visible = screen.getAllDisplays().some(display => {
-      return windowWithinBounds(windowState, display.bounds);
-    });
+    const visible = screen
+      .getAllDisplays()
+      .some(display => windowWithinBounds(windowState, display.bounds));
     if (!visible) {
       // Window is partially or fully not visible now.
       // Reset it to safe defaults.
@@ -71,7 +69,7 @@ export const createWindow = (
   };
 
   state = ensureVisibleOnSomeDisplay(restore());
-  const win = new BrowserWindow({
+  win = new BrowserWindow({
     ...state,
     ...options,
     webPreferences: {

web/main/helpers/menu.ts

@@ -1,10 +1,10 @@
 import { workbenchGithubRepo } from "@lib/constants";
 import {
-  shell,
   BrowserWindow,
   Menu,
   MenuItemConstructorOptions,
   app,
+  shell,
 } from "electron";
 
 export function initMenu(
@@ -173,14 +173,14 @@ export function initMenu(
       submenu: [
         {
           label: "Documentation",
-          click() {
-            shell.openExternal("https://docs.dolthub.com/");
+          async click() {
+            await shell.openExternal("https://docs.dolthub.com/");
           },
         },
         {
           label: "View on GitHub",
-          click() {
-            shell.openExternal(workbenchGithubRepo);
+          async click() {
+            await shell.openExternal(workbenchGithubRepo);
           },
         },
       ],

web/main/preload.ts

@@ -1,7 +1,7 @@
 import { contextBridge, ipcRenderer } from "electron";
 
 const handler = {
-  invoke(channel: string, ...args: unknown[]) {
+  async invoke(channel: string, ...args: unknown[]) {
     return ipcRenderer.invoke(channel, ...args);
   },
   onMenuClicked: (callback: (value: string) => {}) =>
@@ -35,7 +35,7 @@ const handler = {
     ipcRenderer.send("remove-dolt-connection", connectionName),
   getDoltServerError: (callback: (value: string) => {}) =>
     ipcRenderer.on("server-error", (_event, value) => callback(value)),
-  doltLogin: (connectionName: string) =>
+  doltLogin: async (connectionName: string) =>
     ipcRenderer.invoke("dolt-login", connectionName),
   cancelDoltLogin: (requestId: string) =>
     ipcRenderer.send("cancel-dolt-login", requestId),

web/nextron.config.js

@@ -5,5 +5,5 @@ process.env.NEXT_PUBLIC_FOR_MAC_NAV =
 module.exports = {
   mainSrcDir: "main",
   rendererSrcDir: "renderer",
-  webpack: (config, env) => config,
+  webpack: config => config,
 };