Canvas: Reuse node details component in overview

Make app details tabular.

Change-Id: I78a641e8e513eec44573bb8c8a391ef81a66e7fe
diff --git a/apps/canvas/front/src/lib/state.ts b/apps/canvas/front/src/lib/state.ts
index 5d8013d..a0e4e91 100644
--- a/apps/canvas/front/src/lib/state.ts
+++ b/apps/canvas/front/src/lib/state.ts
@@ -132,16 +132,19 @@
 
 export type ServiceData = NodeData & {
 	type: ServiceType;
-	repository:
+	repository?:
 		| {
-				id: string;
+				id: number;
+				repoNodeId: string;
 		  }
 		| {
-				id: string;
+				id: number;
+				repoNodeId: string;
 				branch: string;
 		  }
 		| {
-				id: string;
+				id: number;
+				repoNodeId: string;
 				branch: string;
 				rootDir: string;
 		  };
@@ -640,7 +643,10 @@
 	return ret;
 }
 
-export const useStateStore = create<AppState>((set, get): AppState => {
+export const useStateStore = create<AppState>((setOg, get): AppState => {
+	const set = (state: Partial<AppState>) => {
+		setOg(state);
+	};
 	const setN = (nodes: AppNode[]) => {
 		set({
 			nodes,
@@ -845,6 +851,17 @@
 					});
 				}
 			}
+			if (c.targetHandle === "repository") {
+				const sourceNode = nodes.find((n) => n.id === c.source);
+				if (sourceNode && sourceNode.type === "github" && sourceNode.data.repository) {
+					updateNodeData<"app">(tn.id, {
+						repository: {
+							id: sourceNode.data.repository.id,
+							repoNodeId: c.source,
+						},
+					});
+				}
+			}
 		}
 		if (c.sourceHandle === "volume") {
 			updateNodeData<"volume">(c.source, {
@@ -900,17 +917,6 @@
 				});
 			}
 		}
-		if (tn.type === "app") {
-			if (c.targetHandle === "repository") {
-				updateNodeData<"app">(tn.id, {
-					repository: {
-						id: c.source,
-						branch: "master",
-						rootDir: "/",
-					},
-				});
-			}
-		}
 	}
 
 	const fetchGithubRepositories = async () => {