Timeout on config change to prevent serial busy

Author: fstasi

arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx

@@ -57,7 +57,7 @@ export class MonitorWidget extends ReactWidget {
     this.scrollOptions = undefined;
     this.toDispose.push(this.clearOutputEmitter);
     this.toDispose.push(
-      Disposable.create(() => this.serialConnection.closeSerial())
+      Disposable.create(() => this.serialConnection.closeWStoBE())
     );
   }
 
@@ -81,7 +81,7 @@ export class MonitorWidget extends ReactWidget {
 
   protected onAfterAttach(msg: Message): void {
     super.onAfterAttach(msg);
-    this.serialConnection.openSerial();
+    this.serialConnection.openWSToBE();
   }
 
   onCloseRequest(msg: Message): void {
@@ -169,7 +169,7 @@ export class MonitorWidget extends ReactWidget {
         <div className="head">
           <div className="send">
             <SerialMonitorSendInput
-              serialConfig={this.serialConnection.serialConfig}
+              serialConnection={this.serialConnection}
               resolveFocus={this.onFocusResolved}
               onSend={this.onSend}
             />

arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-input.tsx

@@ -1,39 +1,66 @@
 import * as React from 'react';
 import { Key, KeyCode } from '@theia/core/lib/browser/keys';
 import { Board, Port } from '../../../common/protocol/boards-service';
-import { SerialConfig } from '../../../common/protocol/serial-service';
 import { isOSX } from '@theia/core/lib/common/os';
-import { nls } from '@theia/core/lib/common';
+import { DisposableCollection, nls } from '@theia/core/lib/common';
+import { SerialConnectionManager } from '../serial-connection-manager';
+import { SerialPlotter } from '../plotter/protocol';
 
 export namespace SerialMonitorSendInput {
   export interface Props {
-    readonly serialConfig?: SerialConfig;
+    readonly serialConnection: SerialConnectionManager;
     readonly onSend: (text: string) => void;
     readonly resolveFocus: (element: HTMLElement | undefined) => void;
   }
   export interface State {
     text: string;
+    connected: boolean;
   }
 }
 
 export class SerialMonitorSendInput extends React.Component<
   SerialMonitorSendInput.Props,
   SerialMonitorSendInput.State
 > {
+  protected toDisposeBeforeUnmount = new DisposableCollection();
+
   constructor(props: Readonly<SerialMonitorSendInput.Props>) {
     super(props);
-    this.state = { text: '' };
+    this.state = { text: '', connected: false };
     this.onChange = this.onChange.bind(this);
     this.onSend = this.onSend.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
   }
 
+  componentDidMount(): void {
+    this.props.serialConnection.isBESerialConnected().then((connected) => {
+      this.setState({ connected });
+    });
+
+    this.toDisposeBeforeUnmount.pushAll([
+      this.props.serialConnection.onRead(({ messages }) => {
+        if (
+          messages.command ===
+            SerialPlotter.Protocol.Command.MIDDLEWARE_CONFIG_CHANGED &&
+          'connected' in messages.data
+        ) {
+          this.setState({ connected: messages.data.connected });
+        }
+      }),
+    ]);
+  }
+
+  componentWillUnmount(): void {
+    // TODO: "Your preferred browser's local storage is almost full." Discard `content` before saving layout?
+    this.toDisposeBeforeUnmount.dispose();
+  }
+
   render(): React.ReactNode {
     return (
       <input
         ref={this.setRef}
         type="text"
-        className={`theia-input ${this.props.serialConfig ? '' : 'warning'}`}
+        className={`theia-input ${this.state.connected ? '' : 'warning'}`}
         placeholder={this.placeholder}
         value={this.state.text}
         onChange={this.onChange}
@@ -43,8 +70,8 @@ export class SerialMonitorSendInput extends React.Component<
   }
 
   protected get placeholder(): string {
-    const { serialConfig } = this.props;
-    if (!serialConfig) {
+    const serialConfig = this.props.serialConnection.getConfig();
+    if (!this.state.connected || !serialConfig) {
       return nls.localize(
         'arduino/serial/notConnected',
         'Not connected. Select a board and a port to connect automatically.'
@@ -55,10 +82,12 @@ export class SerialMonitorSendInput extends React.Component<
       'arduino/serial/message',
       "Message ({0} + Enter to send message to '{1}' on '{2}'",
       isOSX ? '⌘' : nls.localize('vscode/keybindingLabels/ctrlKey', 'Ctrl'),
-      Board.toString(board, {
-        useFqbn: false,
-      }),
-      Port.toString(port)
+      board
+        ? Board.toString(board, {
+            useFqbn: false,
+          })
+        : 'unknown',
+      port ? Port.toString(port) : 'unknown'
     );
   }
 

arduino-ide-extension/src/browser/serial/serial-connection-manager.ts

@@ -116,8 +116,8 @@ export class SerialConnectionManager {
   }
 
   /**
-   * Set the config passing only the properties that has changed. If some has changed and the serial is open,
-   * we try to reconnect
+   * Updated the config in the BE passing only the properties that has changed.
+   * BE will create a new connection if needed.
    *
    * @param newConfig the porperties of the config that has changed
    */
@@ -150,10 +150,6 @@ export class SerialConnectionManager {
     return this.wsPort;
   }
 
-  isWebSocketConnected(): boolean {
-    return !!this.webSocket?.url;
-  }
-
   protected handleWebSocketChanged(wsPort: number): void {
     this.wsPort = wsPort;
   }
@@ -168,7 +164,7 @@ export class SerialConnectionManager {
     return await this.serialService.isSerialPortOpen();
   }
 
-  openSerial(): void {
+  openWSToBE(): void {
     if (!isSerialConfig(this.config)) {
       this.messageService.error(
         `Please select a board and a port to open the serial connection.`
@@ -189,7 +185,7 @@ export class SerialConnectionManager {
     }
   }
 
-  closeSerial(): void {
+  closeWStoBE(): void {
     if (this.webSocket) {
       try {
         this.webSocket.close();
@@ -297,28 +293,6 @@ export class SerialConnectionManager {
     }
   }
 
-  // async connect(): Promise<Status> {
-  //   if (await this.serialService.isSerialPortOpen())
-  //     return Status.ALREADY_CONNECTED;
-  //   if (!isSerialConfig(this.config)) return Status.NOT_CONNECTED;
-
-  //   console.info(
-  //     `>>> Creating serial connection for ${Board.toString(
-  //       this.config.board
-  //     )} on port ${Port.toString(this.config.port)}...`
-  //   );
-  //   const connectStatus = await this.serialService.connect(this.config);
-  //   if (Status.isOK(connectStatus)) {
-  //     console.info(
-  //       `<<< Serial connection created for ${Board.toString(this.config.board, {
-  //         useFqbn: false,
-  //       })} on port ${Port.toString(this.config.port)}.`
-  //     );
-  //   }
-
-  //   return Status.isOK(connectStatus);
-  // }
-
   async reconnectAfterUpload(): Promise<void> {
     try {
       if (isSerialConfig(this.config)) {
@@ -339,31 +313,6 @@ export class SerialConnectionManager {
     }
   }
 
-  async disconnectSerialPort(): Promise<Status> {
-    if (!(await this.serialService.isSerialPortOpen())) {
-      return Status.OK;
-    }
-
-    console.log('>>> Disposing existing serial connection...');
-    const status = await this.serialService.disconnect();
-    if (Status.isOK(status)) {
-      console.log(
-        `<<< Disposed serial connection. Was: ${Serial.Config.toString(
-          this.config
-        )}`
-      );
-      this.wsPort = undefined;
-    } else {
-      console.warn(
-        `<<< Could not dispose serial connection. Activate connection: ${Serial.Config.toString(
-          this.config
-        )}`
-      );
-    }
-
-    return status;
-  }
-
   /**
    * Sends the data to the connected serial port.
    * The desired EOL is appended to `data`, you do not have to add it.
@@ -384,7 +333,7 @@ export class SerialConnectionManager {
     return this.onConnectionChangedEmitter.event;
   }
 
-  get onRead(): Event<{ messages: string[] }> {
+  get onRead(): Event<{ messages: any }> {
     return this.onReadEmitter.event;
   }
 
@@ -399,18 +348,6 @@ export class SerialConnectionManager {
 }
 
 export namespace Serial {
-  export enum Type {
-    Monitor = 'Monitor',
-    Plotter = 'Plotter',
-  }
-
-  /**
-   * The state represents which types of connections are needed by the client, and it should match whether the Serial Monitor
-   * or the Serial Plotter are open or not in the GUI. It's an array cause it's possible to have both, none or only one of
-   * them open
-   */
-  export type State = Serial.Type[];
-
   export namespace Config {
     export function toString(config: Partial<SerialConfig>): string {
       if (!isSerialConfig(config)) return '';