Adding the injection of a default value in the form

gui/rpk-gui/src/lib/crud/components/base-form.tsx

@@ -0,0 +1,43 @@
+import validator from "@rjsf/validator-ajv8";
+import Form from "@rjsf/mui";
+import { RegistryFieldsType, RegistryWidgetsType, RJSFSchema, UiSchema } from "@rjsf/utils";
+import CrudTextWidget from "./widgets/crud-text-widget";
+import UnionEnumField from "./fields/union-enum";
+import { ResourceContext } from "../contexts/ResourceContext";
+
+type BaseFormProps = {
+  schema: RJSFSchema,
+  resourceBasePath: string,
+  onSubmit?: (data: any) => void,
+  onChange?: (data: any) => void,
+  uiSchema?: UiSchema,
+  formData?: any,
+}
+
+export const customWidgets: RegistryWidgetsType = {
+  TextWidget: CrudTextWidget
+};
+
+export const customFields: RegistryFieldsType = {
+  AnyOfField: UnionEnumField
+}
+
+export const BaseForm: React.FC<BaseFormProps> = (props) => {
+  const { schema, uiSchema, resourceBasePath, formData, onSubmit, onChange } = props;
+
+  return (
+    <ResourceContext.Provider value={{basePath: resourceBasePath}} >
+      <Form
+        schema={schema}
+        uiSchema={uiSchema === undefined ? {} : uiSchema}
+        formData={formData}
+        onSubmit={(e, id) => onSubmit != undefined && onSubmit(e.formData)}
+        validator={validator}
+        omitExtraData={true}
+        widgets={customWidgets}
+        fields={customFields}
+        onChange={(e, id) => onChange != undefined && onChange(e.formData)}
+      />
+    </ResourceContext.Provider>
+  )
+}

gui/rpk-gui/src/lib/crud/components/crud-form.tsx

@@ -1,81 +1,62 @@
-import validator from "@rjsf/validator-ajv8";
-import Form from "@rjsf/mui";
-import { RegistryFieldsType, RegistryWidgetsType, UiSchema } from "@rjsf/utils";
 import { useEffect, useState } from "react";
-import { jsonschemaProvider } from "../providers/jsonschema-provider";
-import { useForm } from "@refinedev/core";
-import CrudTextWidget from "./widgets/crud-text-widget";
-import UnionEnumField from "./fields/union-enum";
 import { CircularProgress } from "@mui/material";
-import { ResourceContext } from "../contexts/ResourceContext";
+import { useForm } from "@refinedev/core";
+import { UiSchema } from "@rjsf/utils";
+import { jsonschemaProvider } from "../providers/jsonschema-provider";
+import { BaseForm } from "./base-form";
 
 type CrudFormProps = {
   schemaName: string,
   uiSchema?: UiSchema,
-  resource: string,
   resourceBasePath?: string,
+  resource: string,
   id?: string,
-  //onSubmit: (data: IChangeEvent, event: FormEvent<any>) => void
-  onSuccess?: (data: any) => void
-}
-
-const customWidgets: RegistryWidgetsType = {
-  TextWidget: CrudTextWidget
-};
-
-const customFields: RegistryFieldsType = {
-  AnyOfField: UnionEnumField
+  onSuccess?: (data: any) => void,
+  defaultValue?: any
 }
 
 export const CrudForm: React.FC<CrudFormProps> = (props) => {
-  const { schemaName, uiSchema, resourceBasePath="" ,resource, id, onSuccess } = props;
+  const { schemaName, uiSchema, resourceBasePath="" ,resource, id, onSuccess, defaultValue } = props;
+
   const { onFinish, query, formLoading } = useForm({
-    resource: `${resourceBasePath}/${resource}`,
+    resource: resourceBasePath == "" ? resource : `${resourceBasePath}/${resource}`,
     action: id === undefined ? "create" : "edit",
     redirect: "show",
     id,
     onMutationSuccess: (data: any) => { if (onSuccess) { onSuccess(data) } },
   });
 
-  const schemaValue = id === undefined ? `${schemaName}Create` : `${schemaName}Update`;
-  const record = query?.data?.data;
-  const [formData, setFormData] = useState(record);
-
   const [schema, setSchema] = useState({});
-  const [loading, setLoading] = useState(true);
-
+  const [schemaLoading, setSchemaLoading] = useState(true);
   useEffect(() => {
     const fetchSchema = async () => {
       try {
-        const resourceSchema = await jsonschemaProvider.getResourceSchema(schemaValue);
+        const schemaFullName = id === undefined ? `${schemaName}Create` : `${schemaName}Update`;
+        const resourceSchema = await jsonschemaProvider.getResourceSchema(schemaFullName);
         setSchema(resourceSchema);
-        setLoading(false);
+        setSchemaLoading(false);
       } catch (error) {
         console.error('Error fetching data:', error);
-        setLoading(false);
+        setSchemaLoading(false);
       }
     };
     fetchSchema();
   }, []);
 
-
-  if(formLoading || loading) {
+  if(formLoading || schemaLoading) {
     return <CircularProgress />
   }
 
+  const record = query?.data?.data || defaultValue;
   return (
-    <ResourceContext.Provider value={{basePath: resourceBasePath}} >
-      <Form
+    <BaseForm
       schema={schema}
-        uiSchema={uiSchema === undefined ? {} : uiSchema}
+      uiSchema={uiSchema}
       formData={record}
-        onChange={(e) => setFormData(e.formData)}
-        onSubmit={(e) => onFinish(e.formData)}
-        validator={validator}
-        omitExtraData={true}
-        widgets={customWidgets}
-        fields={customFields}
+      resourceBasePath={resourceBasePath}
+      onSubmit={
+        (data: any) => onFinish(data)
+      }
     />
-    </ResourceContext.Provider>
   )
 }

gui/rpk-gui/src/lib/crud/components/widgets/foreign-key.tsx

@@ -1,21 +1,23 @@
 import { FormContextType, RJSFSchema, UiSchema, WidgetProps } from '@rjsf/utils';
-import { Autocomplete, Button, CircularProgress, Container, Grid2, InputAdornment, Modal, TextField, Box } from "@mui/material";
+import {
+  Autocomplete, Button, CircularProgress, Container, Grid2, InputAdornment, Modal, TextField, Box, DialogContent
+} from "@mui/material";
 import ClearIcon from '@mui/icons-material/Clear';
 import EditIcon from '@mui/icons-material/Edit';
 import NoteAddIcon from '@mui/icons-material/NoteAdd';
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext, Fragment } from "react";
 import { useList, useOne } from "@refinedev/core";
 import { ResourceContext } from "../../contexts/ResourceContext";
 import { CrudForm } from "../crud-form";
 
