Rename autocomplete to typeahead

Summary:
"autocomplete" means a single *inline* suggestion, like ios / github copilot / gmail

"typeahead" means a dropdown list with several results as you type, which is what we want

Reviewed By: quark-zju

Differential Revision: D45627729

fbshipit-source-id: 76ac37116db7ccf3d0e584861163ab9d9e6e25d5

addons/isl/src/CommitInfoView/CommitInfoView.css

@@ -263,7 +263,7 @@
   margin: 0;
 }
 
-.commit-info-field-with-autocomplete {
+.commit-info-field-with-typeahead {
   flex-grow: 1;
   min-width: 30px;
   position: relative;
@@ -282,7 +282,7 @@
   min-height: calc(var(--token-height) - 2px);
 }
 
-.commit-info-tokenized-field .autocomplete-suggestions {
+.commit-info-tokenized-field .typeahead-suggestions {
   position: absolute;
   top: calc(100% + var(--halfpad));
   max-width: 200px;
@@ -295,7 +295,7 @@
   gap: var(--halfpad);
 }
 
-.commit-info-tokenized-field .autocomplete-suggestions .suggestion {
+.commit-info-tokenized-field .typeahead-suggestions .suggestion {
   display: flex;
   flex-direction: row;
   gap: var(--pad);

addons/isl/src/CommitInfoView/TextField.tsx

@@ -44,15 +44,14 @@ export function CommitInfoTextField({
 
   const [tokens, remaining] = extractTokens(editedMessage);
 
-  const [autocompleteSuggestions, setAutocompleteSuggestions] =
-    useState<AutocompleteSuggestions>(undefined);
+  const [typeaheadSuggestions, setTypeaheadSuggestions] = useState<TypeaheadSuggestions>(undefined);
 
   const onInput = (event: {target: EventTarget | null}) => {
     const newValue = (event?.target as HTMLInputElement)?.value;
     setEditedCommitMessage(tokensToString(tokens, newValue));
-    setAutocompleteSuggestions({type: 'loading'});
+    setTypeaheadSuggestions({type: 'loading'});
     fetchNewSuggestions(newValue).then(values =>
-      setAutocompleteSuggestions({type: 'success', values}),
+      setTypeaheadSuggestions({type: 'success', values}),
     );
   };
 
@@ -70,20 +69,20 @@ export function CommitInfoTextField({
             </VSCodeButton>
           </span>
         ))}
-      <div className="commit-info-field-with-autocomplete">
+      <div className="commit-info-field-with-typeahead">
         <VSCodeTextField
           ref={ref}
           value={remaining}
           data-testid={`commit-info-${fieldKey}-field`}
           onInput={onInput}
         />
-        {autocompleteSuggestions?.type === 'loading' ||
-        (autocompleteSuggestions?.values?.length ?? 0) > 0 ? (
-          <div className="autocomplete-suggestions">
-            {autocompleteSuggestions?.type === 'loading' ? (
+        {typeaheadSuggestions?.type === 'loading' ||
+        (typeaheadSuggestions?.values?.length ?? 0) > 0 ? (
+          <div className="typeahead-suggestions">
+            {typeaheadSuggestions?.type === 'loading' ? (
               <Icon icon="loading" />
             ) : (
-              autocompleteSuggestions?.values.map(suggestion => (
+              typeaheadSuggestions?.values.map(suggestion => (
                 <span key={suggestion.value} className="suggestion">
                   <span>{suggestion.display}</span>
                   <Subtle>{suggestion.value}</Subtle>
@@ -97,13 +96,13 @@ export function CommitInfoTextField({
   );
 }
 
-type AutocompleteSuggestions =
+type TypeaheadSuggestions =
   | {
       type: 'loading';
     }
-  | {type: 'success'; values: Array<AutocompleteSuggestion>}
+  | {type: 'success'; values: Array<TypeaheadSuggestion>}
   | undefined;
-type AutocompleteSuggestion = {
+type TypeaheadSuggestion = {
   /** The display text of the suggestion */
   display: string;
   /**
@@ -115,6 +114,6 @@ type AutocompleteSuggestion = {
 };
 
 // eslint-disable-next-line require-await
-async function fetchNewSuggestions(_text: string): Promise<Array<AutocompleteSuggestion>> {
+async function fetchNewSuggestions(_text: string): Promise<Array<TypeaheadSuggestion>> {
   return [];
 }

addons/isl/src/CommitInfoView/types.ts

@@ -50,6 +50,6 @@ export type FieldConfig = {
     }
   | {
       type: 'field';
-      autocompleteType: 'user' | 'task' | 'tag' | 'diff';
+      typeaheadType: 'user' | 'task' | 'tag' | 'diff';
     }
 );