Canvas: Refactor NodeDetails signature
Change-Id: I78a07b130089e50df9524de0895210528b3e09b3
diff --git a/apps/canvas/front/src/Overview.tsx b/apps/canvas/front/src/Overview.tsx
index 4e286ce..8b5d496 100644
--- a/apps/canvas/front/src/Overview.tsx
+++ b/apps/canvas/front/src/Overview.tsx
@@ -20,7 +20,7 @@
.map((n) => {
return (
<div key={n.id} className="h-fit w-fit rounded-lg border-gray-200 border-2 p-2">
- <NodeDetails disabled={isDeployMode} {...n} />
+ <NodeDetails node={n} disabled={isDeployMode} />
</div>
);
})}
diff --git a/apps/canvas/front/src/components/details.tsx b/apps/canvas/front/src/components/details.tsx
index 288390a..9b6cb20 100644
--- a/apps/canvas/front/src/components/details.tsx
+++ b/apps/canvas/front/src/components/details.tsx
@@ -62,7 +62,7 @@
</div>
</AccordionTrigger>
<AccordionContent className="pt-1">
- <NodeDetails {...n} disabled={isDeployMode} />
+ <NodeDetails node={n} disabled={isDeployMode} />
</AccordionContent>
</AccordionItem>
</>
diff --git a/apps/canvas/front/src/components/node-details.tsx b/apps/canvas/front/src/components/node-details.tsx
index d120c76..39ae059 100644
--- a/apps/canvas/front/src/components/node-details.tsx
+++ b/apps/canvas/front/src/components/node-details.tsx
@@ -7,34 +7,30 @@
import { NodeGithubDetails } from "./node-github";
import { NodeGatewayTCPDetails } from "./node-gateway-tcp";
-type NodeDetailsProps = AppNode & {
- disabled?: boolean;
-};
-
-export function NodeDetails(props: NodeDetailsProps) {
+export function NodeDetails({ node, disabled }: { node: AppNode; disabled?: boolean }) {
return (
<div className="px-1 flex flex-col gap-2">
- <NodeDetailsImpl {...props} />
+ <NodeDetailsImpl node={node} disabled={disabled} />
</div>
);
}
-function NodeDetailsImpl(props: NodeDetailsProps) {
- switch (props.type) {
+function NodeDetailsImpl({ node, disabled }: { node: AppNode; disabled?: boolean }) {
+ switch (node.type) {
case "app":
- return <NodeAppDetails node={props} disabled={props.disabled} />;
+ return <NodeAppDetails node={node} disabled={disabled} />;
case "gateway-https":
- return <NodeGatewayHttpsDetails {...props} />;
+ return <NodeGatewayHttpsDetails node={node} disabled={disabled} />;
case "gateway-tcp":
- return <NodeGatewayTCPDetails {...props} />;
+ return <NodeGatewayTCPDetails node={node} disabled={disabled} />;
case "volume":
- return <NodeVolumeDetails {...props} />;
+ return <NodeVolumeDetails node={node} disabled={disabled} />;
case "postgresql":
- return <NodePostgreSQLDetails {...props} />;
+ return <NodePostgreSQLDetails node={node} disabled={disabled} />;
case "mongodb":
- return <NodeMongoDBDetails {...props} />;
+ return <NodeMongoDBDetails node={node} disabled={disabled} />;
case "github":
- return <NodeGithubDetails {...props} />;
+ return <NodeGithubDetails node={node} disabled={disabled} />;
default:
return <>nooo</>;
}
diff --git a/apps/canvas/front/src/components/node-gateway-https.tsx b/apps/canvas/front/src/components/node-gateway-https.tsx
index 1eb0409..6efc356 100644
--- a/apps/canvas/front/src/components/node-gateway-https.tsx
+++ b/apps/canvas/front/src/components/node-gateway-https.tsx
@@ -71,7 +71,8 @@
);
}
-export function NodeGatewayHttpsDetails({ id, data, disabled }: GatewayHttpsNode & { disabled?: boolean }) {
+export function NodeGatewayHttpsDetails({ node, disabled }: { node: GatewayHttpsNode; disabled?: boolean }) {
+ const { id, data } = node;
const store = useStateStore();
const env = useEnv();
const form = useForm<z.infer<typeof schema>>({
diff --git a/apps/canvas/front/src/components/node-gateway-tcp.tsx b/apps/canvas/front/src/components/node-gateway-tcp.tsx
index 4210d47..6bb4577 100644
--- a/apps/canvas/front/src/components/node-gateway-tcp.tsx
+++ b/apps/canvas/front/src/components/node-gateway-tcp.tsx
@@ -48,7 +48,8 @@
);
}
-export function NodeGatewayTCPDetails({ id, data, disabled }: GatewayTCPNode & { disabled?: boolean }) {
+export function NodeGatewayTCPDetails({ node, disabled }: { node: GatewayTCPNode; disabled?: boolean }) {
+ const { id, data } = node;
const store = useStateStore();
const env = useEnv();
const form = useForm<z.infer<typeof schema>>({
diff --git a/apps/canvas/front/src/components/node-github.tsx b/apps/canvas/front/src/components/node-github.tsx
index 4373359..d16a191 100644
--- a/apps/canvas/front/src/components/node-github.tsx
+++ b/apps/canvas/front/src/components/node-github.tsx
@@ -53,7 +53,8 @@
repositoryId: z.number().optional(),
});
-export function NodeGithubDetails({ id, data, disabled }: GithubNode & { disabled?: boolean }) {
+export function NodeGithubDetails({ node, disabled }: { node: GithubNode; disabled?: boolean }) {
+ const { id, data } = node;
const store = useStateStore();
const projectId = useProjectId();
const githubService = useGithubService();
diff --git a/apps/canvas/front/src/components/node-mongodb.tsx b/apps/canvas/front/src/components/node-mongodb.tsx
index 69d0d0f..3235d41 100644
--- a/apps/canvas/front/src/components/node-mongodb.tsx
+++ b/apps/canvas/front/src/components/node-mongodb.tsx
@@ -31,7 +31,8 @@
name: z.string().min(1, "required"),
});
-export function NodeMongoDBDetails({ id, data, disabled }: MongoDBNode & { disabled?: boolean }) {
+export function NodeMongoDBDetails({ node, disabled }: { node: MongoDBNode; disabled?: boolean }) {
+ const { id, data } = node;
const store = useStateStore();
const form = useForm<z.infer<typeof schema>>({
resolver: zodResolver(schema),
diff --git a/apps/canvas/front/src/components/node-postgresql.tsx b/apps/canvas/front/src/components/node-postgresql.tsx
index d31cfe2..140fe4d 100644
--- a/apps/canvas/front/src/components/node-postgresql.tsx
+++ b/apps/canvas/front/src/components/node-postgresql.tsx
@@ -31,7 +31,8 @@
name: z.string().min(1, "required"),
});
-export function NodePostgreSQLDetails({ id, data, disabled }: PostgreSQLNode & { disabled?: boolean }) {
+export function NodePostgreSQLDetails({ node, disabled }: { node: PostgreSQLNode; disabled?: boolean }) {
+ const { id, data } = node;
const store = useStateStore();
const form = useForm<z.infer<typeof schema>>({
resolver: zodResolver(schema),
diff --git a/apps/canvas/front/src/components/node-volume.tsx b/apps/canvas/front/src/components/node-volume.tsx
index 3118681..35b3722 100644
--- a/apps/canvas/front/src/components/node-volume.tsx
+++ b/apps/canvas/front/src/components/node-volume.tsx
@@ -39,7 +39,8 @@
size: z.string().min(1).default("1Gi"),
});
-export function NodeVolumeDetails({ id, data, disabled }: VolumeNode & { disabled?: boolean }) {
+export function NodeVolumeDetails({ node, disabled }: { node: VolumeNode; disabled?: boolean }) {
+ const { id, data } = node;
const store = useStateStore();
const form = useForm<z.infer<typeof schema>>({
resolver: zodResolver(schema),