({
+ nodeData: {
+ nodeId,
+ displayName: nodeId,
+ comment: undefined,
+ errorMessage: undefined,
+ iconUri: '',
+ isError: false,
+ isLoading: false,
+ onSelectTab: vi.fn(),
+ runData: undefined,
+ selectedTab: undefined,
+ subgraphType: undefined,
+ tabs: [],
+ },
+ headerItems: [],
+ headerLocation: PanelLocation.Right,
+ panelScope: PanelScope.CardLevel,
+ onClose: vi.fn(),
+ onTitleChange: vi.fn(),
+ commentChange: vi.fn(),
+ handleTitleUpdate: vi.fn(),
+});
+
+const CanvasCard = ({ nodeId, focusedNodeId }: { nodeId: string; focusedNodeId?: string }) => {
+ const ref = useRef
(null);
+ useEffect(() => {
+ if (focusedNodeId === nodeId) {
+ ref.current?.focus();
+ }
+ }, [focusedNodeId, nodeId]);
+
+ return (
+
+ );
+};
+
+interface FixtureProps {
+ enableNodeNavigation?: boolean;
+ selectedNodeId: string;
+ focusedNodeId?: string;
+ panelFirst: boolean;
+ suppressDefaultNodeSelectFunctionality?: boolean;
+}
+
+const Fixture = ({
+ selectedNodeId,
+ focusedNodeId,
+ panelFirst,
+ suppressDefaultNodeSelectFunctionality,
+ enableNodeNavigation = true,
+}: FixtureProps) => {
+ const panel = (
+
+ );
+ const canvas = (
+
+ {nodeIds.map((nodeId) => (
+
+ ))}
+
+ );
+ return (
+
+ {panelFirst ? panel : canvas}
+ {panelFirst ? canvas : panel}
+
+ );
+};
+
+describe.each([
+ { name: 'canvas before panel', panelFirst: false },
+ { name: 'panel before canvas', panelFirst: true },
+])('PanelHeader focus ordering: $name', ({ panelFirst }) => {
+ let focusOrder: string[];
+ const recordFocus = (event: FocusEvent) => {
+ if (event.target instanceof HTMLElement) {
+ focusOrder.push(event.target.id);
+ }
+ };
+
+ beforeEach(() => {
+ focusOrder = [];
+ document.addEventListener('focusin', recordFocus);
+ });
+
+ afterEach(() => {
+ document.removeEventListener('focusin', recordFocus);
+ cleanup();
+ });
+
+ it('keeps default Close autofocus on mount and ordinary selection changes without a canvas request', () => {
+ const { rerender } = render();
+ const close = screen.getByRole('button', { name: 'Close' });
+ expect(close).toHaveFocus();
+
+ screen.getByRole('button', { name: 'Canvas Http' }).focus();
+ rerender();
+ expect(screen.getByRole('button', { name: 'Close' })).toBe(close);
+ expect(close).toHaveFocus();
+ });
+
+ it('preserves passive panel focus ordering without the v2 opt-in', () => {
+ render();
+ expect(focusOrder).toEqual(
+ panelFirst ? ['msla-panel-header-close-nav', 'msla-node-Switch'] : ['msla-node-Switch', 'msla-panel-header-close-nav']
+ );
+ });
+
+ it('lets an explicit canvas passive effect win after default panel focus on initial mount', () => {
+ render();
+ expect(focusOrder).toEqual(['msla-panel-header-close-nav', 'msla-node-Switch']);
+ expect(screen.getByRole('button', { name: 'Canvas Switch' })).toHaveFocus();
+ });
+
+ it('keeps explicit canvas focus through repeated selections without remounting the header or cards', () => {
+ const { rerender } = render();
+ const close = screen.getByRole('button', { name: 'Close' });
+ const originalHttpCard = screen.getByRole('button', { name: 'Canvas Http' });
+ expect(originalHttpCard).toHaveFocus();
+
+ for (const nodeId of ['Switch', 'Condition', 'Http']) {
+ focusOrder.length = 0;
+ rerender();
+ expect(focusOrder).toEqual(['msla-panel-header-close-nav', `msla-node-${nodeId}`]);
+ expect(screen.getByRole('button', { name: `Canvas ${nodeId}` })).toHaveFocus();
+ expect(screen.getByRole('button', { name: 'Close' })).toBe(close);
+ expect(screen.getByRole('button', { name: 'Canvas Http' })).toBe(originalHttpCard);
+ }
+ });
+
+ it('does not steal focus when the one-shot request clears or the same node rerenders', () => {
+ const { rerender } = render();
+ focusOrder.length = 0;
+ rerender();
+ rerender();
+ expect(screen.getByRole('button', { name: 'Canvas Switch' })).toHaveFocus();
+ expect(focusOrder).toEqual([]);
+ });
+
+ it('returns to normal panel autofocus when a later selection has no canvas request', () => {
+ const { rerender } = render();
+ expect(screen.getByRole('button', { name: 'Canvas Switch' })).toHaveFocus();
+ focusOrder.length = 0;
+ rerender();
+ expect(screen.getByRole('button', { name: 'Close' })).toHaveFocus();
+ expect(focusOrder).toEqual(['msla-panel-header-close-nav']);
+ });
+
+ it('does not introduce panel focus when the host suppresses the Close button', () => {
+ render();
+ expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'Canvas Switch' })).toHaveFocus();
+ expect(focusOrder).toEqual(['msla-node-Switch']);
+ });
+});
diff --git a/libs/designer-ui/src/lib/panel/panelheader/panelheader.tsx b/libs/designer-ui/src/lib/panel/panelheader/panelheader.tsx
index 95c98d810e4..7692c24ac21 100644
--- a/libs/designer-ui/src/lib/panel/panelheader/panelheader.tsx
+++ b/libs/designer-ui/src/lib/panel/panelheader/panelheader.tsx
@@ -31,7 +31,7 @@ import {
} from '@fluentui/react-icons';
import { Icon } from '@fluentui/react/lib/Icon';
import { isNullOrUndefined } from '@microsoft/logic-apps-shared';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { useIntl } from 'react-intl';
export const handleOnEscapeDown = (e: React.KeyboardEvent): void => {
@@ -41,6 +41,7 @@ export const handleOnEscapeDown = (e: React.KeyboardEvent {
- const { nodeId, onClose } = props;
+ const { nodeId, onClose, enableNodeNavigation = false } = props;
const intl = useIntl();
@@ -84,13 +85,20 @@ const CloseButton = (props: PanelHeaderProps & { nodeId: string }): JSX.Element
});
const buttonText = panelCloseTitle;
- useEffect(() => {
- if (!nodeId) {
+ // Default panel focus must precede an explicit canvas focus request.
+ useLayoutEffect(() => {
+ if (!nodeId || !enableNodeNavigation) {
return;
}
menuButtonRef.current?.focus();
- }, [nodeId]);
+ }, [nodeId, enableNodeNavigation]);
+
+ useEffect(() => {
+ if (nodeId && !enableNodeNavigation) {
+ menuButtonRef.current?.focus();
+ }
+ }, [nodeId, enableNodeNavigation]);
const restoreFocusSourceAttribute = useRestoreFocusSource();
diff --git a/libs/designer-v2/src/lib/core/state/panel/__test__/panelSlice.tabRetention.spec.ts b/libs/designer-v2/src/lib/core/state/panel/__test__/panelSlice.tabRetention.spec.ts
new file mode 100644
index 00000000000..e5bcbd9a15d
--- /dev/null
+++ b/libs/designer-v2/src/lib/core/state/panel/__test__/panelSlice.tabRetention.spec.ts
@@ -0,0 +1,132 @@
+import { describe, expect, it } from 'vitest';
+import { resetWorkflowState } from '../../global';
+import reducer, {
+ changePanelNode,
+ clearPanel,
+ initialState,
+ openPanel,
+ setAlternateSelectedNode,
+ setNodeSelection,
+ setPinnedPanelActiveTab,
+ setSelectedNodeId,
+ setSelectedPanelActiveTab,
+ toggleNodeSelection,
+} from '../panelSlice';
+
+const selectedAndPinned = () => {
+ let state = reducer(initialState, changePanelNode('First'));
+ state = reducer(state, setSelectedPanelActiveTab('SETTINGS'));
+ state = reducer(state, setAlternateSelectedNode({ nodeId: 'Pinned', panelPersistence: 'pinned' }));
+ return reducer(state, setPinnedPanelActiveTab('ABOUT'));
+};
+
+describe('panel tab preference (designer-v2)', () => {
+ it.each([
+ { name: 'changePanelNode', action: changePanelNode('Second') },
+ { name: 'setSelectedNodeId', action: setSelectedNodeId('Second') },
+ { name: 'openPanel with nodeId', action: openPanel({ panelMode: 'Operation', nodeId: 'Second' }) },
+ { name: 'openPanel with nodeIds', action: openPanel({ panelMode: 'Operation', nodeIds: ['Second'] }) },
+ ])('$name preserves the selected preference and separate pinned tab', ({ action }) => {
+ const previous = selectedAndPinned();
+ const state = reducer(previous, action);
+ expect(state.operationContent.selectedNodeId).toBe('Second');
+ expect(state.operationContent.selectedNodeIds).toEqual(['Second']);
+ expect(state.operationContent.selectedNodeActiveTabId).toBe('SETTINGS');
+ expect(state.operationContent.alternateSelectedNode).toEqual(previous.operationContent.alternateSelectedNode);
+ expect(previous.operationContent.selectedNodeId).toBe('First');
+ });
+
+ it('uses the latest preference through repeated node changes', () => {
+ let state = reducer(selectedAndPinned(), changePanelNode('Second'));
+ state = reducer(state, setSelectedPanelActiveTab('CODE_VIEW'));
+ state = reducer(state, changePanelNode('Third'));
+ state = reducer(state, changePanelNode('First'));
+ expect(state.operationContent.selectedNodeId).toBe('First');
+ expect(state.operationContent.selectedNodeActiveTabId).toBe('CODE_VIEW');
+ expect(state.operationContent.alternateSelectedNode?.activeTabId).toBe('ABOUT');
+ });
+
+ it('keeps an explicitly cleared preference unset when selecting another node', () => {
+ const cleared = reducer(selectedAndPinned(), setSelectedPanelActiveTab(undefined));
+ const state = reducer(cleared, changePanelNode('Second'));
+ expect(state.operationContent.selectedNodeActiveTabId).toBeUndefined();
+ expect(state.operationContent.alternateSelectedNode?.activeTabId).toBe('ABOUT');
+ });
+
+ it('changing the pinned tab does not change the selected preference', () => {
+ const state = reducer(selectedAndPinned(), setPinnedPanelActiveTab('CODE_VIEW'));
+ expect(state.operationContent.selectedNodeActiveTabId).toBe('SETTINGS');
+ expect(state.operationContent.alternateSelectedNode).toEqual({
+ nodeId: 'Pinned',
+ persistence: 'pinned',
+ activeTabId: 'CODE_VIEW',
+ });
+ });
+
+ it('clearPanel resets the selected preference while preserving the pinned tab', () => {
+ const previous = selectedAndPinned();
+ const state = reducer(previous, clearPanel());
+ expect(state.operationContent.selectedNodeId).toBeUndefined();
+ expect(state.operationContent.selectedNodeIds).toEqual([]);
+ expect(state.operationContent.selectedNodeActiveTabId).toBeUndefined();
+ expect(state.operationContent.alternateSelectedNode).toEqual(previous.operationContent.alternateSelectedNode);
+ expect(state.isCollapsed).toBe(false);
+ expect(reducer(state, changePanelNode('Second')).operationContent.selectedNodeActiveTabId).toBeUndefined();
+ });
+
+ it('clearPanel with clearPinnedState resets both tab preferences', () => {
+ const state = reducer(selectedAndPinned(), clearPanel({ clearPinnedState: true }));
+ expect(state.operationContent).toEqual(initialState.operationContent);
+ expect(state.isCollapsed).toBe(true);
+ });
+
+ it('resetWorkflowState clears both preferences and selections', () => {
+ const state = reducer(selectedAndPinned(), resetWorkflowState());
+ expect(state).toEqual(initialState);
+ expect(reducer(state, changePanelNode('NextWorkflowNode')).operationContent.selectedNodeActiveTabId).toBeUndefined();
+ });
+
+ it.each([
+ { ids: [] },
+ { ids: ['First'] },
+ { ids: ['First', 'Second'] },
+ { ids: ['First', 'Second', 'Third'] },
+ { ids: ['Second', 'Second'] },
+ ])('setNodeSelection($ids) retains the primary preference during reconciliation', ({ ids }) => {
+ const previous = reducer(reducer(initialState, changePanelNode('First')), setSelectedPanelActiveTab('SETTINGS'));
+ const state = reducer(previous, setNodeSelection(ids));
+ expect(state.operationContent.selectedNodeIds).toEqual([...new Set(ids)]);
+ expect(state.operationContent.selectedNodeId).toBe(ids[0]);
+ expect(state.operationContent.selectedNodeActiveTabId).toBe('SETTINGS');
+ expect(state.isCollapsed).toBe(ids.length === 0);
+ });
+
+ it('toggleNodeSelection preserves the preference through single, dual, multiple, and empty selections', () => {
+ let state = reducer(reducer(initialState, changePanelNode('First')), setSelectedPanelActiveTab('SETTINGS'));
+ for (const { id, expected } of [
+ { id: 'Second', expected: ['First', 'Second'] },
+ { id: 'Third', expected: ['First', 'Second', 'Third'] },
+ { id: 'First', expected: ['Second', 'Third'] },
+ { id: 'Second', expected: ['Third'] },
+ { id: 'Third', expected: [] },
+ { id: 'Last', expected: ['Last'] },
+ ]) {
+ state = reducer(state, toggleNodeSelection(id));
+ expect(state.operationContent.selectedNodeIds).toEqual(expected);
+ expect(state.operationContent.selectedNodeId).toBe(expected[0]);
+ expect(state.operationContent.selectedNodeActiveTabId).toBe('SETTINGS');
+ expect(state.isCollapsed).toBe(expected.length === 0);
+ }
+ });
+
+ it('does not copy an alternate tab into the primary preference when the primary selection changes', () => {
+ let state = reducer(reducer(initialState, changePanelNode('First')), setSelectedPanelActiveTab('SETTINGS'));
+ state = reducer(state, setNodeSelection(['First', 'Second']));
+ expect(state.operationContent.alternateSelectedNode?.activeTabId).toBeUndefined();
+ state = reducer(state, setPinnedPanelActiveTab('ABOUT'));
+ state = reducer(state, toggleNodeSelection('First'));
+ expect(state.operationContent.selectedNodeId).toBe('Second');
+ expect(state.operationContent.selectedNodeActiveTabId).toBe('SETTINGS');
+ expect(state.operationContent.alternateSelectedNode).toEqual({});
+ });
+});
diff --git a/libs/designer-v2/src/lib/core/state/panel/panelSlice.ts b/libs/designer-v2/src/lib/core/state/panel/panelSlice.ts
index 03e3b2303d6..7b96039b372 100644
--- a/libs/designer-v2/src/lib/core/state/panel/panelSlice.ts
+++ b/libs/designer-v2/src/lib/core/state/panel/panelSlice.ts
@@ -75,7 +75,6 @@ const getInitialWorkflowParametersContentState = (): WorkflowParametersPanelCont
const reconcileNodeSelection = (state: PanelState): void => {
const ids = state.operationContent.selectedNodeIds ?? [];
state.operationContent.selectedNodeId = ids[0];
- state.operationContent.selectedNodeActiveTabId = undefined;
if (ids.length === 2) {
state.operationContent.alternateSelectedNode = {
nodeId: ids[1],
@@ -206,7 +205,6 @@ export const panelSlice = createSlice({
state.connectionContent.selectedNodeIds = selectedNodes;
state.operationContent.selectedNodeId = selectedNodes[0];
state.operationContent.selectedNodeIds = selectedNodes;
- state.operationContent.selectedNodeActiveTabId = undefined;
if (state.operationContent.alternateSelectedNode?.persistence === 'selected') {
state.operationContent.alternateSelectedNode.nodeId = '';
}
diff --git a/libs/designer-v2/src/lib/core/state/workflow/__test__/workflowSelectors.focus.spec.tsx b/libs/designer-v2/src/lib/core/state/workflow/__test__/workflowSelectors.focus.spec.tsx
new file mode 100644
index 00000000000..d237f854381
--- /dev/null
+++ b/libs/designer-v2/src/lib/core/state/workflow/__test__/workflowSelectors.focus.spec.tsx
@@ -0,0 +1,80 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { act, cleanup, renderHook } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+import { afterEach, describe, expect, it } from 'vitest';
+import { useShouldNodeFocus } from '../workflowSelectors';
+import workflowReducer, { clearFocusNode, initialWorkflowState, setFocusNode } from '../workflowSlice';
+
+const setup = (focusedCanvasNodeId?: string) => {
+ const store = configureStore({
+ reducer: { workflow: workflowReducer },
+ preloadedState: { workflow: { ...initialWorkflowState, focusedCanvasNodeId } },
+ });
+ const wrapper = ({ children }: { children: ReactNode }) => {children};
+ return { store, wrapper };
+};
+
+describe('useShouldNodeFocus (designer-v2)', () => {
+ afterEach(cleanup);
+
+ it.each([
+ { focus: 'Scope', expected: true },
+ { focus: 'Scope-#scope', expected: true },
+ { focus: 'Other', expected: false },
+ { focus: 'Other-#scope', expected: false },
+ { focus: undefined, expected: false },
+ ])('matches normalized or rendered scope ids for focus=$focus: $expected', ({ focus, expected }) => {
+ const { wrapper } = setup(focus);
+ const { result } = renderHook(() => useShouldNodeFocus('Scope', 'Scope-#scope'), { wrapper });
+ expect(result.current).toBe(expected);
+ });
+
+ it.each([
+ { focus: 'Operation', expected: true },
+ { focus: 'Operation-#scope', expected: false },
+ { focus: undefined, expected: false },
+ ])('preserves single-id callers for focus=$focus: $expected', ({ focus, expected }) => {
+ const { wrapper } = setup(focus);
+ const { result } = renderHook(() => useShouldNodeFocus('Operation'), { wrapper });
+ expect(result.current).toBe(expected);
+ });
+
+ it('tracks normalized, tagged, mismatched, and cleared focus without remounting', () => {
+ const { store, wrapper } = setup();
+ const { result } = renderHook(() => useShouldNodeFocus('Scope', 'Scope-#scope'), { wrapper });
+ expect(result.current).toBe(false);
+ act(() => store.dispatch(setFocusNode('Scope-#scope')));
+ expect(result.current).toBe(true);
+ act(() => store.dispatch(setFocusNode('Other-#scope')));
+ expect(result.current).toBe(false);
+ act(() => store.dispatch(setFocusNode('Scope')));
+ expect(result.current).toBe(true);
+ act(() => store.dispatch(clearFocusNode()));
+ expect(result.current).toBe(false);
+ });
+
+ it('updates the rendered card id while the normalized action id stays the same', () => {
+ const { wrapper } = setup('Scope-rendered-#scope');
+ const { result, rerender } = renderHook(({ canvasNodeId }) => useShouldNodeFocus('Scope', canvasNodeId), {
+ wrapper,
+ initialProps: { canvasNodeId: 'Scope-#scope' },
+ });
+ expect(result.current).toBe(false);
+ rerender({ canvasNodeId: 'Scope-rendered-#scope' });
+ expect(result.current).toBe(true);
+ rerender({ canvasNodeId: 'Scope-#scope' });
+ expect(result.current).toBe(false);
+ });
+
+ it('updates the normalized action id while the rendered card id stays the same', () => {
+ const { wrapper } = setup('RenamedScope');
+ const { result, rerender } = renderHook(({ id }) => useShouldNodeFocus(id, 'Scope-#scope'), {
+ wrapper,
+ initialProps: { id: 'Scope' },
+ });
+ expect(result.current).toBe(false);
+ rerender({ id: 'RenamedScope' });
+ expect(result.current).toBe(true);
+ });
+});
diff --git a/libs/designer-v2/src/lib/core/state/workflow/workflowSelectors.ts b/libs/designer-v2/src/lib/core/state/workflow/workflowSelectors.ts
index 5bdd8a49a4c..7d3ebea6fd8 100644
--- a/libs/designer-v2/src/lib/core/state/workflow/workflowSelectors.ts
+++ b/libs/designer-v2/src/lib/core/state/workflow/workflowSelectors.ts
@@ -52,8 +52,17 @@ export const useNodeDescription = (id: string) =>
useMemo(() => createSelector(getWorkflowState, (state: WorkflowState) => getRecordEntry(state.operations, id)?.description), [id])
);
-export const useShouldNodeFocus = (id: string) =>
- useSelector(useMemo(() => createSelector(getWorkflowState, (state: WorkflowState) => state.focusedCanvasNodeId === id), [id]));
+export const useShouldNodeFocus = (id: string, canvasNodeId = id) =>
+ useSelector(
+ useMemo(
+ () =>
+ createSelector(
+ getWorkflowState,
+ (state: WorkflowState) => state.focusedCanvasNodeId === id || state.focusedCanvasNodeId === canvasNodeId
+ ),
+ [id, canvasNodeId]
+ )
+ );
const selectFocusElement = createSelector(getWorkflowState, (state: WorkflowState) => state.focusElement);
diff --git a/libs/designer-v2/src/lib/ui/CustomNodes/ScopeCardNode.tsx b/libs/designer-v2/src/lib/ui/CustomNodes/ScopeCardNode.tsx
index 0823aa595bb..5ab94a39d82 100644
--- a/libs/designer-v2/src/lib/ui/CustomNodes/ScopeCardNode.tsx
+++ b/libs/designer-v2/src/lib/ui/CustomNodes/ScopeCardNode.tsx
@@ -66,7 +66,7 @@ import { ErrorLevel } from '../../core/state/operation/operationMetadataSlice';
const ScopeCardNode = ({ id }: NodeProps) => {
const scopeId = useMemo(() => removeIdTag(id), [id]);
- const shouldFocus = useShouldNodeFocus(scopeId);
+ const shouldFocus = useShouldNodeFocus(scopeId, id);
const node = useActionMetadata(scopeId);
const errorInfo = useOperationErrorInfo(scopeId);
const operationsInfo = useAllOperations();
diff --git a/libs/designer-v2/src/lib/ui/CustomNodes/components/card/__test__/actionCard.spec.tsx b/libs/designer-v2/src/lib/ui/CustomNodes/components/card/__test__/actionCard.spec.tsx
index 7e7d79dc1bc..35daee73ca1 100644
--- a/libs/designer-v2/src/lib/ui/CustomNodes/components/card/__test__/actionCard.spec.tsx
+++ b/libs/designer-v2/src/lib/ui/CustomNodes/components/card/__test__/actionCard.spec.tsx
@@ -244,8 +244,42 @@ describe('ActionCard', () => {
expect(onCopyClick).toHaveBeenCalledOnce();
});
- it('should focus element when setFocus is true', () => {
- render();
- expect(screen.getByTestId('card-Test Action')).toHaveFocus();
+ it.each([false, true])('focuses with preventScroll when setFocus is true (scope=%s)', (isScope) => {
+ const focus = vi.spyOn(HTMLElement.prototype, 'focus');
+ try {
+ render();
+ expect(focus).toHaveBeenCalledExactlyOnceWith({ preventScroll: true });
+ expect(screen.getByTestId('card-Test Action')).toHaveFocus();
+ } finally {
+ focus.mockRestore();
+ }
+ });
+
+ it.each([false, true])('only refocuses for a new explicit request without native scrolling (scope=%s)', (isScope) => {
+ const cardProps = { ...defaultProps, nodeIndex: 1, isScope, handleCollapse: vi.fn() };
+ const { rerender } = render();
+ const target = screen.getByTestId('card-Test Action');
+ expect(target).not.toHaveFocus();
+ const focus = vi.spyOn(target, 'focus');
+ try {
+ rerender();
+ expect(focus).toHaveBeenCalledExactlyOnceWith({ preventScroll: true });
+ expect(target).toHaveFocus();
+
+ rerender();
+ expect(screen.getByTestId('card-Updated action')).toBe(target);
+ expect(focus).toHaveBeenCalledOnce();
+ rerender();
+ expect(focus).toHaveBeenCalledOnce();
+ target.blur();
+ expect(target).not.toHaveFocus();
+
+ rerender();
+ expect(focus).toHaveBeenCalledTimes(2);
+ expect(focus).toHaveBeenLastCalledWith({ preventScroll: true });
+ expect(target).toHaveFocus();
+ } finally {
+ focus.mockRestore();
+ }
});
});
diff --git a/libs/designer-v2/src/lib/ui/CustomNodes/components/card/actionCard.tsx b/libs/designer-v2/src/lib/ui/CustomNodes/components/card/actionCard.tsx
index 3d7dcc10ce1..6be90653fda 100644
--- a/libs/designer-v2/src/lib/ui/CustomNodes/components/card/actionCard.tsx
+++ b/libs/designer-v2/src/lib/ui/CustomNodes/components/card/actionCard.tsx
@@ -87,7 +87,8 @@ export const ActionCard: React.FC = ({
useEffect(() => {
if (setFocus) {
- focusRef.current?.focus();
+ // Canvas panning owns visibility; native scrolling would offset the viewport.
+ focusRef.current?.focus({ preventScroll: true });
}
}, [setFocus]);
diff --git a/libs/designer-v2/src/lib/ui/DesignerReactFlow.tsx b/libs/designer-v2/src/lib/ui/DesignerReactFlow.tsx
index addff8e707b..8f154050c58 100644
--- a/libs/designer-v2/src/lib/ui/DesignerReactFlow.tsx
+++ b/libs/designer-v2/src/lib/ui/DesignerReactFlow.tsx
@@ -12,6 +12,7 @@ import type {
} from '@xyflow/react';
import { BezierEdge, ReactFlow, SelectionMode } from '@xyflow/react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
import {
agentOperation,
containsIdTag,
@@ -55,6 +56,7 @@ import NoteNode from './CustomNodes/NoteNode';
import ButtonEdge from './connections/edge';
import HandoffEdge from './connections/handoffEdge';
import HiddenEdge from './connections/hiddenEdge';
+import { NodeNavigation } from './NodeNavigation';
const DesignerReactFlow = (props: any) => {
const { canvasRef } = props;
@@ -703,6 +705,15 @@ const DesignerReactFlow = (props: any) => {
hideAttribution: true,
}}
>
+ {
+ if (!userInferredTabNavigation) {
+ // Mount off-screen cards before dispatching the one-shot canvas focus request.
+ flushSync(() => setUserInferredTabNavigation(true));
+ }
+ }}
+ />
{props.children}
);
diff --git a/libs/designer-v2/src/lib/ui/NodeNavigation.tsx b/libs/designer-v2/src/lib/ui/NodeNavigation.tsx
new file mode 100644
index 00000000000..33e4e9ba287
--- /dev/null
+++ b/libs/designer-v2/src/lib/ui/NodeNavigation.tsx
@@ -0,0 +1,64 @@
+import { getAdjacentNode, removeIdTag, WORKFLOW_NODE_TYPES } from '@microsoft/logic-apps-shared';
+import { useReactFlow } from '@xyflow/react';
+import { type RefObject, useCallback } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useDispatch } from 'react-redux';
+import {
+ useNodeSelectAdditionalCallback,
+ useSuppressDefaultNodeSelectFunctionality,
+} from '../core/state/designerOptions/designerOptionsSelectors';
+import { useOperationPanelSelectedNodeId } from '../core/state/panel/panelSelectors';
+import { changePanelNode, setSelectedNodeId } from '../core/state/panel/panelSlice';
+import { setFocusNode } from '../core/state/workflow/workflowSlice';
+import type { AppDispatch } from '../core/store';
+
+interface NodeNavigationProps {
+ canvasRef: RefObject;
+ onNavigate: () => void;
+}
+
+export const NodeNavigation = ({ canvasRef, onNavigate }: NodeNavigationProps) => {
+ const { getNodes } = useReactFlow();
+ const selectedNodeId = useOperationPanelSelectedNodeId();
+ const nodeSelectCallback = useNodeSelectAdditionalCallback();
+ const suppressDefaultNodeSelect = useSuppressDefaultNodeSelectFunctionality();
+ const dispatch = useDispatch();
+
+ const navigate = useCallback(
+ (event: KeyboardEvent, direction: 'next' | 'previous') => {
+ if (!(event.target instanceof Element)) {
+ return;
+ }
+ const canvas = canvasRef.current;
+ const panel = event.target.closest('.msla-panel-layout')?.querySelector('.msla-node-details-panel');
+ const designer = canvas?.closest('.msla-designer-canvas');
+ const isSelectedPanel =
+ selectedNodeId &&
+ panel?.id === `msla-node-details-panel-${selectedNodeId}` &&
+ designer &&
+ panel.closest('.msla-designer-canvas') === designer &&
+ !event.target.closest(
+ '[role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"], [role="combobox"], [role="textbox"]'
+ );
+ if (!canvas?.contains(event.target) && !isSelectedPanel) {
+ return;
+ }
+ event.preventDefault();
+ const node = getAdjacentNode(getNodes(), selectedNodeId, direction);
+ if (!node) {
+ return;
+ }
+ onNavigate();
+ const actionId = node.type === WORKFLOW_NODE_TYPES.SCOPE_CARD_NODE ? removeIdTag(node.id) : node.id;
+ nodeSelectCallback?.(actionId);
+ dispatch(suppressDefaultNodeSelect ? setSelectedNodeId(actionId) : changePanelNode(actionId));
+ dispatch(setFocusNode(node.id));
+ },
+ [canvasRef, dispatch, getNodes, nodeSelectCallback, onNavigate, selectedNodeId, suppressDefaultNodeSelect]
+ );
+
+ useHotkeys(['ctrl+down', 'meta+down'], (event) => navigate(event, 'next'), [navigate]);
+ useHotkeys(['ctrl+up', 'meta+up'], (event) => navigate(event, 'previous'), [navigate]);
+
+ return null;
+};
diff --git a/libs/designer-v2/src/lib/ui/__test__/DesignerReactFlow.spec.tsx b/libs/designer-v2/src/lib/ui/__test__/DesignerReactFlow.spec.tsx
index e46de6eea99..78a03e3d10f 100644
--- a/libs/designer-v2/src/lib/ui/__test__/DesignerReactFlow.spec.tsx
+++ b/libs/designer-v2/src/lib/ui/__test__/DesignerReactFlow.spec.tsx
@@ -16,6 +16,7 @@ let mockNodesMetadata: Record = {};
let mockNotes: Record = {};
const mockDispatch = vi.fn();
+const mockAfterNavigate = vi.fn();
// ── React-Redux ──────────────────────────────────────────────────────────────
vi.mock('react-redux', () => ({
@@ -30,7 +31,12 @@ let capturedReactFlowProps: Record = {};
vi.mock('@xyflow/react', () => ({
ReactFlow: ({ children, ...props }: any) => {
capturedReactFlowProps = props;
- return {children}
;
+ return (
+
+ {children}
+ {!props.onlyRenderVisibleElements &&
}
+
{selectedNodeId} parameters
},
+ ...(selectedNodeId === 'Last'
+ ? []
+ : [{ id: 'SETTINGS', title: 'Settings', visible: true, order: 1, content: {selectedNodeId} settings
}]),
+ { id: 'ABOUT', title: 'About', visible: true, order: 2, content: {selectedNodeId} about
},
+ ];
+ return (
+
+
+
+
+
+
+ Draft
+
+
+
+
+
store.dispatch(setSelectedPanelActiveTab(tabId))}
+ trackEvent={vi.fn()}
+ />
+
+ Last in graph, first in DOM
+
+
+ First in graph, last in DOM
+
+
+
+
+
+ Editable
+
+
+ {includePanel ? (
+ <>
+
+
+
+ ) : null}
+
+ );
+ };
+ const result = render(
+
+
+ Outside the canvas
+
+
+
+
+
+ {includePanel ?
: null}
+
+
+
+
+
+
+
+
{props.nodeHeaderItems}
+
{props.alternateSelectedNodeHeaderItems}
+
+
+
+
+ {props.errorMessage && {props.errorMessage}}
+
+ );
+ },
+}));
+
+const renderScope = (id = 'testScope-#scope') => render();
+const cardProps = (): ComponentProps => mocks.card.mock.lastCall![0];
+const expectAction = (type: string, payload: unknown) => expect(mocks.dispatch).toHaveBeenCalledWith({ type, payload });
+
+// Partial query/selector fixtures deliberately contain only the fields consumed by this component.
+const returns = (hook: unknown, value: unknown) => vi.mocked(hook as () => unknown).mockReturnValue(value);
+const queryResult = (data?: unknown, isFetching = false) => ({ data, isFetching });
+
+describe('legacy ScopeCardNode', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ returns(options.useReadOnly, false);
+ returns(options.useMonitoringView, false);
+ returns(useIsA2AWorkflow, false);
+ returns(operation.useBrandColor, '#123456');
+ returns(operation.useIconUri, 'scope.svg');
+ returns(operation.useParameterValidationErrors, []);
+ returns(operation.useTokenDependencies, { dependencies: ['input'], loopSources: ['loop'] });
+ returns(panel.useIsNodePinnedToOperationPanel, false);
+ returns(panel.useIsNodeSelectedInOperationPanel, false);
+ returns(useOperationQuery, { isLoading: false, isError: false });
+ returns(useSettingValidationErrors, []);
+ returns(workflow.useActionMetadata, { type: 'Scope' });
+ returns(workflow.useIsGraphCollapsed, false);
+ returns(workflow.useIsLeafNode, false);
+ returns(workflow.useNodeMetadata, { graphId: 'old-graph', actionCount: 3 });
+ returns(workflow.useNodesMetadata, {});
+ returns(workflow.useRunData, undefined);
+ returns(workflow.useNodeDescription, undefined);
+ returns(workflow.useShouldNodeFocus, false);
+ returns(workflow.useRunIndex, 1);
+ returns(workflow.useIsActionInSelectedTimelineRepetition, true);
+ returns(workflow.useHandoffActionsForAgent, []);
+ returns(workflow.useFlowErrorsForNode, []);
+ returns(useNodeRepetition, queryResult());
+ returns(useAgentRepetition, queryResult());
+ returns(useAgentActionsRepetition, queryResult());
+ mocks.drag.mockReturnValue([{ isDragging: false }, mocks.dragRef, mocks.dragPreview]);
+ mocks.hotkeys.mockReturnValue(vi.fn());
+ });
+
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ it('passes legacy identity, appearance, focus, comments and run information to the card', () => {
+ returns(workflow.useNodeDescription, 'Review these actions');
+ returns(workflow.useShouldNodeFocus, true);
+ renderScope();
+
+ expect(screen.getByRole('button', { name: 'Test scope' })).toBeInTheDocument();
+ expect(cardProps()).toMatchObject({
+ id: 'testScope',
+ title: 'Test scope',
+ brandColor: '#123456',
+ icon: 'scope.svg',
+ active: true,
+ showStatusPill: false,
+ isLoading: false,
+ selectionMode: false,
+ setFocus: true,
+ nodeIndex: 7,
+ timelineRepetitionCount: 4,
+ commentBox: { brandColor: '#123456', comment: 'Review these actions', isDismissed: false, isEditing: false },
+ });
+ expect(screen.getByTestId('target-handle')).toBeInTheDocument();
+ expect(screen.getByTestId('default-source-handle')).toBeInTheDocument();
+ expect(screen.queryByTestId('footer-source-handle')).not.toBeInTheDocument();
+ expect(mocks.dispatch).not.toHaveBeenCalled();
+ });
+
+ it('renders nothing for an operation that no longer exists', () => {
+ returns(workflow.useActionMetadata, undefined);
+ const { container } = renderScope();
+ expect(container).toBeEmptyDOMElement();
+ expect(mocks.card).not.toHaveBeenCalled();
+ });
+
+ it.each([
+ [false, false, false],
+ [true, false, 'pinned'],
+ [true, true, 'selected'],
+ ])('maps pinned=%s and selected=%s to selection mode %s', (pinned, selected, mode) => {
+ returns(panel.useIsNodePinnedToOperationPanel, pinned);
+ returns(panel.useIsNodeSelectedInOperationPanel, selected);
+ renderScope();
+ expect(cardProps().selectionMode).toBe(mode);
+ expect(cardProps().commentBox).toBeUndefined();
+ });
+
+ it('selects, deletes, collapses and opens the context menu using the normalized scope id', () => {
+ renderScope();
+ fireEvent.click(screen.getByRole('button', { name: 'Test scope' }));
+ expectAction('panel/changePanelNode', 'testScope');
+ fireEvent.click(screen.getByRole('button', { name: 'Delete' }));
+ expectAction('designerView/setShowDeleteModalNodeId', 'testScope');
+ fireEvent.click(screen.getByRole('button', { name: 'Collapse', exact: true }));
+ expectAction('workflow/toggleCollapsedGraphId', { id: 'testScope', includeNested: undefined });
+ expect(fireEvent.contextMenu(screen.getByTestId('scope-card'), { clientX: 15, clientY: 29 })).toBe(false);
+ expectAction('designerView/setNodeContextMenuData', { nodeId: 'testScope', location: { x: 15, y: 29 } });
+ });
+
+ it('copies the full canvas id through the hotkey and expires the feedback after three seconds', () => {
+ vi.useFakeTimers();
+ renderScope();
+ expect(mocks.hotkeys).toHaveBeenCalledWith(['meta+c', 'ctrl+c'], expect.any(Function), { preventDefault: true });
+ act(() => mocks.hotkeys.mock.lastCall![1]());
+ expectAction('copyScopeOperation', { nodeId: 'testScope-#scope' });
+ expect(screen.getByRole('button', { name: 'Copied testScope' })).toBeInTheDocument();
+ act(() => vi.advanceTimersByTime(2999));
+ expect(screen.getByRole('button', { name: 'Copied testScope' })).toBeInTheDocument();
+ act(() => vi.advanceTimersByTime(1));
+ expect(screen.queryByRole('button', { name: 'Copied testScope' })).not.toBeInTheDocument();
+ });
+
+ it('dismisses copy feedback and clears its pending timeout', () => {
+ vi.useFakeTimers();
+ renderScope();
+ act(() => mocks.hotkeys.mock.lastCall![1]());
+ fireEvent.click(screen.getByRole('button', { name: 'Copied testScope' }));
+ expect(screen.queryByRole('button', { name: 'Copied testScope' })).not.toBeInTheDocument();
+ expect(vi.getTimerCount()).toBe(0);
+ });
+
+ it.each(['old-graph', undefined])('moves a dragged scope from graph %s only after a successful drop', (graphId) => {
+ returns(workflow.useNodeMetadata, { graphId, actionCount: 3 });
+ mocks.drag.mockReturnValue([{ isDragging: true }, mocks.dragRef, mocks.dragPreview]);
+ renderScope();
+ const spec = mocks.drag.mock.lastCall![0]();
+ expect(spec).toMatchObject({
+ type: 'BOX',
+ canDrag: true,
+ item: { id: 'testScope-#scope', dependencies: ['input'], loopSources: ['loop'], isScope: true, isAgent: false },
+ });
+ expect(spec.collect({ isDragging: () => true })).toEqual({ isDragging: true });
+ expect(cardProps()).toMatchObject({ isDragging: true, drag: mocks.dragRef, dragPreview: mocks.dragPreview });
+ const dropResult = { graphId: 'new-graph', parentId: 'before', childId: 'after' };
+ spec.end(undefined, { getDropResult: () => dropResult });
+ spec.end(spec.item, { getDropResult: () => null });
+ expect(mocks.dispatch).not.toHaveBeenCalled();
+ spec.end(spec.item, { getDropResult: () => dropResult });
+ expectAction('moveOperation', {
+ nodeId: 'testScope',
+ oldGraphId: graphId ?? 'root',
+ newGraphId: 'new-graph',
+ relationshipIds: dropResult,
+ });
+ });
+
+ it('offers an insertion dropzone for an editable empty scope', () => {
+ returns(workflow.useIsLeafNode, true);
+ renderScope();
+ expect(screen.getByTestId('dropzone')).toHaveAttribute('data-graph', 'testScope');
+ expect(screen.getByTestId('dropzone')).toHaveAttribute('data-parent', 'testScope-#scope');
+ expect(screen.getByTestId('dropzone')).toHaveAttribute('tabindex', '7');
+ });
+
+ it('disables dragging and replaces the insertion zone with No actions in read-only mode', () => {
+ returns(workflow.useIsLeafNode, true);
+ returns(options.useReadOnly, true);
+ renderScope();
+ expect(screen.getByText('No actions')).toBeInTheDocument();
+ expect(screen.queryByTestId('dropzone')).not.toBeInTheDocument();
+ expect(cardProps()).toMatchObject({ readOnly: true, draggable: false });
+ expect(mocks.drag.mock.lastCall![0]().canDrag).toBe(false);
+ });
+
+ it.each([
+ ['Scope', '3 Actions'],
+ ['Switch', '3 Cases'],
+ ['If', '3 Cases'],
+ ['Agent', '3 Cases'],
+ ])('shows the collapsed %s count without an insertion zone', (type, text) => {
+ returns(workflow.useActionMetadata, { type });
+ returns(workflow.useIsGraphCollapsed, true);
+ returns(workflow.useIsLeafNode, true);
+ renderScope();
+ expect(screen.getByText(text)).toBeInTheDocument();
+ expect(screen.queryByTestId('dropzone')).not.toBeInTheDocument();
+ expect(cardProps().collapsed).toBe(true);
+ });
+
+ it('uses the footer source handle and suppresses collapsed text and empty insertion UI', () => {
+ returns(workflow.useIsGraphCollapsed, true);
+ returns(workflow.useIsLeafNode, true);
+ renderScope('testScope-#footer');
+ expect(screen.getByTestId('footer-source-handle')).toBeInTheDocument();
+ expect(screen.queryByTestId('default-source-handle')).not.toBeInTheDocument();
+ expect(screen.queryByText('3 Actions')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('dropzone')).not.toBeInTheDocument();
+ });
+
+ it.each([false, true])('excludes single-action handoffs from empty agent messaging (monitoring=%s)', (monitoring) => {
+ returns(workflow.useActionMetadata, { type: 'Agent' });
+ returns(workflow.useNodeMetadata, { actionCount: 1 });
+ returns(workflow.useHandoffActionsForAgent, [{ isSingleAction: true }, { isSingleAction: false }]);
+ returns(workflow.useIsLeafNode, true);
+ returns(options.useMonitoringView, monitoring);
+ renderScope();
+ expect(screen.getByText(monitoring ? 'This iteration has completed without any tool execution' : 'Add tool')).toBeInTheDocument();
+ expect(screen.queryByTestId('dropzone')).not.toBeInTheDocument();
+ expect(cardProps().showStatusPill).toBe(false);
+ expect(mocks.drag.mock.lastCall![0]().item.isAgent).toBe(true);
+ });
+
+ it.each(['manifest', 'settings', 'parameters', 'flow'])('prioritizes %s errors over lower-priority errors', (error) => {
+ returns(useOperationQuery, { isError: error === 'manifest' });
+ returns(useSettingValidationErrors, ['manifest', 'settings'].includes(error) ? ['invalid'] : []);
+ returns(operation.useParameterValidationErrors, error !== 'flow' ? ['invalid'] : []);
+ returns(workflow.useFlowErrorsForNode, ['unreachable']);
+ const messages = {
+ manifest: 'Error fetching manifest',
+ settings: 'Invalid settings',
+ parameters: 'Invalid parameters',
+ flow: 'Action unreachable',
+ };
+ renderScope();
+ expect(screen.getByRole('alert')).toHaveTextContent(messages[error as keyof typeof messages]);
+ expect(cardProps().errorLevel).toBe(error === 'manifest' ? MessageBarType.error : MessageBarType.severeWarning);
+ });
+
+ it('shows the real monitoring error and run status for a failed scope', () => {
+ const runData = { status: 'Failed', code: 'BadRequest', error: { code: 'BadRequest', message: 'Invalid input' } };
+ returns(options.useMonitoringView, true);
+ returns(workflow.useRunData, runData);
+ renderScope();
+ expect(screen.getByRole('alert')).toHaveTextContent('BadRequest. Invalid input');
+ expect(cardProps()).toMatchObject({ active: true, showStatusPill: true, runData, errorLevel: MessageBarType.severeWarning });
+ });
+
+ it('marks an unexecuted monitored scope inactive without a status pill', () => {
+ returns(options.useMonitoringView, true);
+ renderScope();
+ expect(cardProps()).toMatchObject({ active: false, showStatusPill: false });
+ expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+ });
+
+ it.each(['node', 'agent', 'actions', 'manifest', 'appearance'])('shows loading while %s data is unavailable', (source) => {
+ if (source === 'node') returns(useNodeRepetition, queryResult(undefined, true));
+ if (source === 'agent') returns(useAgentRepetition, queryResult(undefined, true));
+ if (source === 'actions') returns(useAgentActionsRepetition, queryResult(undefined, true));
+ if (source === 'manifest') returns(useOperationQuery, { isLoading: true });
+ if (source === 'appearance') {
+ returns(operation.useBrandColor, undefined);
+ returns(operation.useIconUri, undefined);
+ }
+ renderScope();
+ expect(cardProps().isLoading).toBe(true);
+ });
+
+ it('renders the completed loop pager and dispatches focus for its selected repetition', () => {
+ returns(options.useMonitoringView, true);
+ returns(workflow.useActionMetadata, { type: 'Foreach' });
+ returns(workflow.useNodeMetadata, { actionCount: 3, runData: { status: 'Succeeded' } });
+ returns(workflow.useIsGraphCollapsed, true);
+ renderScope();
+ expect(screen.getByTestId('loops-pager')).toHaveAttribute('data-collapsed', 'true');
+ fireEvent.click(screen.getByRole('button', { name: 'Next repetition' }));
+ expectAction('workflow/setFocusElement', 'testScope-3-0');
+ });
+
+ it.each([undefined, [], { status: 'InProgress' }])('omits the loop pager for incomplete or aggregate run data %j', (runData) => {
+ returns(options.useMonitoringView, true);
+ returns(workflow.useActionMetadata, { type: 'Foreach' });
+ returns(workflow.useNodeMetadata, { runData });
+ renderScope();
+ expect(screen.queryByTestId('loops-pager')).not.toBeInTheDocument();
+ });
+
+ it('loads agent repetitions with the scope, run and parent status and dispatches all fresh run data', () => {
+ returns(options.useMonitoringView, true);
+ returns(workflow.useActionMetadata, { type: 'Agent' });
+ returns(workflow.useRunData, { status: 'Succeeded', correlation: { actionTrackingId: 'old' } });
+ const agent = { inputsLink: { uri: 'new-inputs' } };
+ const repetition = { correlation: { actionTrackingId: 'new' }, status: 'Succeeded' };
+ const actions = [{ name: 'tool-1', properties: { status: 'Succeeded' } }];
+ returns(useAgentRepetition, queryResult({ properties: agent }));
+ returns(useNodeRepetition, queryResult({ properties: repetition }));
+ returns(useAgentActionsRepetition, queryResult(actions));
+ renderScope();
+ expect(useNodeRepetition).toHaveBeenCalledWith(true, 'testScope', 'run-1', '000002', 'Succeeded', 2, false);
+ expect(useAgentRepetition).toHaveBeenCalledWith(true, true, 'testScope', 'run-1', '000001', 'Succeeded', 1);
+ expect(useAgentActionsRepetition).toHaveBeenCalledWith(true, 'testScope', 'run-1', '000001', 'Succeeded', 1);
+ expectAction('workflow/setSubgraphRunData', { nodeId: 'testScope', runData: actions });
+ expectAction('workflow/updateAgenticGraph', { nodeId: 'testScope', scopeRepetitionRunData: agent });
+ expectAction('workflow/updateAgenticMetadata', { nodeId: 'testScope', scopeRepetitionRunData: agent });
+ expectAction('workflow/setRepetitionRunData', { nodeId: 'testScope', runData: repetition });
+ expect(mocks.dispatch).toHaveBeenCalledTimes(4);
+ });
+
+ it('does not dispatch duplicate agent inputs or repetition correlation data', () => {
+ returns(options.useMonitoringView, true);
+ returns(workflow.useActionMetadata, { type: 'Agent' });
+ returns(workflow.useNodesMetadata, { testScope: { runData: { inputsLink: { uri: 'existing' } } } });
+ returns(workflow.useRunData, { correlation: { actionTrackingId: 'existing' } });
+ returns(useAgentRepetition, queryResult({ properties: { inputsLink: { uri: 'existing' } } }));
+ returns(useNodeRepetition, queryResult({ properties: { correlation: { actionTrackingId: 'existing' } } }));
+ renderScope();
+ expect(mocks.dispatch).not.toHaveBeenCalled();
+ });
+
+ it('ignores repetition graph updates outside the selected monitoring timeline', () => {
+ returns(options.useMonitoringView, true);
+ returns(workflow.useActionMetadata, { type: 'Agent' });
+ returns(workflow.useIsActionInSelectedTimelineRepetition, false);
+ returns(useAgentRepetition, queryResult({ properties: { inputsLink: { uri: 'other-inputs' } } }));
+ returns(useNodeRepetition, queryResult({ properties: { correlation: { actionTrackingId: 'other' } } }));
+ renderScope();
+ expect(useAgentRepetition).toHaveBeenCalledWith(true, true, 'testScope', undefined, '000001', undefined, 1);
+ expect(mocks.dispatch).not.toHaveBeenCalled();
+ });
+
+ it('disables agent iteration requests in A2A workflows but still loads their action repetitions', () => {
+ returns(options.useMonitoringView, true);
+ returns(workflow.useActionMetadata, { type: 'Agent' });
+ returns(useIsA2AWorkflow, true);
+ renderScope();
+ expect(useAgentRepetition).toHaveBeenCalledWith(false, true, 'testScope', 'run-1', '000001', undefined, 1);
+ expect(useAgentActionsRepetition).toHaveBeenCalledWith(true, 'testScope', 'run-1', '000001', undefined, 1);
+ });
+});
diff --git a/libs/logic-apps-shared/src/utils/src/lib/helpers/__test__/nodeNavigation.spec.ts b/libs/logic-apps-shared/src/utils/src/lib/helpers/__test__/nodeNavigation.spec.ts
new file mode 100644
index 00000000000..23bc9346663
--- /dev/null
+++ b/libs/logic-apps-shared/src/utils/src/lib/helpers/__test__/nodeNavigation.spec.ts
@@ -0,0 +1,106 @@
+import type { Node } from '@xyflow/react';
+import { describe, expect, it } from 'vitest';
+import { WORKFLOW_NODE_TYPES } from '../../models/workflowNode';
+import { getAdjacentNode } from '../nodeNavigation';
+
+const node = (id: string, nodeIndex: unknown, overrides: Partial = {}): Node => ({
+ id,
+ type: WORKFLOW_NODE_TYPES.OPERATION_NODE,
+ position: { x: 0, y: 0 },
+ data: { nodeIndex },
+ ...overrides,
+});
+
+describe('getAdjacentNode', () => {
+ const first = node('Trigger', 1, { position: { x: 1000, y: 1000 } });
+ const scope = node('Scope-#scope', 10, { type: WORKFLOW_NODE_TYPES.SCOPE_CARD_NODE });
+ const nested = node('Nested', 30, { parentId: 'Scope', position: { x: -1000, y: -1000 } });
+ const last = node('Last', 100, { position: { x: 0, y: -2000 } });
+ const nodes = [last, nested, first, scope];
+
+ it.each([
+ ['Trigger', 'next', scope],
+ ['Scope', 'next', nested],
+ ['Nested', 'next', last],
+ ['Last', 'previous', nested],
+ ['Nested', 'previous', scope],
+ ['Scope', 'previous', first],
+ ] as const)('finds the nearest index from %s going %s, regardless of array/geometry order', (selectedId, direction, expected) => {
+ expect(getAdjacentNode(nodes, selectedId, direction)).toBe(expected);
+ });
+
+ it.each([undefined, '', 'Deleted'])('starts at the first/last index when selection is %s', (selectedId) => {
+ expect(getAdjacentNode(nodes, selectedId, 'next')).toBe(first);
+ expect(getAdjacentNode(nodes, selectedId, 'previous')).toBe(last);
+ });
+
+ it('stops at both ends instead of wrapping', () => {
+ expect(getAdjacentNode(nodes, 'Trigger', 'previous')).toBeUndefined();
+ expect(getAdjacentNode(nodes, 'Last', 'next')).toBeUndefined();
+ });
+
+ it('handles empty and single-node graphs', () => {
+ for (const direction of ['next', 'previous'] as const) {
+ expect(getAdjacentNode([], undefined, direction)).toBeUndefined();
+ expect(getAdjacentNode([first], undefined, direction)).toBe(first);
+ expect(getAdjacentNode([first], 'Trigger', direction)).toBeUndefined();
+ }
+ });
+
+ it.each([
+ WORKFLOW_NODE_TYPES.GRAPH_NODE,
+ WORKFLOW_NODE_TYPES.SUBGRAPH_NODE,
+ WORKFLOW_NODE_TYPES.SUBGRAPH_CARD_NODE,
+ WORKFLOW_NODE_TYPES.HIDDEN_NODE,
+ WORKFLOW_NODE_TYPES.PLACEHOLDER_NODE,
+ WORKFLOW_NODE_TYPES.COLLAPSED_NODE,
+ WORKFLOW_NODE_TYPES.NOTE_NODE,
+ undefined,
+ 'unknown',
+ ])('excludes %s even with a valid index', (type) => {
+ const excluded = node('Excluded', 5, { type });
+ expect(getAdjacentNode([first, excluded, scope], 'Trigger', 'next')).toBe(scope);
+ expect(getAdjacentNode([first, excluded, scope], 'Scope', 'previous')).toBe(first);
+ });
+
+ it.each([undefined, null, 0, -1, Number.NaN, Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY, '5', true])(
+ 'excludes invalid index %s rather than coercing it',
+ (index) => {
+ const excluded = node('Excluded', index);
+ expect(getAdjacentNode([first, excluded, scope], 'Trigger', 'next')).toBe(scope);
+ expect(getAdjacentNode([excluded], undefined, 'previous')).toBeUndefined();
+ }
+ );
+
+ it('excludes hidden operations and scope cards and treats their selection as unavailable', () => {
+ const hidden = [
+ node('HiddenOperation', 2, { hidden: true }),
+ node('HiddenScope-#scope', 3, { hidden: true, type: WORKFLOW_NODE_TYPES.SCOPE_CARD_NODE }),
+ ];
+ expect(getAdjacentNode([first, ...hidden, scope], 'Trigger', 'next')).toBe(scope);
+ expect(getAdjacentNode([first, ...hidden, scope], 'HiddenScope', 'previous')).toBe(scope);
+ });
+
+ it('accepts positive finite fractional indices and gaps', () => {
+ const fractional = node('Fractional', 1.5);
+ expect(getAdjacentNode([scope, fractional, first], 'Trigger', 'next')).toBe(fractional);
+ });
+
+ it('uses changed layout indices on subsequent calls', () => {
+ const moved = { ...last, data: { nodeIndex: 2 } };
+ expect(getAdjacentNode(nodes, 'Trigger', 'next')).toBe(scope);
+ expect(getAdjacentNode([scope, first, nested, moved], 'Trigger', 'next')).toBe(moved);
+ });
+
+ it('does not mutate the array, node data, or positions', () => {
+ const frozenNodes = Object.freeze(
+ nodes.map((entry) =>
+ Object.freeze({ ...entry, data: Object.freeze({ ...entry.data }), position: Object.freeze({ ...entry.position }) })
+ )
+ );
+ const originalIds = frozenNodes.map(({ id }) => id);
+ expect(getAdjacentNode(frozenNodes, 'Scope', 'next')).toBe(frozenNodes[1]);
+ expect(getAdjacentNode(frozenNodes, 'Scope', 'previous')).toBe(frozenNodes[2]);
+ expect(frozenNodes.map(({ id }) => id)).toEqual(originalIds);
+ });
+});
diff --git a/libs/logic-apps-shared/src/utils/src/lib/helpers/index.ts b/libs/logic-apps-shared/src/utils/src/lib/helpers/index.ts
index e257d757aa5..cfaa8a98925 100644
--- a/libs/logic-apps-shared/src/utils/src/lib/helpers/index.ts
+++ b/libs/logic-apps-shared/src/utils/src/lib/helpers/index.ts
@@ -10,6 +10,7 @@ export * from './hooks';
export * from './http';
export * from './logicapps';
export * from './navigator';
+export * from './nodeNavigation';
export * from './notes';
export * from './operations';
export * from './recurrence';
diff --git a/libs/logic-apps-shared/src/utils/src/lib/helpers/nodeNavigation.ts b/libs/logic-apps-shared/src/utils/src/lib/helpers/nodeNavigation.ts
new file mode 100644
index 00000000000..7aae37f903f
--- /dev/null
+++ b/libs/logic-apps-shared/src/utils/src/lib/helpers/nodeNavigation.ts
@@ -0,0 +1,32 @@
+import type { Node } from '@xyflow/react';
+import { WORKFLOW_NODE_TYPES } from '../models/workflowNode';
+import { removeIdTag } from './stringFunctions';
+
+export const getAdjacentNode = (
+ nodes: readonly Node[],
+ selectedNodeId: string | undefined,
+ direction: 'next' | 'previous'
+): Node | undefined => {
+ const indexedNodes = nodes.flatMap((node) => {
+ const index = node.data['nodeIndex'];
+ const isOperation = node.type === WORKFLOW_NODE_TYPES['OPERATION_NODE'] || node.type === WORKFLOW_NODE_TYPES['SCOPE_CARD_NODE'];
+ return isOperation && !node.hidden && typeof index === 'number' && Number.isFinite(index) && index > 0 ? [{ node, index }] : [];
+ });
+ const current = indexedNodes.find(({ node }) =>
+ node.type === WORKFLOW_NODE_TYPES['SCOPE_CARD_NODE'] ? removeIdTag(node.id) === selectedNodeId : node.id === selectedNodeId
+ );
+ const currentIndex = current?.index ?? (direction === 'next' ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY);
+ let adjacent: (typeof indexedNodes)[number] | undefined;
+
+ // Layout already assigns the tab order, including gaps for edges and other controls.
+ for (const candidate of indexedNodes) {
+ if (
+ direction === 'next'
+ ? candidate.index > currentIndex && (!adjacent || candidate.index < adjacent.index)
+ : candidate.index < currentIndex && (!adjacent || candidate.index > adjacent.index)
+ ) {
+ adjacent = candidate;
+ }
+ }
+ return adjacent?.node;
+};