Canvas: Reuse Name component in node details
Change-Id: Ide8094b50f9ac019e7bada9a000100f9233133da
diff --git a/apps/canvas/front/src/components/node-volume.tsx b/apps/canvas/front/src/components/node-volume.tsx
index 35b3722..39bf15a 100644
--- a/apps/canvas/front/src/components/node-volume.tsx
+++ b/apps/canvas/front/src/components/node-volume.tsx
@@ -8,6 +8,8 @@
import { Input } from "./ui/input";
import { Handle, Position } from "@xyflow/react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { Name } from "./node-name";
+import { NodeDetailsProps } from "@/lib/types";
export function NodeVolume(node: VolumeNode) {
const { id, data, selected } = node;
@@ -34,19 +36,17 @@
const volumeTypes = ["ReadWriteOnce", "ReadOnlyMany", "ReadWriteMany", "ReadWriteOncePod"] as const;
const schema = z.object({
- name: z.string().min(1),
type: z.enum(volumeTypes),
size: z.string().min(1).default("1Gi"),
});
-export function NodeVolumeDetails({ node, disabled }: { node: VolumeNode; disabled?: boolean }) {
+export function NodeVolumeDetails({ node, disabled, showName = true }: NodeDetailsProps<VolumeNode>) {
const { id, data } = node;
const store = useStateStore();
const form = useForm<z.infer<typeof schema>>({
resolver: zodResolver(schema),
mode: "onChange",
defaultValues: {
- name: "",
type: undefined,
size: "",
},
@@ -62,7 +62,6 @@
}
console.log({ name, type, value });
store.updateNodeData<"volume">(id, {
- label: value.name,
type: value.type,
size: value.size,
});
@@ -72,29 +71,17 @@
}, [id, form, store]);
useEffect(() => {
form.reset({
- name: data.label,
type: data.type,
size: data.size,
});
}, [form, data]);
return (
<>
+ {showName ? <Name node={node} disabled={disabled} /> : null}
<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>
- )}
- />
- <FormField
- control={form.control}
name="type"
render={({ field }) => (
<FormItem>