removed dependencies on electron remote

app/src/electron.js

@@ -148,6 +148,24 @@ ipcMain.on('update-commands', async (event, arg) => {
     menu.enabled = command.enabled;
   }
 });
+ipcMain.on('close-window', async (event, arg) => {
+  mainWindow.close();
+});
+
+ipcMain.handle('showOpenDialog', async (event, options) => {
+  const res = electron.dialog.showOpenDialogSync(mainWindow, options);
+  return res;
+});
+ipcMain.handle('showSaveDialog', async (event, options) => {
+  const res = electron.dialog.showSaveDialogSync(mainWindow, options);
+  return res;
+});
+ipcMain.handle('showItemInFolder', async (event, path) => {
+  electron.shell.showItemInFolder(path);
+});
+ipcMain.handle('openExternal', async (event, url) => {
+  electron.shell.openExternal(url);
+});
 
 function createWindow() {
   const bounds = store.get('winBounds');

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" context="module">
   export const extractKey = props => props.name;
-  const electron = getElectron();
 
   export function getDatabaseMenuItems(connection, name, $extensions, $currentDatabase) {
     const handleNewQuery = () => {
@@ -89,6 +88,7 @@
     };
 
     const handleDisconnect = () => {
+      const electron = getElectron();
       if (electron) {
         axiosInstance().post('database-connections/disconnect', { conid: connection._id, database: name });
       }

packages/web/src/commands/CommandPalette.svelte

@@ -1,6 +1,4 @@
 <script context="module">
-  const electron = getElectron();
-
   registerCommand({
     id: 'commandPalette.show',
     category: 'Command palette',
@@ -20,7 +18,7 @@
     category: 'Database',
     toolbarName: 'Database search',
     name: 'Search',
-    keyText: electron ? 'Ctrl+P' : 'F3',
+    keyText: isElectronAvailable() ? 'Ctrl+P' : 'F3',
     onClick: () => visibleCommandPalette.set('database'),
     testEnabled: () => getVisibleCommandPalette() != 'database',
   });
@@ -75,7 +73,7 @@
   } from '../stores';
   import clickOutside from '../utility/clickOutside';
   import getConnectionLabel from '../utility/getConnectionLabel';
-  import getElectron from '../utility/getElectron';
+  import { isElectronAvailable } from '../utility/getElectron';
   import keycodes from '../utility/keycodes';
   import { useConnectionList, useDatabaseInfo } from '../utility/metadataLoaders';
   import { getLocalStorage } from '../utility/storageCache';

packages/web/src/commands/changeDatabaseStatusCommand.ts

@@ -4,8 +4,6 @@ import getElectron from '../utility/getElectron';
 import registerCommand from './registerCommand';
 import axiosInstance from '../utility/axiosInstance';
 
-const electron = getElectron();
-
 registerCommand({
   id: 'database.changeState',
   category: 'Database',
@@ -34,6 +32,7 @@ registerCommand({
       {
         text: 'Disconnect',
         onClick: () => {
+          const electron = getElectron();
           if (electron) axiosInstance().post('database-connections/disconnect', dbid);
           currentDatabase.set(null);
         },

packages/web/src/commands/stdCommands.ts

@@ -26,8 +26,6 @@ import InputTextModal from '../modals/InputTextModal.svelte';
 import { removeLocalStorage } from '../utility/storageCache';
 import { showSnackbarSuccess } from '../utility/snackbar';
 
-const electron = getElectron();
-
 function themeCommand(theme: ThemeDefinition) {
   return {
     text: theme.themeName,
@@ -316,22 +314,22 @@ registerCommand({
   group: 'redo',
 });
 
-if (electron) {
-  registerCommand({
-    id: 'file.open',
-    category: 'File',
-    name: 'Open',
-    keyText: 'Ctrl+O',
-    onClick: openElectronFile,
-  });
+registerCommand({
+  id: 'file.open',
+  category: 'File',
+  name: 'Open',
+  keyText: 'Ctrl+O',
+  testEnabled: () => getElectron() != null,
+  onClick: openElectronFile,
+});
 
-  registerCommand({
-    id: 'file.openArchive',
-    category: 'File',
-    name: 'Open DB Model/Archive',
-    onClick: openArchiveFolder,
-  });
-}
+registerCommand({
+  id: 'file.openArchive',
+  category: 'File',
+  name: 'Open DB Model/Archive',
+  testEnabled: () => getElectron() != null,
+  onClick: openArchiveFolder,
+});
 
 registerCommand({
   id: 'file.import',
@@ -419,14 +417,13 @@ if (hasPermission('settings/change')) {
   });
 }
 
-if (electron) {
-  registerCommand({
-    id: 'file.exit',
-    category: 'File',
-    name: 'Exit',
-    onClick: () => electron.remote.getCurrentWindow().close(),
-  });
-}
+registerCommand({
+  id: 'file.exit',
+  category: 'File',
+  name: 'Exit',
+  testEnabled: () => getElectron() != null,
+  onClick: () => getElectron().send('close-window'),
+});
 
 export function registerFileCommands({
   idPrefix,

packages/web/src/forms/FormElectronFileSelectorRaw.svelte

@@ -11,10 +11,10 @@
 
   const { values, setFieldValue } = getFormContext();
 
-  function handleBrowse() {
+  async function handleBrowse() {
     const electron = getElectron();
     if (!electron) return;
-    const filePaths = electron.remote.dialog.showOpenDialogSync(electron.remote.getCurrentWindow(), {
+    const filePaths = await electron.showOpenDialog({
       defaultPath: values[name],
       properties: ['showHiddenFiles'],
       filters: [{ name: 'All Files', extensions: ['*'] }],

packages/web/src/impexp/ElectronFilesInput.svelte

@@ -19,11 +19,11 @@
 
   let isLoading = false;
 
-  const electron = getElectron();
   const { values } = getFormContext();
 
   const handleClick = async () => {
-    const files = electron.remote.dialog.showOpenDialogSync(electron.remote.getCurrentWindow(), {
+    const electron = getElectron();
+    const files = await electron.showOpenDialog({
       properties: ['openFile', 'multiSelections'],
       filters: getFileFilters($extensions, $values.sourceStorageType),
     });

packages/web/src/modals/FavoriteModal.svelte

@@ -14,8 +14,8 @@
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
   import FormValues from '../forms/FormValues.svelte';
   import FormSelectField from '../forms/FormSelectField.svelte';
-import FormSubmit from '../forms/FormSubmit.svelte';
-import FormButton from '../forms/FormButton.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormButton from '../forms/FormButton.svelte';
 
   export let editingData;
   export let savingTab;

packages/web/src/modals/SaveFileModal.svelte

@@ -61,8 +61,8 @@
         <FormStyledButton
           type="button"
           value="Save to disk"
-          on:click={() => {
-            const file = electron.remote.dialog.showSaveDialogSync(electron.remote.getCurrentWindow(), {
+          on:click={async () => {
+            const file = await electron.showSaveDialog({
               filters: [
                 { name: `${fileExtension.toUpperCase()} files`, extensions: [fileExtension] },
                 { name: `All files`, extensions: ['*'] },

packages/web/src/query/RunnerOutputFiles.svelte

@@ -78,8 +78,8 @@
       slot="1"
       let:row
       href="#"
-      on:click={() => {
-        const file = electron.remote.dialog.showSaveDialogSync(electron.remote.getCurrentWindow(), {});
+      on:click={async () => {
+        const file = await electron.showSaveDialog({});
         if (file) {
           const fs = window.require('fs');
           fs.copyFile(row.path, file, () => {});
@@ -94,7 +94,7 @@
       let:row
       href="#"
       on:click={() => {
-        electron.remote.shell.showItemInFolder(row.path);
+        electron.showItemInFolder(row.path);
       }}
     >
       show

packages/web/src/utility/exportElectronFile.ts

@@ -9,7 +9,7 @@ export async function exportElectronFile(dataName, reader, format) {
   const electron = getElectron();
   const filters = [{ name: format.label, extensions: [format.extension] }];
 
-  const filePath = electron.remote.dialog.showSaveDialogSync(electron.remote.getCurrentWindow(), {
+  const filePath = await electron.showSaveDialog({
     filters,
     defaultPath: `${dataName}.${format.extension}`,
     properties: ['showOverwriteConfirmation'],
@@ -65,14 +65,14 @@ export async function saveFileToDisk(
 
   if (electron) {
     const filters = [{ name: formatLabel, extensions: [formatExtension] }];
-    const filePath = electron.remote.dialog.showSaveDialogSync(electron.remote.getCurrentWindow(), {
+    const filePath = await electron.showSaveDialog({
       filters,
       defaultPath: `file.${formatExtension}`,
       properties: ['showOverwriteConfirmation'],
     });
     if (!filePath) return;
     await filePathFunc(filePath);
-    electron.shell.openExternal('file:///' + filePath);
+    electron.openExternal('file:///' + filePath);
   } else {
     const resp = await axiosInstance().get('files/generate-uploads-file');
     await filePathFunc(resp.data.filePath);

packages/web/src/utility/getElectron.ts

@@ -8,9 +8,28 @@ class ElectronApi {
     this.authorization = args.authorization;
   }
 
-  send(msg, args) {
+  send(msg, args = null) {
     this.ipcRenderer.send(msg, args);
   }
+
+  async showOpenDialog(options) {
+    const res = await this.ipcRenderer.invoke('showOpenDialog', options);
+    return res;
+  }
+
+  async showSaveDialog(options) {
+    const res = await this.ipcRenderer.invoke('showSaveDialog', options);
+    return res;
+  }
+
+  async showItemInFolder(path) {
+    const res = await this.ipcRenderer.invoke('showItemInFolder', path);
+    return res;
+  }
+
+  async openExternal(url) {
+    await this.ipcRenderer.invoke('openExternal', url);
+  }
 }
 
 let apiInstance = null;
@@ -39,6 +58,10 @@ export function shouldWaitForElectronInitialize() {
   return !!getIpcRenderer() && !apiInstance;
 }
 
+export function isElectronAvailable() {
+  return !!getIpcRenderer();
+}
+
 export default function getElectron(): ElectronApi {
   return apiInstance;
   // try {

packages/web/src/utility/openArchiveFolder.ts

@@ -7,7 +7,7 @@ import { showSnackbarSuccess } from './snackbar';
 export async function openArchiveFolder() {
   const electron = getElectron();
   const ext = get(extensions);
-  const filePaths = electron.remote.dialog.showOpenDialogSync(electron.remote.getCurrentWindow(), {
+  const filePaths = await electron.showOpenDialog({
     properties: ['openDirectory'],
   });
   const linkedFolder = filePaths && filePaths[0];

packages/web/src/utility/openElectronFile.ts

@@ -107,10 +107,10 @@ function getFileFormatExtensions(extensions) {
   return extensions.fileFormats.filter(x => x.readerFunc).map(x => x.extension);
 }
 
-export function openElectronFile() {
+export async function openElectronFile() {
   const electron = getElectron();
   const ext = get(extensions);
-  const filePaths = electron.remote.dialog.showOpenDialogSync(electron.remote.getCurrentWindow(), {
+  const filePaths = await electron.showOpenDialog({
     filters: [
       { name: `All supported files`, extensions: ['sql', 'sqlite', 'db', 'sqlite3', ...getFileFormatExtensions(ext)] },
       { name: `SQL files`, extensions: ['sql'] },

packages/web/src/widgets/TabsPanel.svelte

@@ -1,6 +1,4 @@
 <script lang="ts" context="module">
-  const electron = getElectron();
-
   const closeTabFunc = closeCondition => tabid => {
     openedTabs.update(files => {
       const active = files.find(x => x.tabid == tabid);
@@ -105,7 +103,7 @@
     id: 'tabs.closeTab',
     category: 'Tabs',
     name: 'Close tab',
-    keyText: electron ? 'Ctrl+W' : null,
+    keyText: isElectronAvailable() ? 'Ctrl+W' : null,
     testEnabled: () => getOpenedTabs().filter(x => !x.closedTime).length >= 1,
     onClick: closeCurrentTab,
   });
@@ -139,7 +137,7 @@
   import { setSelectedTab } from '../utility/common';
   import contextMenu from '../utility/contextMenu';
   import getConnectionLabel from '../utility/getConnectionLabel';
-  import getElectron from '../utility/getElectron';
+  import { isElectronAvailable } from '../utility/getElectron';
   import { getConnectionInfo, useConnectionList } from '../utility/metadataLoaders';
   import { duplicateTab } from '../utility/openNewTab';
   import { useConnectionColorFactory } from '../utility/useConnectionColor';