Skip to content

refactor: replace MCP logs filter dropdown with dedicated sidebar#2745

Merged
akshaydeo merged 4 commits intov1.5.0from
04-15-improvement_mcp_page_filter_ui_revamp
Apr 16, 2026
Merged

refactor: replace MCP logs filter dropdown with dedicated sidebar#2745
akshaydeo merged 4 commits intov1.5.0from
04-15-improvement_mcp_page_filter_ui_revamp

Conversation

@impoiler
Copy link
Copy Markdown
Contributor

@impoiler impoiler commented Apr 15, 2026

Summary

Redesigned the MCP logs page with a dedicated filter sidebar to improve usability and organization. The new layout provides better space utilization and a more intuitive filtering experience.

Changes

  • Added new MCPFilterSidebar component with collapsible filter sections for Status, Tool Names, Servers, and Virtual Keys
  • Restructured the main MCP logs page layout to use a sidebar + main content area design
  • Moved filter functionality from inline dropdowns to dedicated sidebar sections with checkboxes
  • Added predefined time period shortcuts (1h, 6h, 24h, 7d, 30d) to the date picker
  • Optimized API calls by only fetching filter data when sections are opened or have active filters
  • Updated table layout to use full available height with proper flex containers
  • Improved responsive design with better space management

Type of change

  • Feature
  • Refactor

Affected areas

  • UI (React)

How to test

Navigate to the MCP logs page and verify:

  1. The new sidebar layout displays correctly with collapsible filter sections
  2. Filter selections work properly and update the logs table
  3. Predefined time periods function correctly in the date picker
  4. The table uses full available height and scrolls properly
  5. Live updates and pagination continue to work as expected
# UI
cd ui
pnpm i || npm i
pnpm test || npm test
pnpm build || npm run build

Screenshots/Recordings

If UI changes, add before/after screenshots or short clips.

Breaking changes

  • Yes
  • No

Related issues

Link related issues and discussions. Example: Closes #123

Security considerations

No security implications - this is a UI layout and filtering enhancement.

Checklist

  • I read docs/contributing/README.md and followed the guidelines
  • I added/updated tests where appropriate
  • I updated documentation where needed
  • I verified builds succeed (Go and UI)
  • I verified the CI pipeline passes locally if applicable

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 15, 2026

Warning

Rate limit exceeded

@impoiler has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 1 minutes and 8 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 1 minutes and 8 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 182e4c59-5d6e-422b-8a16-b5d5fbdcbae5

📥 Commits

Reviewing files that changed from the base of the PR and between 2dea7b9 and 8f1da20.

📒 Files selected for processing (4)
  • ui/app/workspace/mcp-logs/page.tsx
  • ui/app/workspace/mcp-logs/views/filters.tsx
  • ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx
  • ui/components/filters/mcpFilterSidebar.tsx
📝 Walkthrough

Walkthrough

Added a new MCPFilterSidebar and restructured the MCP logs page into a sidebar + main flex layout; removed popover/command multi-select filters and RTK-query fetching from the main filters view, added predefined time-period presets, and adjusted table layout and cell sizing to flex-based scrolling.

Changes

Cohort / File(s) Summary
Page / Layout
ui/app/workspace/mcp-logs/page.tsx
Integrated MCPFilterSidebar; replaced centered single-column layout with a flex container holding sidebar + main panel; added shrink-0 to Quick Stats and Alert to preserve sizing in flex layout.
Main Filters View
ui/app/workspace/mcp-logs/views/filters.tsx
Removed Popover/Command multiselect UI and related RTK Query logic; added LOG_TIME_PERIODS and getRangeForPeriod(); wired predefined period selection to update {start_time,end_time} and call onFiltersChange; minor layout/styling tweaks.
Sidebar Filters Component
ui/components/filters/mcpFilterSidebar.tsx
New exported MCPFilterSidebar component with collapsible sections (Status, Tool Names, Servers, Virtual Keys), search+checkbox lists, lazy-loaded filter data via useGetMCPLogsFilterDataQuery (skipped when closed/no selection), active-filter counting, and Reset preserving start/end times.
Table Layout & Cells
ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx
Refactored container to flex grow flex-col so table fills height; changed table wrapper and scrolling behavior; always-show loading row (shorter height); added explicit width/min/max per cell using cell.column.getSize() and merged pin styles; added overflow-hidden to cell classes.

Sequence Diagram(s)

