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>

Author: malinskibeniamin

frontend/src/components/pages/knowledgebase/list/knowledge-base-list-page.test.tsx

@@ -429,4 +429,102 @@ describe('KnowledgeBaseList', () => {
 
     expect(screen.getByRole('button', { name: 'Next Page' })).toBeDisabled();
   });
+
+  test('search input value updates on each keystroke', async () => {
+    const user = userEvent.setup();
+
+    const kb1 = create(KnowledgeBaseSchema, {
+      id: 'kb-1',
+      displayName: 'Alpha',
+      description: '',
+      tags: {},
+    });
+
+    const transport = createRouterTransport(({ rpc }) => {
+      rpc(listKnowledgeBases, () =>
+        create(ListKnowledgeBasesResponseSchema, {
+          knowledgeBases: [kb1],
+          nextPageToken: '',
+        })
+      );
+    });
+
+    renderWithFileRoutes(<KnowledgeBaseList />, { transport });
+
+    await waitFor(() => {
+      expect(screen.getByText('Alpha')).toBeVisible();
+    });
+
+    const filterInput = screen.getByPlaceholderText('Filter knowledge bases...');
+
+    await user.type(filterInput, 'test');
+
+    // The input value must reflect what was typed — a React Compiler
+    // memoization bug would freeze it at the initial empty string.
+    expect(filterInput).toHaveValue('test');
+  });
+
+  test('search input can be cleared and reused', async () => {
+    const user = userEvent.setup();
+
+    const kb1 = create(KnowledgeBaseSchema, {
+      id: 'kb-1',
+      displayName: 'Alpha KB',
+      description: '',
+      tags: {},
+    });
+
+    const kb2 = create(KnowledgeBaseSchema, {
+      id: 'kb-2',
+      displayName: 'Beta KB',
+      description: '',
+      tags: {},
+    });
+
+    const transport = createRouterTransport(({ rpc }) => {
+      rpc(listKnowledgeBases, () =>
+        create(ListKnowledgeBasesResponseSchema, {
+          knowledgeBases: [kb1, kb2],
+          nextPageToken: '',
+        })
+      );
+    });
+
+    renderWithFileRoutes(<KnowledgeBaseList />, { transport });
+
+    await waitFor(() => {
+      expect(screen.getByText('Alpha KB')).toBeVisible();
+      expect(screen.getByText('Beta KB')).toBeVisible();
+    });
+
+    const filterInput = screen.getByPlaceholderText('Filter knowledge bases...');
+
+    // Type to filter down to Alpha only
+    await user.type(filterInput, 'Alpha');
+
+    await waitFor(() => {
+      expect(screen.getByText('Alpha KB')).toBeVisible();
+      expect(screen.queryByText('Beta KB')).not.toBeInTheDocument();
+    });
+
+    // Clear the input completely
+    await user.clear(filterInput);
+    expect(filterInput).toHaveValue('');
+
+    // Both rows should reappear
+    await waitFor(() => {
+      expect(screen.getByText('Alpha KB')).toBeVisible();
+      expect(screen.getByText('Beta KB')).toBeVisible();
+    });
+
+    // Type again to filter down to Beta
+    await user.type(filterInput, 'Beta');
+
+    await waitFor(() => {
+      expect(screen.queryByText('Alpha KB')).not.toBeInTheDocument();
+      expect(screen.getByText('Beta KB')).toBeVisible();
+    });
+
+    expect(filterInput).toHaveValue('Beta');
+  });
 });

frontend/src/components/redpanda-ui/components/data-table-filter.tsx

@@ -1,3 +1,5 @@
+'use no memo';
+
 import type { Table } from '@tanstack/react-table';
 import { Ellipsis, FilterIcon, X } from 'lucide-react';
 import React, { isValidElement, memo, useCallback, useEffect, useMemo, useState } from 'react';

frontend/src/components/redpanda-ui/components/data-table.tsx

@@ -1,3 +1,5 @@
+'use no memo';
+
 'use client';
 
 import type { Column, ColumnDef, Row, Table } from '@tanstack/react-table';