Merge branch 'master' into fix/respect-backend-payload-encoding

Author: jvorcak

.github/workflows/frontend-verify.yml

@@ -7,10 +7,6 @@ on:
     paths:
       - "frontend/**"
       - ".github/workflows/frontend-verify.yml"
-    branches-ignore:
-      - "dependabot/**"
-      - "snyk-upgrade-**"
-      - "gh-readonly-queue/**"
   pull_request:
     paths:
       - "frontend/**"
@@ -204,10 +200,10 @@ jobs:
       - name: Install Playwright browsers
         run: bun run install:chromium
       - name: Install Go dependencies
-        working-directory: ../backend/cmd/api
+        working-directory: backend/cmd/api
         run: go get .
       - name: Build Go server
-        working-directory: ../backend/cmd/api
+        working-directory: backend/cmd/api
         run: go build -v ./...
       - name: Log networks
         if: runner.debug == '1'

backend/pkg/console/incremental_alter_topic_configs.go

@@ -11,6 +11,7 @@ package console
 
 import (
 	"context"
+	"errors"
 
 	"github.com/twmb/franz-go/pkg/kmsg"
 )
@@ -30,6 +31,17 @@ func (s *Service) EditTopicConfig(ctx context.Context, topicName string, configs
 	req := kmsg.NewIncrementalAlterConfigsRequest()
 	req.Resources = []kmsg.IncrementalAlterConfigsRequestResource{alterResource}
 
-	_, err = req.RequestWith(ctx, cl)
-	return err
+	response, err := req.RequestWith(ctx, cl)
+	if err != nil {
+		return err
+	}
+
+	var kafkaErrs error
+	for _, resource := range response.Resources {
+		kafkaErr := newKafkaErrorWithDynamicMessage(resource.ErrorCode, resource.ErrorMessage)
+		if kafkaErr != nil {
+			kafkaErrs = errors.Join(kafkaErrs, kafkaErr)
+		}
+	}
+	return kafkaErrs
 }

frontend/bun.lock

@@ -115,6 +115,7 @@
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
         "@types/json-bigint": "^1.0.4",
         "@types/node": "^22.19.1",
         "@types/react": "^18.3.26",
@@ -926,6 +927,8 @@
 
     "@testing-library/react": ["@testing-library/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.12.5" }, "peerDependencies": { "@testing-library/dom": "^10.0.0", "@types/react": "^18.0.0 || ^19.0.0", "@types/react-dom": "^18.0.0 || ^19.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw=="],
 
+    "@testing-library/user-event": ["@testing-library/[email protected]", "", { "peerDependencies": { "@testing-library/dom": ">=7.21.4" } }, "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw=="],
+
     "@textea/json-viewer": ["@textea/[email protected]", "", { "dependencies": { "clsx": "^2.1.1", "copy-to-clipboard": "^3.3.3", "zustand": "^4.5.5" }, "peerDependencies": { "@emotion/react": "^11", "@emotion/styled": "^11", "@mui/material": "^6", "react": "^17 || ^18", "react-dom": "^17 || ^18" } }, "sha512-7FH4ti3kVNyKhe/gl85w+8KllXJY9XQalY2KZnBn9ST1CjhqZQCWJLkYf24aX2FOv2D/8cvAllYkFX46A7C9KQ=="],
 
     "@tootallnate/once": ["@tootallnate/[email protected]", "", {}, "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw=="],

frontend/package.json

@@ -150,6 +150,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/json-bigint": "^1.0.4",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.19.1",
     "@types/react": "^18.3.26",
     "@types/react-beautiful-dnd": "^13.1.8",

frontend/src/components/pages/mcp-servers/details/remote-mcp-toggle-button.test.tsx

