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

Action UI Update (#3296)

Browse Source
This commit is contained in:
Jonathan Dobson
2025-08-25 11:46:56 -04:00
committed by GitHub
parent e0043d002c
commit d3bc438983
2 changed files with 7 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
View File

@@ -4,12 +4,7 @@ import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { useCredentialGetter } from "@/hooks/useCredentialGetter"; import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { cn } from "@/util/utils"; import { cn } from "@/util/utils";
import { import { DotFilledIcon, CodeIcon } from "@radix-ui/react-icons";
CheckCircledIcon,
CrossCircledIcon,
DotFilledIcon,
LightningBoltIcon,
} from "@radix-ui/react-icons";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import { ReactNode, useRef } from "react"; import { ReactNode, useRef } from "react";
import { ActionTypePill } from "./ActionTypePill"; import { ActionTypePill } from "./ActionTypePill";
@@ -75,7 +70,7 @@ function ScrollableActionList({
}} }}
> >
<div className="flex-1 space-y-2 p-4 pl-5"> <div className="flex-1 space-y-2 p-4 pl-5">
<div className="flex justify-between"> <div className="flex justify-start gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span>#{i + 1}</span> <span>#{i + 1}</span>
</div> </div>
@@ -83,16 +78,7 @@ function ScrollableActionList({
<ActionTypePill actionType={action.type} /> <ActionTypePill actionType={action.type} />
{action.created_by === "script" && ( {action.created_by === "script" && (
<div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1"> <div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
<LightningBoltIcon className="h-4 w-4 text-[gold]" /> <CodeIcon className="h-4 w-4" />
</div>
)}
{action.success ? (
<div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
<CheckCircledIcon className="h-4 w-4 text-success" />
</div>
) : (
<div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
<CrossCircledIcon className="h-4 w-4 text-destructive" />
</div> </div>
)} )}
</div> </div>

21
skyvern-frontend/src/routes/workflows/workflowRun/ActionCard.tsx
View File

@@ -2,11 +2,7 @@ import { ActionsApiResponse, ActionTypes, Status } from "@/api/types";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { ActionTypePill } from "@/routes/tasks/detail/ActionTypePill"; import { ActionTypePill } from "@/routes/tasks/detail/ActionTypePill";
import { cn } from "@/util/utils"; import { cn } from "@/util/utils";
import { import { CodeIcon } from "@radix-ui/react-icons";
CheckCircledIcon,
CrossCircledIcon,
LightningBoltIcon,
} from "@radix-ui/react-icons";
import { useCallback } from "react"; import { useCallback } from "react";
type Props = { type Props = {
@@ -45,24 +41,15 @@ function ActionCard({ action, onClick, active, index }: Props) {
ref={refCallback} ref={refCallback}
> >
<div className="flex-1 space-y-2 p-4 pl-5"> <div className="flex-1 space-y-2 p-4 pl-5">
<div className="flex justify-between"> <div className="flex justify-start gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span>#{index}</span> <span>#{index}</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ActionTypePill actionType={action.action_type} /> <ActionTypePill actionType={action.action_type} />
{action.created_by === "script" && ( {action.created_by !== "script" && (
<div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1"> <div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
<LightningBoltIcon className="h-4 w-4 text-[gold]" /> <CodeIcon className="h-4 w-4" />
</div>
)}
{success ? (
<div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
<CheckCircledIcon className="h-4 w-4 text-success" />
</div>
) : (
<div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
<CrossCircledIcon className="h-4 w-4 text-destructive" />
</div> </div>
)} )}
</div> </div>