+
+ }
+ actions={
+ -
+ {groupTags?.map((tag) => (
+
-
+ {filteredTags?.map((tag) => (
+
-
+ {children}
+
{loading &&
;
+}
diff --git a/ui-next/src/components/Heading.jsx b/ui-next/src/components/Heading.jsx
new file mode 100644
index 0000000000..962c4345f5
--- /dev/null
+++ b/ui-next/src/components/Heading.jsx
@@ -0,0 +1,9 @@
+import MuiTypography from "./MuiTypography";
+
+const levelMap = ["h6", "h5", "h4", "h3", "h2", "h1"];
+
+const Heading = ({ level = 3, ...props }) => {
+ return {item.value}
+ 
+ - .MuiListItem-root": {
+ "&:first-of-type": {
+ ".MuiButtonBase-root": {
+ // mt: 1,
+ ":before": treeStyle,
+ },
+ },
+
+ ".MuiButtonBase-root": {
+ color: colors.sidebarGreyText,
+ py: 0,
+ transition: " background-color 0.3s ease-in-out",
+
+ ":before": {
+ ml: 1,
+ content: "''",
+ borderLeft: `1px solid ${colors.sidebarFaintGrey}`,
+ position: "absolute",
+ width: "10px",
+ height: "36px",
+ top: "-20px",
+ left: "15px",
+ },
+
+ ".MuiBox-root": {
+ ml: 7,
+ },
+
+ ".MuiListItemText-root": {
+ ".MuiListItemText-primary": {
+ fontSize: 12,
+ },
+ },
+ },
+ },
+ }}
+ >
+ {items.map((item) => (
+
-
+ {visibleChildren.map((child) => (
+
-
+ {visibleChildren.map((child) => (
+
-
+ {sections.map((item) => {
+ const hasChildren = item.items && item.items.length > 0;
+ const itemRef = hasChildren ? getItemRef(item.id) : undefined;
+
+ return (
+
+ + ); + const toggleElement = ( + 3 ? "inherit" : "none", ...linkStyle }} + > + {collapsed ? `${tail.length} more lines` : `Hide ${tail.length} lines`} + + ); + + return ( +
+ {head.join("\n")}
+
+ {tailElement} {toggleElement}
+
+ );
+}
diff --git a/ui-next/src/components/StatusBadge.tsx b/ui-next/src/components/StatusBadge.tsx
new file mode 100644
index 0000000000..891145da2c
--- /dev/null
+++ b/ui-next/src/components/StatusBadge.tsx
@@ -0,0 +1,38 @@
+import { FunctionComponent } from "react";
+import { TaskStatus } from "types/TaskStatus";
+import { HumanTaskState as TaskState } from "types/HumanTaskTypes";
+import { getChipStatusColor } from "utils/helpers";
+import { capitalizeFirstLetter } from "utils/utils";
+import TagChip from "./TagChip";
+
+export interface StatusBadgeProps {
+ status: TaskStatus | TaskState;
+ labelConcat?: string;
+}
+
+const StatusBadge: FunctionComponent
+
+ ) : "icon" in task && task.icon ? (
+ task.icon
+ ) : (
+
+
+ ) : (
+ {
+ event.preventDefault();
+ event.stopPropagation();
+ onClick(event);
+ }}
+ >
+
+ {
+ event.preventDefault();
+ event.stopPropagation();
+ onDeleteClick(event);
+ }}
+ >
+
+
+ {label}
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+ );
+};
+
+export default DecisionOperator;
diff --git a/ui-next/src/components/flow/components/shapes/DoWhileTask.jsx b/ui-next/src/components/flow/components/shapes/DoWhileTask.jsx
new file mode 100644
index 0000000000..c20b57d1c0
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/DoWhileTask.jsx
@@ -0,0 +1,185 @@
+import { IconButton, keyframes, styled } from "@mui/material";
+import { Plus, Repeat } from "@phosphor-icons/react";
+import classnames from "classnames";
+import { useDroppableNode } from "components/flow/dragDrop/hooks";
+import _isEmpty from "lodash/isEmpty";
+import { ADD_TASK_IN_DO_WHILE } from "pages/definition/state/taskModifier/constants";
+import { useMemo } from "react";
+import CardAttemptsBadge from "./TaskCard/CardAttemptsBadge";
+import CardLabel from "./TaskCard/CardLabel";
+import CardStatusBadge from "./TaskCard/CardStatusBadge";
+import DeleteButton from "./TaskCard/DeleteButton";
+import { getCardVariant } from "./styles";
+
+const changeColor = keyframes`
+0% {
+ background-position: left top, right bottom, left bottom, right top;
+}
+100% {
+ background-color: rgba(159,220,170,0.5);
+ background-position: left 15px top, right 15px bottom , left bottom 15px , right top 15px;
+}
+`;
+
+const DroppablePlace = styled("div")`
+ &.over {
+ background-image:
+ linear-gradient(90deg, silver 50%, transparent 50%),
+ linear-gradient(90deg, silver 50%, transparent 50%),
+ linear-gradient(0deg, silver 50%, transparent 50%),
+ linear-gradient(0deg, silver 50%, transparent 50%);
+ background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+ background-size:
+ 15px 2px,
+ 15px 2px,
+ 2px 15px,
+ 2px 15px;
+ background-position:
+ left top,
+ right bottom,
+ left bottom,
+ right top;
+ animation: ${changeColor} 1s infinite linear;
+ height: 340px;
+ }
+
+ &.dragging {
+ }
+ position: absolute;
+ top: 60px;
+ height: 340px;
+ width: ${(props) =>
+ props.dropIsDisabled || props.draggedNodeData == null ? 0 : "350"}px;
+`;
+
+const DoWhileTask = ({
+ nodeData,
+ onToggleTaskMenu,
+ isInconsistent,
+ nodeId = "",
+ displayDescription = false,
+}) => {
+ const { task } = nodeData;
+ const { type } = task;
+ const {
+ droppableResult: { isOver, setNodeRef },
+ draggedNodeData,
+ dropIsDisabled,
+ } = useDroppableNode({
+ nodeData: nodeData,
+ position: "ADD_TASK_IN_DO_WHILE",
+ nodeId: nodeId + "_drag_to_dowhile",
+ });
+
+ const maybeAddButton = useMemo(
+ () =>
+ task.executionData == null && _isEmpty(task.loopOver) ? (
+ <>
+
+
+
+ {/* Definition */}
+
+ {displayDescription && nodeData.task.description != null && (
+
+
+
+
+
+
+ {name}
+ {taskReferenceName}
+
+ {/* Execution */}
+
+ );
+};
+
+export default DoWhileTask;
diff --git a/ui-next/src/components/flow/components/shapes/DynamicTasksCards.jsx b/ui-next/src/components/flow/components/shapes/DynamicTasksCards.jsx
new file mode 100644
index 0000000000..0d7710c291
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/DynamicTasksCards.jsx
@@ -0,0 +1,188 @@
+import { useContext, useState } from "react";
+import CardLabel from "./TaskCard/CardLabel";
+import CardStatusBadge from "./TaskCard/CardStatusBadge";
+// import CardAttemptsBadge from "./TaskCard/CardAttemptsBadge";
+import Button from "components/MuiButton";
+import { FlowExecutionContext } from "pages/execution/state";
+import { TaskStatus } from "types/TaskStatus";
+import DeleteButton from "./TaskCard/DeleteButton";
+import { getCardVariant } from "./styles";
+
+const DynamicTaskChildPlaceholder = ({
+ type,
+ nodeData,
+ x,
+ y,
+ cardHeight,
+ ellipsis,
+}) => {
+ const placeholderStyles = {
+ cursor: "pointer",
+ display: "flex",
+ width: "100%",
+ padding: "20px",
+ borderRadius: "10px",
+ position: "absolute",
+ height: `${cardHeight}px`,
+ transform: `translateX(${x}px) translateY(${y}px)`,
+ transition: "transform 0.2s ease-in-out",
+ ...getCardVariant(type, nodeData.status, nodeData.selected),
+ outlineStyle: ellipsis ? "dashed" : "solid",
+ };
+
+ if (ellipsis) {
+ placeholderStyles.outlineColor = "#444444";
+ placeholderStyles.backgroundColor = "#FFEEAA";
+ }
+
+ if (nodeData.status === TaskStatus.PENDING) {
+ placeholderStyles.outlineColor = "none";
+ placeholderStyles.outlineStyle = "none";
+ }
+
+ return ;
+};
+
+const DynamicTasksCards = ({
+ nodeData,
+ isInconsistent,
+ displayDescription = false,
+}) => {
+ const [isHovering, setIsHovering] = useState(false);
+ const { onExpandDynamic } = useContext(FlowExecutionContext);
+ const { task } = nodeData;
+ const { type } = task;
+
+ const collapsedTasksCount = task.executionData.collapsedTasks.length;
+ const hoverMultiplier = 1.8;
+ const showEllipsisCard = collapsedTasksCount > 4;
+ const finalChildNumber = showEllipsisCard ? 4 : collapsedTasksCount;
+
+ const offsetDistance = 40 / finalChildNumber;
+ const cardHeight = 140 - (finalChildNumber - 1) * (40 / finalChildNumber);
+ const initialXOffset = -(((finalChildNumber - 1) * offsetDistance) / 2);
+
+ const completedTasks = nodeData?.collapsedTasksStatus
+ ? nodeData?.collapsedTasksStatus.filter((item) => item === "COMPLETED")
+ : [];
+ return (
+
+
+
+
+
+ {displayDescription && nodeData.task.description != null
+ ? nodeData.task.description
+ : nodeData.task.name}
+
+
+
+ {maybeAddButton}
+ setIsHovering(true)}
+ onMouseLeave={() => setIsHovering(false)}
+ >
+ {[...Array(finalChildNumber)].map((_, i) => {
+ let xTransform =
+ initialXOffset + (finalChildNumber - i - 1) * offsetDistance;
+ const yTransform = (finalChildNumber - i - 1) * offsetDistance;
+ if (isHovering) {
+ xTransform *= hoverMultiplier;
+ }
+
+ return (
+
+ );
+};
+
+export default DynamicTasksCards;
diff --git a/ui-next/src/components/flow/components/shapes/StarShape.jsx b/ui-next/src/components/flow/components/shapes/StarShape.jsx
new file mode 100644
index 0000000000..b687c3f8cd
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/StarShape.jsx
@@ -0,0 +1,50 @@
+function StarShape() {
+ return (
+
+ );
+}
+
+export default StarShape;
diff --git a/ui-next/src/components/flow/components/shapes/SubWorkflowTask.jsx b/ui-next/src/components/flow/components/shapes/SubWorkflowTask.jsx
new file mode 100644
index 0000000000..50ebbb8e82
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/SubWorkflowTask.jsx
@@ -0,0 +1,115 @@
+import { getCardVariant } from "./styles";
+import CardAttemptsBadge from "./TaskCard/CardAttemptsBadge";
+import CardIcon from "./TaskCard/CardIcon";
+import CardLabel from "./TaskCard/CardLabel";
+import CardStatusBadge from "./TaskCard/CardStatusBadge";
+import DeleteButton from "./TaskCard/DeleteButton";
+import { showIterationChip } from "./TaskCard/helpers";
+
+const SubWorkflowTask = ({
+ nodeData,
+ isInconsistent,
+ displayDescription = false,
+}) => {
+ const { task } = nodeData;
+ const { type } = task;
+
+ const subWorkflowName = task.name ? task.name : task.subWorkflowParam?.name;
+ const showIterationsNumber = showIterationChip(nodeData);
+
+ return (
+
+ {/* Execution */}
+
+
+
+
+
+ {displayDescription && nodeData.task.description != null ? (
+ <>{nodeData.task.description}
+ ) : (
+ <>
+
+
+ {nodeData.task.name}
+
+
+ {nodeData.task.taskReferenceName}
+
+
+ )}
+
+
+
+
+ {completedTasks?.length} out of {collapsedTasksCount} task
+ {collapsedTasksCount > 1 ? "s" : ""} executed.
+
+
+ {/* Execution */}
+
+ );
+};
+
+export default SubWorkflowTask;
diff --git a/ui-next/src/components/flow/components/shapes/SwitchJoinPseudoTask.jsx b/ui-next/src/components/flow/components/shapes/SwitchJoinPseudoTask.jsx
new file mode 100644
index 0000000000..1f8cb7baf2
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/SwitchJoinPseudoTask.jsx
@@ -0,0 +1,50 @@
+import { taskToSize } from "components/flow/nodes/mapper/layout";
+import { gray13, lightShadesGray } from "theme/tokens/colors";
+
+const SwitchJoin = ({ nodeData }) => {
+ const { task } = nodeData;
+ const terminalClick = (event) => {
+ event.stopPropagation();
+ };
+
+ const { width, height } = taskToSize(task);
+ return (
+
+
+ )}
+
+
+
+ {subWorkflowName}
+
+
+
+
+ {task.taskReferenceName}
+
+
+
+
+ {`// Marks end of switch`}
+
+ );
+};
+
+export default SwitchJoin;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/AddPathButton.tsx b/ui-next/src/components/flow/components/shapes/TaskCard/AddPathButton.tsx
new file mode 100644
index 0000000000..7512b350cc
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/AddPathButton.tsx
@@ -0,0 +1,38 @@
+import Button from "components/MuiButton";
+import { WorkflowEditContext } from "pages/definition/state";
+import {
+ TaskAndCrumbs,
+ usePerformOperationOnDefinition,
+} from "pages/definition/state/usePerformOperationOnDefintion";
+import { MouseEvent, ReactNode, useContext } from "react";
+import ForkIcon from "./icons/ForkIcon";
+
+interface AddPathButtonProps {
+ children: ReactNode;
+ nodeData: TaskAndCrumbs;
+}
+
+const AddPathButton = ({ children, nodeData }: AddPathButtonProps) => {
+ const { workflowDefinitionActor } = useContext(WorkflowEditContext);
+ const { handleAddSwitchPath: onAddSwitchPath } =
+ usePerformOperationOnDefinition(workflowDefinitionActor!);
+
+ const handleAddEdge = (e: MouseEvent
+ {task?.taskReferenceName}
+
+
+ {attempts}
+
+ );
+};
+
+export default CardAttemptsBadge;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/CardIcon.jsx b/ui-next/src/components/flow/components/shapes/TaskCard/CardIcon.jsx
new file mode 100644
index 0000000000..dec009a049
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/CardIcon.jsx
@@ -0,0 +1,125 @@
+import {
+ Cards,
+ CloudArrowDown,
+ Function,
+ Hourglass,
+ Person as HumanTaskIcon,
+ Pause,
+ Repeat,
+ RocketLaunch,
+ X,
+ Diamond,
+ GitFork,
+ ShieldCheck,
+ Globe,
+ FileJsIcon,
+ HandshakeIcon,
+ ClockClockwiseIcon,
+ PersonSimpleRunIcon,
+ BroadcastIcon,
+ RowsIcon,
+ FilesIcon,
+ FileMagnifyingGlass,
+} from "@phosphor-icons/react";
+
+import { TaskType } from "types";
+import { ForkJoinIcon } from "./icons/ForkJoinIcon";
+import SendgridIcon from "./icons/Sendgrid";
+import HttpPollIcon from "./icons/HttpPoll";
+import JsonIcon from "./icons/Json";
+import WorkerSimpleIcon from "./icons/Worker";
+import SimpleWorkerIcon from "./icons/Simple";
+import LlmTextComplete from "./icons/LlmTextComplete";
+import LlmGenerateEmbeddings from "./icons/LlmGenerateEmbeddings";
+import LlmGetEmbeddings from "./icons/LlmGetEmbeddings";
+import LlmStoreEmbeddings from "./icons/LlmStoreEmbeddings";
+import LlmSearchIndex from "./icons/LlmSearchIndex";
+import LlmIndexDocument from "./icons/LlmIndexDocument";
+import GetDocument from "./icons/GetDocument";
+import LlmIndexText from "./icons/LlmIndexText";
+import QueryProcessor from "./icons/QueryProcessor";
+import OpsGenie from "./icons/OpsGenie";
+import UpdateTaskIcon from "./icons/UpdateTaskIcon";
+import UpdateSecretIcon from "./icons/UpdateSecret";
+import LlmChatComplete from "./icons/LlmChatComplete";
+import { IntegrationIcon } from "components/IntegrationIcon";
+import { useMemo } from "react";
+
+const CardIcon = ({ type, integrationType }) => {
+ const MCPIntegrationIcon = useMemo(() => {
+ return (
+
+
+ );
+ }, [integrationType]);
+ const iconMap = {
+ [TaskType.WAIT]: Hourglass,
+ [TaskType.HTTP]: Globe,
+ [TaskType.KAFKA_PUBLISH]: WorkerSimpleIcon,
+ [TaskType.HUMAN]: HumanTaskIcon,
+ [TaskType.BUSINESS_RULE]: HandshakeIcon,
+ [TaskType.SENDGRID]: SendgridIcon,
+ [TaskType.WAIT_FOR_WEBHOOK]: ClockClockwiseIcon,
+ [TaskType.HTTP_POLL]: HttpPollIcon,
+ [TaskType.DO_WHILE]: Repeat,
+ [TaskType.SIMPLE]: SimpleWorkerIcon,
+ [TaskType.YIELD]: Pause,
+ [TaskType.JDBC]: PersonSimpleRunIcon,
+ [TaskType.EVENT]: BroadcastIcon,
+ [TaskType.JOIN]: GitFork,
+ [TaskType.FORK_JOIN]: ForkJoinIcon,
+ [TaskType.FORK_JOIN_DYNAMIC]: ForkJoinIcon,
+ [TaskType.DYNAMIC]: Cards,
+ [TaskType.INLINE]: FileJsIcon,
+ [TaskType.SWITCH]: Diamond,
+ [TaskType.JSON_JQ_TRANSFORM]: JsonIcon,
+ [TaskType.TERMINATE]: X,
+ [TaskType.SET_VARIABLE]: Function,
+ [TaskType.TERMINATE_WORKFLOW]: X,
+ [TaskType.SUB_WORKFLOW]: ForkJoinIcon,
+ [TaskType.START_WORKFLOW]: RocketLaunch,
+ [TaskType.LLM_TEXT_COMPLETE]: LlmTextComplete,
+ [TaskType.LLM_GENERATE_EMBEDDINGS]: LlmGenerateEmbeddings,
+ [TaskType.LLM_GET_EMBEDDINGS]: LlmGetEmbeddings,
+ [TaskType.LLM_STORE_EMBEDDINGS]: LlmStoreEmbeddings,
+ [TaskType.LLM_INDEX_DOCUMENT]: LlmIndexDocument,
+ [TaskType.LLM_SEARCH_INDEX]: LlmSearchIndex,
+ [TaskType.LLM_INDEX_TEXT]: LlmIndexText,
+ [TaskType.UPDATE_SECRET]: UpdateSecretIcon,
+ [TaskType.GET_DOCUMENT]: GetDocument,
+ [TaskType.QUERY_PROCESSOR]: QueryProcessor,
+ [TaskType.OPS_GENIE]: OpsGenie,
+ [TaskType.GET_SIGNED_JWT]: ShieldCheck,
+ [TaskType.UPDATE_TASK]: UpdateTaskIcon,
+ [TaskType.GET_WORKFLOW]: CloudArrowDown,
+ [TaskType.LLM_CHAT_COMPLETE]: LlmChatComplete,
+ [TaskType.GRPC]: Globe,
+ [TaskType.CHUNK_TEXT]: RowsIcon,
+ [TaskType.LIST_FILES]: FilesIcon,
+ [TaskType.PARSE_DOCUMENT]: FileMagnifyingGlass,
+ };
+
+ const IconComponent = iconMap[type];
+ if (type === TaskType.MCP) {
+ return MCPIntegrationIcon;
+ }
+
+ return IconComponent ? (
+
+
+ ) : null;
+};
+
+export default CardIcon;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/CardLabel.jsx b/ui-next/src/components/flow/components/shapes/TaskCard/CardLabel.jsx
new file mode 100644
index 0000000000..383ce3294b
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/CardLabel.jsx
@@ -0,0 +1,46 @@
+import { TaskType } from "types";
+import theme from "../../../theme";
+
+const shortenedTypeTag = {
+ FORK_JOIN_COLLAPSED: "DYN. CHILDREN",
+ [TaskType.JSON_JQ_TRANSFORM]: "JSON JQ",
+ [TaskType.EXCLUSIVE_JOIN]: "EX. JOIN",
+ [TaskType.FORK_JOIN]: "FORK JOIN",
+ [TaskType.FORK_JOIN_DYNAMIC]: "DYN. FORK",
+ [TaskType.INLINE]: "INLINE",
+ [TaskType.KAFKA_PUBLISH]: "KAFKA",
+ [TaskType.SIMPLE]: "SIMPLE",
+};
+
+const CardLabel = ({
+ type,
+ displayDescription = false,
+ integrationIconName,
+}) => (
+
+
+);
+export default CardLabel;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/CardStatusBadge.jsx b/ui-next/src/components/flow/components/shapes/TaskCard/CardStatusBadge.jsx
new file mode 100644
index 0000000000..756d508a8b
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/CardStatusBadge.jsx
@@ -0,0 +1,90 @@
+import { CircularProgress } from "@mui/material";
+import {
+ Check as CompletedIcon,
+ Prohibit as FailedIcon,
+ ArrowArcRight as SkippedTaskIcon,
+} from "@phosphor-icons/react";
+import { colors } from "theme/tokens/variables";
+
+import { TaskStatus } from "types/TaskStatus";
+
+const getBackgroundByStatus = (status) => {
+ switch (status) {
+ case TaskStatus.COMPLETED:
+ return colors.primaryGreen;
+ case TaskStatus.COMPLETED_WITH_ERRORS:
+ return "#EEAA00";
+ case TaskStatus.CANCELED:
+ return "#fba404";
+ case TaskStatus.FAILED:
+ case TaskStatus.FAILED_WITH_TERMINAL_ERROR:
+ case TaskStatus.TIMED_OUT:
+ return "#DD2222";
+ case TaskStatus.IN_PROGRESS:
+ case TaskStatus.SCHEDULED:
+ return "white";
+ case TaskStatus.SKIPPED:
+ return "#F5BF42";
+ default:
+ return null;
+ }
+};
+
+const CardStatusBadge = ({ status }) => {
+ return [
+ TaskStatus.IN_PROGRESS,
+ TaskStatus.SCHEDULED,
+ TaskStatus.COMPLETED,
+ TaskStatus.COMPLETED_WITH_ERRORS,
+ TaskStatus.FAILED,
+ TaskStatus.FAILED_WITH_TERMINAL_ERROR,
+ TaskStatus.CANCELED,
+ TaskStatus.SKIPPED,
+ TaskStatus.TIMED_OUT,
+ ].includes(status) ? (
+
+ {type !== TaskType.MCP
+ ? shortenedTypeTag[type] || type
+ : integrationIconName?.toUpperCase() || "MCP"}
+
+
+ {[TaskStatus.IN_PROGRESS, TaskStatus.SCHEDULED].includes(status) ? (
+ // disableShrink for lower CPU load
+ // see: https://mui.com/components/progress/
+
+ ) : null;
+};
+
+export default CardStatusBadge;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/DeleteButton.tsx b/ui-next/src/components/flow/components/shapes/TaskCard/DeleteButton.tsx
new file mode 100644
index 0000000000..7464baccaa
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/DeleteButton.tsx
@@ -0,0 +1,48 @@
+import { NodeTaskData } from "components/flow/nodes/mapper";
+import { getFlowTheme } from "components/flow/theme";
+import { useContext } from "react";
+import { ColorModeContext } from "theme/material/ColorModeContext";
+import { shouldHide } from "./helpers";
+import DeleteIcon from "./icons/DeleteIcon";
+
+const DeleteButton = (
+ { maybeHideData }: { maybeHideData: Partial
+
+ ) : null;
+};
+
+export default DeleteButton;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/DynamicTask.tsx b/ui-next/src/components/flow/components/shapes/TaskCard/DynamicTask.tsx
new file mode 100644
index 0000000000..8d37c6bcbc
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/DynamicTask.tsx
@@ -0,0 +1,36 @@
+import { NodeTaskData } from "components/flow/nodes/mapper";
+import { Link as LinkIcon } from "@phosphor-icons/react";
+import { Box, Link } from "@mui/material";
+import { cyan } from "theme/tokens/colors";
+import { DynamicTaskDef } from "types/TaskType";
+
+export const DynamicTask = ({
+ nodeData,
+}: {
+ nodeData: NodeTaskData
+
+
+
+ );
+};
+
+export default EventTask;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/ForkJoinDynamicTask.jsx b/ui-next/src/components/flow/components/shapes/TaskCard/ForkJoinDynamicTask.jsx
new file mode 100644
index 0000000000..5b222888d6
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/ForkJoinDynamicTask.jsx
@@ -0,0 +1,61 @@
+import { useSelector } from "@xstate/react";
+import { usePanAndZoomActor } from "components/flow/components/graphs/PanAndZoomWrapper";
+import { FlowActorContext } from "components/flow/state/FlowActorContext";
+import Button from "components/MuiButton";
+import {
+ ExecutionActionTypes,
+ FlowExecutionContext,
+} from "pages/execution/state";
+import { useContext } from "react";
+
+const ForkJoinDynamicTask = ({ nodeData }) => {
+ const { onCollapseDynamic } = useContext(FlowExecutionContext);
+ const { flowActor } = useContext(FlowActorContext);
+ const panAndZoomActor = useSelector(
+ flowActor,
+ (state) => state.children?.panAndZoomMachine,
+ );
+ const [, { handleSetEventType }] = usePanAndZoomActor(panAndZoomActor);
+ const { collapsed, task } = nodeData;
+
+ return (
+
+ {prefix ? (
+
+
+ {prefix}
+
+ ) : null}
+
+ {value ? value : "No Value"}
+
+
+
+ );
+};
+
+export default ForkJoinDynamicTask;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/HTTPPollTask.jsx b/ui-next/src/components/flow/components/shapes/TaskCard/HTTPPollTask.jsx
new file mode 100644
index 0000000000..3f6ad95093
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/HTTPPollTask.jsx
@@ -0,0 +1,57 @@
+import { Link } from "@mui/material";
+import { Link as LinkIcon } from "@phosphor-icons/react";
+import { useContext } from "react";
+import { ColorModeContext } from "theme/material/ColorModeContext";
+import { colors } from "theme/tokens/variables";
+import { isValidUri } from "./helpers";
+
+const HTTPPollTask = ({ nodeData }) => {
+ const { mode } = useContext(ColorModeContext);
+ const darkMode = mode === "dark";
+
+ const { task } = nodeData;
+ const {
+ inputParameters: { http_request: request },
+ } = task;
+ const isClickableUri = request?.method === "GET" && isValidUri(request?.uri);
+
+ return (
+
+
+
+ {collapsed === false && task.executionData?.executed ? (
+
+ ) : null}
+
+
+
+ );
+};
+
+export default HTTPPollTask;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/HTTPTask.jsx b/ui-next/src/components/flow/components/shapes/TaskCard/HTTPTask.jsx
new file mode 100644
index 0000000000..d2079ea1b3
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/HTTPTask.jsx
@@ -0,0 +1,64 @@
+import { Link } from "@mui/material";
+import { Link as LinkIcon } from "@phosphor-icons/react";
+import { useContext } from "react";
+import { ColorModeContext } from "theme/material/ColorModeContext";
+import { colors } from "theme/tokens/variables";
+import { isValidUri } from "./helpers";
+
+const HTTPTask = ({ nodeData }) => {
+ const { mode } = useContext(ColorModeContext);
+ const darkMode = mode === "dark";
+
+ const { task } = nodeData;
+ const {
+ inputParameters: { http_request: request },
+ } = task;
+
+ const method = request?.method
+ ? request?.method
+ : task?.inputParameters?.method;
+
+ const uri = request?.uri ? request?.uri : task?.inputParameters?.uri;
+
+ const isClickableUri = method === "GET" && isValidUri(uri);
+
+ return (
+
+
+
+ {request?.method}
+
+
+ {isClickableUri ? (
+
+ {request?.uri}
+
+ ) : (
+ request?.uri
+ )}
+
+
+
+ );
+};
+
+export default HTTPTask;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/INLINETask.jsx b/ui-next/src/components/flow/components/shapes/TaskCard/INLINETask.jsx
new file mode 100644
index 0000000000..c1cc8bd3e6
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/INLINETask.jsx
@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import Prism from "prismjs";
+import "prismjs/themes/prism-coy.css";
+
+const INLINETask = ({ nodeData }) => {
+ const { task } = nodeData;
+
+ useEffect(() => {
+ Prism.highlightAll();
+ }, []);
+
+ const {
+ inputParameters: { expression },
+ } = task;
+
+ return (
+
+
+
+ {method}
+
+
+ {isClickableUri ? (
+
+ {uri}
+
+ ) : (
+ uri
+ )}
+
+ code[class*="language-"]` (!)
+ display: "block",
+ margin: "10px 0 0 0",
+ }}
+ // language-js makes JQ look pretty good!
+ className="language-js"
+ >
+ {expression}
+
+ );
+};
+
+export default INLINETask;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/JDBCTask.tsx b/ui-next/src/components/flow/components/shapes/TaskCard/JDBCTask.tsx
new file mode 100644
index 0000000000..c2af2dbf27
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/JDBCTask.tsx
@@ -0,0 +1,29 @@
+import { Chip, Box } from "@mui/material";
+import DomainIcon from "./icons/Buildings";
+import _isNil from "lodash/isNil";
+
+const statusToColor = (status?: string) => {
+ switch (status) {
+ case "COMPLETED":
+ return "secondary";
+ case "FAILED":
+ return "error";
+ default:
+ return undefined;
+ }
+};
+
+export const JDBCTask = ({ nodeData }: { nodeData: Element | any }) => {
+ const { task } = nodeData;
+
+ return _isNil(task?.executionData?.domain) ? null : (
+ code[class*="language-"]` (!)
+ display: "block",
+ margin: "10px 0 0 0",
+ }}
+ // TODO: Support other languages according to Evaluator type.
+ className="language-js"
+ >
+ {typeof queryExpression === "string" ? queryExpression : ""}
+
+ );
+};
+
+export default JSONJQTransformTask;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/KAFKATask.jsx b/ui-next/src/components/flow/components/shapes/TaskCard/KAFKATask.jsx
new file mode 100644
index 0000000000..a23c3cb011
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/KAFKATask.jsx
@@ -0,0 +1,69 @@
+import { Link as LinkIcon, Key as KeyIcon } from "@phosphor-icons/react";
+
+const KAFKATask = ({ nodeData }) => {
+ const { task } = nodeData;
+ const request = task.inputParameters?.kafka_request;
+ const requestKey = request?.key || {};
+
+ return (
+
+
+ );
+};
+
+export default KAFKATask;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/SimpleTask.jsx b/ui-next/src/components/flow/components/shapes/TaskCard/SimpleTask.jsx
new file mode 100644
index 0000000000..345e1078b0
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/SimpleTask.jsx
@@ -0,0 +1,29 @@
+import { Chip, Box } from "@mui/material";
+import DomainIcon from "./icons/Buildings";
+import _isNil from "lodash/isNil";
+
+const statusToColor = (status) => {
+ switch (status) {
+ case "COMPLETED":
+ return "secondary";
+ case "FAILED":
+ return "error";
+ default:
+ return undefined;
+ }
+};
+
+export const SimpleTask = ({ nodeData }) => {
+ const { task } = nodeData;
+
+ return _isNil(task?.executionData?.domain) ? null : (
+
+
+
+
+ {Object.entries(requestKey)?.map(([key, value], index) =>
+ index === 0 ? (
+
+ {request?.bootStrapServers}
+
+
+
+ ) : null,
+ )}
+
+ {`${key}: ${value}`}
+
+
+
+ );
+};
+
+export default StartWorkflowTask;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/SwitchAdd.tsx b/ui-next/src/components/flow/components/shapes/TaskCard/SwitchAdd.tsx
new file mode 100644
index 0000000000..9497505002
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/SwitchAdd.tsx
@@ -0,0 +1,92 @@
+import { NodeTaskData } from "components/flow/nodes/mapper";
+import { getFlowTheme } from "components/flow/theme";
+import { WorkflowEditContext } from "pages/definition/state";
+import {
+ TaskAndCrumbs,
+ usePerformOperationOnDefinition,
+} from "pages/definition/state/usePerformOperationOnDefintion";
+import { MouseEvent, useContext } from "react";
+import { ColorModeContext } from "theme/material/ColorModeContext";
+import { SwitchTaskDef } from "types/TaskType";
+import { shouldHide } from "./helpers";
+import PlusIcon from "./icons/PlusIcon";
+
+const getPosition = (taskcount: number) => {
+ switch (taskcount) {
+ case 1:
+ return {
+ bottom: "-12px",
+ right: "110px",
+ };
+ case 2:
+ return {
+ bottom: "-12px",
+ right: "7px",
+ };
+ case 3:
+ return {
+ bottom: "-12px",
+ right: "7px",
+ };
+ default:
+ return {
+ bottom: "15px",
+ right: "-10px",
+ };
+ }
+};
+
+const SwitchAdd = (
+ { nodeData }: { nodeData: Partial
+
+
+ Workflow
+
+
+
+ {startWorkflow?.name}
+
+
+
+
+ ) : null;
+};
+
+export default SwitchAdd;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/TaskCard.tsx b/ui-next/src/components/flow/components/shapes/TaskCard/TaskCard.tsx
new file mode 100644
index 0000000000..ae8c975faa
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/TaskCard.tsx
@@ -0,0 +1,198 @@
+import HTTPPollTask from "components/flow/components/shapes/TaskCard/HTTPPollTask";
+import { JDBCTask } from "components/flow/components/shapes/TaskCard/JDBCTask";
+import StartWorkflowTask from "components/flow/components/shapes/TaskCard/StartWorkflowTask";
+import { NodeTaskData } from "components/flow/nodes/mapper";
+import { TaskAndCrumbs } from "pages/definition/state/usePerformOperationOnDefintion";
+import { useContext } from "react";
+import { ColorModeContext } from "theme/material/ColorModeContext";
+import { colors } from "theme/tokens/variables";
+import { DynamicTaskDef, TaskStatus, TaskType, WaitTaskDef } from "types";
+import { MCPTaskDef } from "types/TaskType";
+import { getCardVariant } from "../styles";
+import AddPathButton from "./AddPathButton";
+import CardAttemptsBadge from "./CardAttemptsBadge";
+import CardIcon from "./CardIcon";
+import CardLabel from "./CardLabel";
+import CardStatusBadge from "./CardStatusBadge";
+import DeleteButton from "./DeleteButton";
+import { DynamicTask } from "./DynamicTask";
+import EventTask from "./EventTask";
+import ForkJoinDynamicTask from "./ForkJoinDynamicTask";
+import { showIterationChip } from "./helpers";
+import HTTPTask from "./HTTPTask";
+import INLINETask from "./INLINETask";
+import JSONJQTransformTask from "./JSONJQTransformTask";
+import KAFKATask from "./KAFKATask";
+import { SimpleTask } from "./SimpleTask";
+import { WaitTaskInfo } from "./WaitTaskInfo";
+import { TaskDescription } from "../TaskDescription";
+
+const getTaskCardContent = (type: TaskType, nodeData: NodeTaskData) => {
+ switch (type) {
+ case TaskType.HTTP:
+ return
+
+
+
+ );
+};
+
+export default TaskCard;
diff --git a/ui-next/src/components/flow/components/shapes/TaskCard/WaitTaskInfo.tsx b/ui-next/src/components/flow/components/shapes/TaskCard/WaitTaskInfo.tsx
new file mode 100644
index 0000000000..d9035d732e
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskCard/WaitTaskInfo.tsx
@@ -0,0 +1,66 @@
+import { Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import { ClockIcon } from "@phosphor-icons/react";
+import { WaitTaskDef } from "types";
+
+interface WaitTaskInfoProps {
+ task: WaitTaskDef;
+}
+
+export const WaitTaskInfo = ({ task }: WaitTaskInfoProps) => {
+ const duration = task?.inputParameters?.duration;
+ const until = task?.inputParameters?.until;
+
+ if (!duration && !until) {
+ return null;
+ }
+
+ // Determine label and display value
+ const isUntil = !!until;
+ const label = isUntil ? "Until" : "Duration";
+
+ const durationDisplay = duration ? `${duration}` : until ? `${until}` : "";
+ const durationDisplayLineHeight =
+ durationDisplay.length > 30 ? "14px" : "auto";
+
+ return (
+
+ {/* Execution */}
+
+
+
+
+
+
+
+ {name}
+
+
+ {taskReferenceName}
+
+
+ {!status && type === TaskType.FORK_JOIN ? (
+
+ Add fork
+
+ ) : null}
+ {type === TaskType.WAIT &&
+ ((task as WaitTaskDef)?.inputParameters?.duration ||
+ (task as WaitTaskDef)?.inputParameters?.until) ? (
+
+ {getTaskCardContent(type, nodeData)}
+
+ {displayDescription && task.description != null && (
+
+ {description}
+
+
+ {handle ?
+ );
+});
diff --git a/ui-next/src/components/flow/components/shapes/TaskShape/TaskShape.tsx b/ui-next/src/components/flow/components/shapes/TaskShape/TaskShape.tsx
new file mode 100644
index 0000000000..5764cb3579
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TaskShape/TaskShape.tsx
@@ -0,0 +1,57 @@
+import { FunctionComponent, ReactNode } from "react";
+import { NodeTaskData } from "components/flow/nodes/mapper";
+import { Shape, ShapeComponentForTypeParams } from "./Shape";
+import { useDraggableNode } from "components/flow/dragDrop";
+
+interface TaskShapeProps {
+ onToggleTaskMenu: (event: any) => void;
+ nodeData: NodeTaskData & { selected?: boolean };
+ isInconsistent: boolean;
+ width?: number;
+ height?: number;
+ portsVisible?: boolean;
+ children?: ReactNode;
+ nodeId: string;
+ displayDescription?: boolean;
+}
+
+export const TaskShape: FunctionComponent
+
+ );
+};
+
+export default TaskSummary;
diff --git a/ui-next/src/components/flow/components/shapes/TerminalTask.jsx b/ui-next/src/components/flow/components/shapes/TerminalTask.jsx
new file mode 100644
index 0000000000..1cf83a5072
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/TerminalTask.jsx
@@ -0,0 +1,50 @@
+import {
+ BOTTOM_PORT_MARGIN,
+ taskToSize,
+} from "components/flow/nodes/mapper/layout";
+import { getFlowTheme } from "components/flow/theme";
+import { useContext } from "react";
+import { ColorModeContext } from "theme/material/ColorModeContext";
+
+const TerminalTask = ({ nodeData, portsVisible }) => {
+ const { mode } = useContext(ColorModeContext);
+ const theme = getFlowTheme(mode);
+
+ const { task } = nodeData;
+ const terminalClick = (event) => {
+ event.stopPropagation();
+ };
+
+ const { width, height } = taskToSize(task);
+ return (
+
+ {/* Execution */}
+
+
+
+
+
+
+
+ {nodeData.task.name}
+
+
+ {nodeData.task.taskReferenceName}
+
+
+
+
+ {Object.entries(nodeData?.summary?.taskCountByStatus)
+ .sort(([key1], [key2]) => taskStatusCompareFn(key1, key2))
+ .map(([key, value]) => (
+
+
+
+ ))}
+
+
+ );
+};
+
+export default TerminalTask;
diff --git a/ui-next/src/components/flow/components/shapes/styles.ts b/ui-next/src/components/flow/components/shapes/styles.ts
new file mode 100644
index 0000000000..7aa1ddb66f
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/styles.ts
@@ -0,0 +1,91 @@
+import theme from "components/flow/theme";
+import { TaskStatus, TaskType } from "types";
+
+export const getCardVariant = (
+ type: TaskType,
+ status?: TaskStatus,
+ selected?: boolean,
+) => {
+ const outlineColor = selected
+ ? theme.taskCard.selected.outlineColor
+ : theme.taskStatusOutline[status ?? TaskStatus.NULL];
+
+ const isOperator = [
+ TaskType.FORK_JOIN_DYNAMIC,
+ TaskType.JOIN,
+ TaskType.FORK_JOIN,
+ TaskType.FORK_JOIN_DYNAMIC,
+ TaskType.TERMINATE,
+ TaskType.SUB_WORKFLOW,
+ TaskType.DYNAMIC,
+ TaskType.SET_VARIABLE,
+ TaskType.START_WORKFLOW,
+ ].includes(type);
+
+ let cardStyles = {};
+
+ const operatorStyles = {
+ backgroundColor: theme.taskCard.operators.background,
+ border: outlineColor
+ ? `3px solid ${outlineColor}`
+ : `3px solid transparent`,
+ color: theme.taskCard.operators.text,
+ borderRadius: "10px",
+ };
+
+ const tasksStyles = {
+ backgroundColor: theme.taskCard.systemTasks.background,
+ color: theme.taskCard.systemTasks.color,
+ border: outlineColor
+ ? `3px solid ${outlineColor}`
+ : `3px solid transparent`,
+ borderRadius: "10px",
+ };
+
+ cardStyles = isOperator ? operatorStyles : tasksStyles;
+
+ const errorStripesColor = () => {
+ if (isOperator) {
+ if (status === TaskStatus.CANCELED) {
+ return "rgba(251, 164, 4, .25)";
+ }
+ return "rgba(90, 0, 0, .25)";
+ } else {
+ if (status === TaskStatus.CANCELED) {
+ return "rgba(251, 164, 4, .15)";
+ }
+ return "rgba(220, 110, 110, .15)";
+ }
+ };
+
+ switch (status) {
+ case TaskStatus.FAILED:
+ case TaskStatus.SKIPPED:
+ case TaskStatus.CANCELED:
+ case TaskStatus.TIMED_OUT:
+ cardStyles = {
+ ...cardStyles,
+ backgroundImage: `linear-gradient( 135deg, rgba(0,0,0,0) 25%, ${errorStripesColor()} 25%, ${errorStripesColor()} 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, ${errorStripesColor()} 75%, ${errorStripesColor()} 100% )`,
+ // These are not magic numbers!, see: https://css-tricks.com/no-jank-css-stripes/
+ backgroundSize: "56.57px 56.57px",
+ };
+ break;
+
+ default:
+ break;
+ }
+
+ const boxShadows = [TaskType.SWITCH, TaskType.DECISION].includes(type)
+ ? []
+ : ["0 2px 20px rgba(0,0,0,.4)"];
+ if (selected) {
+ boxShadows.push(theme.taskCard.selected.boxShadow);
+ }
+
+ cardStyles = {
+ ...cardStyles,
+ boxShadow: boxShadows.join(", "),
+ };
+
+ return cardStyles;
+};
diff --git a/ui-next/src/components/flow/components/shapes/testDiagrams.js b/ui-next/src/components/flow/components/shapes/testDiagrams.js
new file mode 100644
index 0000000000..1148f89cc3
--- /dev/null
+++ b/ui-next/src/components/flow/components/shapes/testDiagrams.js
@@ -0,0 +1,708 @@
+export const simpleDiagram = {
+ updateTime: 1646331692036,
+ name: "image_convert_resize_jim",
+ description: "Image Processing Workflow",
+ version: 1,
+ tasks: [
+ {
+ name: "image_convert_resize_jim",
+ taskReferenceName: "image_convert_resize_ref",
+ inputParameters: {
+ fileLocation: "${workflow.input.fileLocation}",
+ outputFormat: "${workflow.input.recipeParameters.outputFormat}",
+ outputWidth: "${workflow.input.recipeParameters.outputSize.width}",
+ outputHeight: "${workflow.input.recipeParameters.outputSize.height}",
+ },
+ type: "SIMPLE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "upload_toS3_jim",
+ taskReferenceName: "upload_toS3_ref",
+ inputParameters: {
+ fileLocation: "${image_convert_resize_ref.output.fileLocation}",
+ },
+ type: "SIMPLE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ inputParameters: [],
+ outputParameters: {
+ fileLocation: "${upload_toS3_ref.output.fileLocation}",
+ },
+ schemaVersion: 2,
+ restartable: true,
+ workflowStatusListenerEnabled: true,
+ ownerEmail: "devrel@orkes.io",
+ timeoutPolicy: "ALERT_ONLY",
+ timeoutSeconds: 0,
+ failureWorkflow: "",
+ variables: {},
+ inputTemplate: {},
+};
+
+export const populationMinMax = {
+ updateTime: 1645990260050,
+ name: "PopulationMinMax",
+ description: "Min Max Population",
+ version: 1,
+ tasks: [
+ {
+ name: "get_population_data",
+ taskReferenceName: "get_population_data_ref",
+ inputParameters: {
+ http_request: {
+ uri: "https://datausa.io/api/data?drilldowns=State&measures=Population&year=latest",
+ method: "GET",
+ },
+ },
+ type: "HTTP",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "fork_join",
+ taskReferenceName: "fork_ref",
+ inputParameters: {},
+ type: "FORK_JOIN",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [
+ [
+ {
+ name: "process_population_max",
+ taskReferenceName: "process_population_max_ref",
+ inputParameters: {
+ body: "${get_population_data_ref.output.response.body}",
+ queryExpression: "[.body.data[]] | max_by(.Population)",
+ },
+ type: "JSON_JQ_TRANSFORM",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ [
+ {
+ name: "process_population_min",
+ taskReferenceName: "process_population_min_ref",
+ inputParameters: {
+ body: "${get_population_data_ref.output.response.body}",
+ queryExpression: "[.body.data[]] | min_by(.Population)",
+ },
+ type: "JSON_JQ_TRANSFORM",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ ],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "join",
+ taskReferenceName: "join_ref",
+ inputParameters: {},
+ type: "JOIN",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: ["process_population_max_ref", "process_population_min_ref"],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ inputParameters: [],
+ outputParameters: {
+ maxPopulation: "${process_population_max_ref.output.result}",
+ minPopulation: "${process_population_min_ref.output.result}",
+ },
+ schemaVersion: 2,
+ restartable: true,
+ workflowStatusListenerEnabled: false,
+ ownerEmail: "developers@orkes.io",
+ timeoutPolicy: "ALERT_ONLY",
+ timeoutSeconds: 0,
+ failureWorkflow: "",
+ variables: {},
+ inputTemplate: {},
+};
+
+export const decisionSample = {
+ updateTime: 1636597950018,
+ name: "exclusive_join",
+ description: "Exclusive Join Example",
+ version: 1,
+ tasks: [
+ {
+ type: "TERMINAL",
+ name: "start",
+ taskReferenceName: "__start",
+ },
+ {
+ name: "api_decision",
+ taskReferenceName: "api_decision_ref",
+ inputParameters: {
+ case_value_param: "${workflow.input.type}",
+ },
+ type: "DECISION",
+ caseValueParam: "case_value_param",
+ decisionCases: {
+ POST: [
+ {
+ name: "get_posts",
+ taskReferenceName: "get_posts_ref",
+ inputParameters: {
+ http_request: {
+ uri: "https://jsonplaceholder.typicode.com/posts/1",
+ method: "GET",
+ },
+ },
+ type: "HTTP",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ COMMENT: [
+ {
+ name: "get_post_comments",
+ taskReferenceName: "get_post_comments_ref",
+ inputParameters: {
+ http_request: {
+ uri: "https://jsonplaceholder.typicode.com/comments?postId=1",
+ method: "GET",
+ },
+ },
+ type: "HTTP",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ USER: [
+ {
+ name: "get_user_posts",
+ taskReferenceName: "get_user_posts_ref",
+ inputParameters: {
+ http_request: {
+ uri: "https://jsonplaceholder.typicode.com/posts?userId=1",
+ method: "GET",
+ },
+ },
+ type: "HTTP",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ },
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "notification_join",
+ taskReferenceName: "notification_join_ref",
+ inputParameters: {},
+ type: "EXCLUSIVE_JOIN",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: ["get_posts_ref", "get_post_comments_ref"],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ type: "TERMINAL",
+ name: "final",
+ taskReferenceName: "__final",
+ },
+ ],
+ inputParameters: [],
+ outputParameters: {},
+ schemaVersion: 2,
+ restartable: true,
+ workflowStatusListenerEnabled: true,
+ ownerEmail: "encode_admin@test.com",
+ timeoutPolicy: "ALERT_ONLY",
+ timeoutSeconds: 0,
+ failureWorkflow: "",
+ variables: {},
+ inputTemplate: {},
+};
+
+export const complexDiagram = {
+ createTime: 1639691367677,
+ updateTime: 1641859692443,
+ name: "port_in_wf",
+ description: "Port In Workflow",
+ version: 1,
+ tasks: [
+ {
+ type: "TERMINAL",
+ name: "start",
+ taskReferenceName: "__start",
+ },
+ {
+ name: "Submit To ITG with Retry",
+ taskReferenceName: "submit_to_itg_with_retry",
+ inputParameters: {
+ value: "${workflow.input.iterations}",
+ terminate: "${workflow.variables.terminate_loop}",
+ },
+ type: "DO_WHILE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopCondition:
+ "if ( ($.submit_to_itg_with_retry['iteration'] < $.value) && !$.terminate) { true; } else { false; }",
+ loopOver: [
+ {
+ name: "Submit to ITG",
+ taskReferenceName: "submit_to_itg",
+ inputParameters: {
+ http_request: {
+ uri: "https://jsonplaceholder.typicode.com/todos/${$.workflow.input.iterations}",
+ method: "GET",
+ },
+ },
+ type: "HTTP",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: true,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "Check Status",
+ taskReferenceName: "check_status",
+ inputParameters: {
+ prev_task_result: "${submit_to_itg.output}",
+ switchCaseValue: "${submit_to_itg.status}",
+ },
+ type: "DECISION",
+ caseValueParam: "switchCaseValue",
+ decisionCases: {
+ COMPLETED: [
+ {
+ name: "Complete Request Loop",
+ taskReferenceName: "complete_loop_success",
+ inputParameters: {
+ terminate_loop: true,
+ success: true,
+ },
+ type: "SET_VARIABLE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ COMPLETED_WITH_ERRORS: [
+ {
+ name: "Retry HTTP Request",
+ taskReferenceName: "retry_http_request",
+ inputParameters: {
+ terminate_loop: false,
+ success: false,
+ },
+ type: "SET_VARIABLE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "Update Records",
+ taskReferenceName: "update_records_on_retry",
+ inputParameters: {
+ update_records_on_retry: 1,
+ },
+ type: "SET_VARIABLE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ },
+ defaultCase: [
+ {
+ name: "Permanent Failure",
+ taskReferenceName: "terminate_loop",
+ inputParameters: {
+ terminate_loop: true,
+ success: false,
+ },
+ type: "SET_VARIABLE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "Update Records Terminate",
+ taskReferenceName: "update_records_on_failure",
+ inputParameters: {
+ update_records_on_retry: 1,
+ },
+ type: "SET_VARIABLE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "Terminate Workflow",
+ taskReferenceName: "terminate_on_perm_failure",
+ inputParameters: {
+ terminationStatus: "FAILED",
+ workflowOutput:
+ "Failing workflow as retries exhausted and failures are marked as permenant",
+ },
+ type: "TERMINATE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ },
+ {
+ name: "Check If Success",
+ taskReferenceName: "check_success",
+ inputParameters: {
+ switchCaseValue: "${workflow.variables.success}",
+ },
+ type: "DECISION",
+ caseValueParam: "switchCaseValue",
+ decisionCases: {
+ false: [
+ {
+ name: "Update Records on Failure",
+ taskReferenceName: "update_records_on_failure",
+ inputParameters: {
+ update_records_on_retry: 2,
+ },
+ type: "SET_VARIABLE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "Terminate Workflow",
+ taskReferenceName: "terminate_on_perm_failure2",
+ inputParameters: {
+ terminationStatus: "FAILED",
+ workflowOutput:
+ "Failing workflow as retries exhausted and failures are marked as permenant",
+ },
+ type: "TERMINATE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ },
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "Wait for the async message response",
+ taskReferenceName: "wait_for_response",
+ inputParameters: {},
+ type: "WAIT",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "Check Response",
+ taskReferenceName: "check_response_succeeded",
+ inputParameters: {
+ switchCaseValue: "${wait_for_response.output.success}",
+ },
+ type: "DECISION",
+ caseValueParam: "switchCaseValue",
+ decisionCases: {
+ false: [
+ {
+ name: "Update Records on ITGH Failure",
+ taskReferenceName: "update_records_on_itg_failure",
+ inputParameters: {
+ response: "${wait_for_response.output}",
+ },
+ type: "SET_VARIABLE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "Terminate Workflow",
+ taskReferenceName: "terminate_on_response_failure",
+ inputParameters: {
+ terminationStatus: "FAILED",
+ workflowOutput:
+ "Failing workflow as retries exhausted and failures are marked as permenant",
+ },
+ type: "TERMINATE",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ ],
+ },
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ type: "TERMINAL",
+ name: "final",
+ taskReferenceName: "__final",
+ },
+ ],
+ inputParameters: [],
+ outputParameters: {},
+ schemaVersion: 2,
+ restartable: true,
+ workflowStatusListenerEnabled: false,
+ ownerEmail: "example@email.com",
+ timeoutPolicy: "ALERT_ONLY",
+ timeoutSeconds: 0,
+ failureWorkflow: "",
+ variables: {
+ success: false,
+ },
+ inputTemplate: {},
+};
+
+export const allTaskTypes = {
+ updateTime: 1646331692036,
+ name: "all_task_types",
+ description: "All Task Types",
+ version: 1,
+ tasks: [
+ {
+ name: "JSON JQ Transform Example",
+ taskReferenceName: "json_jq_transform_example_ref",
+ inputParameters: {
+ body: "${get_population_data_ref.output.response.body}",
+ queryExpression: "[.body.data[]] | max_by(.Population)",
+ },
+ type: "JSON_JQ_TRANSFORM",
+ decisionCases: {},
+ defaultCase: [],
+ forkTasks: [],
+ startDelay: 0,
+ joinOn: [],
+ optional: false,
+ defaultExclusiveJoinTask: [],
+ asyncComplete: false,
+ loopOver: [],
+ },
+ {
+ name: "inline_task_example",
+ taskReferenceName: "inline_task_example",
+ type: "INLINE",
+ inputParameters: {
+ value: "${workflow.input.value}",
+ evaluatorType: "graaljs",
+ expression:
+ 'function e() { if ($.value == 1){return {"result": true}} else { return {"result": false}}} e();',
+ },
+ },
+ {
+ name: "Kafka Task Example",
+ taskReferenceName: "call_kafka",
+ inputParameters: {
+ kafka_request: {
+ topic: "userTopic",
+ value: "Message to publish",
+ bootStrapServers: "localhost:9092",
+ headers: {
+ "x-Auth": "Auth-key",
+ },
+ key: {
+ Key_1: "value 1",
+ },
+ keySerializer:
+ "org.apache.kafka.common.serialization.IntegerSerializer",
+ },
+ },
+ type: "KAFKA_PUBLISH",
+ },
+ ],
+ inputParameters: [],
+ outputParameters: {
+ fileLocation: "${upload_toS3_ref.output.fileLocation}",
+ },
+ schemaVersion: 2,
+ restartable: true,
+ workflowStatusListenerEnabled: true,
+ ownerEmail: "devrel@orkes.io",
+ timeoutPolicy: "ALERT_ONLY",
+ timeoutSeconds: 0,
+ failureWorkflow: "",
+ variables: {},
+ inputTemplate: {},
+};
diff --git a/ui-next/src/components/flow/dragDrop/DraggableOverlay.tsx b/ui-next/src/components/flow/dragDrop/DraggableOverlay.tsx
new file mode 100644
index 0000000000..875ba2eaaf
--- /dev/null
+++ b/ui-next/src/components/flow/dragDrop/DraggableOverlay.tsx
@@ -0,0 +1,73 @@
+import { DragOverlay, useDndContext } from "@dnd-kit/core";
+import { useSelector } from "@xstate/react";
+import { PanAndZoomMachineContext } from "components/flow/components/graphs/PanAndZoomWrapper/state";
+import { FlowContext, FlowEvents } from "components/flow/state";
+import { FunctionComponent, useMemo } from "react";
+import { ActorRef, State } from "xstate";
+import {
+ Shape,
+ ShapeComponentForTypeParams,
+} from "../components/shapes/TaskShape/Shape";
+
+export interface DragOverlayProps {
+ flowActor: ActorRef
+ {task.name === "start" ? "Start" : "End"}
+
+