Desktop user experience overhaul

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
         target:
           - x64
         node:
-          - 18
+          - 20
     name: ${{ matrix.os }} (node=${{ matrix.node }}, host=${{ matrix.host }}, target=${{ matrix.target }})
     steps:
       - uses: actions/checkout@v3

.github/workflows/package.yml

@@ -29,14 +29,14 @@ jobs:
         target:
           - x64
         node:
-          - 18
+          - 20
         include:
           - os: macos-14
-            node: 18
+            node: 20
             host: arm64
             target: arm64
           - os: windows-2022
-            node: 18
+            node: 20
             host: x64
             target: x86
     name: ${{ matrix.os }} (node=${{ matrix.node }}, host=${{ matrix.host }}, target=${{ matrix.target }})
@@ -117,6 +117,7 @@ jobs:
           DEBUG: electron-builder
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
           APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
           CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
           CSC_LINK: ${{ secrets.CSC_LINK }}

.gitmodules

@@ -1,5 +1,5 @@
 [submodule "core"]
 	path = core
 	url = https://github.com/gristlabs/grist-core
-	branch = main
+	branch = nativefs
 	ignore = dirty

ext/app/client/electronAPI.d.ts

@@ -0,0 +1,30 @@
+import { HomeModel } from "app/client/models/HomeModel";
+
+export type NewDocument = {
+  path: string,
+  id: string
+}
+
+/**
+ * Allows the Grist client to call into electron.
+ * See https://www.electronjs.org/docs/latest/tutorial/ipc
+ */
+interface IElectronAPI {
+
+  // The Grist client can use these interfaces to request the electron main process to perform
+  // certain tasks.
+  createDoc: () => Promise<NewDocument>,
+  importDoc: (uploadId: number) => Promise<NewDocument>,
+
+  // The Grist client needs to call these interfaces to register callback functions for certain
+  // events coming from the electron main process.
+  onMainProcessImportDoc: (callback: (fileContents: Buffer, fileName: string) => void) => void
+
+}
+
+declare global {
+  interface Window {
+    electronAPI: IElectronAPI,
+    gristHomeModel: HomeModel,
+  }
+}

ext/app/client/electronOnly.ts

@@ -0,0 +1,5 @@
+export function electronOnly() {
+  if (window.electronAPI === undefined) {
+    throw Error("Sorry, this must be done from within the app.");
+  }
+}

ext/app/client/ui/HomeImports.ts

@@ -0,0 +1,41 @@
+import { AppModel, reportError } from 'app/client/models/AppModel';
+import { IMPORTABLE_EXTENSIONS } from 'app/client/lib/uploads';
+import { ImportProgress } from 'app/client/ui/ImportProgress';
+import { byteString } from 'app/common/gutil';
+import { openFilePicker } from 'app/client/ui/FileDialog';
+import { uploadFiles } from 'app/client/lib/uploads';
+
+/**
+ * Imports a document and returns its upload ID, or null if no files were selected.
+ */
+async function docImport(app: AppModel, fileToImport?: File): Promise<number|null> {
+  let files: File[];
+
+  if (fileToImport === undefined) {
+    files = await openFilePicker({
+      multiple: false,
+      accept: IMPORTABLE_EXTENSIONS.filter((extension) => extension !== ".grist").join(","),
+    });
+    if (!files.length) { return null; }
+  } else {
+    files = [fileToImport];
+  }
+
+  const progressUI = app.notifier.createProgressIndicator(files[0].name, byteString(files[0].size));
+  const progress = ImportProgress.create(progressUI, progressUI, files[0]);
+  try {
+    const docWorker = await app.api.getWorkerAPI('import');
+    const uploadResult = await uploadFiles(files, {docWorkerUrl: docWorker.url, sizeLimit: 'import'},
+      (p) => progress.setUploadProgress(p));
+
+    return uploadResult!.uploadId;
+  } catch (err) {
+    reportError(err);
+    return null;
+  } finally {
+    progress.finish();
+    progressUI.dispose();
+  }
+}
+
+export const homeImports = {docImport};

ext/app/client/ui/NewDocMethods.ts

