test(frontend): make unit + integration test suites warning-free (#2506)

Eliminate every console warning emitted during `bun run test:unit` and
`bun run test:integration` (1124 + 799 tests) so the suites run clean and
the test-warning hooks pass without TEST_WARNINGS_ALLOW.

Source fix:
- tsx-utils Button: destructure `disabledReason` out of the spread in BOTH
  branches. Previously the no-tooltip branch spread the whole prop bag, so
  the (falsy) `disabledReason` key still reached RpButton and leaked to the
  DOM element, which React warns about as an unknown attribute.

Test-side act() fixes (no source/behavior change):
- create-acl: 5 synchronous tests rendered an RHF form whose default-value /
  resolver settling landed after the sync body but before unmount, outside
  act(). Made them async and switched the primary assertion to findByTestId
  (polls inside act, flushing the pending update).
- shadowlink-create-page: page useForm uses mode:'onChange' + async
  zodResolver; each synchronous fireEvent.input kicked off validation that
  re-rendered subscribers one microtask later, outside act(). Await each
  input's settled value, plus the final toast.success, so updates flush
  inside act().
- group-details: the file's own afterEach store reset ran before RTL cleanup
  (vitest hooks are LIFO), re-rendering the still-mounted class component
  outside act(). Wrapped the reset in act() and switched initial waits to
  findByTestId.

Suppressed (external/vendored, not fixable in-repo — each with rationale):
- `ref` is not a prop: React 18.3 warning getter read by the CLI-installed
  registry Slot during asChild composition; resolves in React 19.
- isInPortal: valid @redpanda-data/ui Popover prop the component forwards to
  a DOM node in some render paths.
- <button> descendant of <button>: @redpanda-data/ui Accordion renders
  `heading` inside its trigger button; the consumer-group topic view keeps
  its action controls in that header by design, so suppress rather than move
  them into the collapsed panel (a UX regression).

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: malinskibeniamin

frontend/src/components/pages/consumers/group-details.test.tsx

@@ -9,7 +9,7 @@
  * by the Apache License, Version 2.0
  */
 
-import { screen, waitFor } from 'test-utils';
+import { act, screen } from 'test-utils';
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 
 const { refreshConsumerGroupMock, refreshConsumerGroupAclsMock } = vi.hoisted(() => ({
@@ -108,15 +108,21 @@ describe('GroupDetails - unconsumed partitions', () => {
   });
 
   afterEach(() => {
-    useApiStore.setState({ consumerGroups: new Map(), consumerGroupAcls: new Map() });
+    // This afterEach runs before the harness's RTL cleanup() (vitest hooks are
+    // LIFO), so the GroupDetails tree is still mounted and its PageComponent
+    // store subscription fires forceUpdate() on this reset. Wrap the store
+    // mutation in act() so that re-render is flushed inside act().
+    act(() => {
+      useApiStore.setState({ consumerGroups: new Map(), consumerGroupAcls: new Map() });
+    });
   });
 
   test('edit button is enabled for consumed partition and disabled for unconsumed partitions', async () => {
     renderGroupDetails();
 
-    await waitFor(() => {
-      expect(screen.getByTestId('partition-edit-0')).toBeInTheDocument();
-    });
+    // findBy* polls inside act(), flushing the class component's async
+    // refreshData updates and the GroupState Popover's deferred effects.
+    expect(await screen.findByTestId('partition-edit-0')).toBeInTheDocument();
 
     // Partition 0 has a committed offset → edit button renders as <button>
     expect(screen.getByTestId('partition-edit-0').tagName).toBe('BUTTON');
@@ -129,9 +135,9 @@ describe('GroupDetails - unconsumed partitions', () => {
   test('unconsumed partitions render "—" for group offset and lag', async () => {
     renderGroupDetails();
 
-    await waitFor(() => {
-      expect(screen.getByTestId('partition-edit-1')).toBeInTheDocument();
-    });
+    // findBy* polls inside act(), flushing the class component's async
+    // refreshData updates and the GroupState Popover's deferred effects.
+    expect(await screen.findByTestId('partition-edit-1')).toBeInTheDocument();
 
     // Each unconsumed partition (1 and 2) shows "—" for both group offset and lag = 4 dashes minimum
     const dashes = screen.getAllByText('—');

frontend/src/components/pages/security/acls/create-acl.test.tsx

@@ -18,13 +18,13 @@ const noop = () => {};
 
 describe('CreateACL - principal field composability', () => {
   describe('default principal field (no renderPrincipal)', () => {
-    test('shows the principal type selector when principalType is provided without renderPrincipal', () => {
+    test('shows the principal type selector when principalType is provided without renderPrincipal', async () => {
       renderWithFileRoutes(<CreateACL edit={false} onCancel={noop} principalType={PrincipalTypeUser} />);
 
-      expect(screen.getByTestId('shared-principal-type-select')).toBeInTheDocument();
+      expect(await screen.findByTestId('shared-principal-type-select')).toBeInTheDocument();
     });
 
-    test('disables the principal type selector when edit is true', () => {
+    test('disables the principal type selector when edit is true', async () => {
       renderWithFileRoutes(
         <CreateACL
           edit={true}
@@ -34,12 +34,12 @@ describe('CreateACL - principal field composability', () => {
         />
       );
 
-      expect(screen.getByTestId('shared-principal-type-select')).toBeDisabled();
+      expect(await screen.findByTestId('shared-principal-type-select')).toBeDisabled();
     });
   });
 
   describe('custom principal field (renderPrincipal)', () => {
-    test('hides the default selector and shows custom content when renderPrincipal is provided', () => {
+    test('hides the default selector and shows custom content when renderPrincipal is provided', async () => {
       renderWithFileRoutes(
         <CreateACL
           edit={false}
@@ -54,12 +54,12 @@ describe('CreateACL - principal field composability', () => {
         />
       );
 
+      expect(await screen.findByTestId('custom-principal-field')).toBeInTheDocument();
       expect(screen.queryByTestId('shared-principal-type-select')).not.toBeInTheDocument();
-      expect(screen.getByTestId('custom-principal-field')).toBeInTheDocument();
       expect(screen.getByText('Role name')).toBeInTheDocument();
     });
 
-    test('passes correct value to renderPrincipal', () => {
+    test('passes correct value to renderPrincipal', async () => {
       renderWithFileRoutes(
         <CreateACL
           edit={false}
@@ -69,10 +69,10 @@ describe('CreateACL - principal field composability', () => {
         />
       );
 
-      expect(screen.getByTestId('principal-value')).toHaveTextContent('RedpandaRole:');
+      expect(await screen.findByTestId('principal-value')).toHaveTextContent('RedpandaRole:');
     });
 
-    test('passes disabled=true when edit is true', () => {
+    test('passes disabled=true when edit is true', async () => {
       renderWithFileRoutes(
         <CreateACL
           edit={true}
@@ -85,7 +85,7 @@ describe('CreateACL - principal field composability', () => {
         />
       );
 
-      expect(screen.getByTestId('disabled-state')).toHaveTextContent('disabled');
+      expect(await screen.findByTestId('disabled-state')).toHaveTextContent('disabled');
     });
   });
 });

frontend/src/components/pages/shadowlinks/create/shadowlink-create-page.test.tsx

@@ -12,6 +12,7 @@
 import { fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FilterType, PatternType } from 'protogen/redpanda/core/admin/v2/shadow_link_pb';
+import { toast } from 'sonner';
 import { renderWithFileRoutes, screen, waitFor } from 'test-utils';
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 
@@ -112,11 +113,19 @@ const performCreateAction = async (
       const nameInput = scr.getByPlaceholderText('my-shadow-link');
       // Value-only — tests assert submitted payload shape, not keystroke behaviour.
       fireEvent.input(nameInput, { target: { value: action.value } });
+      // mode: 'onChange' kicks off the async zodResolver, which re-renders the
+      // form fields once it settles. Await that settle so it lands inside act().
+      await waitFor(() => {
+        expect((nameInput as HTMLInputElement).value).toBe(action.value);
+      });
       break;
     }
     case 'fillBootstrapServer': {
       const serverInput = scr.getByTestId(`bootstrap-server-input-${action.index}`);
       fireEvent.input(serverInput, { target: { value: action.value } });
+      await waitFor(() => {
+        expect((serverInput as HTMLInputElement).value).toBe(action.value);
+      });
       break;
     }
     case 'addBootstrapServer':
@@ -125,11 +134,17 @@ const performCreateAction = async (
     case 'fillScramUsername': {
       const usernameInput = scr.getByTestId('scram-username-input');
       fireEvent.input(usernameInput, { target: { value: action.value } });
+      await waitFor(() => {
+        expect((usernameInput as HTMLInputElement).value).toBe(action.value);
+      });
       break;
     }
     case 'fillScramPassword': {
       const passwordInput = scr.getByTestId('scram-password-input');
       fireEvent.input(passwordInput, { target: { value: action.value } });
+      await waitFor(() => {
+        expect((passwordInput as HTMLInputElement).value).toBe(action.value);
+      });
       break;
     }
     case 'enableTLS':
@@ -461,6 +476,15 @@ describe('ShadowLinkCreatePage', () => {
 
     // Run custom verification function
     verify(createRequest, expect);
+
+    // The submit succeeds asynchronously: after mutateAsync resolves, the
+    // onSuccess callback fires toast.success and navigate(). Those land as a
+    // late RHF/router re-render of the still-mounted form fields. Await the
+    // settled side effect so any final update is flushed inside act() before
+    // the test ends.
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith('Shadow link created');
+    });
   });
 });
 

frontend/src/utils/tsx-utils.tsx

@@ -646,17 +646,17 @@ export function LabelTooltip(p: {
 
 export type ButtonProps = Omit<RpButtonProps, 'disabled' | 'isDisabled'> & { disabledReason?: string };
 export function Button(p: ButtonProps) {
-  if (!p.disabledReason) {
-    return <RpButton {...p} />;
+  // Destructure disabledReason OUT of the spread in BOTH branches: leaving the key (even with a
+  // falsy value) lets RpButton forward it to its DOM element, which React warns about as an
+  // unknown attribute.
+  const { disabledReason, ...btnProps } = p;
+  if (!disabledReason) {
+    return <RpButton {...btnProps} />;
   }
 
-  const reason = p.disabledReason;
-  const btnProps = { ...p };
-  btnProps.disabledReason = undefined;
-
   return (
-    <Tooltip hasArrow label={reason} placement="top">
-      <RpButton {...btnProps} className={`${p.className ?? ''} disabled`} isDisabled onClick={undefined} />
+    <Tooltip hasArrow label={disabledReason} placement="top">
+      <RpButton {...btnProps} className={`${btnProps.className ?? ''} disabled`} isDisabled onClick={undefined} />
     </Tooltip>
   );
 }

frontend/vitest.setup.integration.ts

@@ -182,6 +182,10 @@ const originalInfo = console.info;
 const SUPPRESSED_PATTERNS = [
   // Radix UI ref-forwarding — fixed in React 19, not actionable in React 18
   /Function components cannot be given refs/,
+  // React 18.3 installs a warning getter on `props.ref`; the CLI-installed registry Slot
+  // (components/redpanda-ui/lib/base-ui-compat.tsx) reads it during asChild composition. Not
+  // fixable here (vendored, CLI-managed) — fix upstream in the registry; resolves in React 19.
+  /`ref` is not a prop/,
   // Radix DialogContent missing Description/aria-describedby — tracked separately for a11y
   /Missing `Description` or `aria-describedby=\{undefined\}` for \{DialogContent\}/,
   // happy-dom DOMException noise from unmocked fetch/script loads
@@ -191,6 +195,21 @@ const SUPPRESSED_PATTERNS = [
   /socket hang up/,
   /ECONNREFUSED/,
   /ECONNRESET/,
+  // `isInPortal` is a valid @redpanda-data/ui Popover prop, but the Popover forwards it to a DOM
+  // element in some render paths (e.g. hover triggers) instead of consuming it. External component,
+  // used correctly on our side — fix upstream in @redpanda-data/ui.
+  // (React formats the prop name as a separate `%s` arg, so match the template + the isInPortal token.)
+  /React does not recognize the[\s\S]+\bisInPortal\b/,
+  // @redpanda-data/ui Accordion renders each item's `heading` inside its AccordionButton
+  // (a real <button>). The consumer-group topic view (pages/consumers/group-details.tsx)
+  // intentionally keeps the per-topic action controls (edit/delete offsets, "Go to topic")
+  // in that always-visible header for discoverability; relocating them into the collapsed
+  // panel was considered and rejected as a UX regression. That choice nests <button> inside
+  // <button> (invalid HTML). Suppressed pending an Accordion API that supports header-level
+  // actions rendered outside the trigger button — not fixable without changing UX here.
+  // (React logs this as a `%s ... <%s>` template with the tag names as separate args, so we
+  // match the phrase + the <button> token rather than the interpolated string.)
+  /cannot appear as a descendant of[\s\S]*<button>/,
   // @redpanda-data/ui hardcodes `debugTable: true` on its DataTable,
   // which makes @tanstack/table-core emit `console.info('Creating Table
   // Instance...')` on every table render. Not reachable from our source;