fix(frontend): topic-list error fix + dependency & code-health cleanup (#2501)

* chore(frontend): remove six unused dependencies

Drop moment, react-draggable, jwt-decode, chakra-react-select,
@autoform/react, and @autoform/zod — zero imports across the frontend
(audit finding DEPS-01).

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

* refactor(frontend): extract named cache-policy stale-time constants

Replace inline staleTime magic numbers with named constants
(DEFAULT_QUERY_STALE_TIME, TOPIC_CONFIG_STALE_TIME) reusing the existing
*_LIVED_CACHE_STALE_TIME convention. Values are unchanged (audit DATA-04).

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

* refactor(frontend): type-check ACL query inputs instead of casting

Drop four `{} as ListACLsRequest` casts on connect-query listACLs calls so
the request shape is checked against the proto, and remove the now-unused
ListACLsRequest imports (audit DATA-05).

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

* chore(frontend): remove dead commented-out MobX demo block

Delete the 90-line commented AnimationExample (observer/observable) from
animation-props.tsx. No MobX references remain in src (audit LEGACY-08).

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

* fix(frontend): surface HTTP errors in the legacy topic list query

useLegacyListTopicsQuery used window.fetch, which does not reject on 4xx/5xx,
and returned response.json() unguarded — so a 403/500 with a JSON body parsed
as a successful empty result and the topics page silently rendered 0 topics
instead of an error. Guard on response.ok and add a regression test covering
the error and success paths (audit BUGS-01).

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

* fix(frontend): stop logging document URLs during topic-doc render

Remove a console.log that printed every transformed link/image URL from
backend-supplied topic documentation on each render. The sanitizeUrl logic is
unchanged (audit SECURITY-02).

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

* test(frontend): set ok:true on add-topic-step topic-list fetch mocks

The BUGS-01 fix makes useLegacyListTopicsQuery guard response.ok, so the
config.fetch success mocks must mirror a real Response (ok:true) — otherwise
the guard throws and existing-topic detection breaks.

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

* refactor(frontend): align cache-constant naming and clarify fetch comment

Address @claude review nits: rename DEFAULT_QUERY_STALE_TIME ->
DEFAULT_CACHE_STALE_TIME and TOPIC_CONFIG_STALE_TIME ->
TOPIC_CONFIG_CACHE_STALE_TIME to match the existing *_CACHE_STALE_TIME
convention, and reword the topic.tsx comment to reference config.fetch
(not window.fetch). No behavior change.

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

---------

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

Author: malinskibeniamin

frontend/bun.lock

@@ -49,8 +49,6 @@
   },
   "dependencies": {
     "@a2a-js/sdk": "^0.3.13",
-    "@autoform/react": "^4.0.0",
-    "@autoform/zod": "^5.0.0",
     "@base-ui/react": "^1.5.0",
     "@buf/redpandadata_cloud.connectrpc_query-es": "^2.2.0-20251128173054-b9f9fc6e5a70.1",
     "@buf/redpandadata_common.bufbuild_es": "^2.11.0-20260316210807-5d899910f714.1",
@@ -89,7 +87,6 @@
     "@xyflow/react": "^12.9.2",
     "ai": "^6.0.168",
     "array-move": "^4.0.0",
-    "chakra-react-select": "5.0.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -102,7 +99,6 @@
     "hast-util-to-jsx-runtime": "^2.3.6",
     "js-base64": "^3.7.8",
     "json-bigint": "^1.0.0",
-    "jwt-decode": "^4.0.0",
     "lottie-react": "^2.4.1",
     "lucide-react": "^1.17.0",
     "monaco-editor": "^0.54.0",
@@ -119,7 +115,6 @@
     "react-compiler-runtime": "^1.0.0",
     "react-day-picker": "^9.14.0",
     "react-dom": "^18.3.1",
-    "react-draggable": "^4.5.0",
     "react-dropzone": "^15.0.0",
     "react-highlight-words": "^0.21.0",
     "react-hook-form": "^7.72.0",

frontend/package.json

@@ -115,13 +115,15 @@ describe('AddTopicStep', () => {
     mockFetch.mockReset();
     // Default: return empty topic list
     mockFetch.mockResolvedValue({
+      ok: true,
       json: () => Promise.resolve(createTopicsResponse([])),
     });
   });
 
   it('existing topic returns name via triggerSubmit', async () => {
     const user = userEvent.setup();
     mockFetch.mockResolvedValue({
+      ok: true,
       json: () => Promise.resolve(createTopicsResponse(['my-topic', 'other-topic'])),
     });
 
@@ -284,6 +286,7 @@ describe('AddTopicStep', () => {
 
   it('selectionMode=existing shows combobox', async () => {
     mockFetch.mockResolvedValue({
+      ok: true,
       json: () => Promise.resolve(createTopicsResponse(['topic-a'])),
     });
     const transport = createTransport();
@@ -297,6 +300,7 @@ describe('AddTopicStep', () => {
   it('existing topic alert shown in create mode when name matches', async () => {
     const user = userEvent.setup();
     mockFetch.mockResolvedValue({
+      ok: true,
       json: () => Promise.resolve(createTopicsResponse(['existing-topic'])),
     });
     const transport = createTransport();
@@ -356,6 +360,7 @@ describe('AddTopicStep', () => {
 
   it('selectionMode=both renders toggle group', async () => {
     mockFetch.mockResolvedValue({
+      ok: true,
       json: () => Promise.resolve(createTopicsResponse(['t1'])),
     });
     const transport = createTransport();

frontend/src/components/pages/rp-connect/onboarding/add-topic-step.test.tsx

@@ -14,11 +14,7 @@ import { useMemo } from 'react';
 import { useStore } from 'zustand';
 
 import { usePrincipalList } from './use-principal-list';
-import {
-  ACL_PermissionType,
-  ACL_ResourceType,
-  type ListACLsRequest,
-} from '../../../../protogen/redpanda/api/dataplane/v1/acl_pb';
+import { ACL_PermissionType, ACL_ResourceType } from '../../../../protogen/redpanda/api/dataplane/v1/acl_pb';
 import { listACLs } from '../../../../protogen/redpanda/api/dataplane/v1/acl-ACLService_connectquery';
 import { getACLOperation } from '../../../../react-query/api/acl';
 import { type RolePrincipal, useRolesStore } from '../../../../state/backend-api';
@@ -58,7 +54,7 @@ const RESOURCE_TYPE_LABELS: Partial<Record<ACL_ResourceType, string>> = {
 };
 
 export function useUserPermissions(userName: string) {
-  const { data: allAclsData, isLoading } = useQuery(listACLs, {} as ListACLsRequest);
+  const { data: allAclsData, isLoading } = useQuery(listACLs, {});
   const roleMembers = useStore(useRolesStore, (s) => s.roleMembers);
 
   const permissions = useMemo(() => {
@@ -111,7 +107,7 @@ export function usePrincipalPermissions() {
     isLoading: isAclsLoading,
     isError: isAclsError,
     error: aclsError,
-  } = useQuery(listACLs, {} as ListACLsRequest);
+  } = useQuery(listACLs, {});
 
   const { principals, isUsersError, usersError } = usePrincipalList();
   const roleMembers = useStore(useRolesStore, (s) => s.roleMembers);

frontend/src/components/pages/security/hooks/use-principal-permissions.ts

@@ -13,7 +13,6 @@ import { useQuery } from '@connectrpc/connect-query';
 import { useNavigate } from '@tanstack/react-router';
 import { TagsValue } from 'components/redpanda-ui/components/tags';
 
-import type { ListACLsRequest } from '../../../../protogen/redpanda/api/dataplane/v1/acl_pb';
 import { listACLs } from '../../../../protogen/redpanda/api/dataplane/v1/acl-ACLService_connectquery';
 import { rolesApi } from '../../../../state/backend-api';
 import { useSupportedFeaturesStore } from '../../../../state/supported-features';
@@ -43,7 +42,7 @@ export const UserRoleTags = ({
       filter: {
         principal: `${principalType}:${userName}`,
       },
-    } as ListACLsRequest,
+    },
     {
       enabled: !!userName,
       select: (response) => response.resources.length > 0,

frontend/src/components/pages/security/shared/user-role-tags.tsx

@@ -42,8 +42,6 @@ const allowedProtocols = ['http://', 'https://', 'mailto://'];
 
 function sanitizeUrl(uri: string): string {
   const baseTransformed = baseUriTransformer(uri);
-  // biome-ignore lint/suspicious/noConsole: intentional console usage
-  console.log('baseTransformed', baseTransformed);
   if (baseTransformed !== uri) {
     return baseTransformed;
   }

frontend/src/components/pages/topics/tab-docu.tsx

@@ -35,6 +35,7 @@ import { createConnectTransport } from '@connectrpc/connect-web';
 import { QueryClient } from '@tanstack/react-query';
 import { createMemoryHistory, createRouter, RouterProvider } from '@tanstack/react-router';
 import { protobufRegistry } from 'protobuf-registry';
+import { LONG_LIVED_CACHE_STALE_TIME } from 'react-query/react-query.utils';
 
 import { FederatedProviders } from './federated-providers';
 import { TokenManager } from './token-manager';
@@ -139,7 +140,7 @@ function createFederatedQueryClient() {
   return new QueryClient({
     defaultOptions: {
       queries: {
-        staleTime: 1000 * 60 * 5, // 5 minutes
+        staleTime: LONG_LIVED_CACHE_STALE_TIME,
         retry: 1,
       },
     },

frontend/src/federation/console-app.tsx

@@ -1,5 +1,6 @@
 import { Code, ConnectError } from '@connectrpc/connect';
 import { QueryClient } from '@tanstack/react-query';
+import { DEFAULT_CACHE_STALE_TIME } from 'react-query/react-query.utils';
 
 function isConnectError(error: Error | ConnectError): error is ConnectError {
   return error instanceof ConnectError;
@@ -8,7 +9,7 @@ function isConnectError(error: Error | ConnectError): error is ConnectError {
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 3 * 1000, // 3 seconds
+      staleTime: DEFAULT_CACHE_STALE_TIME,
       retry: (failureCount, error) => {
         if (failureCount > 3) {
           return false;