Skip to content

Commit cea8320

Browse files
dittopsdittops
committed
feat(tools): Implement search functionality for tools and sub-tools
1 parent c9f39f7 commit cea8320

File tree

6 files changed

+184
-174
lines changed

6 files changed

+184
-174
lines changed

‎services/budadmin/src/flows/AddTool/ToolDetailsExpanded.tsx‎

Lines changed: 53 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -21,49 +21,24 @@ interface ToolData {
2121
name: string;
2222
description: string;
2323
icon: string;
24+
subTools?: SubTool[];
2425
}
2526

2627
interface ExpandedToolProps {
2728
tool: ToolData;
2829
onToolsSelected?: (toolId: string, subToolIds: string[]) => void;
2930
}
3031

31-
// Mock sub-tools data
32-
const mockSubTools: SubTool[] = [
33-
{
34-
id: "1",
35-
name: "describe_cronjob",
36-
description:
37-
"Get detailed information about a kubernetes cronjob including the recent job history",
38-
},
39-
{
40-
id: "2",
41-
name: "describe_cronjob",
42-
description:
43-
"Get detailed information about a kubernetes cronjob including the recent job history",
44-
},
45-
{
46-
id: "3",
47-
name: "describe_cronjob",
48-
description:
49-
"Get detailed information about a kubernetes cronjob including the recent job history",
50-
},
51-
{
52-
id: "4",
53-
name: "describe_cronjob",
54-
description:
55-
"Get detailed information about a kubernetes cronjob including the recent job history",
56-
},
57-
];
58-
5932
export default function ToolDetailsExpanded() {
6033
const { expandedDrawerProps, closeExpandedStep } = useDrawer();
6134
const props = expandedDrawerProps as ExpandedToolProps;
6235
const [selectedSubTools, setSelectedSubTools] = useState<Set<string>>(
6336
new Set()
6437
);
6538

66-
const subTools = mockSubTools;
39+
// Use sub-tools from the tool prop if available
40+
// Note: Sub-tools data should be fetched from the MCP Foundry API via the tool details endpoint
41+
const subTools: SubTool[] = props?.tool?.subTools || [];
6742

6843
const handleSelectAll = (checked: boolean) => {
6944
if (checked) {
@@ -129,48 +104,58 @@ export default function ToolDetailsExpanded() {
129104
</Text_17_600_FFFFFF>
130105
</div>
131106

132-
{/* Select All */}
133-
<div className="flex items-center gap-[0.75rem] px-[1rem] py-[0.75rem] border-b border-[#1F1F1F]">
134-
<Checkbox
135-
checked={isAllSelected}
136-
onChange={(e) => handleSelectAll(e.target.checked)}
137-
/>
138-
<Text_14_400_EEEEEE>Select All</Text_14_400_EEEEEE>
139-
</div>
140-
141-
{/* Sub Tools List */}
142-
<div className="max-h-[300px] overflow-y-auto">
143-
{subTools.map((subTool) => (
144-
<div
145-
key={subTool.id}
146-
className="flex items-start gap-[0.75rem] px-[1rem] py-[1rem] border-b border-[#1F1F1F] last:border-b-0 cursor-pointer hover:bg-[#1F1F1F]/30"
147-
onClick={() =>
148-
handleSubToolSelect(
149-
subTool.id,
150-
!selectedSubTools.has(subTool.id)
151-
)
152-
}
153-
>
107+
{subTools.length > 0 ? (
108+
<>
109+
{/* Select All */}
110+
<div className="flex items-center gap-[0.75rem] px-[1rem] py-[0.75rem] border-b border-[#1F1F1F]">
154111
<Checkbox
155-
checked={selectedSubTools.has(subTool.id)}
156-
onChange={(e) => {
157-
e.stopPropagation();
158-
handleSubToolSelect(subTool.id, e.target.checked);
159-
}}
160-
onClick={(e) => e.stopPropagation()}
161-
className="mt-[2px]"
112+
checked={isAllSelected}
113+
onChange={(e) => handleSelectAll(e.target.checked)}
162114
/>
163-
<div className="flex-1">
164-
<Text_14_400_EEEEEE className="mb-[0.25rem]">
165-
{subTool.name}
166-
</Text_14_400_EEEEEE>
167-
<Text_12_400_B3B3B3 className="leading-[150%]">
168-
{subTool.description}
169-
</Text_12_400_B3B3B3>
170-
</div>
115+
<Text_14_400_EEEEEE>Select All</Text_14_400_EEEEEE>
171116
</div>
172-
))}
173-
</div>
117+
118+
{/* Sub Tools List */}
119+
<div className="max-h-[300px] overflow-y-auto">
120+
{subTools.map((subTool) => (
121+
<div
122+
key={subTool.id}
123+
className="flex items-start gap-[0.75rem] px-[1rem] py-[1rem] border-b border-[#1F1F1F] last:border-b-0 cursor-pointer hover:bg-[#1F1F1F]/30"
124+
onClick={() =>
125+
handleSubToolSelect(
126+
subTool.id,
127+
!selectedSubTools.has(subTool.id)
128+
)
129+
}
130+
>
131+
<Checkbox
132+
checked={selectedSubTools.has(subTool.id)}
133+
onChange={(e) => {
134+
e.stopPropagation();
135+
handleSubToolSelect(subTool.id, e.target.checked);
136+
}}
137+
onClick={(e) => e.stopPropagation()}
138+
className="mt-[2px]"
139+
/>
140+
<div className="flex-1">
141+
<Text_14_400_EEEEEE className="mb-[0.25rem]">
142+
{subTool.name}
143+
</Text_14_400_EEEEEE>
144+
<Text_12_400_B3B3B3 className="leading-[150%]">
145+
{subTool.description}
146+
</Text_12_400_B3B3B3>
147+
</div>
148+
</div>
149+
))}
150+
</div>
151+
</>
152+
) : (
153+
<div className="p-[1rem] text-center">
154+
<Text_12_400_B3B3B3>
155+
No sub-tools available for this tool.
156+
</Text_12_400_B3B3B3>
157+
</div>
158+
)}
174159
</div>
175160
</div>
176161
</BudDrawerLayout>

‎services/budadmin/src/flows/ViewTool/ViewToolDetails.tsx‎

Lines changed: 52 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -24,33 +24,9 @@ export default function ViewToolDetails() {
2424
new Set()
2525
);
2626

27-
// Mock sub-tools data - replace with actual data from selectedTool
28-
const subTools: SubTool[] = [
29-
{
30-
id: "1",
31-
name: "describe_cronjob",
32-
description:
33-
"Get detailed information about a Kubernetes cronjob including the recent job history",
34-
},
35-
{
36-
id: "2",
37-
name: "describe_cronjob",
38-
description:
39-
"Get detailed information about a Kubernetes cronjob including the recent job history",
40-
},
41-
{
42-
id: "3",
43-
name: "describe_cronjob",
44-
description:
45-
"Get detailed information about a Kubernetes cronjob including the recent job history",
46-
},
47-
{
48-
id: "4",
49-
name: "describe_cronjob",
50-
description:
51-
"Get detailed information about a Kubernetes cronjob including the recent job history",
52-
},
53-
];
27+
// Use sub-tools from selectedTool if available
28+
// Note: Sub-tools data should be fetched from the MCP Foundry API via the tool details endpoint
29+
const subTools: SubTool[] = selectedTool?.subTools || [];
5430

5531
const handleSelectAll = (checked: boolean) => {
5632
if (checked) {
@@ -132,48 +108,58 @@ export default function ViewToolDetails() {
132108
</Text_17_600_FFFFFF>
133109
</div>
134110

135-
{/* Select All */}
136-
<div className="flex items-center gap-[0.75rem] py-[0.75rem] border-b border-[#1F1F1F]">
137-
<Checkbox
138-
checked={isAllSelected}
139-
onChange={(e) => handleSelectAll(e.target.checked)}
140-
/>
141-
<Text_14_400_EEEEEE>Select All</Text_14_400_EEEEEE>
142-
</div>
143-
144-
{/* Sub Tools List */}
145-
<div className="max-h-[400px] overflow-y-auto">
146-
{subTools.map((subTool) => (
147-
<div
148-
key={subTool.id}
149-
className="flex items-start gap-[0.75rem] py-[1rem] border-b border-[#1F1F1F] cursor-pointer hover:bg-[#1F1F1F]/30 px-[0.25rem] -mx-[0.25rem] rounded"
150-
onClick={() =>
151-
handleSubToolSelect(
152-
subTool.id,
153-
!selectedSubTools.has(subTool.id)
154-
)
155-
}
156-
>
111+
{subTools.length > 0 ? (
112+
<>
113+
{/* Select All */}
114+
<div className="flex items-center gap-[0.75rem] py-[0.75rem] border-b border-[#1F1F1F]">
157115
<Checkbox
158-
checked={selectedSubTools.has(subTool.id)}
159-
onChange={(e) => {
160-
e.stopPropagation();
161-
handleSubToolSelect(subTool.id, e.target.checked);
162-
}}
163-
onClick={(e) => e.stopPropagation()}
164-
className="mt-[2px]"
116+
checked={isAllSelected}
117+
onChange={(e) => handleSelectAll(e.target.checked)}
165118
/>
166-
<div className="flex-1">
167-
<Text_14_400_EEEEEE className="mb-[0.35rem]">
168-
{subTool.name}
169-
</Text_14_400_EEEEEE>
170-
<Text_12_400_B3B3B3 className="leading-[150%]">
171-
{subTool.description}
172-
</Text_12_400_B3B3B3>
173-
</div>
119+
<Text_14_400_EEEEEE>Select All</Text_14_400_EEEEEE>
174120
</div>
175-
))}
176-
</div>
121+
122+
{/* Sub Tools List */}
123+
<div className="max-h-[400px] overflow-y-auto">
124+
{subTools.map((subTool) => (
125+
<div
126+
key={subTool.id}
127+
className="flex items-start gap-[0.75rem] py-[1rem] border-b border-[#1F1F1F] cursor-pointer hover:bg-[#1F1F1F]/30 px-[0.25rem] -mx-[0.25rem] rounded"
128+
onClick={() =>
129+
handleSubToolSelect(
130+
subTool.id,
131+
!selectedSubTools.has(subTool.id)
132+
)
133+
}
134+
>
135+
<Checkbox
136+
checked={selectedSubTools.has(subTool.id)}
137+
onChange={(e) => {
138+
e.stopPropagation();
139+
handleSubToolSelect(subTool.id, e.target.checked);
140+
}}
141+
onClick={(e) => e.stopPropagation()}
142+
className="mt-[2px]"
143+
/>
144+
<div className="flex-1">
145+
<Text_14_400_EEEEEE className="mb-[0.35rem]">
146+
{subTool.name}
147+
</Text_14_400_EEEEEE>
148+
<Text_12_400_B3B3B3 className="leading-[150%]">
149+
{subTool.description}
150+
</Text_12_400_B3B3B3>
151+
</div>
152+
</div>
153+
))}
154+
</div>
155+
</>
156+
) : (
157+
<div className="py-[2rem] text-center border border-[#1F1F1F] rounded-[6px]">
158+
<Text_12_400_B3B3B3>
159+
No sub-tools available for this tool.
160+
</Text_12_400_B3B3B3>
161+
</div>
162+
)}
177163
</div>
178164
</BudDrawerLayout>
179165
</BudWraperBox>

0 commit comments

Comments
 (0)