fix(Designer): Fixed loop causing rerender in monitoring view (#6686)

* Fixed node rerender bug

* Added E2E test coverage for loop issue

* Removed s

Author: rllyy97

e2e/designer/real-api/monitoring/NestedLoops/nestedLoops.spec.ts

@@ -1,4 +1,11 @@
 import { expect, test } from '../../../fixtures/real-api';
+
+declare global {
+  interface Window {
+    __REDUX_ACTION_LOG__?: string[];
+  }
+}
+
 test.describe(
   'Nested loops',
   {
@@ -16,7 +23,7 @@ test.describe(
       // Load run history
       await page.getByRole('menuitem', { name: 'Run History' }).click();
       await page.waitForTimeout(3000);
-      await page.getByRole('gridcell', { name: '/18/2025, 3:25:03 PM' }).click();
+      await page.getByRole('gridcell', { name: '/18/2025' }).click();
 
       // Check for outermost foreach
       await expect(page.getByTestId('msla-pill-foreach_status')).toBeVisible();
@@ -47,6 +54,22 @@ test.describe(
 
       // Check inner loop to be interactive
       await page.getByTestId('msla-pager-v2-foreach_2').getByLabel('Next').click();
+
+      // Clear action log
+      await page.evaluate(() => (window.__REDUX_ACTION_LOG__ = []));
+      await page.waitForTimeout(1000);
+
+      // Collapse / expand inner loop
+      await page.getByLabel('Foreach-2 operation').click({ button: 'right' });
+      await page.getByText('Collapse nested').click({ force: true });
+      await page.getByLabel('Foreach-2 operation').click({ button: 'right' });
+      await page.getByText('Expand nested').click({ force: true });
+      await page.waitForTimeout(2000);
+
+      // Confirm the actions only triggered once
+      const actionLog = (await page.evaluate(() => window.__REDUX_ACTION_LOG__)) ?? [];
+      const numActions = actionLog?.filter((action) => action === 'workflow/setRepetitionRunData').length;
+      expect(numActions).toEqual(1);
     });
   }
 );

libs/designer/src/lib/core/store.ts

@@ -16,6 +16,12 @@ import { configureStore } from '@reduxjs/toolkit';
 import type {} from 'redux-thunk';
 import { storeStateHistoryMiddleware } from './utils/middleware';
 
+declare global {
+  interface Window {
+    __REDUX_ACTION_LOG__?: string[];
+  }
+}
+
 export const store = configureStore({
   reducer: {
     workflow: workflowReducer,
@@ -43,6 +49,18 @@ if (process.env.NODE_ENV === 'development') {
   (window as any).DesignerStore = store;
 }
 
+// Log actions for testing purposes
+if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
+  window.__REDUX_ACTION_LOG__ = [];
+  const originalDispatch = store.dispatch;
+  store.dispatch = (action: any) => {
+    window.__REDUX_ACTION_LOG__?.push(action.type);
+    return originalDispatch(action);
+  };
+}
+
+export default store;
+
 // Infer the `AppStore` from the store itself
 export type AppStore = typeof store;
 // Infer the `RootState` and `AppDispatch` types from the store itself

libs/designer/src/lib/ui/CustomNodes/OperationCardNode.tsx

@@ -76,6 +76,7 @@ const DefaultNode = ({ targetPosition = Position.Top, sourcePosition = Position.
   const runData = useRunData(id);
   const parentRunId = useParentRunId(id);
   const parentRunData = useRunData(parentRunId ?? '');
+  const selfRunData = useRunData(id);
   const nodesMetaData = useNodesMetadata();
   const repetitionName = useMemo(
     () => getRepetitionName(parentRunIndex, id, nodesMetaData, operationsInfo),
@@ -120,9 +121,14 @@ const DefaultNode = ({ targetPosition = Position.Top, sourcePosition = Position.
 
   useEffect(() => {
     if (!isNullOrUndefined(repetitionRunData)) {
+      if (selfRunData?.correlation?.actionTrackingId === repetitionRunData?.properties?.correlation?.actionTrackingId) {
+        // if the correlation id is the same, we don't need to update the repetition run data
+        return;
+      }
+
       dispatch(setRepetitionRunData({ nodeId: id, runData: repetitionRunData.properties as LogicAppsV2.WorkflowRunAction }));
     }
-  }, [dispatch, repetitionRunData, id]);
+  }, [dispatch, repetitionRunData, id, selfRunData?.correlation?.actionTrackingId]);
 
   const { dependencies, loopSources } = useTokenDependencies(id);
 

libs/designer/src/lib/ui/CustomNodes/ScopeCardNode.tsx

@@ -65,6 +65,7 @@ const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = P
   const runData = useRunData(scopeId);
   const parentRunId = useParentRunId(scopeId);
   const parentRunData = useRunData(parentRunId ?? '');
+  const selfRunData = useRunData(scopeId);
   const nodesMetaData = useNodesMetadata();
   const repetitionName = useMemo(
     () => getRepetitionName(parentRunIndex, scopeId, nodesMetaData, operationsInfo),
@@ -102,9 +103,14 @@ const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = P
 
   useEffect(() => {
     if (!isNullOrUndefined(repetitionRunData)) {
+      if (selfRunData?.correlation?.actionTrackingId === repetitionRunData?.properties?.correlation?.actionTrackingId) {
+        // if the correlation id is the same, we don't need to update the repetition run data
+        return;
+      }
+
       dispatch(setRepetitionRunData({ nodeId: scopeId, runData: repetitionRunData.properties as LogicAppsV2.WorkflowRunAction }));
     }
-  }, [dispatch, repetitionRunData, scopeId]);
+  }, [dispatch, repetitionRunData, scopeId, selfRunData?.correlation?.actionTrackingId]);
 
   const { dependencies, loopSources } = useTokenDependencies(scopeId);
   const [{ isDragging }, drag, dragPreview] = useDrag(

playwright.config.ts

@@ -1,3 +1,5 @@
+process.env.NODE_ENV = 'development'; // Set before importing Playwright
+
 import { defineConfig, devices } from '@playwright/test';
 import 'dotenv/config';