diff --git a/ui/admin/app/components/tools/ToolCatalog.tsx b/ui/admin/app/components/tools/ToolCatalog.tsx index b85b29ae2..cb7894895 100644 --- a/ui/admin/app/components/tools/ToolCatalog.tsx +++ b/ui/admin/app/components/tools/ToolCatalog.tsx @@ -1,4 +1,5 @@ import { AlertTriangleIcon, PlusIcon } from "lucide-react"; +import { useMemo } from "react"; import useSWR from "swr"; import { ToolReferenceService } from "~/lib/service/api/toolreferenceService"; @@ -41,6 +42,19 @@ export function ToolCatalog({ { fallbackData: {} } ); + const sortedCategories = useMemo(() => { + return Object.entries(toolCategories).sort( + ([nameA, categoryA], [nameB, categoryB]): number => { + const aHasBundle = categoryA.bundleTool ? 1 : 0; + const bHasBundle = categoryB.bundleTool ? 1 : 0; + + if (aHasBundle !== bHasBundle) return bHasBundle - aHasBundle; + + return nameA.localeCompare(nameB); + } + ); + }, [toolCategories]); + if (isLoading) return ; return ( @@ -68,17 +82,15 @@ export function ToolCatalog({ No results found. {" "} - {Object.entries(toolCategories).map( - ([category, categoryTools]) => ( - - ) - )} + {sortedCategories.map(([category, categoryTools]) => ( + + ))} );