input editor at bottom

Author: mabaasit

packages/browser-repl/src/components/shell-output.spec.tsx renamed to packages/browser-repl/src/components/shell-content.spec.tsx

@@ -3,23 +3,22 @@ import { expect } from '../../testing/chai';
 import { screen, render, waitFor, cleanup } from '@testing-library/react';
 
 import type { ShellOutputEntry } from './shell-output-line';
-import { ShellOutput } from './shell-output';
+import { ShellContent } from './shell-content';
 
-function WrappedShellOutput(props: { output: ShellOutputEntry[] }) {
+function WrappedShellOutput(props: Partial<React.ComponentProps<typeof ShellContent>>) {
   return (
     <div style={{ height: '200px' }}>
-      <ShellOutput
-        output={props.output}
+      <ShellContent
+        output={[]}
+        InputPrompt={<div />}
         __TEST_LIST_HEIGHT={200}
-        setInnerContainerRef={() => {
-          /** */
-        }}
+        {...props}
       />
     </div>
   );
 }
 
-describe('<ShellOutput />', function () {
+describe('<ShellContent />', function () {
   beforeEach(cleanup);
 
   it('renders no output lines if none are passed', function () {
@@ -59,4 +58,9 @@ describe('<ShellOutput />', function () {
       expect(screen.getByText(/new line/i)).to.exist;
     });
   });
+
+  it('renders input prompt', function () {
+    render(<WrappedShellOutput InputPrompt={<p>Enter here</p>} />);
+    expect(screen.getByText(/enter here/i)).to.exist;
+  });
 });

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

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ShellOutputLine, type ShellOutputEntry } from './shell-output-line';
+import {
+  rafraf,
+  VirtualList,
+  type VirtualListRef,
+} from '@mongodb-js/compass-components';
+
+export const ShellContent = ({
+  output,
+  InputPrompt,
+  __TEST_LIST_HEIGHT,
+}: {
+  output: ShellOutputEntry[];
+  InputPrompt: JSX.Element;
+  __TEST_LIST_HEIGHT?: number;
+}) => {
+  const [inputEditorHeight, setInputEditorHeight] = useState(24);
+  const shellInputContainerRef = useRef<HTMLDivElement>(null);
+
+  const listRef: VirtualListRef = useRef();
+
+  useEffect(() => {
+    const lastIndex = output.length - 1;
+    listRef.current?.resetAfterIndex(lastIndex);
+    const abortFn = rafraf(() => {
+      listRef.current?.scrollToItem(lastIndex, 'end');
+    });
+    return abortFn;
+  }, [output.length]);
+
+  useEffect(() => {
+    if (!shellInputContainerRef.current) {
+      return;
+    }
+    const observer = new ResizeObserver(([input]) => {
+      setInputEditorHeight(input.contentRect.height);
+    });
+    observer.observe(shellInputContainerRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <>
+      <div style={{ height: `calc(100% - ${inputEditorHeight}px)` }}>
+        <VirtualList
+          dataTestId="shell-output-virtual-list"
+          items={output}
+          overScanCount={10}
+          listRef={listRef}
+          renderItem={(item, ref) => (
+            <div ref={ref} data-testid="shell-output-line">
+              <ShellOutputLine entry={item} />
+            </div>
+          )}
+          estimateItemInitialHeight={() => 0}
+          __TEST_LIST_HEIGHT={__TEST_LIST_HEIGHT}
+        />
+      </div>
+      <div ref={shellInputContainerRef}>{InputPrompt}</div>
+    </>
+  );
+};

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

@@ -24,8 +24,8 @@ import { changeHistory } from '@mongosh/history';
 import type { WorkerRuntime } from '@mongosh/node-runtime-worker-thread';
 import { PasswordPrompt } from './password-prompt';
 import { ShellInput } from './shell-input';
-import type { ShellOutputEntry } from './shell-output';
-import { ShellOutput } from './shell-output';
+import { ShellContent } from './shell-content';
+import type { ShellOutputEntry } from './shell-output-line';
 
 const shellContainer = css({
   fontSize: '13px',
@@ -206,7 +206,6 @@ const _Shell: ForwardRefRenderFunction<EditorRef | null, ShellProps> = (
   const darkMode = useDarkMode();
 
   const editorRef = useRef<EditorRef | null>(null);
-  const shellInputContainerRef = useRef<HTMLDivElement>(null);
   const initialEvaluateRef = useRef(initialEvaluate);
   const outputRef = useRef(output);
   const historyRef = useRef(history);
@@ -464,42 +463,6 @@ const _Shell: ForwardRefRenderFunction<EditorRef | null, ShellProps> = (
     }
   }, [onInput, updateShellPrompt]);
 
-  const listInnerContainerRef = useRef<HTMLDivElement | null>(null);
-  const setInnerContainerRef = useCallback((ref: HTMLDivElement) => {
-    listInnerContainerRef.current = ref;
-  }, []);
-
-  const [virtualListInnerHeight, setVirtualListInnerHeight] = useState(0);
-  const [inputEditorHeight, setInputEditorHeight] = useState(0);
-
-  useEffect(() => {
-    if (!listInnerContainerRef.current) {
-      return;
-    }
-    const observer = new ResizeObserver(([list]) => {
-      requestAnimationFrame(() => {
-        setVirtualListInnerHeight(list.contentRect.height);
-      });
-    });
-    observer.observe(listInnerContainerRef.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, [listInnerContainerRef.current]);
-
-  useEffect(() => {
-    if (!shellInputContainerRef.current) {
-      return;
-    }
-    const observer = new ResizeObserver(([input]) => {
-      setInputEditorHeight(input.contentRect.height);
-    });
-    observer.observe(shellInputContainerRef.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
   /* eslint-disable jsx-a11y/no-static-element-interactions */
   /* eslint-disable jsx-a11y/click-events-have-key-events */
   return (
@@ -512,49 +475,31 @@ const _Shell: ForwardRefRenderFunction<EditorRef | null, ShellProps> = (
       )}
       onClick={onShellClicked}
     >
-      <div
-        style={{
-          // By default, we set the initial height to 1px so that the
-          // virtual list can render the items. Once we have content, we
-          // we will get the height of the list:
-          // - If the height of the list is smaller than the height of the
-          // container, we will set it to the height of the list.
-          // - If the height of the list is bigger than the height of the
-          // container, we will set it to the height of the container minus
-          // the height of the input editor.
-          height: `min(calc(100% - ${inputEditorHeight}px), ${Math.max(
-            (output ?? []).length > 0 ? virtualListInnerHeight : 1,
-            1
-          )}px)`,
-        }}
-      >
-        <ShellOutput
-          output={output ?? []}
-          setInnerContainerRef={setInnerContainerRef}
-        />
-      </div>
-      <div ref={shellInputContainerRef}>
-        {passwordPrompt ? (
-          <PasswordPrompt
-            onFinish={onFinishPasswordPrompt}
-            onCancel={onCancelPasswordPrompt}
-            prompt={passwordPrompt}
-          />
-        ) : (
-          <ShellInput
-            initialText={initialText}
-            onTextChange={onInputChanged}
-            prompt={shellPrompt}
-            autocompleter={runtime}
-            history={history}
-            onClearCommand={listener.onClearCommand}
-            onInput={onInput}
-            operationInProgress={isOperationInProgress}
-            editorRef={setEditorRef}
-            onSigInt={onSigInt}
-          />
-        )}
-      </div>
+      <ShellContent
+        output={output ?? []}
+        InputPrompt={
+          passwordPrompt ? (
+            <PasswordPrompt
+              onFinish={onFinishPasswordPrompt}
+              onCancel={onCancelPasswordPrompt}
+              prompt={passwordPrompt}
+            />
+          ) : (
+            <ShellInput
+              initialText={initialText}
+              onTextChange={onInputChanged}
+              prompt={shellPrompt}
+              autocompleter={runtime}
+              history={history}
+              onClearCommand={listener.onClearCommand}
+              onInput={onInput}
+              operationInProgress={isOperationInProgress}
+              editorRef={setEditorRef}
+              onSigInt={onSigInt}
+            />
+          )
+        }
+      />
     </div>
   );
   /* eslint-enable jsx-a11y/no-static-element-interactions */