bytechefhq · kresimir-coko · Aug 20, 2025 · Aug 19, 2025 · Aug 19, 2025 · Aug 20, 2025
diff --git a/client/src/pages/platform/cluster-element-editor/hooks/useClusterElementsLayout.ts b/client/src/pages/platform/cluster-element-editor/hooks/useClusterElementsLayout.ts
@@ -110,6 +110,7 @@ const useClusterElementsLayout = () => {
             clusterRootId: rootClusterElementNodeData.workflowNodeName,
             currentNodePositions: nodePositions,
             nestedClusterRootsDefinitions: nestedClusterRootsDefinitions || {},
+            operationName: rootClusterElementNodeData.operationName,
         });
 
         nodes.push(...clusterElementNodes);

diff --git a/client/src/pages/platform/cluster-element-editor/utils/clusterElementsUtils.ts b/client/src/pages/platform/cluster-element-editor/utils/clusterElementsUtils.ts
@@ -1,19 +1,49 @@
 import {ROOT_CLUSTER_HANDLE_STEP, ROOT_CLUSTER_WIDTH} from '@/shared/constants';
-import {ComponentDefinition} from '@/shared/middleware/platform/configuration';
+import {ComponentDefinition, WorkflowTask} from '@/shared/middleware/platform/configuration';
 import {ClusterElementItemType, ClusterElementsType, WorkflowNodeType} from '@/shared/types';
 
