Canvas: Prettier
Change-Id: I620dde109df0f29f0c85c6fe150e347d2c32a03e
diff --git a/apps/canvas/front/src/components/node-volume.tsx b/apps/canvas/front/src/components/node-volume.tsx
index cb42241..14d5b4c 100644
--- a/apps/canvas/front/src/components/node-volume.tsx
+++ b/apps/canvas/front/src/components/node-volume.tsx
@@ -1,126 +1,134 @@
-import { NodeRect } from './node-rect';
-import { nodeIsConnectable, nodeLabel, useStateStore, VolumeNode } from '@/lib/state';
-import { useEffect, useMemo } from 'react';
+import { NodeRect } from "./node-rect";
+import { nodeIsConnectable, nodeLabel, useStateStore, VolumeNode } from "@/lib/state";
+import { useEffect, useMemo } from "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 { 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 { Handle, Position } from "@xyflow/react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
export function NodeVolume(node: VolumeNode) {
- const { id, data, selected } = node;
- const isConnectable = useMemo(() => nodeIsConnectable(node, "volume"), [node]);
- return (
- <NodeRect id={id} selected={selected} type={node.type} state={node.data.state}>
- <div style={{ padding: '10px 20px' }}>
- <div>{nodeLabel(node)}</div>
- <div>{data.type && `${data.type}`}</div>
- <div>{data.size && `${data.size}`}</div>
- <Handle
- id="volume"
- type={"source"}
- position={Position.Top}
- isConnectableStart={isConnectable}
- isConnectableEnd={isConnectable}
- isConnectable={isConnectable}
- />
- </div>
- </NodeRect>
- );
+ const { id, data, selected } = node;
+ const isConnectable = useMemo(() => nodeIsConnectable(node, "volume"), [node]);
+ return (
+ <NodeRect id={id} selected={selected} type={node.type} state={node.data.state}>
+ <div style={{ padding: "10px 20px" }}>
+ <div>{nodeLabel(node)}</div>
+ <div>{data.type && `${data.type}`}</div>
+ <div>{data.size && `${data.size}`}</div>
+ <Handle
+ id="volume"
+ type={"source"}
+ position={Position.Top}
+ isConnectableStart={isConnectable}
+ isConnectableEnd={isConnectable}
+ isConnectable={isConnectable}
+ />
+ </div>
+ </NodeRect>
+ );
}
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"),
+ name: z.string().min(1),
+ type: z.enum(volumeTypes),
+ size: z.string().min(1).default("1Gi"),
});
export function NodeVolumeDetails({ id, data }: VolumeNode) {
- const store = useStateStore();
- const form = useForm<z.infer<typeof schema>>({
- resolver: zodResolver(schema),
- mode: "onChange",
- defaultValues: {
- name: "",
- type: undefined,
- size: "",
- }
- });
- useEffect(() => {
- const sub = form.watch((value: DeepPartial<z.infer<typeof schema>>, { name, type }: { name?: keyof z.infer<typeof schema> | undefined, type?: EventType | undefined }) => {
- if (type !== "change") {
- return
- }
- console.log({ name, type, value });
- store.updateNodeData<"volume">(id, {
- label: value.name,
- type: value.type,
- size: value.size,
- });
- });
- return () => sub.unsubscribe();
- }, [id, form, store]);
- useEffect(() => {
- form.reset({
- name: data.label,
- type: data.type,
- size: data.size,
- });
- }, [form, data])
- return (
- <>
- <Form {...form}>
- <form className="space-y-2">
- <FormField
- control={form.control}
- name="name"
- render={({ field }) => (
- <FormItem>
- <FormControl>
- <Input placeholder="name" className="border border-black" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- <FormField
- control={form.control}
- name="type"
- render={({ field }) => (
- <FormItem>
- <Select onValueChange={field.onChange} defaultValue={field.value}>
- <FormControl>
- <SelectTrigger>
- <SelectValue placeholder="Volume Type" />
- </SelectTrigger>
- </FormControl>
- <SelectContent>
- {volumeTypes.map((t) => (
- <SelectItem key={t} value={t}>{t}</SelectItem>
- ))}
- </SelectContent>
- </Select>
- <FormMessage />
- </FormItem>
- )}
- />
- <FormField
- control={form.control}
- name="size"
- render={({ field }) => (
- <FormItem>
- <FormControl>
- <Input placeholder="size" className="border border-black" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- </form>
- </Form>
- </>);
-}
\ No newline at end of file
+ const store = useStateStore();
+ const form = useForm<z.infer<typeof schema>>({
+ resolver: zodResolver(schema),
+ mode: "onChange",
+ defaultValues: {
+ name: "",
+ type: undefined,
+ size: "",
+ },
+ });
+ useEffect(() => {
+ const sub = form.watch(
+ (
+ value: DeepPartial<z.infer<typeof schema>>,
+ { name, type }: { name?: keyof z.infer<typeof schema> | undefined; type?: EventType | undefined },
+ ) => {
+ if (type !== "change") {
+ return;
+ }
+ console.log({ name, type, value });
+ store.updateNodeData<"volume">(id, {
+ label: value.name,
+ type: value.type,
+ size: value.size,
+ });
+ },
+ );
+ return () => sub.unsubscribe();
+ }, [id, form, store]);
+ useEffect(() => {
+ form.reset({
+ name: data.label,
+ type: data.type,
+ size: data.size,
+ });
+ }, [form, data]);
+ return (
+ <>
+ <Form {...form}>
+ <form className="space-y-2">
+ <FormField
+ control={form.control}
+ name="name"
+ render={({ field }) => (
+ <FormItem>
+ <FormControl>
+ <Input placeholder="name" className="border border-black" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="type"
+ render={({ field }) => (
+ <FormItem>
+ <Select onValueChange={field.onChange} defaultValue={field.value}>
+ <FormControl>
+ <SelectTrigger>
+ <SelectValue placeholder="Volume Type" />
+ </SelectTrigger>
+ </FormControl>
+ <SelectContent>
+ {volumeTypes.map((t) => (
+ <SelectItem key={t} value={t}>
+ {t}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="size"
+ render={({ field }) => (
+ <FormItem>
+ <FormControl>
+ <Input placeholder="size" className="border border-black" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </form>
+ </Form>
+ </>
+ );
+}