Updating Foreign key to new CrudForm standard

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

@@ -6,7 +6,7 @@ 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, Fragment } from "react";
-import { useList, useOne } from "@refinedev/core";
+import { useForm, useList, useOne } from "@refinedev/core";
 import { ResourceContext } from "../../contexts/ResourceContext";
 import { CrudForm } from "../crud-form";
 
@@ -103,7 +103,7 @@ const RealAutocomplete = <T = any, S extends ForeignKeySchema = ForeignKeySchema
         aria-describedby="modal-modal-description"
       >
         <DialogContent>
-          <FormContainer
+          <FormContainerNew
             schemaName={schema}
             resourceBasePath={basePath}
             resource={resource}
@@ -166,7 +166,7 @@ const ChosenValue = <T = any, S extends ForeignKeySchema = ForeignKeySchema, F e
         aria-describedby="modal-modal-description"
       >
         <DialogContent>
-          <FormContainer
+          <FormContainerEdit
             schemaName={schema}
             resourceBasePath={basePath}
             resource={resource}
@@ -203,11 +203,49 @@ type FormContainerProps = {
   onSuccess: (data: any) => void
 }
 
-const FormContainer = (props: FormContainerProps) => {
-  const { schemaName, resourceBasePath, resource, uiSchema = {}, id = undefined, onSuccess } = props;
+const FormContainerEdit = (props: FormContainerProps) => {
+  const { schemaName, resourceBasePath, resource, uiSchema = {}, id, onSuccess } = props;
+  const { onFinish, query, formLoading } = useForm({
+    resource: `${resourceBasePath}/${resource}`,
+    action: "edit",
+    id: id,
+  });
+
+  if (formLoading || query?.data === undefined) {
+    return <CircularProgress />
+  }
   return (
     <Box sx={{ ...modalStyle, width: 800 }}>
-      <CrudForm schemaName={schemaName} resourceBasePath={resourceBasePath} resource={resource} uiSchema={uiSchema} id={id} onSuccess={(data) => onSuccess(data)} />
+      <CrudForm
+        schemaName={schemaName}
+        uiSchema={uiSchema}
+        resourceBasePath={resourceBasePath}
+        record={query.data.data}
+        onSubmit={(data:any) => {
+          onFinish(data);
+          onSuccess(data);
+        }} />
+    </Box>
+  )
+}
+
+const FormContainerNew = (props: FormContainerProps) => {
+  const { schemaName, resourceBasePath, resource, uiSchema = {}, onSuccess } = props;
+  const { onFinish } = useForm({
+    resource: `${resourceBasePath}/${resource}`,
+    action: "create"
+  });
+
+  return (
+    <Box sx={{ ...modalStyle, width: 800 }}>
+      <CrudForm
+        schemaName={schemaName}
+        uiSchema={uiSchema}
+        resourceBasePath={resourceBasePath}
+        onSubmit={(data:any) => {
+          onFinish(data);
+          onSuccess(data);
+        }} />
     </Box>
   )
 }