enhance: organize tool catalog (#1075)

- sort first by bundlable tool groups - sort by alphabetical tool category name
obot-platform · Dec 30, 2024 · 9674669 · 9674669
1 parent 95281e5
commit 9674669
Showing 1 changed file with 23 additions and 11 deletions.
diff --git 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 <LoadingSpinner />;
 
     return (
@@ -68,17 +82,15 @@ export function ToolCatalog({
                         No results found.
                     </h1>{" "}
                 </CommandEmpty>
-                {Object.entries(toolCategories).map(
-                    ([category, categoryTools]) => (
-                        <ToolCatalogGroup
-                            key={category}
-                            category={category}
-                            tools={categoryTools}
-                            selectedTools={tools}
-                            onUpdateTools={onUpdateTools}
-                        />
-                    )
-                )}
+                {sortedCategories.map(([category, categoryTools]) => (
+                    <ToolCatalogGroup
+                        key={category}
+                        category={category}
+                        tools={categoryTools}
+                        selectedTools={tools}
+                        onUpdateTools={onUpdateTools}
+                    />
+                ))}
             </CommandList>
         </Command>
     );