feat(node-runtime-worker-thread): Allow to interrupt evalutate calls COMPASS-4562 (#653)

* feat(node-runtime-worker-thread): Do not allow concurrent evaluation calls

* feat(node-runtime-worker-thread): Allow to interrupt async evaluation of worker runtime

* feat(node-runtime-worker-thread): Expose interrupt method on main thread runtime

* feat(node-runtime-worker-thread): Pass interruption handle from worker to the main thread to allow sync evaluation interruption

* feat(node-runtime-worker-thread): Allow to interrupt sync evaluations from main thread

* fix(node-runtime-worker-thread): Use filepaths instead file source when spawning child process and worker

It's not required anymore to use inlined source and this allows the library to properly resolve interruptor
when used in compass-shell plugin as a dependency

* build(compass-shell): Rebuild interruptor before starting dev version of compass shell

* chore(node-runtime-worker-thread): More methods exposed -> more listeners

* chore(compass-shell): Enable react devtools in compass-shell dev mode

* feat(browser-repl, compass-shell): Cancel running evaluations when Ctrl-C is pressed

* feat(node-runtime-worker-thread): Throw when trying to lock the lock that's already locked

* fix(node-runtime-worker-thread): Increase timeout for a flaky test

Author: gribnoysup

packages/browser-repl/package.json

@@ -42,6 +42,7 @@
     "@mongosh/browser-runtime-core": "0.0.0-dev.0",
     "@mongosh/history": "0.0.0-dev.0",
     "@mongosh/i18n": "0.0.0-dev.0",
+    "@mongosh/node-runtime-worker-thread": "0.0.0-dev.0",
     "@mongosh/service-provider-core": "0.0.0-dev.0",
     "@mongosh/shell-evaluator": "0.0.0-dev.0",
     "pretty-bytes": "^5.3.0",

packages/browser-repl/src/components/editor.tsx

@@ -20,6 +20,7 @@ interface EditorProps {
   onArrowDownOnLastLine(): void | Promise<void>;
   onChange(value: string): void | Promise<void>;
   onClearCommand(): void | Promise<void>;
+  onSigInt(): Promise<boolean>;
   operationInProgress: boolean;
   setInputRef?(ref: { editor?: HTMLElement }): void;
   value: string;
@@ -32,6 +33,7 @@ export class Editor extends Component<EditorProps> {
     onArrowDownOnLastLine: noop,
     onChange: noop,
     onClearCommand: noop,
+    onSigInt: noop,
     operationInProgress: false,
     value: '',
     moveCursorToTheEndOfInput: false
@@ -142,6 +144,15 @@ export class Editor extends Component<EditorProps> {
           name: 'clearShell',
           bindKey: { win: 'Ctrl-L', mac: 'Command-L' },
           exec: this.props.onClearCommand
+        },
+        {
+          name: 'SIGINT',
+          bindKey: { win: 'Ctrl-C', mac: 'Ctrl-C' },
+          exec: this.props.onSigInt,
+          // Types don't have it but it exists
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          readOnly: true,
         }
       ]}
       width="100%"

packages/browser-repl/src/components/shell-input.tsx

@@ -16,6 +16,7 @@ interface ShellInputProps {
   operationInProgress?: boolean;
   prompt?: string;
   setInputRef?(ref: { editor?: HTMLElement }): void;
+  onSigInt?(): Promise<boolean>;
 }
 
 interface ShellInputState {
@@ -131,21 +132,28 @@ export class ShellInput extends Component<ShellInputProps, ShellInputState> {
       />);
     }
 
-    const editor = (<Editor
-      autocompleter={this.props.autocompleter}
-      onArrowUpOnFirstLine={this.historyBack}
-      onArrowDownOnLastLine={this.historyNext}
-      onChange={this.onChange}
-      onEnter={this.onEnter}
-      onClearCommand={this.props.onClearCommand}
-      setInputRef={this.props.setInputRef}
-      value={this.state.currentValue}
-      operationInProgress={this.props.operationInProgress}
-      moveCursorToTheEndOfInput={this.state.didLoadHistoryItem}
-    />);
+    const editor = (
+      <Editor
+        autocompleter={this.props.autocompleter}
+        onArrowUpOnFirstLine={this.historyBack}
+        onArrowDownOnLastLine={this.historyNext}
+        onChange={this.onChange}
+        onEnter={this.onEnter}
+        onClearCommand={this.props.onClearCommand}
+        setInputRef={this.props.setInputRef}
+        value={this.state.currentValue}
+        operationInProgress={this.props.operationInProgress}
+        moveCursorToTheEndOfInput={this.state.didLoadHistoryItem}
+        onSigInt={this.props.onSigInt}
+      />
+    );
 
     const className = classnames(styles['shell-input']);
 
-    return <LineWithIcon className={className} icon={prompt}>{editor}</LineWithIcon>;
+    return (
+      <LineWithIcon className={className} icon={prompt}>
+        {editor}
+      </LineWithIcon>
+    );
   }
 }

