Canvas: Render network nodes

Change-Id: I63938da205af9377a1e210c0e972591142211a68
diff --git a/apps/canvas/front/src/lib/state.ts b/apps/canvas/front/src/lib/state.ts
index 51f67a6..8d728d0 100644
--- a/apps/canvas/front/src/lib/state.ts
+++ b/apps/canvas/front/src/lib/state.ts
@@ -29,6 +29,14 @@
   portId: string;
 }
 
+export type NetworkData = NodeData & {
+  domain: string;
+};
+
+export type NetworkNode = Node<NetworkData> & {
+  type: "network";
+};
+
 export type GatewayHttpsData = NodeData & {
   network?: string;
   subdomain?: string;
@@ -118,10 +126,11 @@
   type: undefined;
 };
 
-export type AppNode = GatewayHttpsNode | GatewayTCPNode | ServiceNode | VolumeNode | PostgreSQLNode | MongoDBNode | GithubNode | NANode;
+export type AppNode = NetworkNode | GatewayHttpsNode | GatewayTCPNode | ServiceNode | VolumeNode | PostgreSQLNode | MongoDBNode | GithubNode | NANode;
 
 export function nodeLabel(n: AppNode): string {
   switch (n.type) {
+    case "network": return n.data.domain;
     case "app": return n.data.label || "Service";
     case "github": return n.data.address || "Github";
     case "gateway-https": {
@@ -147,6 +156,8 @@
 
 export function nodeIsConnectable(n: AppNode, handle: string): boolean {
   switch (n.type) {
+    case "network":
+      return true;
     case "app":
       if (handle === "ports") {
         return n.data !== undefined && n.data.ports !== undefined && n.data.ports.length > 0;
@@ -163,8 +174,14 @@
       }
       return false;
     case "gateway-https":
+      if (handle === "subdomain") {
+        return n.data.network === undefined;
+      }
       return n.data === undefined || n.data.https === undefined;
     case "gateway-tcp":
+      if (handle === "subdomain") {
+        return n.data.network === undefined;
+      }
       return true;
     case "mongodb":
       return true;
@@ -312,17 +329,19 @@
 
 let envRefresh: Promise<Env | undefined> | null = null;
 
+const fixedEnv: Env = {
+  "deployKey": "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIPK58vMu0MwIzdZT+mqpIBkhl48p9+/YwDCZv7MgTesF",
+  "networks": [{
+    "name": "Public",
+    "domain": "v1.dodo.cloud",
+  }, {
+    "name": "Private",
+    "domain": "p.v1.dodo.cloud",
+  }],
+};
+
 export function useEnv(): Env {
-  return {
-    "deployKey": "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIPK58vMu0MwIzdZT+mqpIBkhl48p9+/YwDCZv7MgTesF",
-    "networks": [{
-      "name": "Public",
-      "domain": "v1.dodo.cloud",
-    }, {
-      "name": "Private",
-      "domain": "p.v1.dodo.cloud",
-    }],
-  };
+  return fixedEnv;
   const store = useStateStore();
   const env = envSelector(store);
   console.log(env);
@@ -395,6 +414,17 @@
     });
     const sn = nodes.filter((n) => n.id === c.source)[0]!;
     const tn = nodes.filter((n) => n.id === c.target)[0]!;
+    if (tn.type === "network") {
+      if (sn.type === "gateway-https") {
+        updateNodeData<"gateway-https">(sn.id, {
+          network: tn.data.domain,
+        });
+      }else if (sn.type === "gateway-tcp") {
+        updateNodeData<"gateway-tcp">(sn.id, {
+          network: tn.data.domain,
+        });
+      }
+    }
     if (c.sourceHandle === "env_var" && c.targetHandle === "env_var") {
       const sourceEnvVars = nodeEnvVarNames(sn);
       if (sourceEnvVars.length === 0) {