@@ -38,8 +38,6 @@ vi.mock('config', () => ({
 
 import { RemoteMCPToggleButton } from './remote-mcp-toggle-button';
 
-const START_BUTTON_REGEX = /start/i;
-
 describe('RemoteMCPToggleButton', () => {
   test('should stop a running MCP server from the details page', async () => {
     const serverId = 'server-1';
@@ -253,7 +251,7 @@ describe('RemoteMCPToggleButton', () => {
     );
 
     await waitFor(() => {
-      const startButton = screen.getByRole('button', { name: START_BUTTON_REGEX });
+      const startButton = screen.getByTestId('start-mcp-server-button');
       expect(startButton).toBeVisible();
       expect(startButton).toBeDisabled();
     });
@@ -294,7 +292,7 @@ describe('RemoteMCPToggleButton', () => {
     );
 
     await waitFor(() => {
-      const startButton = screen.getByRole('button', { name: /start/i });
+      const startButton = screen.getByRole('button', { name: 'Start' });
       expect(startButton).toBeVisible();
       expect(startButton).toBeEnabled();
     });

frontend/src/components/pages/secrets/create-secret-modal.tsx

@@ -54,12 +54,7 @@ export const CreateSecretModal = ({ isOpen, onClose, customSecretSchema, helperT
   };
 
   // Form type
-  type Secret = {
-    id: string;
-    value: string;
-    labels: string[];
-    scopes: Scope[];
-  };
+  type Secret = z.infer<typeof finalSchema>;
 
   const defaultValues: Secret = {
     id: '',
@@ -71,6 +66,7 @@ export const CreateSecretModal = ({ isOpen, onClose, customSecretSchema, helperT
   const formOpts = formOptions({
     defaultValues,
     validators: {
+      // @ts-expect-error - Zod schema type incompatibility with @tanstack/react-form validators
       onChange: finalSchema,
     },
     onSubmit: async ({ value }) => {
@@ -169,8 +165,10 @@ export const CreateSecretModal = ({ isOpen, onClose, customSecretSchema, helperT
                           <FormErrorMessage>
                             <UnorderedList>
                               {state.meta.errors?.map((error) => (
-                                <li key={error.path}>
-                                  <Text color="red.500">{error.message}</Text>
+                                // biome-ignore lint/suspicious/noExplicitAny: error type from @tanstack/react-form is not properly typed
+                                <li key={(error as any)?.path ?? ''}>
+                                  {/* biome-ignore lint/suspicious/noExplicitAny: error type from @tanstack/react-form is not properly typed */}
+                                  <Text color="red.500">{(error as any)?.message ?? 'Validation error'}</Text>
                                 </li>
                               ))}
                             </UnorderedList>

frontend/src/components/pages/secrets/update-secret-modal.tsx

@@ -61,6 +61,8 @@ export const UpdateSecretModal = ({ isOpen, onClose, secretId }: UpdateSecretMod
         .map(([key, value]) => ({ key, value }))
     : [{ key: '', value: '' }];
 
+  const updateSchema = secretSchema(z.string().optional());
+
   const formOpts = formOptions({
     defaultValues: {
       id: secretId,
@@ -69,7 +71,8 @@ export const UpdateSecretModal = ({ isOpen, onClose, secretId }: UpdateSecretMod
       labels: existingLabels.length > 0 ? existingLabels : [],
     },
     validators: {
-      onChange: secretSchema(z.string().optional()),
+      // @ts-expect-error - Zod schema type incompatibility with @tanstack/react-form validators
+      onChange: updateSchema,
     },
     onSubmit: async ({ value }) => {
       const labelsMap: { [key: string]: string } = {};
@@ -141,8 +144,10 @@ export const UpdateSecretModal = ({ isOpen, onClose, secretId }: UpdateSecretMod
                           <FormErrorMessage>
                             <UnorderedList>
                               {state.meta.errors?.map((error) => (
-                                <li key={error.path}>
-                                  <Text color="red.500">{error.message}</Text>
+                                // biome-ignore lint/suspicious/noExplicitAny: error type from @tanstack/react-form is not properly typed
+                                <li key={(error as any)?.path ?? ''}>
+                                  {/* biome-ignore lint/suspicious/noExplicitAny: error type from @tanstack/react-form is not properly typed */}
+                                  <Text color="red.500">{(error as any)?.message ?? 'Validation error'}</Text>
                                 </li>
                               ))}
                             </UnorderedList>

frontend/src/components/pages/shadowlinks/create/configuration/acl-filter-resume.tsx

@@ -36,7 +36,7 @@ export const ACLFilterResume = ({ index }: { index: number }) => {
       <div className="font-medium text-sm">ACL Filter {index + 1}</div>
       <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm md:grid-cols-3">
         <div>
-          <span className="text-muted-foreground">Resource Type:</span>{' '}
+          <span className="text-muted-foreground">Resource type:</span>{' '}
           <Badge size="sm" variant="blue">
             {getResourceTypeLabel(resourceType)}
           </Badge>
@@ -48,7 +48,7 @@ export const ACLFilterResume = ({ index }: { index: number }) => {
           </Badge>
         </div>
         <div>
-          <span className="text-muted-foreground">Resource Name:</span>{' '}
+          <span className="text-muted-foreground">Resource name:</span>{' '}
           <Badge size="sm" variant="blue">
             {resourceName || 'All'}
           </Badge>

frontend/src/components/pages/shadowlinks/create/configuration/acls-step.tsx

@@ -152,7 +152,7 @@ export const AclsStep = () => {
                   {fields.map((field, index) => (
                     <Card data-testid={`acl-filter-${index}`} key={field.id} size="full" variant="elevated">
                       <CardHeader>
-                        <CardTitle className="text-base">ACL Filter {index + 1}</CardTitle>
+                        <CardTitle className="text-base">ACL filter {index + 1}</CardTitle>
                         <CardAction>
                           <Button
                             data-testid={`delete-acl-filter-${index}`}
@@ -174,7 +174,7 @@ export const AclsStep = () => {
                               name={`aclFilters.${index}.resourceType`}
                               render={({ field: resourceTypeField }) => (
                                 <FormItem data-testid={`acl-filter-${index}-resource-type`}>
-                                  <FormLabel>Resource Type</FormLabel>
+                                  <FormLabel>Resource type</FormLabel>
                                   <Select
                                     onValueChange={(v) => resourceTypeField.onChange(Number(v))}
                                     value={
@@ -247,7 +247,7 @@ export const AclsStep = () => {
                               name={`aclFilters.${index}.resourceName`}
                               render={({ field: resourceNameField }) => (
                                 <FormItem className="md:col-span-2">
-                                  <FormLabel>Resource Name</FormLabel>
+                                  <FormLabel>Resource name</FormLabel>
                                   <FormControl>
                                     <Input placeholder="All" {...resourceNameField} />
                                   </FormControl>
@@ -269,7 +269,11 @@ export const AclsStep = () => {
                                 <FormItem>
                                   <FormLabel>Principal</FormLabel>
                                   <FormControl>
-                                    <Input placeholder="All" {...principalField} />
+                                    <Input
+                                      placeholder="All"
+                                      testId={`acl-filter-${index}-principal`}
+                                      {...principalField}
+                                    />
                                   </FormControl>
                                   <FormDescription>Empty matches all principals</FormDescription>
                                   <FormMessage />

frontend/src/components/pages/shadowlinks/create/configuration/consumer-offset-step.tsx

@@ -24,7 +24,11 @@ import { FilterItem } from './filter-item';
 import type { FormValues } from '../model';
 
 export const ConsumerOffsetStep = () => {
-  const { control, setValue } = useFormContext<FormValues>();
+  const {
+    control,
+    setValue,
+    formState: { errors },
+  } = useFormContext<FormValues>();
   const [isOpen, setIsOpen] = useState(false);
 
   const consumersMode = useWatch({ control, name: 'consumersMode' });
@@ -82,18 +86,23 @@ export const ConsumerOffsetStep = () => {
             {/* Resume/summary view when collapsed */}
             {!isOpen && consumersMode === 'specify' && fields.length > 0 && (
               <div className="mt-4 space-y-2">
-                {fields.map((field, index) => (
-                  <FilterItem
-                    control={control}
-                    fieldNamePrefix="consumers"
-                    index={index}
-                    key={field.id}
-                    onRemove={() => remove(index)}
-                    viewType={false}
-                  >
-                    {null}
-                  </FilterItem>
-                ))}
+                {fields.map((field, index) => {
+                  const fieldError = errors.consumers?.[index];
+                  const errorMessage = fieldError?.name?.message;
+                  return (
+                    <FilterItem
+                      control={control}
+                      errorMessage={errorMessage}
+                      fieldNamePrefix="consumers"
+                      index={index}
+                      key={field.id}
+                      onRemove={() => remove(index)}
+                      viewType={false}
+                    >
+                      {null}
+                    </FilterItem>
+                  );
+                })}
               </div>
             )}
 
@@ -125,7 +134,11 @@ export const ConsumerOffsetStep = () => {
                         render={({ field: nameField }) => (
                           <FormItem className="flex-1">
                             <FormControl>
-                              <Input placeholder="e.g., my-consumer-group or prefix-*" {...nameField} />
+                              <Input
+                                placeholder="e.g., my-consumer-group or prefix-*"
+                                testId={`consumer-filter-${index}-name`}
+                                {...nameField}
+                              />
                             </FormControl>
                             <FormMessage />
                           </FormItem>