use input outside list

Author: mabaasit

packages/browser-repl/src/components/password-prompt.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { Component } from 'react';
 import { css, fontFamilies, TextInput } from '@mongodb-js/compass-components';
 
 const passwordPrompt = css({
@@ -12,51 +12,45 @@ const passwordPropmtInputStyles = css({
   display: 'inline-block',
 });
 
-type PasswordPromptProps = {
-  onChange: (value: string) => void;
-  onFinish: (value: string) => void;
+interface PasswordPromptProps {
+  onFinish: (result: string) => void;
   onCancel: () => void;
   prompt: string;
-  password: string;
-};
+}
 
-export const PasswordPrompt = React.forwardRef<
-  HTMLInputElement,
-  PasswordPromptProps
->(function PasswordPrompt(
-  { prompt, password, onChange, onFinish, onCancel },
-  ref
-) {
-  const onKeyDown = useCallback(
-    (ev: React.KeyboardEvent<HTMLInputElement>) => {
-      switch (ev.key) {
-        case 'Enter':
-          onFinish((ev.target as HTMLInputElement).value);
-          break;
-        case 'Esc':
-        case 'Escape':
-          onCancel();
-          break;
-        default:
-          break;
-      }
-    },
-    [onCancel, onFinish]
-  );
-  return (
-    <label id="password-prompt-label" className={passwordPrompt}>
-      {prompt}:&nbsp;
-      <TextInput
-        ref={ref}
-        value={password}
-        data-testid="password-prompt"
-        aria-labelledby="password-prompt-label"
-        type="password"
-        onChange={(evt) => onChange(evt.currentTarget.value)}
-        onKeyDown={onKeyDown}
-        className={passwordPropmtInputStyles}
-        sizeVariant="xsmall"
-      ></TextInput>
-    </label>
-  );
-});
+export class PasswordPrompt extends Component<PasswordPromptProps> {
+  constructor(props: PasswordPromptProps) {
+    super(props);
+  }
+
+  onKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>): void => {
+    switch (ev.key) {
+      case 'Enter':
+        this.props.onFinish((ev.target as HTMLInputElement).value);
+        break;
+      case 'Esc':
+      case 'Escape':
+        this.props.onCancel();
+        break;
+      default:
+        break;
+    }
+  };
+
+  render(): JSX.Element {
+    return (
+      <label id="password-prompt-label" className={passwordPrompt}>
+        {this.props.prompt}:&nbsp;
+        <TextInput
+          data-testid="password-prompt"
+          aria-labelledby="password-prompt-label"
+          type="password"
+          onKeyDown={this.onKeyDown}
+          className={passwordPropmtInputStyles}
+          sizeVariant="xsmall"
+          autoFocus
+        ></TextInput>
+      </label>
+    );
+  }
+}

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   VirtualList,
   type VirtualListRef,
@@ -8,62 +8,34 @@ export type { ShellOutputEntry } from './shell-output-line';
 
 type ShellIOListProps = {
   output: ShellOutputEntry[];
-  renderInputPrompt: () => JSX.Element;
-  setScrollRef: (ref: HTMLDivElement) => void;
-  __TEST_OVERSCAN_COUNT?: number;
-  __TEST_LIST_HEIGHT?: number;
+  setInnerContainerRef: (ref: HTMLDivElement) => void;
 };
 
 export const ShellOutput = ({
   output,
-  renderInputPrompt,
-  setScrollRef,
-  __TEST_OVERSCAN_COUNT,
-  __TEST_LIST_HEIGHT,
+  setInnerContainerRef,
 }: ShellIOListProps) => {
   const listRef: VirtualListRef = useRef();
 
   useEffect(() => {
-    if (!listRef.current) {
-      return;
-    }
-    (window as any).listRef = listRef.current;
-    listRef.current.resetAfterIndex(0);
-    const timeout = setTimeout(() => {
-      // After output changes, scroll to the end (which is
-      // prompt input)
-      listRef.current.scrollToItem(output.length, 'end');
-    }, 100);
-    return () => clearTimeout(timeout);
-  }, [output, listRef]);
-
-  // Adding prompt to the input list so that its also rendered
-  // by the virtual list
-  const items = useMemo(() => [...output, { type: 'inputPrompt' }], [output]);
+    listRef.current?.resetAfterIndex(0);
+    listRef.current?.scrollToItem(output.length - 1, 'end');
+  }, [output]);
 
   return (
     <VirtualList
       dataTestId="shell-output-virtual-list"
-      items={items}
-      overScanCount={__TEST_OVERSCAN_COUNT ?? 1}
+      items={output}
+      overScanCount={5}
       listRef={listRef}
-      scrollableContainerRef={setScrollRef}
-      renderItem={(item, ref) => {
-        if (item.type === 'inputPrompt') {
-          return (
-            <div ref={ref} data-testid="shell-input-prompt">
-              {renderInputPrompt()}
-            </div>
-          );
-        }
-        return (
-          <div ref={ref} data-testid="shell-output-line">
-            <ShellOutputLine entry={item as ShellOutputEntry} />
-          </div>
-        );
-      }}
+      // TODO: Depends on adding this in compass components
+      {...{ setInnerContainerRef }}
+      renderItem={(item, ref) => (
+        <div ref={ref} data-testid="shell-output-line">
+          <ShellOutputLine entry={item} />
+        </div>
+      )}
       estimateItemInitialHeight={() => 24}
-      __TEST_LIST_HEIGHT={__TEST_LIST_HEIGHT}
     />
   );
 };