fix(web): workflow details not updated when version changes

web/src/app/workflows/[workflow_id]/page.tsx

@@ -1,12 +1,12 @@
 import { DeploymentsTable, RunsTable } from "../../../components/RunsTable";
 import { findFirstTableWithVersion } from "../../../server/findFirstTableWithVersion";
 import { MachinesWSMain } from "@/components/MachinesWS";
+import { VersionDetails } from "@/components/VersionDetails";
 import {
   CopyWorkflowVersion,
   CreateDeploymentButton,
   MachineSelect,
   RunWorkflowButton,
-  VersionDetails,
   VersionSelect,
 } from "@/components/VersionSelect";
 import {

web/src/components/VersionDetails.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { getInputsFromWorkflow } from "../lib/getInputsFromWorkflow";
+import { getWorkflowVersionFromVersionIndex } from "./VersionSelect";
+import { customInputNodes } from "./customInputNodes";
+import { Badge } from "@/components/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { findFirstTableWithVersion } from "@/server/findFirstTableWithVersion";
+import { parseAsInteger, useQueryState } from "next-usequerystate";
+
+export function VersionDetails({
+  workflow,
+}: {
+  workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>;
+}) {
+  const [version] = useQueryState("version", {
+    defaultValue: workflow?.versions[0].version ?? 1,
+    ...parseAsInteger,
+  });
+  const workflow_version = getWorkflowVersionFromVersionIndex(
+    workflow,
+    version
+  );
+  const inputs = getInputsFromWorkflow(workflow_version);
+
+  return (
+    <div className="mt-4">
+      Workflow Details
+      <div className="border rounded-lg p-2">
+        {inputs && inputs.length > 0 ? (
+          <div className="flex flex-col gap-2">
+            {inputs.map((value) => {
+              if (!value || !value.class_type) return <> </>;
+              const nodeType = customInputNodes[value.class_type];
+              if (nodeType) {
+                const input_id = value.input_id;
+                const defaultValue = value.default_value;
+                return (
+                  <div key={input_id}>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <Badge variant="secondary">
+                          <div>
+                            {input_id}
+                            {" : "}
+                            <span className="text-orange-500">{nodeType}</span>
+                          </div>
+                        </Badge>
+                        {/* {nodeType}{" "} */}
+                        {/* <Button variant="outline">Hover</Button> */}
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Default Value: {defaultValue}
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                );
+              }
+              return <></>;
+            })}
+          </div>
+        ) : (
+          <span className="text-sm">No external inputs</span>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/components/VersionSelect.tsx

@@ -1,10 +1,7 @@
 "use client";
 
-import { getInputsFromWorkflow } from "../lib/getInputsFromWorkflow";
 import { callServerPromise } from "./callServerPromise";
-import { customInputNodes } from "./customInputNodes";
 import { LoadingIcon } from "@/components/LoadingIcon";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -21,11 +18,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { createRun } from "@/server/createRun";
 import { createDeployments } from "@/server/curdDeploments";
 import type { getMachines } from "@/server/curdMachine";
@@ -258,65 +250,7 @@ export function getWorkflowVersionFromVersionIndex(
   workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>,
   version: number
 ) {
-  const workflow_version = workflow?.versions.find(
+  const workflow_version = workflow?.versions.find((x) => x.version == version);
-    (x) => x.version === version
-  );
 
   return workflow_version;
 }
-
-export function VersionDetails({
-  workflow,
-}: {
-  workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>;
-}) {
-  const [version] = useQueryState("version", {
-    defaultValue: workflow?.versions[0].version ?? 1,
-    ...parseAsInteger,
-  });
-  const workflow_version = getWorkflowVersionFromVersionIndex(
-    workflow,
-    version
-  );
-  const inputs = getInputsFromWorkflow(workflow_version);
-  return (
-    <div className="mt-4">
-      Workflow Details
-      <div className="border rounded-lg p-2">
-        {inputs && (
-          <div className="flex flex-col gap-2">
-            {inputs.map((value) => {
-              if (!value || !value.class_type) return <> </>;
-              const nodeType = customInputNodes[value.class_type];
-              if (nodeType) {
-                const input_id = value.input_id;
-                const defaultValue = value.default_value;
-                return (
-                  <div key={input_id}>
-                    <Tooltip>
-                      <TooltipTrigger>
-                        <Badge variant="secondary">
-                          <div>
-                            {input_id}
-                            {" : "}
-                            <span className="text-orange-500">{nodeType}</span>
-                          </div>
-                        </Badge>
-                        {/* {nodeType}{" "} */}
-                        {/* <Button variant="outline">Hover</Button> */}
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        Default Value: {defaultValue}
-                      </TooltipContent>
-                    </Tooltip>
-                  </div>
-                );
-              }
-              return <></>;
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}