Customizing ArrayField template to control numbers of items per row (in a json schema stardardish way)

gui/rpk-gui/src/lib/crud/components/base-form.tsx

@@ -3,6 +3,7 @@ import Form from "@rjsf/mui";
 import { RegistryFieldsType, RegistryWidgetsType, RJSFSchema, UiSchema } from "@rjsf/utils";
 import CrudTextWidget from "./widgets/crud-text-widget";
 import UnionEnumField from "./fields/union-enum";
+import ArrayFieldTemplate from "./templates/ArrayFieldTemplate"
 import { ResourceContext } from "../contexts/ResourceContext";
 import { ReactNode } from "react";
 
@@ -24,6 +25,10 @@ export const customFields: RegistryFieldsType = {
   AnyOfField: UnionEnumField
 }
 
+const customTemplates = {
+  ArrayFieldTemplate
+}
+
 export const BaseForm: React.FC<BaseFormProps> = (props) => {
   const { schema, uiSchema, resourceBasePath, formData, children, onSubmit, onChange } = props;
 
@@ -38,6 +43,7 @@ export const BaseForm: React.FC<BaseFormProps> = (props) => {
         omitExtraData={true}
         widgets={customWidgets}
         fields={customFields}
+        templates={customTemplates}
         onChange={(e, id) => onChange != undefined && onChange(e.formData)}
         children={children}
       />