sequenceDiagram
  participant Page as MCP Logs Page
  participant Sidebar as MCPFilterSidebar
  participant API as FilterData API
  participant Table as Logs Table

  Page->>Sidebar: render with current filters
  Sidebar->>Sidebar: user opens section (e.g., Tools)
  Sidebar->>API: fetch filter options (useGetMCPLogsFilterDataQuery) [lazy when opened]
  API-->>Sidebar: return options
  Sidebar->>Page: onFiltersChange(updatedFilters)
  Page->>Table: re-render with updated filters (query params)
  Table->>API: fetch logs with filters
  API-->>Table: return logs
  Table-->>Page: display updated rows
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 I dug a sidebar, tidy and spry,

Filters that whisper time presets nearby.
Tables now stretch and cells align true,
Old popovers gone — fresh paths to review.
Hop on, logs page — I carrot-code for you! 🥕

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Linked Issues check ⚠️ Warning The linked issue (#123) concerns File APIs for providers, unrelated to the MCP logs filter UI refactor. The PR changes do not address any requirements from this issue. Verify that the correct issues are linked. If this PR is unrelated to #123, remove that link and add the actual issue(s) it resolves.
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: replacing filter dropdowns with a dedicated sidebar component in the MCP logs page.
Description check ✅ Passed The description covers the key changes, type of change, affected areas, testing instructions, and checklist items. Most required sections are present and adequately filled.
Out of Scope Changes check ✅ Passed All code changes focus on the MCP logs filter UI refactor: sidebar component, layout restructuring, date picker improvements, and table layout optimization. No unrelated changes detected.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 04-15-improvement_mcp_page_filter_ui_revamp

Comment @coderabbitai help to get the list of available commands and usage tips.

@impoiler impoiler force-pushed the 04-15-improvement_mcp_page_filter_ui_revamp branch from 16506cc to cfda152 Compare April 15, 2026 19:10
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch 2 times, most recently from d3fa3f7 to 7100207 Compare April 16, 2026 03:13
@impoiler impoiler force-pushed the 04-15-improvement_mcp_page_filter_ui_revamp branch from cfda152 to 6248cbc Compare April 16, 2026 03:14
@impoiler impoiler self-assigned this Apr 16, 2026
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from 7100207 to 8e91edd Compare April 16, 2026 05:49
@impoiler impoiler force-pushed the 04-15-improvement_mcp_page_filter_ui_revamp branch from 6248cbc to 4a3be3b Compare April 16, 2026 05:49
@impoiler impoiler changed the title improvement: MCP page filter UI revamp refactor: replace MCP logs filter dropdown with dedicated sidebar Apr 16, 2026
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from 8e91edd to df190ec Compare April 16, 2026 08:16
@impoiler impoiler force-pushed the 04-15-improvement_mcp_page_filter_ui_revamp branch 3 times, most recently from 0a5dab0 to a152ed2 Compare April 16, 2026 09:47
@impoiler impoiler marked this pull request as ready for review April 16, 2026 10:07
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Apr 16, 2026

Confidence Score: 4/5

Safe to merge after resolving the two open thread issues (content_search dropped on reset, userModifiedTimeRange set on every filter change); the dead-prop cleanup is minor.

Two P1-level bugs from prior review threads remain open: handleReset silently clears the search box and every sidebar filter change permanently suppresses time-range auto-refresh. The only new finding is a P2 dead-prop cleanup. Score is 4 rather than 3 because the issues don't break primary data fetching or navigation, only the reset UX and the stale-time-range refresh.

ui/components/filters/mcpFilterSidebar.tsx (handleReset bugs) and ui/app/workspace/mcp-logs/page.tsx (setFilters userModifiedTimeRange guard)

Important Files Changed

Filename Overview
ui/components/filters/mcpFilterSidebar.tsx New sidebar component with collapsible filter sections; handleReset omits content_search (wiping the search box) and always sets userModifiedTimeRange (suppressing auto-refresh), and the useEffect open-sync doesn't route through handleOpenChange.
ui/app/workspace/mcp-logs/page.tsx Restructured layout to sidebar + main content; setFilters unconditionally marks userModifiedTimeRange on any call that includes start_time/end_time (every filter change spreads ...filters), which compounds the auto-refresh suppression issue.
ui/app/workspace/mcp-logs/views/filters.tsx New MCPLogFilters component with search input, live-toggle, and DateTimePickerWithRange wired up correctly to the existing component API including predefined period shortcuts.
ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx Table layout updated to grow/flex for full height; fetchLogs and fetchStats remain in DataTableProps but are no longer destructured or used inside the component.

Reviews (6): Last reviewed commit: "improvement: MCP page filter UI revamp" | Re-trigger Greptile

Comment thread ui/components/filters/mcpFilterSidebar.tsx
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx (1)

41-42: ⚠️ Potential issue | 🟠 Major

Remove unused fetchLogs and fetchStats props.

These props are declared in the interface and passed by the parent component but never destructured or used within the component.

Required changes

Remove from DataTableProps interface:

-	fetchLogs: () => Promise<void>;
-	fetchStats: () => Promise<void>;

Remove from parent component (page.tsx lines 566-567):

-	fetchLogs={fetchLogs}
-	fetchStats={fetchStats}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx` around lines 41 - 42,
DataTableProps declares unused props fetchLogs and fetchStats; remove those two
properties from the DataTableProps interface and delete the corresponding props
passed from the parent component where the DataTable is instantiated (the place
currently passing fetchLogs and fetchStats). Ensure no references to fetchLogs
or fetchStats remain in mcpLogsTable.tsx (component) or in the parent component
that instantiates it (remove the props from the JSX/props object).
🧹 Nitpick comments (4)
ui/components/filters/mcpFilterSidebar.tsx (3)

189-195: Missing data-testid on search input.

The search input in SearchableCheckboxList lacks a data-testid attribute for E2E testing.

Suggested fix
 function SearchableCheckboxList({
 	items,
 	isSelected,
 	onToggle,
 	placeholder = "Search...",
 	inputRef,
+	testId,
 }: {
 	items: { key: string; label: string }[];
 	isSelected: (key: string) => boolean;
 	onToggle: (key: string) => void;
 	placeholder?: string;
 	inputRef?: Ref<HTMLInputElement>;
+	testId?: string;
 }) {
 ...
 			<Input
 				ref={inputRef}
 				value={query}
 				onChange={(e) => setQuery(e.target.value)}
 				placeholder={placeholder}
 				className="h-8 border-0 text-xs"
+				data-testid={testId ? `${testId}-search-input` : undefined}
 			/>

As per coding guidelines: ui/**/*.{tsx,ts}: Add new interactive UI elements with data-testid attributes.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/components/filters/mcpFilterSidebar.tsx` around lines 189 - 195, The
SearchableCheckboxList search Input (props: ref=inputRef, value=query,
onChange=setQuery, placeholder=placeholder) is missing a data-testid for E2E
tests; add a data-testid prop (e.g. data-testid="mcp-filter-search-input" or
similar consistent name) to the Input component in mcpFilterSidebar.tsx so the
input can be reliably selected in tests.

148-153: Missing data-testid on checkbox items.

The CheckboxFilterItem component renders interactive checkboxes without data-testid attributes. Consider adding a testId prop to support E2E testing.

Suggested fix
 function CheckboxFilterItem({
 	label,
 	checked,
 	onCheckedChange,
 	labelClassName,
+	testId,
 }: {
 	label: string;
 	checked: boolean;
 	onCheckedChange: (checked: boolean) => void;
 	labelClassName?: string;
+	testId?: string;
 }) {
 	return (
-		<label className="hover:bg-muted/50 flex cursor-pointer items-center gap-2.5 px-3 py-2 text-sm">
-			<Checkbox checked={checked} onCheckedChange={onCheckedChange} />
+		<label className="hover:bg-muted/50 flex cursor-pointer items-center gap-2.5 px-3 py-2 text-sm" data-testid={testId}>
+			<Checkbox checked={checked} onCheckedChange={onCheckedChange} data-testid={testId ? `${testId}-checkbox` : undefined} />
 			<span className={cn("truncate", labelClassName)}>{label}</span>
 		</label>
 	);
 }

As per coding guidelines: ui/**/*.{tsx,ts}: Add new interactive UI elements with data-testid attributes. Based on learnings, data-testid additions can be batched in a dedicated PR with related E2E tests.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/components/filters/mcpFilterSidebar.tsx` around lines 148 - 153,
CheckboxFilterItem is missing a data-testid which blocks E2E targeting; add an
optional prop (e.g., testId?: string) to the CheckboxFilterItem component in
mcpFilterSidebar.tsx, forward that prop into the rendered markup as a
data-testid (for example data-testid={testId} on the outer <label> or
data-testid={`${testId}-checkbox`} on the <Checkbox>), and update any callers to
pass a meaningful testId where tests will target it; ensure prop typing is
updated and default handling preserves existing behavior when testId is
undefined.

47-50: Missing data-testid on the Reset button.

Per coding guidelines, interactive UI elements should include data-testid attributes following the <entity>-<element>-<qualifier> pattern.

Suggested fix
-				<Button variant="outline" size="sm" className="text-muted-foreground h-7 px-2 text-xs" onClick={handleReset}>
+				<Button variant="outline" size="sm" className="text-muted-foreground h-7 px-2 text-xs" onClick={handleReset} data-testid="mcp-filter-reset-btn">
					<RotateCcw className="size-3" />
					Reset
				</Button>

As per coding guidelines: ui/**/*.{tsx,ts}: Add new interactive UI elements with data-testid attributes following the pattern: data-testid="<entity>-<element>-<qualifier>".

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/components/filters/mcpFilterSidebar.tsx` around lines 47 - 50, The Reset
Button is missing a data-testid; update the Button JSX (the Button that renders
RotateCcw and calls handleReset) to include a data-testid attribute following
the <entity>-<element>-<qualifier> pattern (for example
data-testid="mcpFilter-button-reset" or "mcpFilter-reset-button"); add this
attribute to the Button element so tests can reliably target it while leaving
the onClick handler (handleReset) and icon (RotateCcw) unchanged.
ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx (1)

193-215: Status row always visible above data rows.

This creates a permanent status indicator row (socket connection / live updates state) that appears above the actual log data. While this provides persistent feedback, it may add visual clutter since the status is already indicated by the live toggle button in the filter bar.

Consider whether this UX is intentional or if the status row should only appear when there's relevant information to show (e.g., socket disconnected).

Alternative: Only show status row when disconnected or helpful
-							<TableRow className="hover:bg-transparent">
-								<TableCell colSpan={columns.length} className="h-12 text-center">
-									<div className="flex items-center justify-center gap-2">
-										{!isSocketConnected ? (
-											<>
-												<X className="h-4 w-4" />
-												Not connected to socket, please refresh the page.
-											</>
-										) : liveEnabled ? (
-											<>
-												<RefreshCw className="h-4 w-4 animate-spin" />
-												Listening for logs...
-											</>
-										) : (
-											<>
-												<Pause className="h-4 w-4" />
-												Live updates paused
-											</>
-										)}
-									</div>
-								</TableCell>
-							</TableRow>
+							{!isSocketConnected && (
+								<TableRow className="hover:bg-transparent">
+									<TableCell colSpan={columns.length} className="h-12 text-center">
+										<div className="flex items-center justify-center gap-2">
+											<X className="h-4 w-4" />
+											Not connected to socket, please refresh the page.
+										</div>
+									</TableCell>
+								</TableRow>
+							)}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx` around lines 193 - 215, The
persistent status TableRow (using TableRow, TableCell and icons
X/RefreshCw/Pause) is always rendered above log rows; change the render so the
status row only appears when relevant by wrapping the entire TableRow block in a
conditional like: render it only when !isSocketConnected || !liveEnabled (i.e.,
socket disconnected or live updates paused) instead of always showing it,
keeping the existing inner JSX (icons and messages) intact and using the
existing columns length check for colSpan.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx`:
- Around line 41-42: DataTableProps declares unused props fetchLogs and
fetchStats; remove those two properties from the DataTableProps interface and
delete the corresponding props passed from the parent component where the
DataTable is instantiated (the place currently passing fetchLogs and
fetchStats). Ensure no references to fetchLogs or fetchStats remain in
mcpLogsTable.tsx (component) or in the parent component that instantiates it
(remove the props from the JSX/props object).

---

Nitpick comments:
In `@ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx`:
- Around line 193-215: The persistent status TableRow (using TableRow, TableCell
and icons X/RefreshCw/Pause) is always rendered above log rows; change the
render so the status row only appears when relevant by wrapping the entire
TableRow block in a conditional like: render it only when !isSocketConnected ||
!liveEnabled (i.e., socket disconnected or live updates paused) instead of
always showing it, keeping the existing inner JSX (icons and messages) intact
and using the existing columns length check for colSpan.

In `@ui/components/filters/mcpFilterSidebar.tsx`:
- Around line 189-195: The SearchableCheckboxList search Input (props:
ref=inputRef, value=query, onChange=setQuery, placeholder=placeholder) is
missing a data-testid for E2E tests; add a data-testid prop (e.g.
data-testid="mcp-filter-search-input" or similar consistent name) to the Input
component in mcpFilterSidebar.tsx so the input can be reliably selected in
tests.
- Around line 148-153: CheckboxFilterItem is missing a data-testid which blocks
E2E targeting; add an optional prop (e.g., testId?: string) to the
CheckboxFilterItem component in mcpFilterSidebar.tsx, forward that prop into the
rendered markup as a data-testid (for example data-testid={testId} on the outer
<label> or data-testid={`${testId}-checkbox`} on the <Checkbox>), and update any
callers to pass a meaningful testId where tests will target it; ensure prop
typing is updated and default handling preserves existing behavior when testId
is undefined.
- Around line 47-50: The Reset Button is missing a data-testid; update the
Button JSX (the Button that renders RotateCcw and calls handleReset) to include
a data-testid attribute following the <entity>-<element>-<qualifier> pattern
(for example data-testid="mcpFilter-button-reset" or "mcpFilter-reset-button");
add this attribute to the Button element so tests can reliably target it while
leaving the onClick handler (handleReset) and icon (RotateCcw) unchanged.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ea0eb64b-7e2d-4b40-ac15-91526f9c83d3

📥 Commits

Reviewing files that changed from the base of the PR and between df190ec and a152ed2.

📒 Files selected for processing (4)
  • ui/app/workspace/mcp-logs/page.tsx
  • ui/app/workspace/mcp-logs/views/filters.tsx
  • ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx
  • ui/components/filters/mcpFilterSidebar.tsx

coderabbitai[bot]
coderabbitai Bot previously approved these changes Apr 16, 2026
@impoiler impoiler force-pushed the 04-15-improvement_mcp_page_filter_ui_revamp branch from a152ed2 to 91818b7 Compare April 16, 2026 10:19
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch 2 times, most recently from 2755ff1 to bd7d209 Compare April 16, 2026 13:38
@impoiler impoiler force-pushed the 04-15-improvement_mcp_page_filter_ui_revamp branch from 91818b7 to 2dea7b9 Compare April 16, 2026 13:38
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (4)
ui/app/workspace/mcp-logs/views/filters.tsx (1)

111-117: Consider adding data-testid for the search input.

Per coding guidelines, new interactive UI elements should have data-testid attributes following the <entity>-<element>-<qualifier> pattern. Based on learnings, this could be deferred to a dedicated PR that also updates related e2e tests.

🧪 Suggested data-testid addition
 <Input
 	type="text"
 	className="!h-7 rounded-tl-none rounded-tr-sm rounded-br-sm rounded-bl-none border-none bg-slate-50 shadow-none outline-none focus-visible:ring-0 dark:bg-zinc-900"
 	placeholder="Search MCP logs"
 	value={localSearch}
 	onChange={(e) => handleSearchChange(e.target.value)}
+	data-testid="mcp-logs-search-input"
 />
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/app/workspace/mcp-logs/views/filters.tsx` around lines 111 - 117, The
search Input component rendering localSearch and using handleSearchChange should
include a data-testid attribute to satisfy testing guidelines; add
data-testid="mcp-logs-search-input" (following the
<entity>-<element>-<qualifier> pattern) to the Input component instance that
currently has props type, className, placeholder, value={localSearch} and
onChange={(e) => handleSearchChange(e.target.value)} so e2e tests can reliably
target it.
ui/components/filters/mcpFilterSidebar.tsx (3)

41-51: Consider adding data-testid attributes to key interactive elements.

Per coding guidelines, new interactive UI elements should have data-testid attributes. This applies to the Reset button here and various checkboxes/inputs throughout this file. Based on learnings, this could be addressed in a dedicated PR alongside e2e test updates.

🧪 Example data-testid additions
 <div className="bg-card flex h-full w-64 shrink-0 flex-col rounded-r-md">
 	{/* Header */}
 	<div className="flex h-11 items-center justify-between border-b pr-3 pl-5">
 		<span className="text-sm font-semibold">Filters</span>
 		{activeFilterCount > 0 && (
-			<Button variant="outline" size="sm" className="text-muted-foreground h-7 px-2 text-xs" onClick={handleReset}>
+			<Button variant="outline" size="sm" className="text-muted-foreground h-7 px-2 text-xs" onClick={handleReset} data-testid="mcp-filter-reset-btn">
 				<RotateCcw className="size-3" />
 				Reset
 			</Button>
 		)}
 	</div>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/components/filters/mcpFilterSidebar.tsx` around lines 41 - 51, Add
data-testid attributes to all key interactive elements in mcpFilterSidebar.tsx:
for the Reset Button rendered when activeFilterCount > 0 (the Button with
onClick={handleReset}) add something like data-testid="filters-reset-button",
and add descriptive data-testid values to each filter control (checkboxes,
inputs, selects) used in this file—e.g., for checkbox components or inputs used
inside functions/render blocks add data-testid values like
"filter-{filterKey}-checkbox" or "filter-{filterKey}-input". Ensure each
interactive component (Button, Checkbox, Input, Select) has a unique, stable
data-testid string so e2e tests can target them reliably.

111-113: One-way sync for defaultOpen is intentional but worth documenting.

The useEffect only opens the section when defaultOpen becomes true but never closes it. This appears intentional (sections stay open once opened by user or by having active filters), but a brief comment would clarify the design intent.

📝 Suggested comment
+	// Sync open state when defaultOpen becomes true (e.g., when filters become active).
+	// Intentionally one-way: we don't close the section if defaultOpen becomes false,
+	// allowing users to keep sections open after manual interaction.
 	useEffect(() => {
 		if (defaultOpen) setOpen(true);
 	}, [defaultOpen]);
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/components/filters/mcpFilterSidebar.tsx` around lines 111 - 113, Add a
short inline comment above the useEffect that references defaultOpen, setOpen,
and the open state to explain the intentional one-way sync: that the effect only
opens the panel when defaultOpen becomes true but deliberately does not close it
on later changes so user-opened sections (or those activated by filters) remain
open. Keep the comment concise and mention that this behavior is by design to
prevent auto-closing after user interaction.

305-315: Consider memoizing isSelected and toggle with useCallback.

These functions are recreated on every render. While the performance impact is likely minimal given the component's scope, wrapping them in useCallback would be more consistent with React best practices and prevent unnecessary re-renders of child components.

♻️ Suggested memoization
-	const isSelected = (name: string) => {
+	const isSelected = useCallback((name: string) => {
 		const id = nameToId.get(name) || name;
 		return (filters.virtual_key_ids || []).includes(id);
-	};
+	}, [nameToId, filters.virtual_key_ids]);

-	const toggle = (name: string) => {
+	const toggle = useCallback((name: string) => {
 		const id = nameToId.get(name) || name;
 		const current = filters.virtual_key_ids || [];
 		const next = current.includes(id) ? current.filter((v) => v !== id) : [...current, id];
 		onFiltersChange({ ...filters, virtual_key_ids: next });
-	};
+	}, [nameToId, filters, onFiltersChange]);
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/components/filters/mcpFilterSidebar.tsx` around lines 305 - 315, Wrap the
isSelected and toggle functions with React's useCallback to avoid recreating
them each render: import useCallback from 'react' and change isSelected to const
isSelected = useCallback((name: string) => { const id = nameToId.get(name) ||
name; return (filters.virtual_key_ids || []).includes(id); }, [nameToId,
filters.virtual_key_ids]); and change toggle to const toggle =
useCallback((name: string) => { const id = nameToId.get(name) || name; const
current = filters.virtual_key_ids || []; const next = current.includes(id) ?
current.filter((v) => v !== id) : [...current, id]; onFiltersChange({
...filters, virtual_key_ids: next }); }, [nameToId, filters, onFiltersChange]);
ensure useCallback is imported and the dependency arrays reference nameToId,
filters (or filters.virtual_key_ids) and onFiltersChange appropriately.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@ui/app/workspace/mcp-logs/views/filters.tsx`:
- Around line 111-117: The search Input component rendering localSearch and
using handleSearchChange should include a data-testid attribute to satisfy
testing guidelines; add data-testid="mcp-logs-search-input" (following the
<entity>-<element>-<qualifier> pattern) to the Input component instance that
currently has props type, className, placeholder, value={localSearch} and
onChange={(e) => handleSearchChange(e.target.value)} so e2e tests can reliably
target it.

In `@ui/components/filters/mcpFilterSidebar.tsx`:
- Around line 41-51: Add data-testid attributes to all key interactive elements
in mcpFilterSidebar.tsx: for the Reset Button rendered when activeFilterCount >
0 (the Button with onClick={handleReset}) add something like
data-testid="filters-reset-button", and add descriptive data-testid values to
each filter control (checkboxes, inputs, selects) used in this file—e.g., for
checkbox components or inputs used inside functions/render blocks add
data-testid values like "filter-{filterKey}-checkbox" or
"filter-{filterKey}-input". Ensure each interactive component (Button, Checkbox,
Input, Select) has a unique, stable data-testid string so e2e tests can target
them reliably.
- Around line 111-113: Add a short inline comment above the useEffect that
references defaultOpen, setOpen, and the open state to explain the intentional
one-way sync: that the effect only opens the panel when defaultOpen becomes true
but deliberately does not close it on later changes so user-opened sections (or
those activated by filters) remain open. Keep the comment concise and mention
that this behavior is by design to prevent auto-closing after user interaction.
- Around line 305-315: Wrap the isSelected and toggle functions with React's
useCallback to avoid recreating them each render: import useCallback from
'react' and change isSelected to const isSelected = useCallback((name: string)
=> { const id = nameToId.get(name) || name; return (filters.virtual_key_ids ||
[]).includes(id); }, [nameToId, filters.virtual_key_ids]); and change toggle to
const toggle = useCallback((name: string) => { const id = nameToId.get(name) ||
name; const current = filters.virtual_key_ids || []; const next =
current.includes(id) ? current.filter((v) => v !== id) : [...current, id];
onFiltersChange({ ...filters, virtual_key_ids: next }); }, [nameToId, filters,
onFiltersChange]); ensure useCallback is imported and the dependency arrays
reference nameToId, filters (or filters.virtual_key_ids) and onFiltersChange
appropriately.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c4c41223-304f-49d9-8148-f73e54785bc7

📥 Commits

Reviewing files that changed from the base of the PR and between a152ed2 and 2dea7b9.

📒 Files selected for processing (4)
  • ui/app/workspace/mcp-logs/page.tsx
  • ui/app/workspace/mcp-logs/views/filters.tsx
  • ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx
  • ui/components/filters/mcpFilterSidebar.tsx
✅ Files skipped from review due to trivial changes (1)
  • ui/app/workspace/mcp-logs/views/mcpLogsTable.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • ui/app/workspace/mcp-logs/page.tsx

Comment thread ui/components/filters/mcpFilterSidebar.tsx
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from bd7d209 to 07f582c Compare April 16, 2026 13:58
@impoiler impoiler force-pushed the 04-15-improvement_mcp_page_filter_ui_revamp branch from 2dea7b9 to 00ad036 Compare April 16, 2026 13:58
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from 07f582c to 06b4f24 Compare April 16, 2026 13:59
@impoiler impoiler force-pushed the 04-15-improvement_mcp_page_filter_ui_revamp branch from 00ad036 to 3776ea7 Compare April 16, 2026 13:59
Copy link
Copy Markdown
Contributor

akshaydeo commented Apr 16, 2026

Merge activity

@impoiler impoiler force-pushed the 04-15-improvement_mcp_page_filter_ui_revamp branch from 3776ea7 to c67b0cd Compare April 16, 2026 14:59
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from 06b4f24 to 08f1341 Compare April 16, 2026 14:59
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from 08f1341 to ed795ad Compare April 16, 2026 15:13
@impoiler impoiler force-pushed the 04-15-improvement_mcp_page_filter_ui_revamp branch from c67b0cd to 8f1da20 Compare April 16, 2026 15:13
@akshaydeo akshaydeo changed the base branch from 04-15-refactor_moved_and_deleted_unused_filter_components to graphite-base/2745 April 16, 2026 15:18
@akshaydeo akshaydeo changed the base branch from graphite-base/2745 to v1.5.0 April 16, 2026 15:20
@akshaydeo akshaydeo dismissed coderabbitai[bot]’s stale review April 16, 2026 15:20

The base branch was changed.

@akshaydeo akshaydeo merged commit fcb64cb into v1.5.0 Apr 16, 2026
6 of 13 checks passed
@akshaydeo akshaydeo deleted the 04-15-improvement_mcp_page_filter_ui_revamp branch April 16, 2026 15:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants