vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Jon/UI updates 09 15 1 (#3441)

Browse Source
This commit is contained in:
Jonathan Dobson
2025-09-15 18:54:03 -04:00
committed by GitHub
parent 6ee329866b
commit b6c1e16c96
11 changed files with 476 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx
View File

@@ -36,7 +36,7 @@ import { ModelSelector } from "@/components/ModelSelector";
import { useBlockScriptStore } from "@/store/BlockScriptStore";
import { cn } from "@/util/utils";
import { NodeHeader } from "../components/NodeHeader";
import { NodeFooter } from "../components/NodeFooter";
import { NodeTabs } from "../components/NodeTabs";
import { useParams } from "react-router-dom";
import { statusIsRunningOrQueued } from "@/routes/tasks/types";
import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuery";
@@ -278,7 +278,7 @@ function ExtractionNode({ id, data, type }: NodeProps<ExtractionNode>) {
</AccordionContent>
</AccordionItem>
</Accordion>
<NodeFooter blockLabel={label} />
<NodeTabs blockLabel={label} />
</div>
</div>
<BlockCodeEditor blockLabel={label} blockType={type} script={script} />

4
skyvern-frontend/src/routes/workflows/editor/nodes/Taskv2Node/Taskv2Node.tsx
View File

@@ -17,7 +17,7 @@ import { MAX_STEPS_DEFAULT, type Taskv2Node } from "./types";
import { ModelSelector } from "@/components/ModelSelector";
import { cn } from "@/util/utils";
import { NodeHeader } from "../components/NodeHeader";
import { NodeFooter } from "../components/NodeFooter";
import { NodeTabs } from "../components/NodeTabs";
import { useParams } from "react-router-dom";
import { statusIsRunningOrQueued } from "@/routes/tasks/types";
import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuery";
@@ -196,7 +196,7 @@ function Taskv2Node({ id, data, type }: NodeProps<Taskv2Node>) {
</AccordionContent>
</AccordionItem>
</Accordion>
<NodeFooter blockLabel={label} />
<NodeTabs blockLabel={label} />
</div>
</div>
);

87
skyvern-frontend/src/routes/workflows/editor/nodes/components/NodeFooter.tsx → skyvern-frontend/src/routes/workflows/editor/nodes/components/NodeTabs.tsx
View File

@@ -19,7 +19,7 @@ interface Props {
blockLabel: string;
}
function NodeFooter({ blockLabel }: Props) {
function NodeTabs({ blockLabel }: Props) {
const { blockLabel: urlBlockLabel } = useParams();
const blockOutput = useBlockOutputStore((state) => state.outputs[blockLabel]);
const [isExpanded, setIsExpanded] = useState(false);
@@ -61,46 +61,61 @@ function NodeFooter({ blockLabel }: Props) {
</div>
</div>
</div>
<div className="relative flex w-full overflow-visible bg-[pink]">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div
className={cn(
"absolute bottom-[-2.25rem] right-[-0.75rem] flex h-[2.5rem] w-[2.5rem] items-center justify-center gap-2 rounded-[50%] bg-slate-elevation3 p-2",
{
"opacity-100 outline outline-2 outline-slate-300":
thisBlockIsTargetted,
},
)}
>
<Button
variant="link"
size="sm"
<div
className={cn(
"absolute right-[-1rem] top-0 h-[6rem] w-[2rem] overflow-visible",
{ "top-[2.5rem]": thisBlockIsTargetted },
)}
>
<div className="relative flex h-full w-full items-start justify-center gap-1 overflow-visible">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div
className={cn(
"p-0 opacity-80 hover:translate-y-[-1px] hover:opacity-100 active:translate-y-[0px]",
{ "opacity-100": isExpanded },
"flex h-[2.5rem] w-[2.5rem] min-w-[2.5rem] rotate-[-90deg] items-center justify-center gap-2 rounded-[50%] bg-slate-elevation3 p-2",
{
"opacity-100 outline outline-2 outline-slate-300":
thisBlockIsTargetted,
},
{
"hover:translate-x-[1px] active:translate-x-[0px]":
blockOutput,
},
)}
onClick={() => {
setIsExpanded(!isExpanded);
}}
>
{isExpanded ? (
<CrossCircledIcon className="scale-[110%]" />
) : (
<OutputIcon className="scale-[80%]" />
)}
</Button>
</div>
</TooltipTrigger>
<TooltipContent>
{isExpanded ? "Close Outputs" : "Open Outputs"}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Button
variant="link"
size="sm"
disabled={!blockOutput}
className={cn("p-0 opacity-80 hover:opacity-100", {
"opacity-100": isExpanded,
})}
onClick={() => {
setIsExpanded(!isExpanded);
}}
>
{isExpanded ? (
<CrossCircledIcon className="scale-[110%]" />
) : (
<OutputIcon className="scale-[80%]" />
)}
</Button>
</div>
</TooltipTrigger>
<TooltipContent>
{!blockOutput
? "No outputs. Run block first."
: isExpanded
? "Close Outputs"
: "Open Outputs"}
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
</>
);
}
export { NodeFooter };
export { NodeTabs };

6
skyvern-frontend/src/routes/workflows/editor/utils.ts
View File

@@ -115,8 +115,12 @@ const getInitialParameters = (workflow: WorkflowApiResponse) => {
*/
const constructCacheKeyValue = (
codeKey: string,
workflow: WorkflowApiResponse,
workflow?: WorkflowApiResponse,
) => {
if (!workflow) {
return "";
}
const workflowParameters = getInitialParameters(workflow)
.filter((p) => p.parameterType === "workflow")
.reduce(