chore(compass-shell): convert to typescript COMPASS-7425 (#5079)

Author: addaleax

packages/compass-shell/package.json

@@ -87,6 +87,7 @@
     "eslint": "^7.25.0",
     "hadron-app-registry": "^9.0.14",
     "mocha": "^10.2.0",
+    "mongodb-data-service": "^22.15.0",
     "nyc": "^15.1.0",
     "prop-types": "^15.7.2",
     "react-dom": "^17.0.2",

packages/compass-shell/src/components/compass-shell/compass-shell.spec.jsx renamed to packages/compass-shell/src/components/compass-shell/compass-shell.spec.tsx

@@ -17,7 +17,7 @@ function updateAndWaitAsync(wrapper) {
 const fakeRuntime = {
   evaluate: sinon.fake.returns({ printable: 'some result' }),
   setEvaluationListener: () => {},
-};
+} as any;
 
 describe('CompassShell', function () {
   context('when rendered', function () {
@@ -65,7 +65,7 @@ describe('CompassShell', function () {
   context('when rendered expanded', function () {
     context('when runtime property is not present', function () {
       it('does not render a shell if runtime is null', function () {
-        const wrapper = mount(<CompassShell runtime={null} />);
+        const wrapper = mount(<CompassShell runtime={null} enableShell />);
         try {
           wrapper.setState({ height: 300 });
           wrapper.update();
@@ -112,11 +112,11 @@ describe('CompassShell', function () {
       });
 
       it('renders a Resizable component', function () {
-        expect(wrapper.find(ResizeHandle)).to.be.present();
+        expect(wrapper.find(ResizeHandle)).to.exist;
       });
 
       it('renders the info modal component', function () {
-        expect(wrapper.find(ShellInfoModal)).to.be.present();
+        expect(wrapper.find(ShellInfoModal)).to.exist;
       });
 
       it('renders the Shell with an output change handler', function () {
@@ -134,6 +134,7 @@ describe('CompassShell', function () {
               {
                 type: 'output',
                 value: 'pineapple',
+                format: 'output',
               },
             ]}
             enableShell
@@ -147,6 +148,7 @@ describe('CompassShell', function () {
           {
             type: 'output',
             value: 'pineapple',
+            format: 'output',
           },
         ]);
 
@@ -157,7 +159,7 @@ describe('CompassShell', function () {
     context('when historyStorage is not present', function () {
       it('passes an empty history to the Shell', function () {
         const wrapper = shallow(
-          <CompassShell runtime={fakeRuntime} isExpanded enableShell />
+          <CompassShell runtime={fakeRuntime} enableShell />
         );
 
         expect(wrapper.find(Shell).prop('initialHistory')).to.deep.equal([]);
@@ -233,9 +235,8 @@ describe('CompassShell', function () {
 
       const wrapper = shallow(
         <CompassShell
-          runtime={{}}
+          runtime={{} as any}
           historyStorage={fakeStorage}
-          isExpanded
           enableShell
         />
       );
@@ -252,9 +253,8 @@ describe('CompassShell', function () {
     it('saves the history when history changes', async function () {
       const wrapper = shallow(
         <CompassShell
-          runtime={{}}
+          runtime={{} as any}
           historyStorage={fakeStorage}
-          isExpanded
           enableShell
         />
       );
@@ -271,19 +271,21 @@ describe('CompassShell', function () {
   });
 
   it('sets shellOutput on onShellOutputChanged', function () {
-    const shell = new CompassShell({ isExpanded: true });
+    const shell = new CompassShell({} as any);
 
     shell.onShellOutputChanged([
       {
         type: 'output',
         value: 'some output',
+        format: 'output',
       },
     ]);
 
     expect(shell.shellOutput).to.deep.equal([
       {
         type: 'output',
         value: 'some output',
+        format: 'output',
       },
     ]);
   });

packages/compass-shell/src/components/compass-shell/compass-shell.jsx renamed to packages/compass-shell/src/components/compass-shell/compass-shell.tsx

@@ -2,9 +2,12 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withPreferences } from 'compass-preferences-model';
+import type { Shell as ShellType } from '@mongosh/browser-repl';
 
 // The browser-repl package.json defines exports['.'].require but not .module, hence require() instead of import
-const { Shell } = require('@mongosh/browser-repl');
+const { Shell } =
+  // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/consistent-type-imports
+  require('@mongosh/browser-repl') as typeof import('@mongosh/browser-repl');
 import {
   ResizeHandle,
   ResizeDirection,
@@ -16,6 +19,9 @@ import {
 
 import ShellInfoModal from '../shell-info-modal';
 import ShellHeader from '../shell-header';
+import type { WorkerRuntime } from '@mongosh/node-runtime-worker-thread';
+import type { HistoryStorage } from '../../modules/history-storage';
+import type { RootState } from '../../modules';
 
 const compassShellStyles = css(
   {
@@ -50,13 +56,34 @@ function getMaxShellHeight() {
 
 // Apply bounds to the shell height when resizing to ensure it's always
 // visible and usable to the user.
-function boundShellHeight(attemptedHeight) {
+function boundShellHeight(attemptedHeight: number): number {
   const maxHeight = getMaxShellHeight();
 
   return Math.min(maxHeight, Math.max(shellMinHeightOpened, attemptedHeight));
 }
 
-export class CompassShell extends Component {
+export interface CompassShellProps {
+  emitShellPluginOpened?: () => void;
+  runtime: WorkerRuntime | null;
+  shellOutput?: ShellOutputEntry[];
+  historyStorage?: HistoryStorage;
+  enableShell: boolean;
+}
+
+interface CompassShellState {
+  height: number;
+  prevHeight: number;
+  initialHistory: string[] | null;
+  isOperationInProgress: boolean;
+  showInfoModal: boolean;
+}
+
+type ShellOutputEntry = ShellType['state']['output'][number];
+
+export class CompassShell extends Component<
+  CompassShellProps,
+  CompassShellState
+> {
   static propTypes = {
     emitShellPluginOpened: PropTypes.func,
     runtime: PropTypes.object,
@@ -65,15 +92,18 @@ export class CompassShell extends Component {
     enableShell: PropTypes.bool,
   };
 
+  shellRef = React.createRef<ShellType>();
+  shellOutput: readonly ShellOutputEntry[];
+
   static defaultProps = {
-    emitShellPluginOpened: () => {},
+    emitShellPluginOpened: () => {
+      /* ignore */
+    },
     runtime: null,
   };
-  constructor(props) {
+  constructor(props: CompassShellProps) {
     super(props);
 
-    this.shellRef = React.createRef();
-
     this.shellOutput = this.props.shellOutput || [];
 
     this.state = {
@@ -86,25 +116,28 @@ export class CompassShell extends Component {
   }
 
   componentDidMount() {
-    this.loadHistory();
+    void this.loadHistory();
     window.addEventListener('beforeunload', this.terminateRuntime);
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(
+    prevProps: CompassShellProps,
+    prevState: CompassShellState
+  ) {
     const { height } = this.state;
     if (
       prevState.height < shellMinHeightOpened &&
       height > shellMinHeightOpened
     ) {
-      this.props.emitShellPluginOpened();
+      this.props.emitShellPluginOpened?.();
     }
   }
 
   componentWillUnmount() {
     window.removeEventListener('beforeunload', this.terminateRuntime);
   }
 
-  onShellOutputChanged = (output) => {
+  onShellOutputChanged = (output: readonly ShellOutputEntry[]) => {
     this.shellOutput = output;
   };
 
@@ -122,21 +155,23 @@ export class CompassShell extends Component {
 
   terminateRuntime = () => {
     if (this.props.runtime) {
-      this.props.runtime.terminate();
+      void this.props.runtime.terminate();
     }
   };
 
-  saveHistory = async (history) => {
-    if (!this.props.historyStorage) {
-      return;
-    }
-
-    try {
-      await this.props.historyStorage.save(history);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
-    }
+  saveHistory = (history: readonly string[]) => {
+    void (async () => {
+      if (!this.props.historyStorage) {
+        return;
+      }
+
+      try {
+        await this.props.historyStorage.save([...history]);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+    })();
   };
 
   loadHistory = async () => {
@@ -158,19 +193,19 @@ export class CompassShell extends Component {
     }
   };
 
-  updateHeight(height) {
-    this.setState(
-      height > shellMinHeightOpened
-        ? {
-            height,
-            // Store the previous height to use when toggling open/close
-            // when we resize while the shell is expanded.
-            prevHeight: height,
-          }
-        : {
-            height,
-          }
-    );
+  updateHeight(height: number) {
+    if (height > shellMinHeightOpened) {
+      this.setState({
+        height,
+        // Store the previous height to use when toggling open/close
+        // when we resize while the shell is expanded.
+        prevHeight: height,
+      });
+    } else {
+      this.setState({
+        height,
+      });
+    }
   }
 
   hideInfoModal() {
@@ -179,7 +214,8 @@ export class CompassShell extends Component {
 
   focusEditor() {
     if (this.shellRef.current && window.getSelection()?.type !== 'Range') {
-      this.shellRef.current.focusEditor();
+      (this.shellRef.current as any) /* private ... */
+        .focusEditor();
     }
   }
 
@@ -266,7 +302,7 @@ export class CompassShell extends Component {
   }
 }
 
-export default connect((state) => ({
+export default connect((state: RootState) => ({
   emitShellPluginOpened: () => {
     if (state.appRegistry && state.appRegistry.globalAppRegistry) {
       state.appRegistry.globalAppRegistry.emit('compass:compass-shell:opened');

packages/compass-shell/src/components/compass-shell/index.js renamed to packages/compass-shell/src/components/compass-shell/index.ts

@@ -17,6 +17,7 @@ describe('ShellHeader', function () {
     beforeEach(function () {
       wrapper = mount(
         <ShellHeader
+          darkMode={undefined}
           isExpanded
           isOperationInProgress={false}
           onShellToggleClicked={() => {}}
@@ -52,6 +53,7 @@ describe('ShellHeader', function () {
     beforeEach(function () {
       wrapper = mount(
         <ShellHeader
+          darkMode={undefined}
           isExpanded={false}
           isOperationInProgress={false}
           onShellToggleClicked={() => {}}
@@ -87,6 +89,7 @@ describe('ShellHeader', function () {
       it('renders the loader', function () {
         const wrapper = mount(
           <ShellHeader
+            darkMode={undefined}
             isExpanded={false}
             isOperationInProgress
             onShellToggleClicked={() => {}}
@@ -101,9 +104,10 @@ describe('ShellHeader', function () {
   );
 
   context('when rendered', function () {
-    it('has a button to toggle the container', async function () {
+    it('has a button to toggle the container', function () {
       const wrapper = shallow(
         <ShellHeader
+          darkMode={undefined}
           isExpanded={false}
           isOperationInProgress={false}
           onShellToggleClicked={() => {}}
@@ -112,9 +116,7 @@ describe('ShellHeader', function () {
       );
 
       expect(wrapper.find('button').exists()).to.equal(true);
-      expect(
-        wrapper.find('[data-testid="shell-expand-button"]')
-      ).to.be.present();
+      expect(wrapper.find('[data-testid="shell-expand-button"]')).to.exist;
 
       wrapper.unmount();
     });