DEVPROD-946 Update BuildVariantSelector to trim search terms (evergre…

…en-ci#2266)

src/pages/taskHistory/BuildVariantSelector.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useState } from "react";
 import { useQuery } from "@apollo/client";
 import styled from "@emotion/styled";
 import { Combobox, ComboboxOption } from "@leafygreen-ui/combobox";
@@ -24,7 +25,7 @@ const BuildVariantSelector: React.FC<BuildVariantSelectorProps> = ({
     HistoryQueryParams.VisibleColumns,
     [],
   );
-
+  const [filteredOptions, setFilteredOptions] = useState<string[]>([]);
   const { data, loading } = useQuery<
     BuildVariantsForTaskNameQuery,
     BuildVariantsForTaskNameQueryVariables
@@ -35,16 +36,39 @@ const BuildVariantSelector: React.FC<BuildVariantSelectorProps> = ({
     },
   });
 
+  /**
+   * `onChange` is a callback function that is called when the user selects a build variant
+   * @param selectedBuildVariants - an array of build variants that the user has selected
+   */
   const onChange = (selectedBuildVariants: string[]) => {
     sendEvent({
       name: "Filter by build variant",
     });
 
     setVisibleColumns(selectedBuildVariants);
   };
-
   const { buildVariantsForTaskName } = data || {};
 
+  /**
+   * `onFilter` is a callback function that is called when the user types in the search bar
+   */
+  const onFilter = useCallback(
+    (value: string) => {
+      setFilteredOptions(
+        (buildVariantsForTaskName || [])
+          .filter(({ buildVariant, displayName }) => {
+            const trimmedValue = value.toLowerCase().trim();
+            return (
+              buildVariant.toLowerCase().includes(trimmedValue) ||
+              displayName.toLowerCase().includes(trimmedValue)
+            );
+          })
+          .map((option) => option.buildVariant) || [],
+      );
+    },
+    [buildVariantsForTaskName],
+  );
+
   return (
     <Container>
       <Combobox
@@ -56,6 +80,8 @@ const BuildVariantSelector: React.FC<BuildVariantSelectorProps> = ({
         onChange={onChange}
         disabled={loading}
         overflow="scroll-x"
+        onFilter={onFilter}
+        filteredOptions={filteredOptions}
       >
         {buildVariantsForTaskName?.map((option) => (
           <ComboboxOption