fix(data-table): use DropdownMenuTrigger wrapper in view options (#2297)

* fix(license): use useApiStoreHook to fix react-doctor errors

Replace useStore(useApiStore, ...) with useApiStoreHook(...) in license
notification components. Passing a hook as a value argument to another
hook violates React Compiler rules. useApiStoreHook is an existing
wrapper that encapsulates the same call pattern.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(data-table): use DropdownMenuTrigger wrapper in view options

Replace raw radix DropdownMenuPrimitive.Trigger with the project's
DropdownMenuTrigger wrapper in DataTableViewOptions. The raw primitive
doesn't handle re-renders correctly with React Compiler.

Fixes UX-967

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* test(data-table): add integration test for column toggle dropdown

Verify DataTableViewOptions dropdown can be reopened after toggling
columns, preventing regression of the broken trigger.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(data-table): add 'use no memo' to opt out of React Compiler

The DataTable shared components (data-table.tsx, data-table-filter.tsx)
were being compiled by React Compiler, which incorrectly memoized
callbacks and state in DataTableFacetedFilter (Set mutation in event
handlers) and other table-bound components. This broke search inputs
and filter dropdowns on Knowledge Base, Secret Store, AI Agent, and
Remote MCP list pages.

Adding the 'use no memo' directive opts these files out of React
Compiler, matching the pattern already used by the list page files.

Also adds integration tests verifying the search input value updates
on keystroke and can be cleared and reused.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* test(list-pages): add search and filter integration tests

Add tests for search input and faceted filter functionality on
Knowledge Base, AI Agent, and Remote MCP list pages to prevent
regressions from React Compiler memoization issues.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* test(secrets): add search and filter integration tests for list page

Add tests for search input and faceted filter functionality on the
Secret Store list page to prevent regressions from React Compiler
memoization issues.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* test(mcp): add Playwright E2E test for search and filter

Add E2E tests for the Remote MCP servers list page that run against
a production build with React Compiler active. These tests verify
that the search input accepts keystrokes, filters table rows, and
that the status faceted filter opens and is selectable — all of
which were broken when React Compiler memoized shared DataTable
component callbacks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: skip MCP search E2E tests when feature unavailable in variant

The MCP servers page isn't available in the OSS console variant,
causing E2E tests to fail when the search input isn't rendered.
Use test.skip() to gracefully skip when the page doesn't have the UI.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: replace Playwright E2E with integration tests for DataTable

Delete the MCP search Playwright test (MCP page unavailable in OSS
variant). Replace with comprehensive integration tests for DataTable
search input, faceted filter rendering, and view options toggle.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: malinskibeniamin

frontend/src/components/pages/agents/list/ai-agent-list-page.test.tsx

@@ -629,4 +629,151 @@ describe('AIAgentsListPage', () => {
 
     expect(screen.getByRole('button', { name: 'Next Page' })).toBeDisabled();
   });
+
+  test('search input updates value on keystrokes', async () => {
+    const user = userEvent.setup();
+
+    const agent1 = create(AIAgentSchema, {
+      id: 'agent-1',
+      displayName: 'Test Agent',
+      description: '',
+      state: AIAgent_State.RUNNING,
+      provider: { provider: { case: 'openai', value: { apiKey: 'key' } } },
+      model: 'gpt-4',
+      systemPrompt: '',
+      mcpServers: {},
+      tags: {},
+    });
+
+    const transport = createAIAgentsTransport({
+      listAIAgentsMock: vi
+        .fn()
+        .mockReturnValue(create(ListAIAgentsResponseSchema, { aiAgents: [agent1], nextPageToken: '' })),
+    });
+
+    renderWithFileRoutes(<AIAgentsListPage />, { transport });
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Agent')).toBeVisible();
+    });
+
+    const filterInput = screen.getByPlaceholderText('Filter agents...');
+    await user.type(filterInput, 'hello');
+
+    // Input value must reflect typed text — a React Compiler memoization
+    // bug would freeze it at the initial empty string.
+    expect(filterInput).toHaveValue('hello');
+  });
+
+  test('filters agents by name via search input', async () => {
+    const user = userEvent.setup();
+
+    const agent1 = create(AIAgentSchema, {
+      id: 'agent-1',
+      displayName: 'Alpha Agent',
+      description: '',
+      state: AIAgent_State.RUNNING,
+      provider: { provider: { case: 'openai', value: { apiKey: 'key' } } },
+      model: 'gpt-4',
+      systemPrompt: '',
+      mcpServers: {},
+      tags: {},
+    });
+
+    const agent2 = create(AIAgentSchema, {
+      id: 'agent-2',
+      displayName: 'Beta Agent',
+      description: '',
+      state: AIAgent_State.STOPPED,
+      provider: { provider: { case: 'openai', value: { apiKey: 'key' } } },
+      model: 'gpt-4',
+      systemPrompt: '',
+      mcpServers: {},
+      tags: {},
+    });
+
+    const transport = createAIAgentsTransport({
+      listAIAgentsMock: vi
+        .fn()
+        .mockReturnValue(create(ListAIAgentsResponseSchema, { aiAgents: [agent1, agent2], nextPageToken: '' })),
+    });
+
+    renderWithFileRoutes(<AIAgentsListPage />, { transport });
+
+    await waitFor(() => {
+      expect(screen.getByText('Alpha Agent')).toBeVisible();
+      expect(screen.getByText('Beta Agent')).toBeVisible();
+    });
+
+    const filterInput = screen.getByPlaceholderText('Filter agents...');
+    await user.type(filterInput, 'Beta');
+
+    await waitFor(() => {
+      expect(screen.getByText('Beta Agent')).toBeVisible();
+      expect(screen.queryByText('Alpha Agent')).not.toBeInTheDocument();
+    });
+
+    // Clear and type again to verify the input remains interactive
+    await user.clear(filterInput);
+
+    await waitFor(() => {
+      expect(screen.getByText('Alpha Agent')).toBeVisible();
+      expect(screen.getByText('Beta Agent')).toBeVisible();
+    });
+  });
+
+  test('status faceted filter filters results', async () => {
+    const user = userEvent.setup();
+
+    const agent1 = create(AIAgentSchema, {
+      id: 'agent-1',
+      displayName: 'Running Agent',
+      description: '',
+      state: AIAgent_State.RUNNING,
+      provider: { provider: { case: 'openai', value: { apiKey: 'key' } } },
+      model: 'gpt-4',
+      systemPrompt: '',
+      mcpServers: {},
+      tags: {},
+    });
+
+    const agent2 = create(AIAgentSchema, {
+      id: 'agent-2',
+      displayName: 'Stopped Agent',
+      description: '',
+      state: AIAgent_State.STOPPED,
+      provider: { provider: { case: 'openai', value: { apiKey: 'key' } } },
+      model: 'gpt-4',
+      systemPrompt: '',
+      mcpServers: {},
+      tags: {},
+    });
+
+    const transport = createAIAgentsTransport({
+      listAIAgentsMock: vi
+        .fn()
+        .mockReturnValue(create(ListAIAgentsResponseSchema, { aiAgents: [agent1, agent2], nextPageToken: '' })),
+    });
+
+    renderWithFileRoutes(<AIAgentsListPage />, { transport });
+
+    await waitFor(() => {
+      expect(screen.getByText('Running Agent')).toBeVisible();
+      expect(screen.getByText('Stopped Agent')).toBeVisible();
+    });
+
+    // Click the "Status" faceted filter button (not the column header one in <thead>)
+    const statusFilterButton = screen.getAllByRole('button', { name: /status/i }).find((btn) => !btn.closest('thead'))!;
+    await user.click(statusFilterButton);
+
+    // Select the "Stopped" option from the filter popover
+    const stoppedOption = await screen.findByRole('option', { name: /stopped/i });
+    await user.click(stoppedOption);
+
+    // Only the stopped agent should remain visible
+    await waitFor(() => {
+      expect(screen.getByText('Stopped Agent')).toBeVisible();
+      expect(screen.queryByText('Running Agent')).not.toBeInTheDocument();
+    });
+  });
 });