Canvas: Edit/Deploy mode

Change-Id: I51e5b6c2a1f06009433b0d0824ffcf3dfe39d34e
diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index cfbbbde..d2aa36e 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -11,6 +11,7 @@
 	GatewayTCPNode,
 	GatewayHttpsNode,
 	AppNode,
+	GithubNode,
 } from "@/lib/state";
 import { KeyboardEvent, FocusEvent, useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
@@ -69,7 +70,7 @@
 
 const portSchema = z.object({
 	name: z.string().min(1, "required"),
-	value: z.coerce.number().gt(0, "can not be negative"),
+	value: z.coerce.number().gt(0, "must be positive").lte(65535, "must be less than 65535"),
 });
 
 const sourceSchema = z.object({
@@ -103,7 +104,7 @@
 			store.updateNodeData<"app">(id, {
 				ports: (data.ports || []).concat({
 					id: portId,
-					name: values.name,
+					name: values.name.toLowerCase(),
 					value: values.value,
 				}),
 				envVars: (data.envVars || []).concat({
@@ -476,7 +477,7 @@
 											<SelectItem
 												key={n.id}
 												value={n.id}
-											>{`${n.data.repository?.sshURL}`}</SelectItem>
+											>{`${n.data.repository?.fullName}`}</SelectItem>
 										))}
 									</SelectContent>
 								</Select>
@@ -515,11 +516,13 @@
 				{data &&
 					data.ports &&
 					data.ports.map((p) => (
-						<li key={p.id}>
+						<li key={p.id} className="flex flex-row items-center gap-1">
 							<Button size={"icon"} variant={"ghost"} onClick={() => removePort(p.id)}>
 								<XIcon />
-							</Button>{" "}
-							{p.name} - {p.value}
+							</Button>
+							<div>
+								{p.name} - {p.value}
+							</div>
 						</li>
 					))}
 			</ul>
@@ -578,10 +581,12 @@
 									<TooltipProvider>
 										<Tooltip>
 											<TooltipTrigger>
-												<Button size={"icon"} variant={"ghost"}>
-													<PencilIcon />
-												</Button>
-												{value}
+												<div className="flex flex-row items-center gap-1">
+													<Button size={"icon"} variant={"ghost"}>
+														<PencilIcon />
+													</Button>
+													<div>{value}</div>
+												</div>
 											</TooltipTrigger>
 											<TooltipContent>{v.name}</TooltipContent>
 										</Tooltip>