Adding the "numbered" props to array field to display value position in array

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

@@ -9,6 +9,8 @@ import {
   FormContextType,
 } from '@rjsf/utils';
 import { CrudTextRJSFSchema } from "../widgets/crud-text-widget";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
@@ -21,13 +23,6 @@ export default function ArrayFieldTemplate<
 >(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',
@@ -48,6 +43,18 @@ export default function ArrayFieldTemplate<
   const {
     ButtonTemplates: { AddButton },
   } = registry.templates;
+
+  let gridSize = 12;
+  let numbered = false
+  if (schema.props) {
+    if (schema.props.hasOwnProperty("items_per_row")) {
+      gridSize = gridSize / schema.props.items_per_row;
+    }
+    if (schema.props.hasOwnProperty("numbered")) {
+      numbered = schema.props.numbered;
+    }
+  }
+
   return (
     <Paper elevation={2}>
       <Box p={2}>
@@ -68,8 +75,13 @@ export default function ArrayFieldTemplate<
         />
         <Grid2 container justifyContent='flex-end'>
         {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
-            <Grid2 key={key} size={gridSize} ><ArrayFieldItemTemplate key={key} {...itemProps} /></Grid2>
+          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>, index) => (
+            <Grid2 key={key} size={gridSize} >
+              <Stack direction="row" sx={{alignItems: "center"}}>
+                {numbered &&<Typography variant="h4">{index + 1}</Typography>}
+                <ArrayFieldItemTemplate key={key} {...itemProps} />
+              </Stack>
+            </Grid2>
           ))}
         </Grid2>
         {canAdd && (