diff --git a/gui/rpk-gui/src/lib/crud/components/base-form.tsx b/gui/rpk-gui/src/lib/crud/components/base-form.tsx index cb7224d..ffd36b8 100644 --- a/gui/rpk-gui/src/lib/crud/components/base-form.tsx +++ b/gui/rpk-gui/src/lib/crud/components/base-form.tsx @@ -4,6 +4,7 @@ import { RegistryFieldsType, RegistryWidgetsType, RJSFSchema, UiSchema } from "@ import CrudTextWidget from "./widgets/crud-text-widget"; import UnionEnumField from "./fields/union-enum"; import ArrayFieldTemplate from "./templates/ArrayFieldTemplate" +import ArrayFieldItemTemplate from "./templates/ArrayFieldItemTemplate"; import { ResourceContext } from "../contexts/ResourceContext"; import { ReactNode } from "react"; @@ -26,7 +27,8 @@ export const customFields: RegistryFieldsType = { } const customTemplates = { - ArrayFieldTemplate + ArrayFieldTemplate, + ArrayFieldItemTemplate } export const BaseForm: React.FC = (props) => { diff --git a/gui/rpk-gui/src/lib/crud/components/templates/ArrayFieldItemTemplate.tsx b/gui/rpk-gui/src/lib/crud/components/templates/ArrayFieldItemTemplate.tsx new file mode 100644 index 0000000..a1dfba9 --- /dev/null +++ b/gui/rpk-gui/src/lib/crud/components/templates/ArrayFieldItemTemplate.tsx @@ -0,0 +1,96 @@ +import { CSSProperties } from 'react'; +import Box from '@mui/material/Box'; +import Grid2 from '@mui/material/Grid2'; +import Paper from '@mui/material/Paper'; +import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils'; +import Stack from "@mui/material/Stack"; + +/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array. + * + * @param props - The `ArrayFieldTemplateItemType` props for the component + */ +export default function ArrayFieldItemTemplate< + T = any, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = any +>(props: ArrayFieldTemplateItemType) { + const { + children, + disabled, + hasToolbar, + hasCopy, + hasMoveDown, + hasMoveUp, + hasRemove, + index, + onCopyIndexClick, + onDropIndexClick, + onReorderClick, + readonly, + uiSchema, + registry, + } = props; + const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates; + const btnStyle: CSSProperties = { + flex: 1, + paddingLeft: 6, + paddingRight: 6, + fontWeight: 'bold', + minWidth: 0, + }; + + const displayToolbar = hasToolbar && !props.readonly; + return ( + + + + + {children} + + + + {displayToolbar && ( + + + {(hasMoveUp || hasMoveDown) && ( + + )} + {(hasMoveUp || hasMoveDown) && ( + + )} + {hasCopy && ( + + )} + {hasRemove && ( + + )} + + + )} + + ); +}