packages/browser-repl/src/components/shell.tsx

@@ -3,15 +3,16 @@ import classnames from 'classnames';
 import { PasswordPrompt } from './password-prompt';
 import { ShellInput } from './shell-input';
 import { ShellOutput, ShellOutputEntry } from './shell-output';
-import { Runtime } from '@mongosh/browser-runtime-core';
+import type { Runtime } from '@mongosh/browser-runtime-core';
 import { changeHistory } from '@mongosh/history';
+import type { WorkerRuntime } from '@mongosh/node-runtime-worker-thread';
 
 const styles = require('./shell.less');
 
 interface ShellProps {
   /* The runtime used to evaluate code.
-  */
-  runtime: Runtime;
+   */
+  runtime: Runtime | WorkerRuntime;
 
   /* A function called each time the output changes with an array of
    * ShellOutputEntryes.
@@ -110,7 +111,7 @@ export class Shell extends Component<ShellProps, ShellState> {
   }
 
   private evaluate = async(code: string): Promise<ShellOutputEntry> => {
-    let outputLine : ShellOutputEntry;
+    let outputLine: ShellOutputEntry;
 
     try {
       this.props.runtime.setEvaluationListener(this);
@@ -135,7 +136,7 @@ export class Shell extends Component<ShellProps, ShellState> {
   private async updateShellPrompt(): Promise<void> {
     let shellPrompt = '>';
     try {
-      shellPrompt = await this.props.runtime.getShellPrompt() ?? '>';
+      shellPrompt = (await this.props.runtime.getShellPrompt()) ?? '>';
     } catch (e) {
       // Just ignore errors when getting the prompt...
     }
@@ -276,36 +277,55 @@ export class Shell extends Component<ShellProps, ShellState> {
     }
   };
 
+  private onSigInt = (): Promise<boolean> => {
+    if (
+      this.state.operationInProgress &&
+      (this.props.runtime as WorkerRuntime).interrupt
+    ) {
+      return (this.props.runtime as WorkerRuntime).interrupt();
+    }
+
+    return Promise.resolve(false);
+  };
+
   renderInput(): JSX.Element {
     if (this.state.passwordPrompt) {
-      return (<PasswordPrompt
-        onFinish={this.onFinishPasswordPrompt}
-        onCancel={this.onCancelPasswordPrompt}
-        prompt={this.state.passwordPrompt}
-      />);
+      return (
+        <PasswordPrompt
+          onFinish={this.onFinishPasswordPrompt}
+          onCancel={this.onCancelPasswordPrompt}
+          prompt={this.state.passwordPrompt}
+        />
+      );
     }
-    return (<ShellInput
-      prompt={this.state.shellPrompt}
-      autocompleter={this.props.runtime}
-      history={this.state.history}
-      onClearCommand={this.onClearCommand}
-      onInput={this.onInput}
-      operationInProgress={this.state.operationInProgress}
-      setInputRef={(ref: {editor?: HTMLElement}): void => { this.shellInputRef = ref;}}
-    />);
+
+    return (
+      <ShellInput
+        prompt={this.state.shellPrompt}
+        autocompleter={this.props.runtime}
+        history={this.state.history}
+        onClearCommand={this.onClearCommand}
+        onInput={this.onInput}
+        operationInProgress={this.state.operationInProgress}
+        setInputRef={(ref: { editor?: HTMLElement }): void => {
+          this.shellInputRef = ref;
+        }}
+        onSigInt={this.onSigInt}
+      />
+    );
   }
 
   render(): JSX.Element {
     return (
-      <div
-        className={classnames(styles.shell)}
-        onClick={this.onShellClicked}
-      >
+      <div className={classnames(styles.shell)} onClick={this.onShellClicked}>
         <div>
-          <ShellOutput
-            output={this.state.output} />
+          <ShellOutput output={this.state.output} />
         </div>
-        <div ref={(el): void => { this.shellInputElement = el; }}>
+        <div
+          ref={(el): void => {
+            this.shellInputElement = el;
+          }}
+        >
           {this.renderInput()}
         </div>
       </div>

packages/compass-shell/electron/index.js

@@ -2,6 +2,10 @@
 const {app, BrowserWindow} = require('electron');
 const path = require('path');
 const url = require('url');
+const {
+  default: installDevtool,
+  REACT_DEVELOPER_TOOLS,
+} = require('electron-devtools-installer');
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -63,7 +67,9 @@ function createWindow() {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on('ready', createWindow);
+app.on('ready', () =>
+  installDevtool(REACT_DEVELOPER_TOOLS).finally(createWindow)
+);
 
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {