Improved e2e tests for quotas

Author: jvorcak

frontend/src/components/pages/quotas/quotas-list.tsx

@@ -9,21 +9,19 @@
  * by the Apache License, Version 2.0
  */
 
-import { createConnectQueryKey } from '@connectrpc/connect-query';
 import { Alert, AlertIcon, Button, DataTable, Result, Skeleton } from '@redpanda-data/ui';
-import { useQuery } from '@tanstack/react-query';
 import { useNavigate, useSearch } from '@tanstack/react-router';
 import { SkipIcon } from 'components/icons';
-import { config } from 'config';
+import { Link } from 'components/redpanda-ui/components/typography';
+import { useQuotasQuery } from 'hooks/use-quotas-query';
 import { useMemo } from 'react';
 
 import {
   Quota_EntityType,
   type Quota_Value,
   Quota_ValueType,
 } from '../../../protogen/redpanda/api/dataplane/v1/quota_pb';
-import { listQuotas } from '../../../protogen/redpanda/api/dataplane/v1/quota-QuotaService_connectquery';
-import type { QuotaResponse, QuotaResponseSetting } from '../../../state/rest-interfaces';
+import type { QuotaResponseSetting } from '../../../state/rest-interfaces';
 import { InfoText } from '../../../utils/tsx-utils';
 import { prettyBytes, prettyNumber } from '../../../utils/utils';
 import PageContent from '../../misc/page-content';
@@ -63,39 +61,6 @@ const mapEntityTypeToProto = (entityType: string): Quota_EntityType => {
   }
 };
 
