3230-update current node and close nodeDetailsPanel when currently selected cluster element is switched

Author: katarina-cala

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,
         ]
     );