Add CommitInfoTextField

Summary: Create a new field component for one-line fields which have typeahead support. This differs from the previous implementation, which was a multi-line thing

Reviewed By: quark-zju

Differential Revision: D45627739

fbshipit-source-id: 38294ac965ca2ec4e07b7aa23141e833b11c9951

addons/isl/src/CommitInfoView/CommitInfoField.tsx

@@ -11,6 +11,7 @@ import type {ReactNode} from 'react';
 import {T} from '../i18n';
 import {SeeMoreContainer} from './SeeMoreContainer';
 import {CommitInfoTextArea} from './TextArea';
+import {CommitInfoTextField} from './TextField';
 import {Section, SmallCapsTitle} from './utils';
 import {Fragment} from 'react';
 import {Icon} from 'shared/Icon';
@@ -79,13 +80,22 @@ export function CommitInfoField({
           <Icon icon={field.icon} />
           {field.key}
         </SmallCapsTitle>
-        <CommitInfoTextArea
-          kind={field.type}
-          name={field.key}
-          autoFocus={autofocus ?? false}
-          editedMessage={editedFieldContent}
-          setEditedCommitMessage={setEditedField}
-        />
+        {field.type === 'field' ? (
+          <CommitInfoTextField
+            name={field.key}
+            autoFocus={autofocus ?? false}
+            editedMessage={editedFieldContent}
+            setEditedCommitMessage={setEditedField}
+          />
+        ) : (
+          <CommitInfoTextArea
+            kind={field.type}
+            name={field.key}
+            autoFocus={autofocus ?? false}
+            editedMessage={editedFieldContent}
+            setEditedCommitMessage={setEditedField}
+          />
+        )}
       </Section>
     ) : (
       <Section>

addons/isl/src/CommitInfoView/TextField.tsx

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {getInnerTextareaForVSCodeTextArea} from './utils';
+import {VSCodeTextField} from '@vscode/webview-ui-toolkit/react';
+import {useRef, useEffect} from 'react';
+
+export function CommitInfoTextField({
+  name,
+  autoFocus,
+  editedMessage,
+  setEditedCommitMessage,
+}: {
+  name: string;
+  autoFocus: boolean;
+  editedMessage: string;
+  setEditedCommitMessage: (fieldValue: string) => unknown;
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current && autoFocus) {
+      const inner = getInnerTextareaForVSCodeTextArea(ref.current as HTMLElement);
+      inner?.focus();
+    }
+  }, [autoFocus, ref]);
+
+  const onInput = (event: {target: EventTarget | null}) => {
+    setEditedCommitMessage((event?.target as HTMLInputElement)?.value);
+  };
+
+  const fieldKey = name.toLowerCase().replace(/\s/g, '-');
+
+  return (
+    <div className="commit-info-field">
+      <VSCodeTextField
+        ref={ref}
+        value={editedMessage}
+        data-testid={`commit-info-${fieldKey}-field`}
+        onInput={onInput}
+      />
+    </div>
+  );
+}