-/**
- * Custom hook to fetch quotas from REST API until protobuf endpoint is available
- */
-const useQuotasQuery = () => {
-  // Create a query key compatible with Connect Query for future migration
-  const queryKey = createConnectQueryKey({
-    schema: listQuotas,
-    input: {},
-    cardinality: 'finite',
-  });
-
-  return useQuery<QuotaResponse | null>({
-    queryKey,
-    queryFn: async () => {
-      const response = await config.fetch(`${config.restBasePath}/quotas`, {
-        method: 'GET',
-        headers: {},
-      });
-
-      if (!response.ok) {
-        if (response.status === 403 || response.status === 401) {
-          throw new Error('You do not have permission to view quotas');
-        }
-        throw new Error(`Failed to fetch quotas: ${response.statusText}`);
-      }
-
-      const data: QuotaResponse = await response.json();
-      return data;
-    },
-    refetchOnMount: 'always',
-  });
-};
-
 const QuotasList = () => {
   const navigate = useNavigate({ from: '/quotas' });
   const search = useSearch({ from: '/quotas' });
@@ -179,9 +144,9 @@ const QuotasList = () => {
           <Section>
             <Result
               extra={
-                <a href="https://docs.redpanda.com/docs/manage/console/" rel="noopener noreferrer" target="_blank">
+                <Link href="https://docs.redpanda.com/docs/manage/console/" target="_blank">
                   <Button variant="solid">Redpanda Console documentation for roles and permissions</Button>
-                </a>
+                </Link>
               }
               status={403}
               title="Forbidden"

frontend/src/hooks/use-quotas-query.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { createConnectQueryKey } from '@connectrpc/connect-query';
+import { useQuery } from '@tanstack/react-query';
+import { config } from 'config';
+
+import { listQuotas } from '../protogen/redpanda/api/dataplane/v1/quota-QuotaService_connectquery';
+import type { QuotaResponse } from '../state/rest-interfaces';
+
+/**
+ * Custom hook to fetch quotas from REST API until protobuf endpoint is available
+ */
+export const useQuotasQuery = () => {
+  // Create a query key compatible with Connect Query for future migration
+  const queryKey = createConnectQueryKey({
+    schema: listQuotas,
+    input: {},
+    cardinality: 'finite',
+  });
+
+  return useQuery<QuotaResponse | null>({
+    queryKey,
+    queryFn: async () => {
+      const response = await config.fetch(`${config.restBasePath}/quotas`, {
+        method: 'GET',
+        headers: {},
+      });
+
+      if (!response.ok) {
+        if (response.status === 403 || response.status === 401) {
+          throw new Error('You do not have permission to view quotas');
+        }
+        throw new Error(`Failed to fetch quotas: ${response.statusText}`);
+      }
+
+      const data: QuotaResponse = await response.json();
+      return data;
+    },
+    refetchOnMount: 'always',
+  });
+};

frontend/src/routes/quotas.tsx

@@ -10,6 +10,7 @@
  */
 
 import { createFileRoute } from '@tanstack/react-router';
+import { fallback, zodValidator } from '@tanstack/zod-adapter';
 import { ScaleIcon } from 'components/icons';
 import { useLayoutEffect } from 'react';
 import { z } from 'zod';
@@ -18,16 +19,16 @@ import QuotasList from '../components/pages/quotas/quotas-list';
 import { uiState } from '../state/ui-state';
 
 const quotasSearchSchema = z.object({
-  page: z.number().int().min(0).catch(0).optional(),
-  pageSize: z.number().int().min(10).max(100).catch(50).optional(),
+  page: fallback(z.number().int().min(0).optional(), 0),
+  pageSize: fallback(z.number().int().min(10).max(100).optional(), 50),
 });
 
 export const Route = createFileRoute('/quotas')({
   staticData: {
     title: 'Quotas',
     icon: ScaleIcon,
   },
-  validateSearch: quotasSearchSchema,
+  validateSearch: zodValidator(quotasSearchSchema),
   component: QuotasWrapper,
 });
 

frontend/tests/test-variant-console-enterprise/playwright/.auth/user.json

@@ -5,6 +5,11 @@ import { QuotaPage } from '../utils/quota-page';
 
 const DEFAULT_PAGE_SIZE = 50;
 
+// Regex patterns for pagination tests
+const ENTITY_TYPE_REGEX = /client-id|user|ip/;
+const PAGE_0_REGEX = /page=0/;
+const PAGE_1_REGEX = /page=1/;
+
 test.describe('Quotas - Pagination', () => {
   test('should not show pagination controls when quotas count is less than page size', async ({ page }) => {
     await test.step('Navigate to quotas page', async () => {
@@ -13,10 +18,7 @@ test.describe('Quotas - Pagination', () => {
 
     await test.step('Verify pagination is not visible for small datasets', async () => {
       // Check if table has rows but pagination is not present
-      const rowCount = await page
-        .locator('tr')
-        .filter({ hasText: /client-id|user|ip/ })
-        .count();
+      const rowCount = await page.locator('tr').filter({ hasText: ENTITY_TYPE_REGEX }).count();
 
       // If there are less than 50 items, pagination should not be visible
       if (rowCount < DEFAULT_PAGE_SIZE) {
@@ -77,7 +79,7 @@ test.describe('Quotas - Pagination', () => {
       await quotaPage.clickNextPage();
 
       // Wait for page navigation to complete
-      await page.waitForURL(/page=1/, { timeout: 5000 });
+      await page.waitForURL(PAGE_1_REGEX, { timeout: 5000 });
     });
 
     await test.step('Verify page 1 quotas are no longer visible on page 2', async () => {
@@ -149,7 +151,7 @@ test.describe('Quotas - Pagination', () => {
 
     await test.step('Navigate to page 2', async () => {
       await quotaPage.clickNextPage();
-      await page.waitForURL(/page=1/, { timeout: 5000 });
+      await page.waitForURL(PAGE_1_REGEX, { timeout: 5000 });
     });
 
     await test.step('Capture page 2 quotas', async () => {
@@ -171,7 +173,7 @@ test.describe('Quotas - Pagination', () => {
 
     await test.step('Navigate back to page 1', async () => {
       await quotaPage.clickPreviousPage();
-      await page.waitForURL(/page=0/, { timeout: 5000 });
+      await page.waitForURL(PAGE_0_REGEX, { timeout: 5000 });
     });
 
     await test.step('Verify page 1 quotas are visible again', async () => {
@@ -239,10 +241,10 @@ test.describe('Quotas - Pagination', () => {
 
     await test.step('Navigate to page 2', async () => {
       await quotaPage.clickNextPage();
-      await page.waitForURL(/page=1/, { timeout: 5000 });
+      await page.waitForURL(PAGE_1_REGEX, { timeout: 5000 });
     });
 
-    await test.step('Verify URL contains pagination state', async () => {
+    await test.step('Verify URL contains pagination state', () => {
       const url = page.url();
       expect(url).toContain('page=1');
       expect(url).toContain(`pageSize=${PAGE_SIZE}`);