Show block parameters when an action is active (#1437)
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import { ActionsApiResponse, Status } from "@/api/types";
|
import { ActionsApiResponse, Status } from "@/api/types";
|
||||||
import { isTaskVariantBlock, WorkflowBlockType } from "./workflowTypes";
|
import { isTaskVariantBlock, WorkflowBlockType } from "./workflowTypes";
|
||||||
|
import { ActionItem } from "../workflowRun/WorkflowRunOverview";
|
||||||
|
|
||||||
export const WorkflowRunTimelineItemTypes = {
|
export const WorkflowRunTimelineItemTypes = {
|
||||||
Thought: "thought",
|
Thought: "thought",
|
||||||
@@ -123,6 +124,17 @@ export function isAction(item: unknown): item is ActionsApiResponse {
|
|||||||
return typeof item === "object" && item !== null && "action_id" in item;
|
return typeof item === "object" && item !== null && "action_id" in item;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function isActionItem(item: unknown): item is ActionItem {
|
||||||
|
return (
|
||||||
|
typeof item === "object" &&
|
||||||
|
item !== null &&
|
||||||
|
"block" in item &&
|
||||||
|
isWorkflowRunBlock(item.block) &&
|
||||||
|
"action" in item &&
|
||||||
|
isAction(item.action)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export function hasExtractedInformation(
|
export function hasExtractedInformation(
|
||||||
item: unknown,
|
item: unknown,
|
||||||
): item is { extracted_information: unknown } {
|
): item is { extracted_information: unknown } {
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import { ActionScreenshot } from "@/routes/tasks/detail/ActionScreenshot";
|
|||||||
import { WorkflowRunTimelineBlockItem } from "./WorkflowRunTimelineBlockItem";
|
import { WorkflowRunTimelineBlockItem } from "./WorkflowRunTimelineBlockItem";
|
||||||
import { ThoughtCard } from "./ThoughtCard";
|
import { ThoughtCard } from "./ThoughtCard";
|
||||||
import {
|
import {
|
||||||
isAction,
|
isActionItem,
|
||||||
isBlockItem,
|
isBlockItem,
|
||||||
isObserverThought,
|
isObserverThought,
|
||||||
isThoughtItem,
|
isThoughtItem,
|
||||||
@@ -24,8 +24,13 @@ import { WorkflowRunTimelineItemInfoSection } from "./WorkflowRunTimelineItemInf
|
|||||||
import { ObserverThoughtScreenshot } from "./ObserverThoughtScreenshot";
|
import { ObserverThoughtScreenshot } from "./ObserverThoughtScreenshot";
|
||||||
import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
|
import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
|
||||||
|
|
||||||
|
export type ActionItem = {
|
||||||
|
block: WorkflowRunBlock;
|
||||||
|
action: ActionsApiResponse;
|
||||||
|
};
|
||||||
|
|
||||||
export type WorkflowRunOverviewActiveElement =
|
export type WorkflowRunOverviewActiveElement =
|
||||||
| ActionsApiResponse
|
| ActionItem
|
||||||
| ObserverThought
|
| ObserverThought
|
||||||
| WorkflowRunBlock
|
| WorkflowRunBlock
|
||||||
| "stream"
|
| "stream"
|
||||||
@@ -68,9 +73,11 @@ function WorkflowRunOverview() {
|
|||||||
timelineItem.block.actions.length > 0
|
timelineItem.block.actions.length > 0
|
||||||
) {
|
) {
|
||||||
const last = timelineItem.block.actions.length - 1;
|
const last = timelineItem.block.actions.length - 1;
|
||||||
return timelineItem.block.actions[
|
const actionItem: ActionItem = {
|
||||||
last
|
block: timelineItem.block,
|
||||||
] as WorkflowRunOverviewActiveElement;
|
action: timelineItem.block.actions[last]!,
|
||||||
|
};
|
||||||
|
return actionItem;
|
||||||
}
|
}
|
||||||
return timelineItem.block;
|
return timelineItem.block;
|
||||||
}
|
}
|
||||||
@@ -89,10 +96,10 @@ function WorkflowRunOverview() {
|
|||||||
<div className="w-2/3 space-y-4">
|
<div className="w-2/3 space-y-4">
|
||||||
<AspectRatio ratio={16 / 9} className="overflow-y-hidden">
|
<AspectRatio ratio={16 / 9} className="overflow-y-hidden">
|
||||||
{selection === "stream" && <WorkflowRunStream />}
|
{selection === "stream" && <WorkflowRunStream />}
|
||||||
{selection !== "stream" && isAction(selection) && (
|
{selection !== "stream" && isActionItem(selection) && (
|
||||||
<ActionScreenshot
|
<ActionScreenshot
|
||||||
index={selection.action_order ?? 0}
|
index={selection.action.action_order ?? 0}
|
||||||
stepId={selection.step_id ?? ""}
|
stepId={selection.action.step_id ?? ""}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{isWorkflowRunBlock(selection) && (
|
{isWorkflowRunBlock(selection) && (
|
||||||
@@ -107,7 +114,7 @@ function WorkflowRunOverview() {
|
|||||||
)}
|
)}
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
|
|
||||||
<WorkflowRunTimelineItemInfoSection item={selection} />
|
<WorkflowRunTimelineItemInfoSection activeItem={selection} />
|
||||||
</div>
|
</div>
|
||||||
<div className="w-1/3 min-w-0 rounded bg-slate-elevation1 p-4">
|
<div className="w-1/3 min-w-0 rounded bg-slate-elevation1 p-4">
|
||||||
<ScrollArea>
|
<ScrollArea>
|
||||||
|
|||||||
@@ -1,19 +1,21 @@
|
|||||||
import { ActionsApiResponse } from "@/api/types";
|
|
||||||
import {
|
import {
|
||||||
isAction,
|
isActionItem,
|
||||||
isWorkflowRunBlock,
|
isWorkflowRunBlock,
|
||||||
WorkflowRunBlock,
|
WorkflowRunBlock,
|
||||||
} from "../types/workflowRunTypes";
|
} from "../types/workflowRunTypes";
|
||||||
import { ActionCard } from "./ActionCard";
|
import { ActionCard } from "./ActionCard";
|
||||||
import { BlockCard } from "./BlockCard";
|
import { BlockCard } from "./BlockCard";
|
||||||
import { WorkflowRunOverviewActiveElement } from "./WorkflowRunOverview";
|
import {
|
||||||
|
ActionItem,
|
||||||
|
WorkflowRunOverviewActiveElement,
|
||||||
|
} from "./WorkflowRunOverview";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
activeItem: WorkflowRunOverviewActiveElement;
|
activeItem: WorkflowRunOverviewActiveElement;
|
||||||
block: WorkflowRunBlock;
|
block: WorkflowRunBlock;
|
||||||
subBlocks: Array<WorkflowRunBlock>;
|
subBlocks: Array<WorkflowRunBlock>;
|
||||||
onBlockItemClick: (block: WorkflowRunBlock) => void;
|
onBlockItemClick: (block: WorkflowRunBlock) => void;
|
||||||
onActionClick: (action: ActionsApiResponse) => void;
|
onActionClick: (action: ActionItem) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
function WorkflowRunTimelineBlockItem({
|
function WorkflowRunTimelineBlockItem({
|
||||||
@@ -33,11 +35,16 @@ function WorkflowRunTimelineBlockItem({
|
|||||||
key={action.action_id}
|
key={action.action_id}
|
||||||
action={action}
|
action={action}
|
||||||
active={
|
active={
|
||||||
isAction(activeItem) && activeItem.action_id === action.action_id
|
isActionItem(activeItem) &&
|
||||||
|
activeItem.action.action_id === action.action_id
|
||||||
}
|
}
|
||||||
index={actions.length - index}
|
index={actions.length - index}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
onActionClick(action);
|
const actionItem: ActionItem = {
|
||||||
|
block,
|
||||||
|
action,
|
||||||
|
};
|
||||||
|
onActionClick(actionItem);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,11 +1,10 @@
|
|||||||
import { ActionsApiResponse, Status } from "@/api/types";
|
import { Status } from "@/api/types";
|
||||||
import {
|
import {
|
||||||
hasExtractedInformation,
|
hasExtractedInformation,
|
||||||
isAction,
|
isAction,
|
||||||
|
isActionItem,
|
||||||
isObserverThought,
|
isObserverThought,
|
||||||
isWorkflowRunBlock,
|
isWorkflowRunBlock,
|
||||||
ObserverThought,
|
|
||||||
WorkflowRunBlock,
|
|
||||||
} from "../types/workflowRunTypes";
|
} from "../types/workflowRunTypes";
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
import { CodeEditor } from "../components/CodeEditor";
|
import { CodeEditor } from "../components/CodeEditor";
|
||||||
@@ -13,17 +12,15 @@ import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResi
|
|||||||
import { WorkflowBlockTypes } from "../types/workflowTypes";
|
import { WorkflowBlockTypes } from "../types/workflowTypes";
|
||||||
import { statusIsAFailureType } from "@/routes/tasks/types";
|
import { statusIsAFailureType } from "@/routes/tasks/types";
|
||||||
import { SendEmailBlockInfo } from "./blockInfo/SendEmailBlockInfo";
|
import { SendEmailBlockInfo } from "./blockInfo/SendEmailBlockInfo";
|
||||||
|
import { WorkflowRunOverviewActiveElement } from "./WorkflowRunOverview";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
item:
|
activeItem: WorkflowRunOverviewActiveElement;
|
||||||
| ActionsApiResponse
|
|
||||||
| ObserverThought
|
|
||||||
| WorkflowRunBlock
|
|
||||||
| "stream"
|
|
||||||
| null;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function WorkflowRunTimelineItemInfoSection({ item }: Props) {
|
function WorkflowRunTimelineItemInfoSection({ activeItem }: Props) {
|
||||||
|
const item = isActionItem(activeItem) ? activeItem.block : activeItem;
|
||||||
|
|
||||||
if (!item) {
|
if (!item) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user