Canvas: Reuse Name component in node details
Change-Id: Ide8094b50f9ac019e7bada9a000100f9233133da
diff --git a/apps/canvas/front/src/components/node-mongodb.tsx b/apps/canvas/front/src/components/node-mongodb.tsx
index 3235d41..8b9e53b 100644
--- a/apps/canvas/front/src/components/node-mongodb.tsx
+++ b/apps/canvas/front/src/components/node-mongodb.tsx
@@ -1,12 +1,8 @@
import { NodeRect } from "./node-rect";
-import { nodeLabel, MongoDBNode, useStateStore } from "@/lib/state";
-import { useEffect } from "react";
+import { nodeLabel, MongoDBNode } from "@/lib/state";
import { Handle, Position } from "@xyflow/react";
-import { z } from "zod";
-import { DeepPartial, EventType, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Form, FormControl, FormField, FormItem, FormMessage } from "./ui/form";
-import { Input } from "./ui/input";
+import { Name } from "./node-name";
+import { NodeDetailsProps } from "@/lib/types";
export function NodeMongoDB(node: MongoDBNode) {
const { id, selected } = node;
@@ -27,54 +23,6 @@
);
}
-const schema = z.object({
- name: z.string().min(1, "required"),
-});
-
-export function NodeMongoDBDetails({ node, disabled }: { node: MongoDBNode; disabled?: boolean }) {
- const { id, data } = node;
- const store = useStateStore();
- const form = useForm<z.infer<typeof schema>>({
- resolver: zodResolver(schema),
- mode: "onChange",
- defaultValues: {
- name: data.label,
- },
- });
- useEffect(() => {
- const sub = form.watch(
- (
- value: DeepPartial<z.infer<typeof schema>>,
- { type }: { name?: keyof z.infer<typeof schema> | undefined; type?: EventType | undefined },
- ) => {
- if (type !== "change") {
- return;
- }
- store.updateNodeData<"mongodb">(id, {
- label: value.name,
- });
- },
- );
- return () => sub.unsubscribe();
- }, [id, form, store]);
- return (
- <>
- <Form {...form}>
- <form className="space-y-2">
- <FormField
- control={form.control}
- name="name"
- render={({ field }) => (
- <FormItem>
- <FormControl>
- <Input placeholder="name" {...field} disabled={disabled} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- </form>
- </Form>
- </>
- );
+export function NodeMongoDBDetails({ node, disabled, showName = true }: NodeDetailsProps<MongoDBNode>) {
+ return showName ? <Name node={node} disabled={disabled} /> : null;
}