Set enableRemoteModule to false

package.json

@@ -49,6 +49,7 @@
     "pg": "8.7.1",
     "plotly.js-basic-dist-min": "1.57.1",
     "react": "16.8.6",
+    "react-contexify": "^6.0.0",
     "react-dom": "16.8.6",
     "react-linkify": "^1.0.0-alpha",
     "react-micro-flyout": "1.0.1",

src/lib/Bdash.ts

@@ -1,13 +1,16 @@
 import fs from "fs";
-import Config from "./Config";
 import { ensureDirSync } from "fs-extra";
 import { setting } from "./Setting";
 import Database from "./Database";
+import { ipcRenderer } from "electron";
 
 const Bdash = {
   async initialize(): Promise<void> {
     // @see https://github.com/bdash-app/bdash/pull/99#issuecomment-590011101
     window.process["browser"] = true;
+
+    const Config = await ipcRenderer.invoke("getConfig");
+
     if (!fs.existsSync(Config.bdashRoot)) {
       ensureDirSync(Config.bdashRoot);
     }

src/lib/Config.ts → src/main/Config.ts

@@ -5,7 +5,7 @@ import os from "os";
 const bdashRoot =
   process.env.NODE_ENV === "test"
     ? path.join(os.tmpdir(), ".bdash")
-    : path.resolve(electron.remote.app.getPath("home"), ".bdash");
+    : path.resolve(electron.app.getPath("home"), ".bdash");
 const databasePath = path.join(bdashRoot, "bdash.sqlite3");
 const settingPath = path.join(bdashRoot, "setting.yml");
 

src/main/window.ts

@@ -1,6 +1,7 @@
 import electron, { BrowserWindow, dialog, ipcMain, shell } from "electron";
 import path from "path";
 import logger from "./logger";
+import Config from "./Config";
 
 const windows: BrowserWindow[] = [];
 
@@ -13,11 +14,12 @@ export async function createWindow(): Promise<void> {
     icon: path.join(__dirname, "..", "icon.png"),
     webPreferences: {
       nodeIntegration: true,
-      enableRemoteModule: true,
       contextIsolation: false,
     },
   });
 
+  ipcMain.handle("getConfig", async () => Config);
+
   ipcMain.on("showUpdateQueryDialog", async (event) => {
     const { response } = await dialog.showMessageBox(win, {
       message: "This query has been already shared.",

src/renderer/components/DataSourceList/DataSourceList.tsx

@@ -1,7 +1,10 @@
-import React from "react";
+import React, { MouseEvent } from "react";
 import classNames from "classnames";
-import { remote } from "electron";
 import { DataSourceType } from "../../pages/DataSource/DataSourceStore";
+import { Menu, Item, useContextMenu } from "react-contexify";
+import "react-contexify/ReactContexify.css";
+
+const MENU_ID = "DATA_SOURCE_LIST_MENU";
 
 type Props = {
   readonly dataSources: DataSourceType[];
@@ -26,53 +29,60 @@ const DataSourceList: React.FC<Props> = ({
   onDelete,
   changeDefaultDataSourceId,
 }) => {
-  const handleContextMenu = (id: number): void => {
+  const handleEdit = () => {
+    if (selectedDataSourceId === null) {
+      return;
+    }
+    const dataSource = find(selectedDataSourceId);
+    if (dataSource) {
+      onEdit(dataSource);
+    }
+  };
+
+  const handleReload = () => {
+    if (selectedDataSourceId === null) {
+      return;
+    }
+    const dataSource = find(selectedDataSourceId);
+    if (dataSource) {
+      onReload(dataSource);
+    }
+  };
+
+  const handleSetAsDefault = () => {
+    if (selectedDataSourceId === null) {
+      return;
+    }
+    changeDefaultDataSourceId(selectedDataSourceId);
+  };
+
+  const handleDelete = () => {
+    if (selectedDataSourceId === null) {
+      return;
+    }
+    if (window.confirm("Are you sure?")) {
+      onDelete(selectedDataSourceId);
+    }
+  };
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
+  const handleContextMenu = (event: MouseEvent, id: number): void => {
+    show({
+      event,
+      props: {
+        key: "value",
+      },
+    });
+
     if (id !== selectedDataSourceId) {
       const dataSource = find(id);
       if (dataSource) {
-        onSelect(dataSources[id]);
+        onSelect(dataSource);
       }
     }
-
-    setImmediate(() => {
-      const menu = remote.Menu.buildFromTemplate([
-        {
-          label: "Edit",
-          click: (): void => {
-            const dataSource = find(id);
-            if (dataSource) {
-              onEdit(dataSource);
-            }
-          },
-        },
-        {
-          label: "Reload",
-          click: (): void => {
-            const dataSource = find(id);
-            if (dataSource) {
-              onReload(dataSource);
-            }
-          },
-        },
-        {
-          label: "Set as default",
-          type: "checkbox",
-          checked: id === defaultDataSourceId,
-          click: (): void => {
-            changeDefaultDataSourceId(id);
-          },
-        },
-        {
-          label: "Delete",
-          click: (): void => {
-            if (window.confirm("Are you sure?")) {
-              onDelete(id);
-            }
-          },
-        },
-      ]);
-      menu.popup({ window: remote.getCurrentWindow() });
-    });
   };
 
   const find = (id: number): DataSourceType | undefined => {
@@ -88,7 +98,7 @@ const DataSourceList: React.FC<Props> = ({
       <li
         key={dataSource.id}
         className={className}
-        onContextMenu={(): void => handleContextMenu(dataSource.id)}
+        onContextMenu={(event): void => handleContextMenu(event, dataSource.id)}
         onClick={(): void => onSelect(dataSource)}
       >
         {label}
@@ -101,6 +111,12 @@ const DataSourceList: React.FC<Props> = ({
       <div className={classNames("DataSourceList-new", { darwin: process.platform === "darwin" })}>
         <i className="fas fa-plus" onClick={onClickNew} />
       </div>
+      <Menu id={MENU_ID}>
+        <Item onClick={handleEdit}>Edit</Item>
+        <Item onClick={handleReload}>Reload</Item>
+        <Item onClick={handleSetAsDefault}>Set as default</Item>
+        <Item onClick={handleDelete}>Delete</Item>
+      </Menu>
       <ul className="DataSourceList-list">{items}</ul>
     </div>
   );

src/renderer/components/QueryList/QueryList.tsx

@@ -1,7 +1,10 @@
-import React, { useState } from "react";
+import React, { useState, MouseEvent } from "react";
 import classNames from "classnames";
-import { remote } from "electron";
 import { QueryType } from "../../../lib/Database/Query";
+import { Menu, Item, useContextMenu } from "react-contexify";
+import "react-contexify/ReactContexify.css";
+
+const MENU_ID = "QUERY_LIST_MENU";
 
 type Props = {
   readonly queries: QueryType[];
@@ -24,27 +27,35 @@ const QueryList: React.FC<Props> = ({
 
   const handleClickItem = onSelectQuery;
 
-  const handleContextMenu = (queryId: number): void => {
-    onSelectQuery(queryId);
-    setImmediate(() => {
-      const menu = remote.Menu.buildFromTemplate([
-        {
-          label: "Duplicate",
-          click: (): void => {
-            onDuplicateQuery(queryId);
-          },
-        },
-        {
-          label: "Delete",
-          click: (): void => {
-            if (window.confirm("Are you sure?")) {
-              onDeleteQuery(queryId);
-            }
-          },
-        },
-      ]);
-      menu.popup({ window: remote.getCurrentWindow() });
+  const handleDuplicate = () => {
+    if (selectedQueryId === null) {
+      return;
+    }
+    onDuplicateQuery(selectedQueryId);
+  };
+
+  const handleDelete = () => {
+    if (selectedQueryId === null) {
+      return;
+    }
+    if (window.confirm("Are you sure?")) {
+      onDeleteQuery(selectedQueryId);
+    }
+  };
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
+  const handleContextMenu = (event: MouseEvent, queryId: number): void => {
+    show({
+      event,
+      props: {
+        key: "value",
+      },
     });
+
+    onSelectQuery(queryId);
   };
 
   const [filterText, setFilterText] = useState("");
@@ -63,13 +74,17 @@ const QueryList: React.FC<Props> = ({
           <input type="search" placeholder="Filter by title.." value={filterText} onChange={handleChange} />
         </div>
       </div>
+      <Menu id={MENU_ID}>
+        <Item onClick={handleDuplicate}>Duplicate</Item>
+        <Item onClick={handleDelete}>Delete</Item>
+      </Menu>
       <ul className="QueryList-list">
         {filteredQueries.map((query) => (
           <li
             key={query.id}
             className={selectedQueryId === query.id ? "is-selected" : ""}
             onClick={(): void => handleClickItem(query.id)}
-            onContextMenu={(): void => handleContextMenu(query.id)}
+            onContextMenu={(event): void => handleContextMenu(event, query.id)}
           >
             <div className="QueryList-item">
               <div className="QueryList-item-title">{query.title}</div>

yarn.lock

@@ -2488,6 +2488,11 @@ clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -6131,6 +6136,13 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-contexify@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-contexify/-/react-contexify-6.0.0.tgz#52959bb507d6a31224fe870ae147e211e359abe1"
+  integrity sha512-jMhz6yZI81Jv3UDj7TXqCkhdkCFEEmvwGCPXsQuA2ZUC8EbCuVQ6Cy8FzKMXa0y454XTDClBN2YFvvmoFlrFkg==
+  dependencies:
+    clsx "^1.2.1"
+
 [email protected]:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"