feat: add compass shell progress indicator COMPASS-4515

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

@@ -5,7 +5,7 @@ import { shallow, mount } from '../../testing/enzyme';
 
 import { ShellInput } from './shell-input';
 import { Editor } from './editor';
-import Loader from './shell-loader';
+import ShellLoader from './shell-loader';
 
 function changeValue(wrapper, value): void {
   wrapper.find(Editor).prop('onChange')(value);
@@ -117,7 +117,7 @@ describe('<ShellInput />', () => {
         operationInProgress
       />);
 
-      expect(wrapper.find(Loader).exists()).to.equal(true);
+      expect(wrapper.find(ShellLoader).exists()).to.equal(true);
     });
 
     it('does not show a loader when operationInProgress is false', () => {
@@ -126,7 +126,7 @@ describe('<ShellInput />', () => {
         operationInProgress={false}
       />);
 
-      expect(wrapper.find(Loader).exists()).to.equal(false);
+      expect(wrapper.find(ShellLoader).exists()).to.equal(false);
     });
   });
 

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

@@ -3,7 +3,7 @@ import { Autocompleter } from '@mongosh/browser-runtime-core';
 import classnames from 'classnames';
 import React, { Component } from 'react';
 import { Editor } from './editor';
-import Loader from './shell-loader';
+import ShellLoader from './shell-loader';
 import { LineWithIcon } from './utils/line-with-icon';
 
 const styles = require('./shell-input.less');
