debezium/dbz#1859 add support for boolean and integer types in additi…

debezium-platform-stage/src/apis/useDeleteData.tsx

@@ -34,3 +34,5 @@ export const useDeleteData = ({
     },
   });
 };
+
+

debezium-platform-stage/src/components/AdditionalProperties.test.tsx

@@ -3,31 +3,44 @@ import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi } from "vitest";
 import AdditionalProperties from "./AdditionalProperties";
 import { render } from "../__test__/unit/test-utils";
+import type { AdditionalPropertyRow, AdditionalPropertyRowErrorCode } from "@utils/additionalConfigProperties";
 
 describe("AdditionalProperties", () => {
+  const defaultRow: AdditionalPropertyRow = {
+    key: "k1",
+    valueKind: "string",
+    stringValue: "v1",
+    booleanValue: false,
+    integerInput: "",
+  };
+
   it("renders rows, value input, remove, and add property", async () => {
     const user = userEvent.setup();
     const onAdd = vi.fn();
     const onDelete = vi.fn();
-    const onChange = vi.fn();
+    const onPatch = vi.fn();
+    const onValueKindChange = vi.fn();
 
-    const properties = new Map([
-      ["row-1", { key: "k1", value: "v1" }],
+    const properties = new Map<string, AdditionalPropertyRow>([
+      ["row-1", defaultRow],
     ]);
 
     render(
       <AdditionalProperties
         properties={properties}
-        schemaPropertyNames={["k1", "k2"]}
         onAdd={onAdd}
         onDelete={onDelete}
-        onChange={onChange}
-        errorKeys={[]}
+        onPatch={onPatch}
+        onValueKindChange={onValueKindChange}
+        rowIdsWithErrors={new Set()}
+        rowErrorCodes={new Map()}
       />,
     );
 
     expect(screen.getByDisplayValue("v1")).toBeInTheDocument();
-    await user.click(screen.getByRole("button", { name: "Remove" }));
+
+    // PatternFly and i18next might render 'Remove row' or similar based on translations.
+    await user.click(screen.getByRole("button", { name: /remove/i }));
     expect(onDelete).toHaveBeenCalledWith("row-1");
 
     await user.click(screen.getByRole("button", { name: /add property/i }));
@@ -37,33 +50,39 @@ describe("AdditionalProperties", () => {
   it("hides remove and add when readOnly", () => {
     render(
       <AdditionalProperties
-        properties={new Map([["r", { key: "a", value: "b" }]])}
-        schemaPropertyNames={[]}
+        properties={new Map([["row-1", defaultRow]])}
         onAdd={vi.fn()}
         onDelete={vi.fn()}
-        onChange={vi.fn()}
-        errorKeys={[]}
+        onPatch={vi.fn()}
+        onValueKindChange={vi.fn()}
+        rowIdsWithErrors={new Set()}
+        rowErrorCodes={new Map()}
         readOnly
       />,
     );
 
-    expect(screen.queryByRole("button", { name: "Remove" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /remove/i })).not.toBeInTheDocument();
     expect(screen.queryByRole("button", { name: /add property/i })).not.toBeInTheDocument();
   });
 
   it("marks value input error when id is in errorKeys", () => {
+    const rowErrorCodes = new Map<string, AdditionalPropertyRowErrorCode[]>([
+      ["row-e", ["empty_value"]],
+    ]);
     render(
       <AdditionalProperties
-        properties={new Map([["row-e", { key: "x", value: "" }]])}
-        schemaPropertyNames={[]}
+        properties={new Map([["row-e", { ...defaultRow, stringValue: "" }]])}
         onAdd={vi.fn()}
         onDelete={vi.fn()}
-        onChange={vi.fn()}
-        errorKeys={["row-e"]}
+        onPatch={vi.fn()}
+        onValueKindChange={vi.fn()}
+        rowIdsWithErrors={new Set(["row-e"])}
+        rowErrorCodes={rowErrorCodes}
       />,
     );
 
-    const valueInput = screen.getByPlaceholderText("Value");
+    // The value input has an aria-invalid attribute when marked with an error
+    const valueInput = screen.getByRole("textbox", { name: /value/i });
     expect(valueInput).toHaveAttribute("aria-invalid", "true");
   });
 });

debezium-platform-stage/src/components/AdditionalProperties.tsx

@@ -1,218 +1,59 @@
-import React, { useState, useRef } from "react";
+import React from "react";
 import {
   Button,
   FormGroup,
-  Grid,
-  Split,
-  SplitItem,
-  TextInput,
-  Select,
-  SelectOption,
-  SelectList,
-  MenuToggle,
-  MenuToggleElement,
-  TextInputGroup,
-  TextInputGroupMain,
-  TextInputGroupUtilities,
   Form,
 } from "@patternfly/react-core";
-import { PlusIcon, TimesIcon, TrashIcon } from "@patternfly/react-icons";
+import { PlusIcon } from "@patternfly/react-icons";
 import { useTranslation } from "react-i18next";
+import { AdditionalPropertiesRows } from "./AdditionalPropertiesRows";
+import type {
+  AdditionalPropertyRow,
+  AdditionalPropertyRowErrorCode,
+  AdditionalPropertyValueKind,
+} from "@utils/additionalConfigProperties";
 
 import "./AdditionalProperties.css";
 
 interface AdditionalPropertiesProps {
-  properties: Map<string, { key: string; value: string }>;
-  schemaPropertyNames: string[];
+  fieldIdPrefix?: string;
+  properties: Map<string, AdditionalPropertyRow>;
   onAdd: () => void;
   onDelete: (id: string) => void;
-  onChange: (id: string, type: "key" | "value", value: string) => void;
-  errorKeys: string[];
+  onPatch: (id: string, patch: Partial<AdditionalPropertyRow>) => void;
+  onValueKindChange: (id: string, kind: AdditionalPropertyValueKind) => void;
+  rowIdsWithErrors: Set<string>;
+  rowErrorCodes: Map<string, AdditionalPropertyRowErrorCode[]>;
   readOnly?: boolean;
 }
 
-interface TypeaheadKeyInputProps {
-  value: string;
-  suggestions: string[];
-  onChange: (value: string) => void;
-  fieldId: string;
-  readOnly?: boolean;
-}
-
-const TypeaheadKeyInput: React.FC<TypeaheadKeyInputProps> = ({
-  value,
-  suggestions,
-  onChange,
-  fieldId,
-  readOnly,
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [filterValue, setFilterValue] = useState("");
-  const textInputRef = useRef<HTMLInputElement>(null);
-
-  const filteredOptions = React.useMemo(() => {
-    if (!filterValue) return suggestions;
-    return suggestions.filter((s) =>
-      s.toLowerCase().includes(filterValue.toLowerCase())
-    );
-  }, [suggestions, filterValue]);
-
-  const onSelect = (
-    _e: React.MouseEvent<Element, MouseEvent> | undefined,
-    val: string | number | undefined
-  ) => {
-    if (val) {
-      onChange(String(val));
-      setFilterValue("");
-      setIsOpen(false);
-    }
-  };
-
-  const onTextInputChange = (
-    _e: React.FormEvent<HTMLInputElement>,
-    val: string
-  ) => {
-    setFilterValue(val);
-    onChange(val);
-    if (!isOpen) setIsOpen(true);
-  };
-
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle
-      ref={toggleRef}
-      variant="typeahead"
-      onClick={() => {
-        setIsOpen(!isOpen);
-        textInputRef.current?.focus();
-      }}
-      isExpanded={isOpen}
-      isFullWidth
-    >
-      <TextInputGroup isPlain>
-        <TextInputGroupMain
-          value={value}
-          onClick={() => !isOpen && setIsOpen(true)}
-          onChange={onTextInputChange}
-          id={fieldId}
-          autoComplete="off"
-          innerRef={textInputRef}
-          placeholder="Property key"
-          role="combobox"
-          isExpanded={isOpen}
-        />
-        <TextInputGroupUtilities
-          {...(!value ? { style: { display: "none" } } : {})}
-        >
-          <Button
-            variant="plain"
-            onClick={() => {
-              onChange("");
-              setFilterValue("");
-              textInputRef.current?.focus();
-            }}
-            aria-label="Clear"
-            icon={<TimesIcon />}
-          />
-        </TextInputGroupUtilities>
-      </TextInputGroup>
-    </MenuToggle>
-  );
-
-  if (readOnly) {
-    return (
-      <TextInput
-        id={fieldId}
-        value={value}
-        readOnly
-        readOnlyVariant="plain"
-        aria-label="Property key"
-      />
-    );
-  }
-
-  return (
-    <Select
-      id={`${fieldId}-select`}
-      isOpen={isOpen}
-      selected={value}
-      onSelect={onSelect}
-      onOpenChange={(open) => !open && setIsOpen(false)}
-      toggle={toggle}
-      variant="typeahead"
-      isScrollable
-      maxMenuHeight="min(50vh, 320px)"
-    >
-      <SelectList>
-        {filteredOptions.length === 0 ? (
-          <SelectOption isDisabled value="no-results">
-            No matching properties
-          </SelectOption>
-        ) : (
-          filteredOptions.slice(0, 50).map((opt) => (
-            <SelectOption key={opt} value={opt}>
-              {opt}
-            </SelectOption>
-          ))
-        )}
-      </SelectList>
-    </Select>
-  );
-};
-
 const AdditionalProperties: React.FC<AdditionalPropertiesProps> = ({
+  fieldIdPrefix = "addprop",
   properties,
-  schemaPropertyNames,
   onAdd,
   onDelete,
-  onChange,
-  errorKeys,
-  readOnly,
+  onPatch,
+  onValueKindChange,
+  rowIdsWithErrors,
+  rowErrorCodes,
+  readOnly = false,
 }) => {
   const { t } = useTranslation();
 
   return (
     <Form isWidthLimited>
-      <FormGroup fieldId="additional-properties-group">
-        {Array.from(properties.entries()).map(([id, prop]) => (
-          <Split hasGutter key={id} className="additional-properties-row">
-            <SplitItem isFilled>
-              <Grid hasGutter md={6}>
-                <FormGroup label="" fieldId={`addprop-key-${id}`}>
-                  <TypeaheadKeyInput
-                    value={prop.key}
-                    suggestions={schemaPropertyNames}
-                    onChange={(val) => onChange(id, "key", val)}
-                    fieldId={`addprop-key-input-${id}`}
-                    readOnly={readOnly}
-                  />
-                </FormGroup>
-                <FormGroup label="" fieldId={`addprop-value-${id}`}>
-                  <TextInput
-                    type="text"
-                    id={`addprop-value-input-${id}`}
-                    placeholder="Value"
-                    value={prop.value}
-                    validated={errorKeys.includes(id) ? "error" : "default"}
-                    onChange={(_e, val) => onChange(id, "value", val)}
-                    readOnly={!!readOnly}
-                    readOnlyVariant={readOnly ? "plain" : undefined}
-                  />
-                </FormGroup>
-              </Grid>
-            </SplitItem>
-            {!readOnly && (
-            <SplitItem>
-              <Button
-                variant="plain"
-                aria-label="Remove"
-                onClick={() => onDelete(id)}
-              >
-                <TrashIcon />
-              </Button>
-            </SplitItem>
-            )}
-          </Split>
-        ))}
+      <FormGroup fieldId={`${fieldIdPrefix}-group`}>
+        <AdditionalPropertiesRows
+          fieldIdPrefix={fieldIdPrefix}
+          properties={properties}
+          viewMode={readOnly}
+          rowIdsWithErrors={rowIdsWithErrors}
+          rowErrorCodes={rowErrorCodes}
+          onDeleteRow={onDelete}
+          onPatchRow={onPatch}
+          onValueKindChange={onValueKindChange}
+          showAddRemove={!readOnly}
+        />
       </FormGroup>
       {!readOnly && (
         <Button variant="secondary" icon={<PlusIcon />} onClick={onAdd}>