1652/3130/3173/3230-updated switch button, dataPillPanel and node options query for cluster elements

client/src/pages/platform/workflow-editor/components/WorkflowNodesPopoverMenu.tsx

@@ -24,6 +24,7 @@ interface WorkflowNodesPopoverMenuProps extends PropsWithChildren {
     multipleClusterElementsNode?: boolean;
     nodeIndex?: number;
     sourceNodeId: string;
+    sourceNodeName?: string;
 }
 
 const WorkflowNodesPopoverMenu = ({
@@ -37,6 +38,7 @@ const WorkflowNodesPopoverMenu = ({
     multipleClusterElementsNode = false,
     nodeIndex,
     sourceNodeId,
+    sourceNodeName,
 }: WorkflowNodesPopoverMenuProps) => {
     const [actionPanelOpen, setActionPanelOpen] = useState(false);
     const [componentDefinitionToBeAdded, setComponentDefinitionToBeAdded] = useState<ComponentDefinition | null>(null);
@@ -186,6 +188,7 @@ const WorkflowNodesPopoverMenu = ({
                             multipleClusterElementsNode={multipleClusterElementsNode}
                             setPopoverOpen={setPopoverOpen}
                             sourceNodeId={sourceNodeId}
+                            sourceNodeName={sourceNodeName}
                             trigger={trigger}
                         />
                     )}

client/src/pages/platform/workflow-editor/components/WorkflowNodesPopoverMenuOperationList.tsx

@@ -43,6 +43,7 @@ interface WorkflowNodesPopoverMenuOperationListProps {
     multipleClusterElementsNode?: boolean;
     setPopoverOpen: (open: boolean) => void;
     sourceNodeId: string;
+    sourceNodeName?: string;
     trigger?: boolean;
 }
 
@@ -54,6 +55,7 @@ const WorkflowNodesPopoverMenuOperationList = ({
     multipleClusterElementsNode,
     setPopoverOpen,
     sourceNodeId,
+    sourceNodeName,
     trigger,
 }: WorkflowNodesPopoverMenuOperationListProps) => {
     const {setLatestComponentDefinition, workflow} = useWorkflowDataStore(
@@ -82,12 +84,15 @@ const WorkflowNodesPopoverMenuOperationList = ({
             setRootClusterElementNodeData: state.setRootClusterElementNodeData,
         }))
     );
-    const {currentNode, setCurrentNode} = useWorkflowNodeDetailsPanelStore(
-        useShallow((state) => ({
-            currentNode: state.currentNode,
-            setCurrentNode: state.setCurrentNode,
-        }))
-    );
+    const {currentNode, setCurrentNode, setWorkflowNodeDetailsPanelOpen, workflowNodeDetailsPanelOpen} =
+        useWorkflowNodeDetailsPanelStore(
+            useShallow((state) => ({
+                currentNode: state.currentNode,
+                setCurrentNode: state.setCurrentNode,
+                setWorkflowNodeDetailsPanelOpen: state.setWorkflowNodeDetailsPanelOpen,
+                workflowNodeDetailsPanelOpen: state.workflowNodeDetailsPanelOpen,
+            }))
+        );
 
     const {captureComponentUsed} = useAnalytics();
 
@@ -224,6 +229,17 @@ const WorkflowNodesPopoverMenuOperationList = ({
                 });
             }
 
+            if (workflowNodeDetailsPanelOpen && currentNode?.workflowNodeName === sourceNodeName) {
+                if (rootClusterElementNodeData) {
+                    setCurrentNode({
+                        ...rootClusterElementNodeData,
+                        clusterElements: updatedClusterElements.nestedClusterElements,
+                    });
+                }
+
+                setWorkflowNodeDetailsPanelOpen(false);
+            }
+
             saveWorkflowDefinition({
                 invalidateWorkflowQueries,
                 nodeData: updatedNodeData,
@@ -243,9 +259,12 @@ const WorkflowNodesPopoverMenuOperationList = ({
             rootClusterElementNodeData,
             setRootClusterElementNodeData,
             currentNode,
+            workflowNodeDetailsPanelOpen,
+            sourceNodeName,
             invalidateWorkflowQueries,
             updateWorkflowMutation,
             setCurrentNode,
+            setWorkflowNodeDetailsPanelOpen,
             queryClient,
         ]
     );

client/src/pages/platform/workflow-editor/components/properties/components/PropertyComboBox.tsx

@@ -334,7 +334,7 @@ const PropertyComboBox = ({
                 </div>
             )}
 
-            <Popover modal={true} onOpenChange={setOpen} open={open}>
+            <Popover modal onOpenChange={setOpen} open={open}>
                 <PopoverTrigger asChild onBlur={onBlur}>
                     <Button
                         aria-expanded={open}

client/src/pages/platform/workflow-editor/components/properties/components/PropertyMultiSelect.tsx

@@ -3,13 +3,18 @@ import RequiredMark from '@/components/RequiredMark';
 import {Label} from '@/components/ui/label';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
 import {useEnvironmentStore} from '@/pages/automation/stores/useEnvironmentStore';
-import {OptionsDataSource} from '@/shared/middleware/platform/configuration';
-import {useGetWorkflowNodeOptionsQuery} from '@/shared/queries/platform/workflowNodeOptions.queries';
+import {GetClusterElementNodeOptionsRequest, OptionsDataSource} from '@/shared/middleware/platform/configuration';
+import {
+    useGetClusterElementNodeOptionsQuery,
+    useGetWorkflowNodeOptionsQuery,
+} from '@/shared/queries/platform/workflowNodeOptions.queries';
 import {PropertyAllType} from '@/shared/types';
 import {CircleQuestionMarkIcon} from 'lucide-react';
 import {ReactNode, useMemo} from 'react';
 import {twMerge} from 'tailwind-merge';
+import {useShallow} from 'zustand/shallow';
 
+import useWorkflowEditorStore from '../../../stores/useWorkflowEditorStore';
 import useWorkflowNodeDetailsPanelStore from '../../../stores/useWorkflowNodeDetailsPanelStore';
 import getFormattedDependencyKey from '../../../utils/getFormattedDependencyKey';
 import InputTypeSwitchButton from './InputTypeSwitchButton';
@@ -49,6 +54,11 @@ const PropertyMultiSelect = ({
 }: PropertyMultiSelectProps) => {
     const currentEnvironmentId = useEnvironmentStore((state) => state.currentEnvironmentId);
     const currentNode = useWorkflowNodeDetailsPanelStore((state) => state.currentNode);
+    const {rootClusterElementNodeData} = useWorkflowEditorStore(
+        useShallow((state) => ({
+            rootClusterElementNodeData: state.rootClusterElementNodeData,
+        }))
+    );
 
     const {description, label, name, placeholder, required} = property;
     const workflowNodeName = currentNode?.name;
@@ -77,6 +87,34 @@ const PropertyMultiSelect = ({
         [currentEnvironmentId, lookupDependsOnPaths, lookupDependsOnValuesKey, path, workflowId, workflowNodeName]
     );
 
+    const clusterElementQueryOptions: {
+        loadDependencyValueKey: string;
+        request: GetClusterElementNodeOptionsRequest;
+    } = useMemo(
+        () => ({
+            loadDependencyValueKey: lookupDependsOnValuesKey,
+            request: {
+                clusterElementType: currentNode?.clusterElementType || '',
+                clusterElementWorkflowNodeName: currentNode?.workflowNodeName || '',
+                environmentId: currentEnvironmentId,
+                id: workflowId,
+                lookupDependsOnPaths,
+                propertyName: path!,
+                workflowNodeName: rootClusterElementNodeData?.workflowNodeName || '',
+            },
+        }),
+        [
+            lookupDependsOnValuesKey,
+            currentEnvironmentId,
+            currentNode?.clusterElementType,
+            currentNode?.workflowNodeName,
+            workflowId,
+            lookupDependsOnPaths,
+            path,
+            rootClusterElementNodeData?.workflowNodeName,
+        ]
+    );
+
     const queryEnabled = useMemo(
         () =>
             !!currentNode &&
@@ -90,19 +128,34 @@ const PropertyMultiSelect = ({
 
     const {data: optionsData, isPending: isOptionsDataPending} = useGetWorkflowNodeOptionsQuery(
         queryOptions,
-        Boolean(queryEnabled)
+        Boolean(queryEnabled && !currentNode?.clusterElementType)
     );
 
+    const {data: clusterElementOptionsData, isPending: isClusterElementOptionsDataPending} =
+        useGetClusterElementNodeOptionsQuery(
+            clusterElementQueryOptions,
+            Boolean(queryEnabled && currentNode?.clusterElementType)
+        );
+
     const mappedOptionsData: MultiSelectOptionType[] | undefined = useMemo(() => {
-        if (!optionsData) {
-            return undefined;
+        if (clusterElementOptionsData) {
+            return clusterElementOptionsData.map((option) => ({
+                ...option,
+                label: option.label || '',
+                value: option.value ?? option.label,
+            }));
+        }
+
+        if (optionsData) {
+            return optionsData.map((option) => ({
+                ...option,
+                label: option.label || '',
+                value: option.value ?? option.label,
+            }));
         }
-        return optionsData.map((option) => ({
-            ...option,
-            label: option.label || '',
-            value: option.value ?? option.label,
-        }));
-    }, [optionsData]);
+
+        return undefined;
+    }, [optionsData, clusterElementOptionsData]);
 
     const missingConnection = useMemo(
         () =>
@@ -223,7 +276,7 @@ const PropertyMultiSelect = ({
                     }
                 }}
                 options={mappedOptionsData ?? options ?? []}
-                optionsLoading={isOptionsDataPending && !!queryEnabled}
+                optionsLoading={(isOptionsDataPending || isClusterElementOptionsDataPending) && !!queryEnabled}
                 placeholder={memoizedPlaceholder}
                 placeholderClassName={placeholderClassName}
                 value={value}

client/src/pages/platform/workflow-editor/hooks/useWorkflowLayout.ts

@@ -40,12 +40,14 @@ export const useWorkflowLayout = (includeComponents?: string[]) => {
     );
     const {
         clusterElementsCanvasOpen,
+        rootClusterElementNodeData,
         setShowWorkflowCodeEditorSheet,
         setShowWorkflowInputsSheet,
         setShowWorkflowOutputsSheet,
     } = useWorkflowEditorStore(
         useShallow((state) => ({
             clusterElementsCanvasOpen: state.clusterElementsCanvasOpen,
+            rootClusterElementNodeData: state.rootClusterElementNodeData,
             setShowWorkflowCodeEditorSheet: state.setShowWorkflowCodeEditorSheet,
             setShowWorkflowInputsSheet: state.setShowWorkflowInputsSheet,
             setShowWorkflowOutputsSheet: state.setShowWorkflowOutputsSheet,
@@ -103,7 +105,9 @@ export const useWorkflowLayout = (includeComponents?: string[]) => {
         {
             environmentId: currentEnvironmentId,
             id: workflow.id!,
-            lastWorkflowNodeName: currentNode?.name,
+            lastWorkflowNodeName: currentNode?.clusterElementType
+                ? rootClusterElementNodeData?.workflowNodeName
+                : currentNode?.name,
         },
         dataPillPanelOpen && !!workflowNodes?.length && !!currentNode && !!currentNode?.name && !currentNode?.trigger
     );

client/src/pages/platform/workflow-editor/nodes/WorkflowNode.tsx

@@ -235,6 +235,7 @@ const WorkflowNode = ({data, id}: {data: NodeDataType; id: string}) => {
                             hideTaskDispatchers={!!data.clusterElementType}
                             hideTriggerComponents
                             sourceNodeId={data.clusterElementType && parentClusterRootId ? parentClusterRootId : id}
+                            sourceNodeName={data.workflowNodeName}
                         >
                             <Button
                                 className="bg-white p-2 shadow-md hover:text-blue-500 hover:shadow-sm"
@@ -301,6 +302,10 @@ const WorkflowNode = ({data, id}: {data: NodeDataType; id: string}) => {
                                     {data.operationName && (
                                         <pre className="text-sm text-black">{data.operationName}</pre>
                                     )}
+
+                                    {isNestedClusterRoot && (
+                                        <span className="text-xs text-gray-500">{data.workflowNodeName}</span>
+                                    )}
                                 </div>
                             )}
                         </div>
@@ -345,7 +350,7 @@ const WorkflowNode = ({data, id}: {data: NodeDataType; id: string}) => {
                         <pre className={twMerge('text-sm', isClusterElement && 'text-xs')}>{data.operationName}</pre>
                     )}
 
-                    {!isClusterElement && <span className="text-sm text-gray-500">{data.workflowNodeName}</span>}
+                    <span className="text-sm text-gray-500">{data.workflowNodeName}</span>
                 </div>
             )}