DH-12087 Allow better handling when disconnected (#470)

* DH-12087 Allow better handling when disconnected

- Instead of immediately adding all objects to disabled objects, just show them as disabled
- Connection could still come back, at which items should be enabled again
- Instead of calling it `disconnectedChildren`, call it `historyChildren`
- Have an explicit `disabled` prop

Author: mofojed

packages/console/src/Console.jsx

@@ -141,13 +141,6 @@ export class Console extends PureComponent {
     const { props, state } = this;
     this.sendSettingsChange(prevState, state);
 
-    if (
-      props.disconnectedChildren != null &&
-      prevProps.disconnectedChildren == null
-    ) {
-      this.disconnect();
-    }
-
     if (props.objectMap !== prevProps.objectMap) {
       this.updateObjectMap();
     }
@@ -179,27 +172,6 @@ export class Console extends PureComponent {
     }
   }
 
-  disconnect() {
-    this.setState(({ consoleHistory }) => ({
-      // Reset any pending commands with an empty result, disable all tables/widgets
-      consoleHistory: consoleHistory.map(item => {
-        if (item.result == null) {
-          return { ...item, endTime: Date.now(), result: {} };
-        }
-        const { result } = item;
-        if (result.changes) {
-          const disabledItems = []
-            .concat(result.changes.created)
-            .concat(result.changes.updated);
-          return { ...item, disabledItems };
-        }
-        return item;
-      }),
-      objectHistoryMap: new Map(),
-      objectMap: new Map(),
-    }));
-  }
-
   handleClearShortcut(event) {
     event.preventDefault();
     event.stopPropagation();
@@ -797,14 +769,15 @@ export class Console extends PureComponent {
   render() {
     const {
       actions,
-      disconnectedChildren,
+      historyChildren,
       language,
       statusBarChildren,
       openObject,
       session,
       scope,
       commandHistoryStorage,
       timeZone,
+      disabled,
     } = this.props;
     const {
       consoleHeight,
@@ -819,15 +792,12 @@ export class Console extends PureComponent {
     } = this.state;
     const consoleMenuObjects = this.getObjects(objectMap);
     const inputMaxHeight = Math.round(consoleHeight * 0.7);
-    const isDisconnected = disconnectedChildren != null;
     const contextActions = this.getContextActions(actions);
 
     return (
       <div
         role="presentation"
-        className={classNames('iris-console h-100 w-100', {
-          disconnected: isDisconnected,
-        })}
+        className={classNames('iris-console', 'h-100', 'w-100', { disabled })}
       >
         <div className="console-pane" ref={this.consolePane}>
           <ConsoleStatusBar
@@ -844,7 +814,7 @@ export class Console extends PureComponent {
             onDragEnter={this.handleDragEnter}
             onDragLeave={this.handleDragLeave}
           >
-            {!isDisconnected && showCsvOverlay && (
+            {showCsvOverlay && (
               <CsvOverlay
                 onFileOpened={this.handleCsvFileOpened}
                 onPaste={this.handleCsvPaste}
@@ -867,10 +837,10 @@ export class Console extends PureComponent {
                 openObject={openObject}
                 language={language}
               />
-              {isDisconnected && disconnectedChildren}
+              {historyChildren}
             </div>
           </div>
-          {!isDisconnected && !showCsvOverlay && (
+          {!showCsvOverlay && (
             <ConsoleInput
               ref={this.consoleInput}
               session={session}
@@ -881,7 +851,7 @@ export class Console extends PureComponent {
               commandHistoryStorage={commandHistoryStorage}
             />
           )}
-          {!isDisconnected && showCsvOverlay && (
+          {showCsvOverlay && (
             <CsvInputBar
               session={session}
               onOpenTable={this.handleOpenCsvTable}
@@ -918,11 +888,13 @@ Console.propTypes = {
   actions: PropTypes.arrayOf(PropTypes.shape({})),
   timeZone: PropTypes.string,
 
-  // Message shown when the session has disconnected. Setting this value removes the input bar and disables old tables
-  disconnectedChildren: PropTypes.node,
+  // Children shown at the bottom of the console history
+  historyChildren: PropTypes.node,
 
   // Known object map
   objectMap: PropTypes.instanceOf(Map),
+
+  disabled: PropTypes.bool,
 };
 
 Console.defaultProps = {
@@ -931,9 +903,10 @@ Console.defaultProps = {
   onSettingsChange: () => {},
   scope: null,
   actions: [],
-  disconnectedChildren: null,
+  historyChildren: null,
   timeZone: 'America/New_York',
   objectMap: new Map(),
+  disabled: false,
 };
 
 export default Console;

packages/console/src/ConsoleInput.jsx

@@ -420,10 +420,10 @@ export class ConsoleInput extends PureComponent {
   }
 
   render() {
-    const { language, session } = this.props;
+    const { disabled, language, session } = this.props;
     const { commandEditorHeight, isFocused, model } = this.state;
     return (
-      <div className="console-input-wrapper">
+      <div className={classNames('console-input-wrapper', { disabled })}>
         <div
           className={classNames('console-input-inner-wrapper', {
             focus: isFocused,
@@ -454,11 +454,13 @@ ConsoleInput.propTypes = {
   commandHistoryStorage: StoragePropTypes.CommandHistoryStorage.isRequired,
   onSubmit: PropTypes.func.isRequired,
   maxHeight: PropTypes.number,
+  disabled: PropTypes.bool,
 };
 
 ConsoleInput.defaultProps = {
   maxHeight: LINE_HEIGHT * 10,
   scope: null,
+  disabled: false,
 };
 
 export default ConsoleInput;

packages/console/src/console-history/ConsoleHistory.jsx

@@ -15,13 +15,14 @@ class ConsoleHistory extends Component {
   }
 
   render() {
-    const { items, language, openObject } = this.props;
+    const { disabled, items, language, openObject } = this.props;
     const historyElements = [];
     for (let i = 0; i < items.length; i += 1) {
       const item = items[i];
       const historyElement = (
         <ConsoleHistoryItem
           key={ConsoleHistory.itemKey(i, item)}
+          disabled={disabled}
           item={item}
           openObject={openObject}
           language={language}
@@ -40,6 +41,11 @@ ConsoleHistory.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   language: PropTypes.string.isRequired,
   openObject: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};
+
+ConsoleHistory.defaultProps = {
+  disabled: false,
 };
 
 export default ConsoleHistory;

packages/console/src/console-history/ConsoleHistoryItem.jsx

@@ -38,7 +38,7 @@ class ConsoleHistoryItem extends PureComponent {
   }
 
   render() {
-    const { item, language } = this.props;
+    const { disabled, item, language } = this.props;
     const { disabledObjects, result } = item;
 
     let commandElement = null;
@@ -63,13 +63,14 @@ class ConsoleHistoryItem extends PureComponent {
         [...created, ...updated].forEach(object => {
           const { name } = object;
           const key = `${name}`;
-          const disabled = (disabledObjects ?? []).indexOf(name) >= 0;
+          const btnDisabled =
+            disabled || (disabledObjects ?? []).indexOf(name) >= 0;
           const element = (
             <ButtonOld
               key={key}
               onClick={() => this.handleObjectClick(object)}
-              className="btn-primary btn-console"
-              disabled={disabled}
+              className="btn-primary btn-console btn-console-object"
+              disabled={btnDisabled}
             >
               <ObjectIcon type={object.type} /> {name}
             </ButtonOld>
@@ -106,6 +107,7 @@ class ConsoleHistoryItem extends PureComponent {
         <ConsoleHistoryResultInProgress
           key="in_progress"
           onCancelClick={this.handleCancelClick}
+          disabled={disabled}
         />
       );
       resultElements.push(element);
@@ -145,6 +147,11 @@ ConsoleHistoryItem.propTypes = {
   }).isRequired,
   language: PropTypes.string.isRequired,
   openObject: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};
+
+ConsoleHistoryItem.defaultProps = {
+  disabled: false,
 };
 
 export default ConsoleHistoryItem;

packages/console/src/console-history/ConsoleHistoryResultInProgress.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { LoadingSpinner, Tooltip } from '@deephaven/components';
@@ -42,14 +43,18 @@ class ConsoleHistoryResultInProgress extends Component {
   }
 
   render() {
+    const { disabled, onCancelClick } = this.props;
     const { elapsed } = this.state;
-    const { onCancelClick } = this.props;
     return (
-      <div className="console-history-result-in-progress">
+      <div
+        className={classNames('console-history-result-in-progress', {
+          disabled,
+        })}
+      >
         <span className="badge">
           <LoadingSpinner />
           &nbsp;Running... {TimeUtils.formatElapsedTime(elapsed)}&nbsp;
-          <button type="button" onClick={onCancelClick}>
+          <button type="button" onClick={onCancelClick} disabled={disabled}>
             <FontAwesomeIcon icon={vsClose} />
             <Tooltip>Cancel</Tooltip>
           </button>
@@ -61,6 +66,11 @@ class ConsoleHistoryResultInProgress extends Component {
 
 ConsoleHistoryResultInProgress.propTypes = {
   onCancelClick: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};
+
+ConsoleHistoryResultInProgress.defaultProps = {
+  disabled: false,
 };
 
 export default ConsoleHistoryResultInProgress;

packages/console/src/csv/CsvInputBar.jsx

@@ -252,7 +252,7 @@ class CsvInputBar extends Component {
     // A blank table name is invalid for pasted values
     const isNameInvalid = paste && !tableName;
     return (
-      <div>
+      <div className="csv-input-bar">
         {!showProgress && (
           <form
             onSubmit={this.handleUpload}