@@ -109,9 +109,7 @@ export class ShellInput extends Component<ShellInputProps, ShellInputState> {
   render(): JSX.Element {
     let prompt: JSX.Element;
     if (this.props.operationInProgress) {
-      prompt = (<Loader
-        size={12}
-      />);
+      prompt = (<ShellLoader />);
     } else if (this.props.prompt) {
       const trimmed = this.props.prompt.trim();
       if (trimmed.endsWith('>')) {

packages/browser-repl/src/components/shell-loader.less

@@ -1,14 +1,15 @@
 @import '~@leafygreen-ui/palette/dist/ui-colors.less';
 
 .shell-loader {
-  border: 2px solid @leafygreen__gray--light-3;
-  border-top: 2px solid @leafygreen__green--base;
+  border: 2px solid transparent;
+  border-top: 2px solid @leafygreen__green--light-2;
   border-radius: 50%;
   padding: 0;
   margin: 0;
   box-sizing: border-box;
+  display: inline-block;
 
-  animation: shell-loader-spin 500ms linear infinite;
+  animation: shell-loader-spin 700ms ease infinite;
 }
 
 @keyframes shell-loader-spin {

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

@@ -4,19 +4,31 @@ import classnames from 'classnames';
 const styles = require('./shell-loader.less');
 
 interface ShellLoaderProps {
-  size: number;
+  className: string;
+  size?: string;
 }
 
 export default class ShellLoader extends Component<ShellLoaderProps> {
+  static defaultProps = {
+    className: '',
+    size: '12px'
+  };
+
   render(): JSX.Element {
-    const { size } = this.props;
+    const {
+      className,
+      size
+    } = this.props;
 
     return (
       <div
-        className={classnames(styles['shell-loader'])}
+        className={classnames(
+          className,
+          styles['shell-loader']
+        )}
         style={{
-          height: `${size}px`,
-          width: `${size}px`
+          width: size,
+          height: size
         }}
       />
     );

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

@@ -17,6 +17,8 @@ const wait: (ms?: number) => Promise<void> = (ms = 10) => {
 describe('<Shell />', () => {
   let onOutputChangedSpy;
   let onHistoryChangedSpy;
+  let onOperationStartedSpy;
+  let onOperationEndSpy;
   let fakeRuntime;
   let wrapper: ShallowWrapper | ReactWrapper;
   let scrollIntoView;
@@ -40,11 +42,16 @@ describe('<Shell />', () => {
 
     onOutputChangedSpy = sinon.spy();
     onHistoryChangedSpy = sinon.spy();
+    onOperationStartedSpy = sinon.spy();
+    onOperationEndSpy = sinon.spy();
 
     wrapper = shallow(<Shell
       runtime={fakeRuntime}
       onOutputChanged={onOutputChangedSpy}
-      onHistoryChanged={onHistoryChangedSpy} />);
+      onHistoryChanged={onHistoryChangedSpy}
+      onOperationStarted={onOperationStartedSpy}
+      onOperationEnd={onOperationEndSpy}
+    />);
   });
 
   afterEach(() => {
@@ -215,6 +222,14 @@ describe('<Shell />', () => {
       await onInput('db.createUser()');
       expect(wrapper.state('history')).to.deep.equal([]);
     });
+
+    it('calls onOperationStarted', async() => {
+      expect(onOperationStartedSpy).to.have.been.calledOnce;
+    });
+
+    it('calls onOperationEnd', async() => {
+      expect(onOperationEndSpy).to.have.been.calledOnce;
+    });
   });
 
   context('when empty input is entered', () => {
@@ -316,6 +331,10 @@ describe('<Shell />', () => {
     it('calls onHistoryChanged', () => {
       expect(onHistoryChangedSpy).to.have.been.calledOnceWith(['some code']);
     });
+
+    it('calls onOperationEnd', async() => {
+      expect(onOperationEndSpy).to.have.been.calledOnce;
+    });
   });
 
   it('scrolls the container to the bottom each time the output is updated', () => {

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

@@ -40,6 +40,14 @@ interface ShellProps {
    */
   maxHistoryLength: number;
 
+  /* A function called when an operation has begun.
+   */
+  onOperationStarted: () => void;
+
+  /* A function called when an operation has completed (both error and success).
+   */
+  onOperationEnd: () => void;
+
   /* An array of entries to be displayed in the output area.
    *
    * Can be used to restore the output between sessions, or to setup
@@ -68,16 +76,16 @@ interface ShellState {
   shellPrompt: string;
 }
 
-const noop = (): void => {
-  //
-};
+const noop = (): void => { /* */ };
 
 /**
  * The browser-repl Shell component
  */
 export class Shell extends Component<ShellProps, ShellState> {
   static defaultProps = {
     onHistoryChanged: noop,
+    onOperationStarted: noop,
+    onOperationEnd: noop,
     onOutputChanged: noop,
     maxOutputLength: 1000,
     maxHistoryLength: 1000,
@@ -114,6 +122,8 @@ export class Shell extends Component<ShellProps, ShellState> {
     let outputLine: ShellOutputEntry;
 
     try {
+      this.props.onOperationStarted();
+
       this.props.runtime.setEvaluationListener(this);
       const result = await this.props.runtime.evaluate(code);
       outputLine = {
@@ -128,6 +138,7 @@ export class Shell extends Component<ShellProps, ShellState> {
       };
     } finally {
       await this.updateShellPrompt();
+      this.props.onOperationEnd();
     }
 
     return outputLine;

packages/browser-repl/src/index.tsx

@@ -1,2 +1,5 @@
+import ShellLoader from './components/shell-loader';
+
 export { Shell } from './components/shell';
 export { IframeRuntime } from './iframe-runtime';
+export { ShellLoader };

packages/compass-shell/src/components/compass-shell/compass-shell.jsx

@@ -45,7 +45,8 @@ export class CompassShell extends Component {
 
     this.state = {
       initialHistory: this.props.historyStorage ? null : [],
-      isExpanded: !!this.props.isExpanded
+      isExpanded: !!this.props.isExpanded,
+      isOperationInProgress: false
     };
   }
 
@@ -57,6 +58,18 @@ export class CompassShell extends Component {
     this.shellOutput = output;
   }
 
+  onOperationStarted = () => {
+    this.setState({
+      isOperationInProgress: true
+    });
+  }
+
+  onOperationEnd = () => {
+    this.setState({
+      isOperationInProgress: false
+    });
+  }
+
   lastOpenHeight = defaultShellHeightOpened;
   resizableRef = null;
 
@@ -123,7 +136,8 @@ export class CompassShell extends Component {
    */
   render() {
     const {
-      isExpanded
+      isExpanded,
+      isOperationInProgress
     } = this.state;
 
     if (!this.props.runtime || !this.state.initialHistory) {
@@ -154,20 +168,25 @@ export class CompassShell extends Component {
           <ShellHeader
             isExpanded={isExpanded}
             onShellToggleClicked={this.shellToggleClicked}
+            isOperationInProgress={isOperationInProgress}
           />
-          {isExpanded && (
-            <div
-              className={classnames(styles['compass-shell-shell-container'])}
-            >
-              <Shell
-                runtime={this.props.runtime}
-                initialHistory={this.state.initialHistory}
-                initialOutput={this.shellOutput}
-                onHistoryChanged={this.saveHistory}
-                onOutputChanged={this.onShellOutputChanged}
-              />
-            </div>
-          )}
+          <div
+            className={classnames(
+              styles['compass-shell-shell-container'], {
+                [styles['compass-shell-shell-container-visible']]: isExpanded
+              }
+            )}
+          >
+            <Shell
+              runtime={this.props.runtime}
+              initialHistory={this.state.initialHistory}
+              initialOutput={this.shellOutput}
+              onHistoryChanged={this.saveHistory}
+              onOutputChanged={this.onShellOutputChanged}
+              onOperationStarted={this.onOperationStarted}
+              onOperationEnd={this.onOperationEnd}
+            />
+          </div>
         </Resizable>
       </Fragment>
     );

packages/compass-shell/src/components/compass-shell/compass-shell.less

@@ -12,8 +12,12 @@
 
   &-shell-container {
     flex-grow: 1;
-    display: flex;
+    display: none;
     overflow: auto;
     border-top: 1px solid @leafygreen__gray--dark-2;
+
+    &-visible {
+      display: flex;
+    }
   }
 }

packages/compass-shell/src/components/compass-shell/compass-shell.spec.js

@@ -8,6 +8,7 @@ import { CompassShell } from './compass-shell';
 import ResizeHandle from '../resize-handle';
 import ShellHeader from '../shell-header';
 import InfoModal from '../info-modal';
+import styles from './compass-shell.less';
 
 function updateAndWaitAsync(wrapper) {
   wrapper.update();
@@ -16,10 +17,13 @@ function updateAndWaitAsync(wrapper) {
 
 describe('CompassShell', () => {
   context('when the prop isExpanded is false', () => {
-    it('does not render a shell', () => {
+    it('has the shell display none', () => {
       const fakeRuntime = {};
-      const wrapper = shallow(<CompassShell runtime={fakeRuntime} isExpanded={false} />);
-      expect(wrapper.find(Shell).exists()).to.equal(false);
+      const wrapper = shallow(<CompassShell
+        runtime={fakeRuntime}
+        isExpanded={false}
+      />);
+      expect(wrapper.find(`.${styles['compass-shell-shell-container-visible']}`).exists()).to.equal(false);
     });
 
     context('when is it expanded', () => {
@@ -59,6 +63,7 @@ describe('CompassShell', () => {
         const fakeRuntime = {};
         const wrapper = shallow(<CompassShell runtime={fakeRuntime} isExpanded />);
         expect(wrapper.find(Shell).prop('runtime')).to.equal(fakeRuntime);
+        expect(wrapper.find(`.${styles['compass-shell-shell-container-visible']}`).exists()).to.equal(true);
       });
 
       it('renders the ShellHeader component', () => {