fix(topics): hide Infinite button for capped configs + fix Custom SELECT width (UX-1235) (#2418)

* fix(topics): hide Infinite button for capped config keys (UX-1222)

The topic config editor showed an "Infinite" button for every config whose
frontendFormat was BYTE_SIZE or DURATION. For configs that the broker hard-caps
(e.g. max.message.bytes, segment.bytes), clicking it submitted -1, which the
broker reinterpreted as 4294967295 and rejected with INVALID_CONFIG.

Add an opt-out field `noInfiniteValue` to the config extension schema.
Configs that do not accept an infinite sentinel declare it in JSON, and the
frontend hides the Infinite button for them. BYTE_SIZE and DURATION configs
continue to show the button by default.

Apply the opt-out to max.message.bytes and segment.bytes.

* fix(topics): force min width on Custom SELECT dropdown (UX-1235)

chakra-react-select's container has an intrinsic maxWidth: fit-content,
so even with a minW on the wrapping Box the SingleSelect collapses to
the width of its current value. For message.timestamp.type with no
initial value the whole control rendered at ~69px and option labels
were truncated to "Creat" / "LogA".

Override via chakraStyles on the SELECT case to set container
minWidth: 240px directly. Keeps the Custom Box layout untouched for
BYTE_SIZE / DURATION controls.

Author: c-julin

backend/pkg/console/config_extensions.go

@@ -52,6 +52,12 @@ type ConfigEntryExtension struct {
 	// the user the available compression methods for `compression.type`.
 	// The presented values may be dependent on the target Kafka cluster version.
 	EnumValues []string `json:"enumValues,omitempty"`
+
+	// NoInfiniteValue opts a config out of the "Infinite" button in the config
+	// editor. BYTE_SIZE and DURATION configs show Infinite by default; set this
+	// to true for configs where the broker rejects the infinite sentinel (e.g.
+	// max.message.bytes, segment.bytes, which have hard server-side caps).
+	NoInfiniteValue bool `json:"noInfiniteValue,omitempty"`
 }
 
 func loadConfigExtensions() (map[string]ConfigEntryExtension, error) {

backend/pkg/embed/kafka/apache_kafka_configs.json

@@ -60,7 +60,8 @@
     "type": "INT",
     "documentation": "This configuration controls the segment file size for the log. Retention and cleaning is always done a file at a time so a larger segment size means fewer files but less granular control over retention.",
     "category": "Storage Internals",
-    "frontendFormat": "BYTE_SIZE"
+    "frontendFormat": "BYTE_SIZE",
+    "noInfiniteValue": true
   },
   {
     "name": "retention.ms",
@@ -102,7 +103,8 @@
     "type": "INT",
     "documentation": "The largest record batch size allowed by Kafka (after compression if compression is enabled). If this is increased and there are consumers older than 0.10.2, the consumers' fetch size must also be increased so that they can fetch record batches this large. In the latest message format version, records are always grouped into batches for efficiency. In previous message format versions, uncompressed records are not grouped into batches and this limit only applies to a single record in that case.",
     "category": "Message Handling",
-    "frontendFormat": "BYTE_SIZE"
+    "frontendFormat": "BYTE_SIZE",
+    "noInfiniteValue": true
   },
   {
     "name": "min.compaction.lag.ms",

frontend/src/components/pages/topics/topic-configuration.tsx

@@ -79,7 +79,10 @@ const ConfigEditorForm: FC<{
     },
   });
 
-  const hasInfiniteValue = editedEntry.frontendFormat && ['BYTE_SIZE', 'DURATION'].includes(editedEntry.frontendFormat);
+  const hasInfiniteValue =
+    editedEntry.frontendFormat &&
+    ['BYTE_SIZE', 'DURATION'].includes(editedEntry.frontendFormat) &&
+    !editedEntry.noInfiniteValue;
   const valueTypeOptions: Array<{
     label: string;
     value: Inputs['valueType'];
@@ -439,6 +442,7 @@ export const ConfigEntryEditorController = <T extends string | number>(p: {
     case 'SELECT':
       return (
         <SingleSelect
+          chakraStyles={{ container: (base) => ({ ...base, minWidth: '240px' }) }}
           className={p.className}
           onChange={onChange}
           options={

frontend/src/state/rest-interfaces.ts

@@ -277,6 +277,7 @@ export type ConfigEntryExtended = ConfigEntry & {
     | 'DECIMAL'
     | 'INTEGER';
   enumValues?: string[];
+  noInfiniteValue?: boolean;
 
   // added by frontend
   currentValue: string | number | null | undefined;