diff --git a/gui/rpk-gui/src/lib/crud/components/templates/ArrayFieldTemplate.tsx b/gui/rpk-gui/src/lib/crud/components/templates/ArrayFieldTemplate.tsx index 1f6a961..54120df 100644 --- a/gui/rpk-gui/src/lib/crud/components/templates/ArrayFieldTemplate.tsx +++ b/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) { 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(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 ( @@ -68,8 +75,13 @@ export default function ArrayFieldTemplate< /> {items && - items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => ( - + items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType, index) => ( + + + {numbered &&{index + 1}} + + + ))} {canAdd && (