-type ForeignKeyReference = {
+export type ForeignKeyReference = {
   resource: string,
-  label: string,
-  displayedFields: [string],
+  label?: string,
+  displayedFields?: [string],
   schema: string
 }
 
-type ForeignKeySchema = RJSFSchema & {
+export type ForeignKeySchema = RJSFSchema & {
   foreignKey?: {
     reference: ForeignKeyReference
   }
@@ -100,6 +102,7 @@ const RealAutocomplete = <T = any, S extends ForeignKeySchema = ForeignKeySchema
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
+        <DialogContent>
           <FormContainer
             schemaName={schema}
             resourceBasePath={basePath}
@@ -110,6 +113,7 @@ const RealAutocomplete = <T = any, S extends ForeignKeySchema = ForeignKeySchema
               onChange(data.data.id);
             }}
           />
+        </DialogContent>
       </Modal>
     </>
   );
@@ -161,6 +165,7 @@ const ChosenValue = <T = any, S extends ForeignKeySchema = ForeignKeySchema, F e
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
+        <DialogContent>
           <FormContainer
             schemaName={schema}
             resourceBasePath={basePath}
@@ -169,6 +174,7 @@ const ChosenValue = <T = any, S extends ForeignKeySchema = ForeignKeySchema, F e
             id={value}
             onSuccess={() => setOpenFormModal(false)}
           />
+        </DialogContent>
       </Modal>
     </>
   )
@@ -199,10 +205,9 @@ type FormContainerProps = {
 
 const FormContainer = (props: FormContainerProps) => {
   const { schemaName, resourceBasePath, resource, uiSchema = {}, id = undefined, onSuccess } = props;
-
   return (
     <Box sx={{ ...modalStyle, width: 800 }}>
-      <CrudForm schemaName={schemaName} resourceBasePath={resourceBasePath} resource={resource} uiSchema={uiSchema} id={id} onSuccess={onSuccess} />
+      <CrudForm schemaName={schemaName} resourceBasePath={resourceBasePath} resource={resource} uiSchema={uiSchema} id={id} onSuccess={(data) => onSuccess(data)} />
     </Box>
   )
 }
@@ -221,12 +226,12 @@ const Preview = (props: {id: string, resource: string, basePath: string, display
 
   return (
     <Grid2 container spacing={2}>
-      {displayedFields.map((field: string) => {
+      {displayedFields.map((field: string, index: number) => {
         return (
-          <>
+          <Fragment key={index}>
             <Grid2 size={2}><Container>{field}</Container></Grid2>
             <Grid2 size={9}><Container dangerouslySetInnerHTML={{ __html: data.data[field] }} ></Container></Grid2>
-          </>
+          </Fragment>
         )
       })}
     </Grid2>

gui/rpk-gui/src/pages/firm/base-page/New.tsx

@@ -7,10 +7,11 @@ type NewProps = {
   resource: string,
   schemaName: string,
   uiSchema?: UiSchema,
+  defaultValue?: any
 }
 
 const New = <T,>(props: NewProps) => {
-  const { schemaName, resource, uiSchema } = props;
+  const { schemaName, resource, uiSchema, defaultValue } = props;
   const { currentFirm } = useContext(FirmContext);
   const resourceBasePath = `firm/${currentFirm.instance}/${currentFirm.firm}`
 
@@ -20,6 +21,7 @@ const New = <T,>(props: NewProps) => {
       uiSchema={uiSchema}
       resourceBasePath={resourceBasePath}
       resource={resource}
+      defaultValue={defaultValue}
     />
   )
 }