-export function initializeClusterElementsObject(
-    clusterElementsData: ClusterElementsType,
-    rootClusterElementDefinition: ComponentDefinition
-) {
+interface InitializeClusterElementsObjectProps {
+    clusterElementsData: ClusterElementsType;
+    mainClusterRootTask: WorkflowTask;
+    rootClusterElementDefinition: ComponentDefinition;
+}
+
+export function initializeClusterElementsObject({
+    clusterElementsData,
+    mainClusterRootTask,
+    rootClusterElementDefinition,
+}: InitializeClusterElementsObjectProps) {
     const clusterElements: ClusterElementsType = {};
 
     if (!rootClusterElementDefinition.clusterElementTypes) {
         return clusterElements;
     }
 
+    const mainClusterRootType = mainClusterRootTask.type?.split('/')[2];
+
+    const filteredClusterElementTypes = (() => {
+        if (
+            rootClusterElementDefinition.actionClusterElementTypes &&
+            Object.keys(rootClusterElementDefinition.actionClusterElementTypes).length > 0 &&
+            mainClusterRootType
+        ) {
+            return rootClusterElementDefinition.actionClusterElementTypes[mainClusterRootType] || [];
+        } else {
+            return rootClusterElementDefinition.clusterElementTypes.map((type) => type.name);
+        }
+    })();
+
     rootClusterElementDefinition.clusterElementTypes.forEach((elementType) => {
+        const matchingType = filteredClusterElementTypes.some((type) => {
+            return type === elementType.name;
+        });
+
+        if (!matchingType) {
+            return;
+        }
+
         const clusterElementType = convertNameToCamelCase(elementType.name || '');
+
         const elementData = clusterElementsData?.[clusterElementType];
 
         if (elementType.multipleElements) {
@@ -135,6 +165,42 @@ export function extractClusterElementComponentOperations(
     }, existingClusterElementsOperations);
 }
 
+interface GetClusterElementTypesCountProps {
+    clusterRootComponentDefinition: ComponentDefinition;
+    operationName?: string;
+}
+
+export function getClusterElementTypesCount({
+    clusterRootComponentDefinition,
+    operationName,
+}: GetClusterElementTypesCountProps): number {
+    if (!clusterRootComponentDefinition.clusterElementTypes) {
+        return 0;
+    }
+
+    if (!operationName) {
+        return clusterRootComponentDefinition.clusterElementTypes.length;
+    }
+
+    const actionTypes = clusterRootComponentDefinition.actionClusterElementTypes;
+
+    if (!actionTypes || Object.keys(actionTypes).length === 0) {
+        return clusterRootComponentDefinition.clusterElementTypes.length;
+    }
+
+    const operationElementTypes = actionTypes[operationName];
+
+    if (!operationElementTypes || operationElementTypes.length === 0) {
+        return clusterRootComponentDefinition.clusterElementTypes.length;
+    }
+
+    const filteredElementTypes = clusterRootComponentDefinition.clusterElementTypes.filter((elementType) =>
+        operationElementTypes.includes(elementType.name || '')
+    );
+
+    return filteredElementTypes.length;
+}
+
 export function calculateNodeWidth(handleCount: number): number {
     const baseWidth = ROOT_CLUSTER_WIDTH;
     const handleStep = ROOT_CLUSTER_HANDLE_STEP;

diff --git a/client/src/pages/platform/cluster-element-editor/utils/createClusterElementsNodes.ts b/client/src/pages/platform/cluster-element-editor/utils/createClusterElementsNodes.ts
@@ -3,14 +3,15 @@ import {ClusterElementsType} from '@/shared/types';
 import {Node} from '@xyflow/react';
 
 import {createMultipleElementsNode, createPlaceholderNode, createSingleElementsNode} from './clusterElementsNodesUtils';
-import {convertNameToCamelCase, isPlainObject} from './clusterElementsUtils';
+import {convertNameToCamelCase, getClusterElementTypesCount, isPlainObject} from './clusterElementsUtils';
 
 interface CreateClusterElementNodesProps {
     clusterElements: ClusterElementsType;
     clusterRootComponentDefinition: ComponentDefinition;
     clusterRootId: string;
     currentNodePositions: Record<string, {x: number; y: number}>;
     nestedClusterRootsDefinitions: Record<string, ComponentDefinition>;
+    operationName?: string;
 }
 
 export default function createClusterElementNodes({
@@ -19,15 +20,44 @@ export default function createClusterElementNodes({
     clusterRootId,
     currentNodePositions = {},
     nestedClusterRootsDefinitions,
+    operationName = '',
 }: CreateClusterElementNodesProps) {
-    if (!clusterRootComponentDefinition?.clusterElementTypes || !clusterElements) {
+    if (!clusterRootComponentDefinition || !clusterRootComponentDefinition.clusterElementTypes || !clusterElements) {
         return [];
     }
 
     const createdNodes: Node[] = [];
-    const totalClusterElementTypeCount = clusterRootComponentDefinition.clusterElementTypes.length;
 
-    clusterRootComponentDefinition.clusterElementTypes.forEach((clusterElementType, clusterElementTypeIndex) => {
+    const totalClusterElementTypeCount = getClusterElementTypesCount({
+        clusterRootComponentDefinition,
+        operationName,
+    });
+
+    if (totalClusterElementTypeCount === 0) {
+        return [];
+    }
+
+    const elementTypesToUse = clusterRootComponentDefinition.clusterElementTypes!.filter((elementType) => {
+        if (!operationName) {
+            return true;
+        }
+
+        const actionTypes = clusterRootComponentDefinition.actionClusterElementTypes;
+
+        if (!actionTypes || Object.keys(actionTypes).length === 0) {
+            return true;
+        }
+
+        const operationElementTypes = actionTypes[operationName];
+
+        if (!operationElementTypes || operationElementTypes.length === 0) {
+            return true;
+        }
+
+        return operationElementTypes.includes(elementType.name || '');
+    });
+
+    elementTypesToUse.forEach((clusterElementType, clusterElementTypeIndex) => {
         const clusterElementTypeName = convertNameToCamelCase(clusterElementType.name || '');
         const clusterElementTypeLabel = clusterElementType.label || '';
         const isMultipleClusterElementsNode = clusterElementType.multipleElements;

diff --git a/client/src/pages/platform/workflow-editor/WorkflowEditorLayout.tsx b/client/src/pages/platform/workflow-editor/WorkflowEditorLayout.tsx
@@ -13,9 +13,8 @@ import {useWorkflowEditor} from '@/pages/platform/workflow-editor/providers/work
 import useRightSidebarStore from '@/pages/platform/workflow-editor/stores/useRightSidebarStore';
 import useWorkflowEditorStore from '@/pages/platform/workflow-editor/stores/useWorkflowEditorStore';
 import {useCopilotStore} from '@/shared/components/copilot/stores/useCopilotStore';
-import {ROOT_CLUSTER_ELEMENT_NAMES} from '@/shared/constants';
 import {XIcon} from 'lucide-react';
-import {Suspense, lazy, useEffect} from 'react';
+import {Suspense, lazy, useEffect, useMemo} from 'react';
 import {twMerge} from 'tailwind-merge';
 import {useShallow} from 'zustand/shallow';
 
@@ -87,13 +86,16 @@ const WorkflowEditorLayout = ({includeComponents, runDisabled, showWorkflowInput
 
     const {invalidateWorkflowQueries, updateWorkflowMutation} = useWorkflowEditor();
 
-    const isRootClusterElement = ROOT_CLUSTER_ELEMENT_NAMES.includes(currentComponent?.componentName as string);
+    const isMainRootClusterElement = useMemo(
+        () => currentNode?.clusterRoot && !currentNode?.isNestedClusterRoot,
+        [currentNode?.clusterRoot, currentNode?.isNestedClusterRoot]
+    );
 
     useEffect(() => {
-        if (currentNode?.rootClusterElement) {
+        if (isMainRootClusterElement) {
             setRootClusterElementNodeData(currentNode);
         }
-    }, [currentNode, setRootClusterElementNodeData]);
+    }, [isMainRootClusterElement, setRootClusterElementNodeData, currentNode]);
 
     return (
         <ReactFlowProvider>
@@ -136,7 +138,7 @@ const WorkflowEditorLayout = ({includeComponents, runDisabled, showWorkflowInput
                 )}
             </div>
 
-            {currentComponent && !isRootClusterElement && (
+            {currentComponent && !isMainRootClusterElement && (
                 <Suspense fallback={<WorkflowNodeDetailsPanelSkeleton />}>
                     <WorkflowNodeDetailsPanel
                         invalidateWorkflowQueries={invalidateWorkflowQueries!}
@@ -211,7 +213,7 @@ const WorkflowEditorLayout = ({includeComponents, runDisabled, showWorkflowInput
 
             {workflow.id && <WorkflowTestChatPanel />}
 
-            {currentComponent && !isRootClusterElement && dataPillPanelOpen && (
+            {currentComponent && !isMainRootClusterElement && dataPillPanelOpen && (
                 <Suspense fallback={<DataPillPanelSkeleton />}>
                     <DataPillPanel
                         previousComponentDefinitions={previousComponentDefinitions}

diff --git a/client/src/pages/platform/workflow-editor/components/WorkflowNodeDetailsPanel.tsx b/client/src/pages/platform/workflow-editor/components/WorkflowNodeDetailsPanel.tsx
@@ -58,6 +58,7 @@ import {twMerge} from 'tailwind-merge';
 import {useShallow} from 'zustand/shallow';
 
 import {
+    convertNameToSnakeCase,
     extractClusterElementComponentOperations,
     getClusterElementsLabel,
 } from '../../cluster-element-editor/utils/clusterElementsUtils';
@@ -494,6 +495,21 @@ const WorkflowNodeDetailsPanel = ({
         );
     }, [clusterElementsCanvasOpen, currentWorkflowNode, isClusterElement]);
 
+    const filteredClusterElementOperations = useMemo(() => {
+        if (currentComponentDefinition?.clusterElement && currentNode?.clusterElementType) {
+            return currentComponentDefinition?.clusterElements?.filter(
+                (clusterElement) =>
+                    clusterElement.type === convertNameToSnakeCase(currentNode.clusterElementType as string)
+            );
+        }
+
+        return currentComponentDefinition?.clusterElements;
+    }, [
+        currentComponentDefinition?.clusterElement,
+        currentComponentDefinition?.clusterElements,
+        currentNode?.clusterElementType,
+    ]);
+
     const handleOperationSelectChange = useCallback(
         async (newOperationName: string) => {
             if (currentOperationName === newOperationName) {
@@ -900,7 +916,7 @@ const WorkflowNodeDetailsPanel = ({
                 (workflowNode) => workflowNode.workflowNodeName === currentNode?.workflowNodeName
             );
         } else if (clusterElementsCanvasOpen) {
-            if (currentNode?.rootClusterElement) {
+            if (currentNode?.clusterRoot && !currentNode.isNestedClusterRoot) {
                 currentWorkflowNode = workflowNodes.find(
                     (workflowNodeType) => workflowNodeType.workflowNodeName === currentNode?.workflowNodeName
                 );
@@ -950,8 +966,12 @@ const WorkflowNodeDetailsPanel = ({
             return;
         }
 
-        if (clusterElementsCanvasOpen && currentComponentDefinition?.clusterElement) {
-            if (!!currentComponentDefinition.clusterElements && !!matchingOperation) {
+        if (
+            clusterElementsCanvasOpen &&
+            currentComponentDefinition?.clusterElement &&
+            currentNode?.parentClusterRootId
+        ) {
+            if (matchingOperation) {
                 fetchClusterElementDefinition();
             } else {
                 setCurrentActionDefinition(undefined);
@@ -1049,7 +1069,7 @@ const WorkflowNodeDetailsPanel = ({
                                         (currentNode?.trigger
                                             ? currentComponentDefinition?.triggers
                                             : clusterElementsCanvasOpen && currentComponentDefinition?.clusterElement
-                                              ? currentComponentDefinition?.clusterElements
+                                              ? filteredClusterElementOperations
                                               : currentComponentDefinition?.actions)!
                                     }
                                     triggerSelect={currentNode?.trigger}

diff --git a/...t/src/pages/platform/workflow-editor/components/WorkflowNodesPopoverMenuOperationList.tsx b/...t/src/pages/platform/workflow-editor/components/WorkflowNodesPopoverMenuOperationList.tsx
@@ -1,4 +1,3 @@
-import {ROOT_CLUSTER_ELEMENT_NAMES} from '@/shared/constants';
 import {useAnalytics} from '@/shared/hooks/useAnalytics';
 import {
     ActionDefinition,
@@ -87,7 +86,8 @@ const WorkflowNodesPopoverMenuOperationList = ({
 
     const queryClient = useQueryClient();
 
-    const {actions, clusterElement, clusterElements, icon, name, title, triggers, version} = componentDefinition;
+    const {actions, clusterElement, clusterElements, clusterRoot, icon, name, title, triggers, version} =
+        componentDefinition;
 
     const clusterElementOperations = useMemo(() => {
         if (!clusterElementType) {
@@ -110,10 +110,8 @@ const WorkflowNodesPopoverMenuOperationList = ({
         (operation: ClickedOperationType, definition: ActionDefinition | TriggerDefinition) => {
             const {componentLabel, componentName, icon, operationName, version} = operation;
 
-            const isRootClusterElement = ROOT_CLUSTER_ELEMENT_NAMES.includes(componentName);
-
             return {
-                ...(isRootClusterElement
+                ...(clusterRoot
                     ? {
                           clusterElements: {},
                       }
@@ -138,7 +136,7 @@ const WorkflowNodesPopoverMenuOperationList = ({
                 workflowNodeName: trigger ? 'trigger_1' : getFormattedName(componentName),
             };
         },
-        [trigger]
+        [clusterRoot, trigger]
     );
 
     const saveNodeToWorkflow = useCallback(
@@ -197,10 +195,11 @@ const WorkflowNodesPopoverMenuOperationList = ({
                 {}
             );
 
-            const clusterElements = initializeClusterElementsObject(
-                mainClusterRootTask?.clusterElements || {},
-                rootClusterElementDefinition
-            );
+            const clusterElements = initializeClusterElementsObject({
+                clusterElementsData: mainClusterRootTask?.clusterElements || {},
+                mainClusterRootTask,
+                rootClusterElementDefinition,
+            });
 
             const updatedClusterElements = processClusterElementsHierarchy({
                 clusterElementData,
@@ -236,7 +235,7 @@ const WorkflowNodesPopoverMenuOperationList = ({
                 metadata,
             } as typeof rootClusterElementNodeData);
 
-            if (currentNode?.rootClusterElement) {
+            if (currentNode?.clusterRoot && !currentNode.isNestedClusterRoot) {
                 setCurrentNode({
                     ...currentNode,
                     clusterElements: updatedClusterElements.nestedClusterElements,

diff --git a/client/src/pages/platform/workflow-editor/components/node-details-tabs/DescriptionTab.tsx b/client/src/pages/platform/workflow-editor/components/node-details-tabs/DescriptionTab.tsx
@@ -63,7 +63,7 @@ const DescriptionTab = ({invalidateWorkflowQueries, nodeDefinition, updateWorkfl
             return;
         }
 
-        if (currentNode.clusterElementType || currentNode.rootClusterElement) {
+        if (currentNode.clusterElementType || currentNode.clusterRoot) {
             saveClusterElementFieldChange({
                 currentComponentDefinition: nodeDefinition as ComponentDefinition,
                 fieldUpdate: {
@@ -130,7 +130,7 @@ const DescriptionTab = ({invalidateWorkflowQueries, nodeDefinition, updateWorkfl
             return;
         }
 
-        if (currentNode.clusterElementType || currentNode.rootClusterElement) {
+        if (currentNode.clusterElementType || currentNode.clusterRoot) {
             saveClusterElementFieldChange({
                 currentComponentDefinition: nodeDefinition as ComponentDefinition,
                 fieldUpdate: {

diff --git a/client/src/pages/platform/workflow-editor/hooks/useNodeClick.ts b/client/src/pages/platform/workflow-editor/hooks/useNodeClick.ts
@@ -44,7 +44,7 @@ export default function useNodeClick(data: NodeDataType, id: NodeProps['id'], ac
         setActiveTab(activeTab ?? 'description');
         setCurrentNode({...data, description: ''});
 
-        if (data.rootClusterElement && !clusterElementsCanvasOpen) {
+        if (!!data.clusterRoot && !clusterElementsCanvasOpen) {
             setClusterElementsCanvasOpen(true);
 
             setCurrentComponent(undefined);