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

gui/rpk-gui/src/lib/crud/components/templates/ArrayFieldTemplate.tsx

@@ -0,0 +1,93 @@
+import Box from '@mui/material/Box';
+import Grid2 from '@mui/material/Grid2';
+import Paper from '@mui/material/Paper';
+import {
+  getTemplate,
+  getUiOptions,
+  ArrayFieldTemplateProps,
+  ArrayFieldTemplateItemType,
+  FormContextType,
+} from '@rjsf/utils';
+import { CrudTextRJSFSchema } from "../widgets/crud-text-widget";
+
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldTemplate<
+  T = any,
+  S extends CrudTextRJSFSchema = CrudTextRJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateProps<T, S, F>) {
+  const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } =
+    props;
+
+  let gridSize = 12;
+  if (schema.props) {
+    if (schema.props.hasOwnProperty("items_per_row")) {
+      gridSize = gridSize / schema.props.items_per_row;
+    }
+  }
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
+    'ArrayFieldDescriptionTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
+    'ArrayFieldItemTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
+    'ArrayFieldTitleTemplate',
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <Paper elevation={2}>
+      <Box p={2}>
+        <ArrayFieldTitleTemplate
+          idSchema={idSchema}
+          title={uiOptions.title || title}
+          schema={schema}
+          uiSchema={uiSchema}
+          required={required}
+          registry={registry}
+        />
+        <ArrayFieldDescriptionTemplate
+          idSchema={idSchema}
+          description={uiOptions.description || schema.description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+        <Grid2 container justifyContent='flex-end'>
+        {items &&
+          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+            <Grid2 key={key} size={gridSize} ><ArrayFieldItemTemplate key={key} {...itemProps} /></Grid2>
+          ))}
+        </Grid2>
+        {canAdd && (
+          <Grid2 container justifyContent='flex-end'>
+            <Grid2>
+              <Box mt={2}>
+                <AddButton
+                  className='array-item-add'
+                  onClick={onAddClick}
+                  disabled={disabled || readonly}
+                  uiSchema={uiSchema}
+                  registry={registry}
+                />
+              </Box>
+            </Grid2>
+          </Grid2>
+        )}
+      </Box>
+    </Paper>
+  );
+}