Separating Crud and Base form logic

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,61 @@
-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,
-  id?: string,
+  resource: string,
-  //onSubmit: (data: IChangeEvent, event: FormEvent<any>) => void
+  id?: string
   onSuccess?: (data: any) => void
 }
 
-const customWidgets: RegistryWidgetsType = {
-  TextWidget: CrudTextWidget
-};
-
-const customFields: RegistryFieldsType = {
-  AnyOfField: UnionEnumField
-}
-
 export const CrudForm: React.FC<CrudFormProps> = (props) => {
   const { schemaName, uiSchema, resourceBasePath="" ,resource, id, onSuccess } = 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 || schemaLoading) {
-  if(formLoading || loading) {
     return <CircularProgress />
   }
 
+  const record = query?.data?.data;
   return (
-    <ResourceContext.Provider value={{basePath: resourceBasePath}} >
+    <BaseForm
-      <Form
+      schema={schema}
-        schema={schema}
+      uiSchema={uiSchema}
-        uiSchema={uiSchema === undefined ? {} : uiSchema}
+      formData={record}
-        formData={record}
+      resourceBasePath={resourceBasePath}
-        onChange={(e) => setFormData(e.formData)}
+      onSubmit={
-        onSubmit={(e) => onFinish(e.formData)}
+        (data: any) => onFinish(data)
-        validator={validator}
+      }
-        omitExtraData={true}
+    />
-        widgets={customWidgets}
-        fields={customFields}
-      />
-    </ResourceContext.Provider>
   )
 }