diff --git a/src/pages/taskHistory/BuildVariantSelector.tsx b/src/pages/taskHistory/BuildVariantSelector.tsx index 4828492fc7..6ec41d4b0f 100644 --- a/src/pages/taskHistory/BuildVariantSelector.tsx +++ b/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 = ({ HistoryQueryParams.VisibleColumns, [], ); - + const [filteredOptions, setFilteredOptions] = useState([]); const { data, loading } = useQuery< BuildVariantsForTaskNameQuery, BuildVariantsForTaskNameQueryVariables @@ -35,6 +36,10 @@ const BuildVariantSelector: React.FC = ({ }, }); + /** + * `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", @@ -42,9 +47,28 @@ const BuildVariantSelector: React.FC = ({ 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 ( = ({ onChange={onChange} disabled={loading} overflow="scroll-x" + onFilter={onFilter} + filteredOptions={filteredOptions} > {buildVariantsForTaskName?.map((option) => (