diff --git a/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx b/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx index 598f80c41e..e796204bc1 100644 --- a/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx +++ b/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx @@ -74,19 +74,29 @@ export const ModuleSelectStep: FC = ({ const { data, error, isLoading } = useQuery(templateBuilderModules(baseId)); const [moduleSearchText, setModuleSearchText] = useState(""); const modules = data?.modules ?? []; + const categories = [...new Set(modules.map((module) => module.category))]; const [selectedFilterTab, setSelectedFilterTab] = useState("All"); - // TODO category counts should update on search - const categoryCounts = new Map(); - for (const module of modules) { - categoryCounts.set( + + const searchedModules = useFuzzySearch({ + allItems: modules, + searchText: moduleSearchText, + searchProperties: ["display_name", "description"], + }); + + const searchedCategoryCounts = new Map(); + for (const module of searchedModules) { + searchedCategoryCounts.set( module.category, - (categoryCounts.get(module.category) ?? 0) + 1, + (searchedCategoryCounts.get(module.category) ?? 0) + 1, ); } - const filterTabs: Array<{ value: string; count: number }> = [ - { value: "All", count: modules.length }, - ...categoryCounts.entries().map(([value, count]) => ({ value, count })), + const filterTabs = [ + { value: "All", count: searchedModules.length }, + ...categories.map((value) => ({ + value, + count: searchedCategoryCounts.get(value) ?? 0, + })), ]; const { containerRef, visibleTabs: visibleFilterTabs } = useKebabMenu({ tabs: filterTabs, @@ -94,14 +104,12 @@ export const ModuleSelectStep: FC = ({ isActive: true, }); - const searchedModules = useFuzzySearch({ - allItems: - selectedFilterTab === "All" - ? modules - : modules.filter((module) => module.category === selectedFilterTab), - searchText: moduleSearchText, - searchProperties: ["display_name", "description"], - }); + const visibleModules = + selectedFilterTab === "All" + ? searchedModules + : searchedModules.filter( + (module) => module.category === selectedFilterTab, + ); const selectedSet = useMemo( () => new Set(selectedModuleIds), @@ -195,8 +203,8 @@ export const ModuleSelectStep: FC = ({
- {searchedModules.length ? ( - searchedModules.map((m) => ( + {visibleModules.length ? ( + visibleModules.map((m) => (