@@ -0,0 +1,34 @@
+import { HomeModel } from 'app/client/models/HomeModel';
+import { electronOnly } from "app/client/electronOnly";
+import { homeImports } from 'app/client/ui/HomeImports';
+
+async function createDocAndOpen() {
+  electronOnly();
+  const doc = await window.electronAPI.createDoc();
+  if (doc) {
+    window.location.assign("/o/docs/" + doc.id);
+  }
+}
+
+async function importDocAndOpen(home: HomeModel, fileToImport: File) {
+  electronOnly();
+  const uploadId = await homeImports.docImport(home.app, fileToImport);
+  if (uploadId === null) { return; }
+  const doc = await window.electronAPI.importDoc(uploadId);
+  if (doc) {
+    window.location.assign("/o/docs/" + doc.id);
+  }
+}
+
+// The ? is for external visitors over the network. electronAPI is set by electron's preload script
+// and is undefined for non-electron visitors. An error here will make the entire page fail to load.
+window.electronAPI?.onMainProcessImportDoc((fileContents: Buffer, fileName: string) => {
+  (async() => {
+    while (!window.gristHomeModel || !window.gristHomeModel.app) {
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    importDocAndOpen(window.gristHomeModel, new File([fileContents], fileName));
+  })();
+});
+
+export const newDocMethods = { createDocAndOpen, importDocAndOpen };

ext/app/electron/AppMenu.js

@@ -61,11 +61,11 @@ class AppMenu extends events.EventEmitter {
       submenu: [{
         label: 'New',
         accelerator: 'CmdOrCtrl+N',
-        click: () => this.emit('menu-file-new')
+        click: (item, focusedWindow) => this.emit('menu-file-new', focusedWindow)
       }, {
         label: 'Open...',
         accelerator: 'CmdOrCtrl+O',
-        click: () => this.emit('menu-file-open')
+        click: (item, focusedWindow) => this.emit('menu-file-open', focusedWindow)
       }, {
         label: 'Open Recent',
         submenu: this.buildOpenRecentSubmenu()

ext/app/electron/DocRegistry.ts

@@ -0,0 +1,74 @@
+import * as path from "path";
+import { HomeDBManager } from "app/gen-server/lib/homedb/HomeDBManager";
+import { fileExists } from "./utils";
+
+export class DocRegistry {
+
+  private idToPathMap: Map<string, string>;
+  private pathToIdMap: Map<string, string>;
+  private db: HomeDBManager;
+
+  private constructor(dbManager: HomeDBManager) {
+    this.db = dbManager;
+  }
+
+  public static async create(dbManager: HomeDBManager) {
+    // Allocate space.
+    const dr = new DocRegistry(dbManager);
+    dr.idToPathMap = new Map<string, string>;
+    dr.pathToIdMap = new Map<string, string>;
+
+    // Go over all documents we know about.
+    for (const doc of await dr.db.getAllDocs()) {
+      // All documents are supposed to have externalId set.
+      const docPath = doc.options?.externalId;
+      if (docPath && fileExists(docPath)) {
+        // Cache the two-way mapping docID <-> path.
+        dr.idToPathMap.set(doc.id, docPath);
+        dr.pathToIdMap.set(docPath, doc.id);
+      } else {
+        // Remove this document - it should not appear in a DB for Grist Desktop.
+        await dr.db.deleteDocument({
+          userId: (await dr.getDefaultUser()).id,
+          urlId: doc.id
+        });
+      }
+    }
+    return dr;
+  }
+
+  public lookupById(docId: string): string | null {
+    return this.idToPathMap.get(docId) ?? null;
+  }
+
+  public lookupByPath(docPath: string): string | null {
+    return this.pathToIdMap.get(docPath) ?? null;
+  }
+
+  public async getDefaultUser() {
+    const user = await this.db.getUserByLogin(process.env.GRIST_DEFAULT_EMAIL as string);
+    if (!user) { throw new Error('cannot find default user'); }
+    return user;
+  }
+
+  public async registerDoc(docPath: string): Promise<string> {
+    const defaultUser = await this.getDefaultUser();
+    const wss = this.db.unwrapQueryResult(await this.db.getOrgWorkspaces({userId: defaultUser.id}, 0));
+    for (const doc of wss[0].docs) {
+      if (doc.options?.externalId === docPath) {
+        // We might be able to do better.
+        throw Error("DocRegistry cache incoherent. Please try restarting the app.");
+      }
+    }
+    const docId = this.db.unwrapQueryResult(await this.db.addDocument({
+      userId: defaultUser.id,
+    }, wss[0].id, {
+      name: path.basename(docPath, '.grist'),
+      options: { externalId: docPath },
+    }));
+    this.pathToIdMap.set(docPath, docId);
+    this.idToPathMap.set(docId, docPath);
+    return docId;
+  }
+
+}