Context parameters in UI (#902)

skyvern-frontend/src/routes/workflows/components/SourceParameterKeySelector.tsx

@@ -0,0 +1,46 @@
+import { useNodes } from "@xyflow/react";
+import { useWorkflowParametersState } from "../editor/useWorkflowParametersState";
+import { AppNode } from "../editor/nodes";
+import { getOutputParameterKey } from "../editor/workflowEditorUtils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+type Props = {
+  value?: string;
+  onChange: (value: string) => void;
+};
+
+function SourceParameterKeySelector({ value, onChange }: Props) {
+  const [workflowParameters] = useWorkflowParametersState();
+  const nodes = useNodes<AppNode>();
+  const contextParameterKeys = workflowParameters
+    .filter((parameter) => parameter.parameterType !== "credential")
+    .map((parameter) => parameter.key);
+  const outputParameterKeys = nodes
+    .filter((node) => node.type !== "nodeAdder")
+    .map((node) => getOutputParameterKey(node.data.label));
+
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger>
+        <SelectValue placeholder="Select a parameter" />
+      </SelectTrigger>
+      <SelectContent>
+        {[...contextParameterKeys, ...outputParameterKeys].map(
+          (parameterKey) => (
+            <SelectItem key={parameterKey} value={parameterKey}>
+              {parameterKey}
+            </SelectItem>
+          ),
+        )}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export { SourceParameterKeySelector };