Skip to content

Commit fcda9bc

Browse files
vishu-bhvishu-bh
committed
refactor(ui): reuse shared button components (#5707)
Signed-off-by: Vishu Bhatnagar <vishu.bhatnagar@ibm.com>
1 parent bd9dfc0 commit fcda9bc

15 files changed

Lines changed: 80 additions & 44 deletions

‎client/src/components/gateways/CreateServerForm.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -203,8 +203,9 @@ export function CreateServerForm({
203203
</div>
204204
</div>
205205

206-
<button
206+
<Button
207207
type="button"
208+
variant="ghost"
208209
onClick={() => setOptionalOpen((current) => !current)}
209210
className="flex h-12 w-full items-center gap-3 rounded-md border border-border px-4 text-left text-sm font-medium text-muted-foreground transition hover:bg-muted/40 hover:text-foreground dark:border-[#252529]"
210211
aria-expanded={optionalOpen}
@@ -215,7 +216,7 @@ export function CreateServerForm({
215216
aria-hidden="true"
216217
/>
217218
{intl.formatMessage({ id: "gateways.createServer.optionalConfiguration" })}
218-
</button>
219+
</Button>
219220

220221
{optionalOpen && (
221222
<div id="optional-server-configuration" className="grid gap-7">

‎client/src/components/gateways/SourceSelection.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -267,8 +267,9 @@ export function SourceSelection({
267267

268268
{createServerActions && (
269269
<div className="space-y-7">
270-
<button
270+
<Button
271271
type="button"
272+
variant="ghost"
272273
onClick={handleToggleComponentsPanel}
273274
aria-expanded={isComponentsPanelOpen}
274275
aria-controls={panelId}
@@ -288,7 +289,7 @@ export function SourceSelection({
288289
aria-hidden="true"
289290
/>
290291
)}
291-
</button>
292+
</Button>
292293

293294
{isComponentsPanelOpen && (
294295
<section

‎client/src/components/gateways/VirtualServerDetailsPanel.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -454,10 +454,12 @@ export function VirtualServerDetailsPanel({
454454
const isSelected = sourceFilter === source.id;
455455

456456
return (
457-
<button
457+
<Button
458458
key={source.id}
459459
id={`source-tab-${index}`}
460460
type="button"
461+
variant="ghost"
462+
size="sm"
461463
role="tab"
462464
aria-selected={isSelected}
463465
tabIndex={isSelected ? 0 : -1}
@@ -471,7 +473,7 @@ export function VirtualServerDetailsPanel({
471473
onKeyDown={(e) => handleSourceTabKeyDown(e, index, sources.length)}
472474
>
473475
{source.label}
474-
</button>
476+
</Button>
475477
);
476478
})}
477479
</div>
@@ -484,10 +486,12 @@ export function VirtualServerDetailsPanel({
484486
className="flex min-w-0 items-center gap-6"
485487
>
486488
{COMPONENT_FILTER_OPTIONS.map((option) => (
487-
<button
489+
<Button
488490
key={option.value}
489491
id={`tab-${option.value}`}
490492
type="button"
493+
variant="ghost"
494+
size="sm"
491495
role="tab"
492496
aria-selected={componentFilter === option.value}
493497
tabIndex={componentFilter === option.value ? 0 : -1}
@@ -500,7 +504,7 @@ export function VirtualServerDetailsPanel({
500504
onKeyDown={(e) => handleTabKeyDown(e, option.value)}
501505
>
502506
{intl.formatMessage({ id: option.labelId })}
503-
</button>
507+
</Button>
504508
))}
505509
</div>
506510
<div className="flex items-center gap-2">

‎client/src/components/layout/HeaderQuickNav.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -366,10 +366,11 @@ export function HeaderQuickNav() {
366366
const isFocused = resultIndex === focusedResultIndex;
367367

368368
return (
369-
<button
369+
<Button
370370
id={`quick-nav-result-${resultIndex}`}
371371
key={`${group.entity_type}-${item.id}`}
372372
type="button"
373+
variant="ghost"
373374
role="option"
374375
tabIndex={-1}
375376
aria-selected={isFocused}
@@ -384,7 +385,7 @@ export function HeaderQuickNav() {
384385
{item.summary && item.summary !== item.name ? (
385386
<span className="truncate text-xs text-muted-foreground">{item.summary}</span>
386387
) : null}
387-
</button>
388+
</Button>
388389
);
389390
})}
390391
</div>

‎client/src/components/mcp-servers/MCPServerForm.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -162,16 +162,17 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
162162
{
163163
"Context Forge will discover the server's tools, resources, and prompts. The MCP server should be running and reachable. Or, choose a server from the"
164164
}{" "}
165-
<button
165+
<Button
166166
type="button"
167+
variant="link"
167168
onClick={() => {
168169
onToggle();
169170
navigate("/app/server-catalog");
170171
}}
171172
className="font-medium text-cyan-700 underline decoration-cyan-300 underline-offset-4 transition hover:text-cyan-800 dark:text-cyan-400 dark:decoration-cyan-700 dark:hover:text-cyan-300"
172173
>
173174
mcp server catalog
174-
</button>
175+
</Button>
175176
.
176177
</p>
177178
</div>
@@ -289,15 +290,16 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
289290
</div>
290291

291292
<div className="flex flex-col gap-5 pt-2">
292-
<button
293+
<Button
293294
type="button"
295+
variant="ghost"
294296
onClick={() => setAdvancedOpen((current) => !current)}
295297
className="inline-flex w-full items-center gap-2 rounded-md border border-neutral-200 px-3 py-2 text-sm font-medium text-neutral-600 transition hover:text-neutral-950 dark:border-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300"
296298
aria-expanded={advancedOpen}
297299
>
298300
<ChevronDown className={`h-4 w-4 transition ${advancedOpen ? "rotate-180" : ""}`} />
299301
Advanced settings
300-
</button>
302+
</Button>
301303

302304
{advancedOpen && (
303305
<AdvancedSettings

‎client/src/components/servers/MCPServerDetailsPanel.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -336,10 +336,12 @@ export function MCPServerDetailsPanel({
336336
className="flex min-w-0 items-center gap-6"
337337
>
338338
{TABS.map((tab) => (
339-
<button
339+
<Button
340340
key={tab.value}
341341
id={`tab-${tab.value}`}
342342
type="button"
343+
variant="ghost"
344+
size="sm"
343345
role="tab"
344346
aria-selected={activeTab === tab.value}
345347
tabIndex={activeTab === tab.value ? 0 : -1}
@@ -352,7 +354,7 @@ export function MCPServerDetailsPanel({
352354
onKeyDown={(e) => handleTabKeyDown(e, tab.value)}
353355
>
354356
{tab.label}
355-
</button>
357+
</Button>
356358
))}
357359
</div>
358360

‎client/src/components/servers/ServersTable.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { ServerActionsMenu } from "./ServerActionsMenu";
2525
import type { MCPServer, ServerStatus } from "../../types/server";
2626
import { Loading } from "../ui/loading";
2727
import { formatLocalDateTime } from "../../utils/formatDate";
28+
import { Button } from "@/components/ui/button";
2829

2930
function getLastSeenValue(server: MCPServer): string | undefined {
3031
return server.lastSeen;
@@ -224,8 +225,10 @@ export function ServersTable({
224225
{formatLocalDateTime(lastSeen, intl.formatMessage({ id: "mcpServer.neverUsed" }))}
225226
</TableCell>
226227
<TableCell className="px-4 py-2.5">
227-
<button
228+
<Button
228229
type="button"
230+
variant="ghost"
231+
size="sm"
229232
onClick={() => handleCopy(server.id)}
230233
className="inline-flex items-center gap-2 text-xs text-neutral-600 dark:text-neutral-400 transition hover:text-neutral-900 dark:hover:text-neutral-200"
231234
aria-label={`Copy UUID for ${server.name}`}
@@ -239,7 +242,7 @@ export function ServersTable({
239242
) : (
240243
<Copy className="h-3.5 w-3.5" aria-hidden="true" />
241244
)}
242-
</button>
245+
</Button>
243246
</TableCell>
244247
<TableCell className="px-4 py-2.5">
245248
<div className="inline-flex items-center gap-1.5 text-xs text-neutral-600 dark:text-neutral-400">

‎client/src/components/tools/ToolForm.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -476,16 +476,17 @@ export function ToolForm({ isOpen, onToggle, onSuccess, tool }: ToolFormProps) {
476476
)}
477477
</div>
478478

479-
<button
479+
<Button
480480
type="button"
481+
variant="ghost"
481482
onClick={() => setAdvancedOpen((current) => !current)}
482483
className="inline-flex w-full items-center gap-2 rounded-md border border-neutral-200 px-3 py-2 text-sm font-medium text-neutral-600 transition hover:text-neutral-950 dark:border-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300"
483484
aria-expanded={advancedOpen}
484485
aria-controls="advanced-settings-panel"
485486
>
486487
<ChevronDown className={`h-4 w-4 transition ${advancedOpen ? "rotate-180" : ""}`} />
487488
{intl.formatMessage({ id: "tools.form.advancedSettings" })}
488-
</button>
489+
</Button>
489490

490491
{advancedOpen && (
491492
<div id="advanced-settings-panel">

‎client/src/components/ui/inline-notification.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { CircleCheck, CircleAlert, X } from "lucide-react";
2+
import { Button } from "@/components/ui/button";
23

34
interface InlineNotificationProps {
45
type: "success" | "error";
@@ -31,14 +32,16 @@ export function InlineNotification({
3132
</p>
3233
</div>
3334
{onDismiss && (
34-
<button
35+
<Button
3536
type="button"
37+
variant="ghost"
38+
size="icon"
3639
onClick={onDismiss}
3740
aria-label={dismissLabel}
3841
className="ml-2 shrink-0 p-1 opacity-60 hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
3942
>
4043
<X className="h-4 w-4" aria-hidden="true" />
41-
</button>
44+
</Button>
4245
)}
4346
</div>
4447
);

‎client/src/components/ui/inline-tag-add.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,10 @@ export function InlineTagAdd({
131131
<dd className="flex min-w-0 flex-wrap items-center gap-2 text-foreground">
132132
{children}
133133
{!editing && (
134-
<button
134+
<Button
135135
type="button"
136+
variant="ghost"
137+
size="sm"
136138
disabled={!onAdd}
137139
onClick={() => setEditing(true)}
138140
aria-label={ariaLabel}
@@ -143,7 +145,7 @@ export function InlineTagAdd({
143145
>
144146
<Plus className="size-3" aria-hidden="true" />
145147
{addLabel}
146-
</button>
148+
</Button>
147149
)}
148150
</dd>
149151

0 commit comments

Comments
 (0)