Improving display of array item fields

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<BaseFormProps> = (props) => {

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<T, S, F>) {
+  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 (
+    <Grid2 container alignItems='center'>
+      <Grid2 style={{ overflow: 'auto' }} size={ displayToolbar ? 11 : 12}>
+        <Box mb={2}>
+          <Paper elevation={2}>
+            <Box p={2}>{children}</Box>
+          </Paper>
+        </Box>
+      </Grid2>
+      {displayToolbar && (
+        <Grid2 size={1}>
+          <Stack direction="column">
+            {(hasMoveUp || hasMoveDown) && (
+              <MoveUpButton
+                style={btnStyle}
+                disabled={disabled || readonly || !hasMoveUp}
+                onClick={onReorderClick(index, index - 1)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            )}
+            {(hasMoveUp || hasMoveDown) && (
+              <MoveDownButton
+                style={btnStyle}
+                disabled={disabled || readonly || !hasMoveDown}
+                onClick={onReorderClick(index, index + 1)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            )}
+            {hasCopy && (
+              <CopyButton
+                style={btnStyle}
+                disabled={disabled || readonly}
+                onClick={onCopyIndexClick(index)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            )}
+            {hasRemove && (
+              <RemoveButton
+                style={btnStyle}
+                disabled={disabled || readonly}
+                onClick={onDropIndexClick(index)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            )}
+          </Stack>
+        </Grid2>
+      )}
+    </Grid2>
+  );
+}