Canvas: Consistent spacing on node details component
Change-Id: Ia008d918723bc77a97a1ce37cd02adcd2accc9fe
diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index d2aa36e..b7aa7dc 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -18,13 +18,13 @@
import { DeepPartial, EventType, useForm, ControllerRenderProps, FieldPath } 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 { Button } from "./ui/button";
import { Handle, Position, useNodes } from "@xyflow/react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { PencilIcon, XIcon } from "lucide-react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
import { Textarea } from "./ui/textarea";
+import { Input } from "./ui/input";
export function NodeApp(node: ServiceNode) {
const { id, selected } = node;
@@ -411,7 +411,7 @@
return (
<>
<Form {...form}>
- <form>
+ <form className="space-y-2">
<FormField
control={form.control}
name="name"
@@ -420,7 +420,7 @@
<FormControl>
<Input
placeholder="name"
- className="border border-black"
+ className="lowercase"
{...field}
ref={focus(field, "name")}
/>
@@ -491,7 +491,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="master" className="border border-black" {...field} />
+ <Input placeholder="master" className="lowercase" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -503,7 +503,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="/" className="border border-black" {...field} />
+ <Input placeholder="/" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -534,7 +534,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="name" className="border border-black" {...field} />
+ <Input placeholder="name" className="lowercase" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -546,7 +546,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="value" className="border border-black" {...field} />
+ <Input placeholder="value" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -567,7 +567,7 @@
<li key={v.id}>
<Input
type="text"
- className="border border-black"
+ className="uppercase"
defaultValue={value}
onKeyUp={saveAliasOnEnter(v)}
onBlur={saveAliasOnBlur(v)}
diff --git a/apps/canvas/front/src/components/node-details.tsx b/apps/canvas/front/src/components/node-details.tsx
index 2cbc317..503d5ee 100644
--- a/apps/canvas/front/src/components/node-details.tsx
+++ b/apps/canvas/front/src/components/node-details.tsx
@@ -8,6 +8,14 @@
import { NodeGatewayTCPDetails } from "./node-gateway-tcp";
export function NodeDetails(props: AppNode) {
+ return (
+ <div className="px-1 flex flex-col gap-2">
+ <NodeDetailsImpl {...props} />
+ </div>
+ );
+}
+
+function NodeDetailsImpl(props: AppNode) {
switch (props.type) {
case "app":
return <NodeAppDetails {...props} />;
diff --git a/apps/canvas/front/src/components/node-gateway-https.tsx b/apps/canvas/front/src/components/node-gateway-https.tsx
index 07eb3c1..0119305 100644
--- a/apps/canvas/front/src/components/node-gateway-https.tsx
+++ b/apps/canvas/front/src/components/node-gateway-https.tsx
@@ -323,7 +323,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="subdomain" className="border border-black" {...field} />
+ <Input placeholder="subdomain" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -421,7 +421,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="group" className="border border-black" {...field} />
+ <Input placeholder="group" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -452,7 +452,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="group" className="border border-black" {...field} />
+ <Input placeholder="group" {...field} />
</FormControl>
<FormMessage />
</FormItem>
diff --git a/apps/canvas/front/src/components/node-gateway-tcp.tsx b/apps/canvas/front/src/components/node-gateway-tcp.tsx
index ada5ef9..bb8b9be 100644
--- a/apps/canvas/front/src/components/node-gateway-tcp.tsx
+++ b/apps/canvas/front/src/components/node-gateway-tcp.tsx
@@ -257,7 +257,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="subdomain" className="border border-black" {...field} />
+ <Input placeholder="subdomain" {...field} />
</FormControl>
<FormMessage />
</FormItem>
diff --git a/apps/canvas/front/src/components/node-mongodb.tsx b/apps/canvas/front/src/components/node-mongodb.tsx
index 1d41adb..bb787cd 100644
--- a/apps/canvas/front/src/components/node-mongodb.tsx
+++ b/apps/canvas/front/src/components/node-mongodb.tsx
@@ -66,7 +66,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="name" className="border border-black" {...field} />
+ <Input placeholder="name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
diff --git a/apps/canvas/front/src/components/node-postgresql.tsx b/apps/canvas/front/src/components/node-postgresql.tsx
index f856c17..292fd1e 100644
--- a/apps/canvas/front/src/components/node-postgresql.tsx
+++ b/apps/canvas/front/src/components/node-postgresql.tsx
@@ -66,7 +66,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="name" className="border border-black" {...field} />
+ <Input placeholder="name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
diff --git a/apps/canvas/front/src/components/node-volume.tsx b/apps/canvas/front/src/components/node-volume.tsx
index 14d5b4c..80d8c99 100644
--- a/apps/canvas/front/src/components/node-volume.tsx
+++ b/apps/canvas/front/src/components/node-volume.tsx
@@ -86,7 +86,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="name" className="border border-black" {...field} />
+ <Input placeholder="name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -121,7 +121,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="size" className="border border-black" {...field} />
+ <Input placeholder="size" {...field} />
</FormControl>
<FormMessage />
</FormItem>